XML

：是一种很像HTML的标记语言，与HTML类型类似

：大多数 Web 应用程序中，XML 用于传输数据，而 HTML 用于格式化并显示数据。

作用：

把数据从HTML中分离：用于HTML中显示动态数据
简化数据共享：XML 数据以纯文本格式进行存储，便于共享
简化数据传输：

DOM4J：解析XML的一种技术，框架会提供更好的自解析方法

Tomcat

：web服务器，运行一些服务软件app，如图-服务器-服务软件

：其他web服务器：Nginx、Apache

Tomcat文件夹：webapps：存放项目
项目标准结构：
WEB-INF：受保护的文件夹，里面的文件不被客户端获取
lib：jar包
web.xml：当前项目的配置文件
若app项目不存放webapps文件夹，则需改配置

IDEA：开发javaweb项目

与Nginx 配合使用

动静态资源分离运用Nginx的反向代理功能分发请求：所有动态资源的请求交给Tomcat，而静态资源的请求（例如图片、视频、CSS、JavaScript文件等）则直接由Nginx返回到浏览器，大大减轻Tomcat压力
负载均衡当业务压力增大时，可能一个Tomcat的实例不足以处理，那么这时可以启动多个Tomcat实例进行水平扩展，而Nginx的负载均衡功能可以把请求通过算法分发到各个不同的实例进行处理

2)Servlet

静态资源： 写好的已固定的资源，如html、css、img等文件

动态资源： 需要运行程序代码生成的资源，如图绿色区域

Servlet：是用Java编写的服务器端程序。其主要功能在于交互式地浏览和修改数据，生成动态Web内容。狭义的Servlet是指Java语言实现的一个接口，广义的Servlet是指任何实现了这个Servlet接口的类，一般情况下，人们将Servlet理解为后者。

：处理动态资源

Tomcat接受动态资源请求，创建相关的Servlet对象，调用相关文件，执行java代码，生成响应数据

如何写Servlet：

在JavaWeb项目中创建类(UserServlet)，重写service方法
在web.xml中，配置Servlet，匹配对应的请求映射路径
WEB-INF内的资源不能直接被访问，只能Servlet方式访问

Servlet-api.jar包导入问题：无需导入，Tomcat自带

Content-type设置问题：Tomcat根据请求的数据类型（html、img、css等）到web.xml文件中找对应的文字，将其设定为Content-type，写入响应报文，需在service方法设置Content-type的值

autoarduinobashccppcsharpcssdiffgographqlinijavajavascriptjsonkotlinlessluamakefilemarkdownobjectivecperlphpphp-templateplaintextpythonpython-replrrubyrustscssshellsqlswifttypescriptvbnetwasmxmlyamlhtmldart

public class UserServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpSerletResponse res) {
        //req：请求报文对象，包含报文的所有信息
        //res：响应报文对象，包含报文的所有信息
        String username = req.getParamter("username");
        String info = "Yes";
        if("ij".equals(username)) info = "No";
        
        //res.setHeader("Content-type", "text/html");//设置Content-type
        res.setContenType("text/html");//第二种方法
        
        PrintWriter writer = res.getWriter();
        writer.write(info);
    }
}

Tomcat如何根据请求找到service方法并调用：

Tomcat先从webapps中找demo02项目
在项目下的xml文件找s1，s1 -> servlet，servlet -> com.atguigu.servlet.Servlet1
在com.atguigu.servlet包中找到Servlet1方法，并调用

Servlet的注解方式配置：

可直接映射路径，不用在xml写

@WebServlet("/s1")  //等同xml中写s1 -> servlet，servlet -> com.atguigu.servlet.Servlet1
public class UserServlet extends HttpServlet {
    @Override
    protected void service(){}
}

Servlet生命周期：

Servlet由Tomcat创建调用

实例化：第一次请求，或服务器启动时 //构造器
初始化：实例化完毕 //重写init方法
接受请求，处理请求：客户端每次申请 //重写service方法
销毁：关闭服务时 //重写destory方法

@WebServlet("/s1", loadOnStartup = 10) //loadOnStartup设置服务器启动时调用此Servlet，值为指明调用顺序

Servlet的成员变量：多线程共享，强烈不建议修改变量值

ServletContext对象：

：它会为每个Web应用程序都创建一个对应的ServletContext对象，这个对象代表当前Web应用。并且它被所有客户端共享（比如你在淘宝登陆了，那你的登陆信息会被带到很多页面，就是跳到其他页面发现也是登陆上的

：唯一对象

作用域：本项目应用资源内，代表的整个项目

`HttpServletRequest` 对象：

：是客户端浏览器发出的请求被封装的一个 HttpServletRequest 对象，该对象中包含了请求的地址、请求的参数、提交的数据以及上传的数据

：获取请求报文的所有内容

API：

URI：相对项目的路径

URL：绝对路径

HttpServletResponse对象：

：设计响应报文的所有内容

public class UserServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse res) {
        res.setStatus(200);     //设置响应报文的状态码
        String info "<h1>hello<h1>";    
        res.setHeader("Content-Type", "text/html");     //设置报文的Content-Type属性
        res.setContentType(text/html);                 //同上
        PrintWriter writer = res.getWriter(); //获取一个向响应体输入文字字符的输出流
        writer.write(info);                 //向响应体中输入内容info
    }
}

请求转发

：间接访问资源、页面跳转

：请求转发HttpServletRequest实现，重定向由HttpServletResponse实现

：服务器内部行为，对客户端隐蔽

：请求发给Servlet1处理，Servlet1将其请求体和响应体传给另一个Servlet2处理

@WebServlet("/st1")
public class Test1 extends HttpServlet{
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取请求转发器
        RequestDispatcher requestDispatcher = req.getRequestDispatcher("st2");
        //RequestDispatcher requestDispatcher = req.getRequestDispatcher("a.html");可以跳转到项目内资源，img等
        //将req，resp传给st2，让他回应请求
        requestDispatcher.forward(req, resp);
    }
}

@WebServlet("/st2")
public class Test2 extends HttpServlet{
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("st2执行了");
    }
}

响应重定向

：客户端发请求，服务端回响应，状态码为302，客户端收到响应，自动重发请求，对目标资源进行访问

请求转发和响应重定向区别

相同点：访问项目资源（html、img等），实现页面跳转

不同点：

请求方不同：请求转发是服务端内部行为，重定向是客户端行为，
发请求次数不同：请求转发发一次，重定向2次以上
请求和响应数据的变化不同：请求转发的请求和响应体的数据不变，重定向的每次请求都变化
跳转限制：重定向可以跳转到任意URL（其他网址），转发只能跳转本站点资源

web乱码和路径问题总结

乱码：数据的编码和解码使用了不同的字符集

请求乱码问题：

GET乱码问题：
GET方式提交form表单的数据受html的charset属性影响
解决：Tomcat配置文件server.xml 中connector中修改URIEncoding
POST乱码问题：
解决：请求体req中方法，req.setCharacterEncoding("")

响应乱码问题：

//设置响应体使用UTF-8编码
resp.setCharacterEncoding("UTF-8");
//设置Content-Type响应头，告诉客户端用UTF-8解码
resp.setContentType("text/html;charset=UTF-8");

前端路径问题：

相对路径：

如index.html中有img请求

<img src="static/img/logo.png">
<img src="../static/img/logo.png">      //当前路径的上一级路径
<img src="../../static/img/logo.png">   //当前路径的上上级路径

绝对路径：

<img src="/dome01/static/img/logo.png">   //表示在http://localhost:8080/路径中找

注意：要填完整的上下文

后端路径问题：

重定向：相对路径：

RequestDispatcher requestDispatcher = req.getRequestDispatcher("servletB");
//()内如何填，看请求路径，来加../

绝对路径：重定向的相对和绝对路径跟前端几乎一样

请求转发：

相对路径同上

绝对路径：起始路径与前端不同，是以http://localhost:8080/dome01/为起始

Tomcat可以设置绝对路径不用加上下文方式

MVC架构模式

：将项目资源分成三层

M层：存放数据库对象等，存放对数据增删查改的代码
V层：html，css，js等，前端部分
C层：控制层，处理请求和响应

项目结构：

controller：控制类，主要写servlet
dao：一些对表格数据的CUBD
pojo：实体类
service：业务层
util：工具类，类似Math

2)会话（Servlet）

：会话管理：保留用户第一次访问时的一些数据，使其第二次访问时，快速到某一程度的页面

：典型应用：二次登录不用填账号密码

：技术实现：Cookie，Session

Cookie：

服务端向响应体中增加Cookie：

@WebServlet("/ServletTest")
public class ServletTest extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp){
        Cookie cookie1 = new Cookie("c1", "c1_message");	//创建Cookie
        Cookie cookie2 = new Cookie("c2", "c2_message");
        resp.addCookie(cookie1);
        resp.addCookie(cookie2);
    }
}

服务端获取请求体中的Cookie：

        Cookie[] cookies = req.getCookies();	
        if(cookies != null){
            for(Cookie cookie : cookies){
                if(cookie.getName().equals("name")){
                    //do
                }
            }
        }

Cookie分类：

会话级Cookie：浏览器关闭则清理内存中的Cookie数据
持久化Cookie：服务端设置Cookie存在时间，Cookie数据存放到客户端硬盘

//设置持久化Cookie：
Cookie cookie1 = new Cookie("c1", "c1_message");
cookie1.setMaxAge(60);	//单位s

Session：服务端为每一个客户端开辟一个内存空间，存储Session对象，其包含该客户端的Cookie等信息

：前提：使用了Cookie

获取session对象：

HttpSession session = req.getSession();

存储数据：

session.setAttribute("username", "John");	// 左健右值

获取数据：

String username = (String) session.getAttribute("username");	// 返回健值

删除数据：

session.removeAttribute("username");

设置Session过期时间：

session.setMaxInactiveInterval(1800); // 单位s

三大域：

请求域的对象是HttpServletRequest，
会话域的对象是HttpSession，数据在同一中客户共享
应用域的对象是ServletContext，数据在所有客户请求中共享

三大域基本API：

void setAttribute(String name, String value)  	//向域中添加/修改数据
Object getAttribute(String name)			   //向域对象中获取数据
removeAttribute(String name)				   //移除域对象中的数据

2)Filter 过滤器

：对请求进行识别和按一定要求进行过滤，不合理的请求不会传给Servlet层，由Filter进行返回响应报文

：典型应用：登录控制，访问页面时，看是否登录了

配置中拦截的写法：

拦截所有资源：/*，访问所有的资源，过滤器都会被执行
具体资源路径：/myServlet/demo1，只有访问myServlet/demo1资源时，过滤器才会被执行
拦截目录：/myServlet/*，访问/myServlet下所有资源是，过滤器都会被执行
后缀名被拦截：*.jsp，访问后缀名为jsp资源时，过滤器都会被执行

@WebFilter("/*")		// 配置拦截类型
public class MyFilter implements Filter {
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        System.out.println("对request进行过滤");
        
        // 在此写入放行前要做的事的代码
        
        //下面这行代码就是放行
        filterChain.doFilter(servletRequest,servletResponse);
        System.out.println("对response进行过滤");
    }

Filter生命周期： 与Servlet有所区别

多个Filter的执行顺序：

如果我们是在web.xml中配置的过滤器，那么过滤器的执行顺序就是<filter-mapping>在web配置的顺序，配置在上面那么就会先执行。
如果我们是使用@WebFilter进行配置的，那么执行顺序就是字符比较顺序来执行，例如有2个过滤器，一个是AFilter，一个是BFilter，那么AFilter就会先执行。
如果注解和xml混用，那么在web.xml中配置的先执行。

2)监听器

：在程序运行时对事件进行监控和响应

：类似于 js 中的事件

Servlet里常见的监听器：监听对应的对象的生命周期和属性的变化

ServletContextListener接口：监听 ServletContext 对象
- requestInitialized 在容器启动时被调用（在servlet被实例化前执行）
- requestDestroyed 在容器销毁时调用
HttpSessionListener接口：监听 HttpSession 对象
- sessionCreated 在HttpSession创建后调用
- sessionDestroyed 在HttpSession销毁前调用
ServletRequestListener接口：监听 HttpServletRequest 对象
- requestDestroyed 在request对象创建后调用（发起请求）
- requestInitialized 在request对象销毁前调用（请求结束）

1)Ajax

：是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

：js 中

：异步

：Vue中axios

前端工程化

：指将前端分离，独立成一个工程

：前后端分离

：前端，后端分别部署到两个服务器

1)ES6

：js的新语法

新变量：
let变量：不能重复，有局部属性，即{let i=1}外部不能访问
const变量：是不可变的let变量

解构表达式：

let arr = [11, 22, 33]
let [a, b, c = 10] = arr		//快速给数组的每一个数赋值到新变量
let person = {
    name: "jj",
    age: 10
}
let {name, age} = person		//对象数据中使用，命名需和对象的属性名相同
function showArr([a, b, c]) {	//函数传参中使用
    console.log(a, b, c)
}
shoeArr(arr)

箭头函数
autoarduinobashccppcsharpcssdiffgographqlinijavajavascriptjsonkotlinlessluamakefilemarkdownobjectivecperlphpphp-templateplaintextpythonpython-replrrubyrustscssshellsqlswifttypescriptvbnetwasmxmlyamlhtmldart
```
let fun = () => {}
//() 传参
//{} 代码块
```
注意：箭头没有自己的this，其函数中的this是外层上下文环境的this
_rest，spread扩展运算符：三个点：...
autoarduinobashccppcsharpcssdiffgographqlinijavajavascriptjsonkotlinlessluamakefilemarkdownobjectivecperlphpphp-templateplaintextpythonpython-replrrubyrustscssshellsqlswifttypescriptvbnetwasmxmlyamlhtmldart
```
function func(...arr) {} //...arr表示一个不确定长度的数组，作参
func([1, 2, 3])
func([1, 2])
//合并数组
let a = [1, 2, 3]
let b = [3, 4, 5]
let c = [...a, ...b]
```
注意：只能放最后一位，[...arr, a]错误
新增创建对象的关键字：class extents constructor
对象的深拷贝和浅拷贝：浅拷贝是在在拷贝过程中，遍历时那部分为对象/数组类型指向原来的地址，而深拷贝，则是完全开辟新的内存地址。
模块化：
让js、html文件可以使用另一个js文件的代码，将js封装成一个模块被其他人使用
需导入js文件，每个模块内可以定义私有或共有的属性和方法

1) Node.js

：Node.js 就是运行在服务端的 JavaScript

：js一般运行到客户端浏览器，Node.js 使js能运行到服务端，可方便的开发服务端的应用程序

：Vue项目需要安装Node.js来支持

1)npm

：Node.js的包管理工具，yum类似

npm是软件
它可以从仓库源下载框架到本地磁盘
可以为每个项目单独管理依赖，使不同的项目能够使用不同的框架

1)vite

脚手架：为项目一键生成基础的目录结构和文件，包含工程开发的基础文件

：vite是搭建Vue3项目的脚手架

node_modules：前端项目的依赖
public：存放公共资源
assets：静态资源，图片、主体、样式等
components：存放组件相关的文件
layouts：存放布局组件
pages：存放页面级别的组件
plugins：存放Vite插件相关的文件
router：存放路由的配置文件
store：存放Vuex状态管理的文件，管理程序的数据和状态
utils：存放通用的工具函数，如日期函数等
vite.config.js：Vite 的配置文件

main.js文件：

1)`VUE3`

：组件，路由基础使用：https://www.bilibili.com/video/BV1UN411x7xe?p=161&vd_source=171126ebd97b502f2c44585015682da8

组件

script：可导入组件，写js代码，可导入css文件

template：html代码，只允许有一个子标签

style：css代码，可导入css文件

组件间的通信：

插值表达式

{{ msg }}

：不依赖标签，可单独使用，

：调用函数：{{ func() }}

：支持一些常见运算符：{{ age > 18 ? '是' : '否' }}

`v-xxx`指令

v-text：写入文本

${str}表示取出字符串

v-html：与v-text不同的是，可以解析文本的标签

v-bind：用于将 Vue 实例的数据绑定到 HTML 元素的属性上，有href，title，src等属性

可以用：简写，:src

v-on：绑定事件

<button @:click="func()"></button>
<button @:click="sum++"></button>	//支持代码语句

v-if、v-show、v-for

响应式数据

：指，当数据发生变化时，视图会自动更新，不需要手动操作DOM

let sum = ref(0)
let person = reactive({ name:"jj", age:10 })

计算属性

监听属性

：监测响应式属性的变化，并在属性发生改变时执行特定的操作

：可以用v-modle指令实现

生命周期

：每个组件实例在创建时，都需经历一定的初始化步骤，在此过程中，会运行一些生命周期钩子函数，让开发者可在其写入代码，在构建时执行

生命周期钩子函数：

beforeCreate：
created：在这个钩子函数里面，可以进行相关初始化事件的绑定、发送请求操作
beforeMount：可以进行相关初始化事件的绑定、发送ajax操作
mounted：可以做一些实例化相关的操作
beforeUpdate：当数据改变的时候，才会立马执行,这个钩子函数获取dom的内容是更新之前的内容
updated：
beforeDestroy：可以清除一些初始化事件、定时器相关的东西。
destroyed

1)router

：通过路由的文件定义路径与组件的对应关系

例如：路由文件中，规定www.aj.com/home与Home.vue组件对应，App.vue则加载Home.vue组件，则页面显示Home.vue组件的内容

点击按钮后跳转到www.aj.com/list时，App.vue会加载List.vue，使页面展现新内容

路由的基本使用：

1.创建routers.js文件，写入：

import { createRouter, createWebHistory } from 'vue-router'	//导入方法
import Home from '../components/Home.vue'		//导入组件
import Add from '../components/Add.vue'
import List from '../components/List.vue'
const router = createRouter({					//创建对象
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/home',		//指定路径，如www.xxxx.com/home
      name: 'home',
      component: Home		//选择组件绑定
    },
    {
      path: '/add',
      name: 'add',
      component: Add
    },
    {
      path: '/list',
      name: 'list',
      component: List
    }]
})
export default router	//向外暴露router对象

2.main.js中写：

import router from './routers/router'		//导入路由
const app = createApp(App)
app.use(router)							//路由挂载到App组件中
app.mount('#app')

3.App.vue中写：

<template>
  <div>
    <router-view></router-view>		//表示在这使用路由
  </div>
</template>

router-view：有name属性，用于区分不同的路由，一个div里可有多个router-view

编程式路由

上面为声明式路由

//实现点击跳转页面
<script setup>
  import { useRouter } from 'vue-router'	//导入方法	
  const router = useRouter()			   //获取路由对象，即为router.js中返回的对象
  const func = () => {
    router.push('/add') 				   //设置路径
  }
</script>
<template>
  <div>
    <div>
      <router-link to="/add">添加</router-link>
    </div> 
    <button @click="func()"></button>
  </div>
</template>

路由传参

：父组件跳转子组件时

键值对参数：

路径参数：图中a、zhangsan、10、boy为路径参数

路由守卫

：路由守卫是用于在路由切换期间进行一些特定任务的回调函数。路由守卫可以用于许多任务，例如验证用户是否已登录、在路由切换前提供确认提示、请求数据等

全局前置守卫：在路由切换前被调用，可以用于验证用户是否已登录、中断导航、请求数据等。
全局后置守卫：在路由切换之后被调用，可以用于处理数据、操作 DOM 、记录日志等。
守卫代码的位置: 在router.js中

router.beforeEach( (to,from,next) => {
    //to 是目标地包装对象  .path属性可以获取地址
    //from 是来源地包装对象 .path属性可以获取地址
    //next是方法，不调用默认拦截！ next() 放行,直接到达目标组件
    //next('/地址')可以转发到其他地址,到达目标组件前会再次经过前置路由守卫
    console.log(to.path,from.path,next)
	next()
} )

//全局后置路由守卫
router.afterEach((to, from) => {
    //不用next()
});

1) pinia

：用于管理各组件间共享的数据的管理

：写在js中

pinia简单介绍与使用 - 掘金 (juejin.cn)

1) axios

异步响应

1)Element-plus

2)Postman

postman是一款支持http协议的接口调试与测试工具，其主要特点就是功能强大，使用简单且易用性好。无论是开发人员进行接口调试，还是测试人员做接口测试

：用于模拟客户端发送请求，以便后端开发进行测试

云服务器上部署javaweb项目

第一次使用云服务器：环境配置+部署javaweb项目_云服务配置javaweb项目-CSDN博客

SpringBoot前后端分离项目，打包、部署到服务器详细图文流程_springboot前后端分离项目怎么部署-CSDN博客

在云服务器部署相关内容，JDK、Tomcat、Mysql
在idea中开发好Java Web项目，导出war包，上传到云服务器
云服务器运行Tomcat，开始访问网站

分享

Java Web 学习笔记

XML