JAVA-WEB

1. JAVA-WEB介绍

JavaWeb是指所有通过Java语言编写可以通过浏览器访问的程序的总称。
JavaWeb是基于请求和响应来开发的。
web资源按实现的技术和呈现的效果的不同分为静态和动态资源两种。
静态资源：html、css、js、txt、mp4视频、jpg图片
动态资源：jsp页面、Servlet程序

2. HTML

注意：Java文件是需要先编译，再由java虚拟机跑起来。但Html文件不需要编译直接由浏览器解析执行。
表单提交细节：
form 标签是表单标签
action 属性设置提交的服务器地址
method 属性设置提交的方式 GET(默认值)或 POST
表单提交的时候，数据没有发送给服务器的三种情况：
1、表单项没有 name 属性值
2、单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，以便发送给服务器
3、表单项不在提交的 form 标签中
GET 请求的特点是：
1、浏览器地址栏中的地址是：action 属性[+?+请求参数]
请求参数的格式是：name=value&name=value
2、不安全
3、它有数据长度的限制
POST 请求的特点是：
1、浏览器地址栏中只有 action 属性值
2、相对于 GET 请求要安全
3、理论上没有数据长度的限制
alert是JavaScript语言提供的一个警告框函数
它可以接收任意类型的参数，这个参数是警告框的提示信息

3. CSS样式

Css 注释 /* 这是 css 的代码注释 */

4. JavaScript

JS是弱类型，Java是强类型
弱类型就是类型可变。
跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）因为浏览器的内核里由JS的解释器。
script标签可以用来定义js代码，也可以用来引入js文件,但是一个script标签中两个功能二选一使用。
JS中==是简单的做字面值的比较， ===除了做字面值的比较还会比较两个变量的数据类型。
javaScript 语言中的数组只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。
在 Java 中函数允许重载。但是在 JS 中函数的重载会直接覆盖掉上一次的定义。
window的onload事件是浏览器解析完页面之后就会立即自动触发但慢于document.ready因为document.ready只加载文档结构不包含图片和其他媒体。

4.1 jQuery

jQuery是JavaScript和查询（Query），是辅助JavaScript开发的js类库。
jQuery对象不能使用DOM对象的属性和方法，DOM对象也不能使用jQuery的属性和方法。
dom对象转换为jQuery对象：var $ obj = $(dom对象)
jQuery对象转换为dom对象：var dom = $obj[下标]
$(function(){})的意思是页面加载之后 全写是：
$(document).ready(function(){})

5. Vue.js

1 用axios技术进行用户CURD操作步骤：利用生命周期函数调用定义好的获取列表数据的函数（其中将ajax返回值传递给Vue对象中的data中的数据列表）
组件名称注意首字母大写
2 VueDemo里计算属性与方法的区别https://harrylyj.blog.csdn.net/article/details/116209877?spm=1001.2014.3001.5502
计算属性如果调用多次，有缓存的机制，只计算一次
方法调用没有缓存机制，所以调用多次，则计算多次。
如果一个计算重复调用时首选计算属性
将方法的计算结果，在div里展现时需要return具体写法如下
return this.msg.split(‘’).reverse().join(‘’)
至于button标签<button @click=“reverseMe()”>调用方法</button> 不用加return
3 缓存：是指可以进行高速数据交换的存储器，它先于内存与CPU交换数据，因此速率很快。为提高系统性能和速率，有了一个增加高速动态RAM做为缓存的折中方法，把原静态RAM缓存叫一级缓存，把后来增加的动态RAM叫二级缓存。

6. xml解析

xml （EXtensible Markup Language）是可扩展（标签可自定义）的标记性语言。
xml 的主要作用有：
1、用来保存数据，而且这些数据具有自我描述性
2、它还可以做为项目或者模块的配置文件
3、还可以做为网络传输数据的格式（现在 JSON 为主）。
xml根标签只能有一个
第一行永远都是<?xml version="1.0" encoding="UTF-8"?> 前面不放任何东西
xml是有约束的分为dtd和schema
schema约束以.xsd结尾
约束对我们最好的点是写代码有提示。

7. Tomcat服务器

1 Tomcat是服务器软件专门运行web应用软件
装好jre之后再装tomcat再把app放进tomcat中运行
2 启动tomcat的方式一双击bin目录下的startup.sh
方式二bin目录下进入cmd窗口运行catalina run（出错时此方式会有错误提示）
停止tomcat的方式一点x关闭窗口方式二快捷键Ctrl+C方式三双击shutdown.bat
修改tomcat端口号：在conf目录找到server.xml配置文件中的<Connector port=“8080” protocol=“HTTP/1.1” connectionTimeout=“20000” redirectPort=“8443”/>进行修改
3 startup.bat启动tomcat控制台乱码，可在命令行窗口最上面白色位置右键属性查看到编码格式是GBK然后修改conf/logging.properties,Console…UTF-8为GBK解决乱码
4 CATALINA_HOME暂时无需配置，未来把tomcat装到真正的服务器上是个linux的环境想运行startup.bat等命令时不得不配置。
5 项目的上下文路径也叫做项目的访问路径与
项目的部署路径（项目的部署目录）可以不一样
6 WEB-INF必要目，必须ՒWEB-INF。受保护的资源目录，浏览器通过url不可以直接访问的目录。
7 IDEA中web工程构建后得到可以发布的app，原本工程中的src目录和resource目录会构建成WEB-INF下的classes目录。
8 程序员电脑开发时（非商用环境）tomcat运行java web项目的原理是用磁盘上的tomcat软件按照副本（查看idea运行时的控制台日志可见副本位置）中的配置来进行运行，这样既不会污染tomcat软件（几十兆），产生的tomcat副本又比较小约几百kB
9

8. http协议

http协议默认的端口号是80（80会被自动抹掉）
平时上百度：http://www.baidu.com:80
http协议是指客户端和服务器之间通信时发送的数据需要遵守的规则。
http协议中的数据又叫报文。
客户端给服务器发送数据叫请求。
服务器给客户端回传数据叫响应。
请求又分为Get请求，和POST请求两种

9. Servlet

a)什么是 Servlet
1、Servlet 是 JavaEE 规范之一。规范就是接口
2、Servlet 就 JavaWeb 三大组件之一。三大组件分别是：Servlet 程序、Filter 过滤器、Listener 监听器。
3、Servlet 是运行在服务器上的一个 java 小程序，它可以接收客户端发送过来的请求，并响应数据给客户端。其中request对象封装用户请求的参数请求头等请求全部内容，response对象封装用户响应信息。
4、Servlet获取的数据都是String类型。每个参数都要手动获取，且按需进行数据类型转换（SpringMVC框架通过Servlet中request对象根据参数名称获取值再根据已知的数据类型自动的实现数据转换，当SpringMVC解析到参数是对象时会先取其中的get方法再将get去除剩余首字母小写再实例化一个对象之后调用setXXX()方法实现赋值最终方法中获取一个实例化的对象，所以页面当中要求传过来的参数名必须得和对象的属性一样）。
b)手动实现 Servlet 程序
1、编写一个类去实现 Servlet 接口
2、实现 service 方法，处理请求，并响应数据
3、到 web.xml 中去配置 servlet 程序的访问地址（斜杠打头）
约定大于配置（路径命名遵守习惯遵守大家的约定）
4、servlet-api.jar 编码的时候需要，运行的时候，在服务器的环境中，由服务软件（Tomcat）提供
Content-Type属于MIME类响应头 媒体类型，文件类型，响应的数据类型，MIME类型用于告诉客户端响应的数据是什么类型的数据，客户端以此类型决定用什么方式解析响应体。
c)Servlet 的生命周期
1、执行 Servlet 构造器方法
2、执行 init 初始化方法
第一、二步，是在第一次访问，的时候创建 Servlet 程序会调用。（Servlet是单例的）
3、执行 service 方法
第三步，每次访问都会调用。
4、执行 destroy 销毁方法
第四步，在 web工程停止的时候调用。
d)Servlet类的继承体系

e)ServletConfig类
Servlet程序和ServletConfig对象都是由Tomcat负责创建，我们负责使用。
Servlet程序默认是第一次访问的时候创建，ServletConfig是每个Servlet程序创建时就创建一个对应的ServletConfig对象。
ServletConfig类的三大作用：
作用一可以获取Servlet程序的别名servlet-name的值
作用二获取初始化参数init-param
作用三获取ServletContext对象
f)ServletContext类
1、ServletContext 是一个接口，它表示 Servlet 上下文对象
2、一个 web 工程，只有一个 ServletContext 对象实例。
3、ServletContext 对象是一个域对象。
4、ServletContext 是在 web 工程部署启动的时候创建。在 web 工程停止的时候销毁。
什么是域对象?
域对象，是可以像 Map 一样存取数据的对象，叫域对象。
这里的域指的是存取数据的操作范围，整个 web 工程。
域对象 setAttribute() getAttribute() removeAttribute();
g)ServletContext 类的四个作用
1、获取 web.xml 中配置的上下文参数 context-param
2、获取当前的工程路径，格式: /工程路径
3、获取工程部署后在服务器硬盘上的绝对路径
4、像 Map 一样存取数
对比请求的转发与重定向

	转发	重定向
浏览器感知	在服务器内部完成，浏览器感知不到	服务器以302状态码通知浏览器访问新地址，浏览器有感知
浏览器地址栏	不改变	改变
整个过程发送请求次数	一次	两次
能否共享request对象数据	能	否
WEB-INF下的资源	能访问	不能访问
目标资源	必须是当前web应用中的资源	不局限于当前web应用

说明1：默认情况下浏览器是不能访问服务器web-inf下的资源，而服务器是可以访问的。
说明2：浏览器默认的绝对路径：http://localhost:8080/
服务器项目的代码中的绝对路径：http://localhost:8080/项目名/

10. Thymeleaf

11. Cookie与Session

1 cookie是一中客户端会话技术，cookie由服务端产生，
2 Session全称HttpSession是一种保留更多信息在服务端的一种技术，
3 三大域对象请求域会话域应用域
请求域存储的数据是不能跨请求传递的，
4 做项目时客户的密码不能明文打印到日志中通过filter来设置响应数据
5 将内存上的session钝化到磁盘的文件 这个过程是序列化的过程称为钝化，
把磁盘上的文件信息反向地序列化到内存上这个过程叫session的活化。

12. Ajax

1 浏览器的网址与Ajax请求网址必须满足同源策略，浏览器才能解析Ajax执行正确的请求
规定要求：请求协议：//域名：端口号
<a>href没有同源策略 form表单里的action没有同源策略 因为不是异步提交
编辑restFul请求时应该采用无状态（请求中不能出现动词）的请求名称
2 业务状态吗和响应状态码是两回事
3 处理响应信息格式不规范方式：根据约定好的格式，把后端字符串对应的类准备好，然后new对象转成json的格式进行响应。
4 ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。

13. Filter

14. 监听器

1 监听器Listener用来监听三大域对象

15. WEB组件注解用法

16. 事务控制

17. Bootstrap

18. 拦截器

19. Node.js

Node.js是JavaScript运行的环境，可作为服务器使用。
官网是https://nodejs.org/en/中文网是http://nodejs.cn/
LTS是长期支持版本 Current是最新版 查看版本使用node -v
vscode里命令行node -v出错可右键vscode–>属性–>兼容性–>以管理员身份运行
node.js是用来执行vue脚手架的平台

20. NPM

NPM全称Node Package Manager，是Node.js包管理工具，相当于后端的Maven。是全球最大的模块生态系统，里面所有的模块都是开源免费的。
安装好nodejs之后，自动安装npm，检查命令为npm -v
npm -v中的npm可理解成node.js当中去安装软件的一种方式
作用一构建前端项目（npm init）最后生成package.json文件，相当于maven的pom.xml
(npm init -y以默认数据的方式初始化)
作用二管理前端依赖（js文件）npm install 依赖名称 下载依赖
npm install 根据配置文件下载依赖

21 前端模块化开发

（后端：类与类之间，对象之间方法的调用）
前端：js之间方法的调用

22 前端工程化

1 前端工程化是使用软件工程的方法来单独解决前端的开发流程中模块化、组件化、规范化、自动化的问题，其主要目的是为了提高效率和降低成本。
2 前端工程化实现技术的学习顺序ECMAScript6 VUE3中大量使用ES6语法、Nodejs 前端项目运行环境、npm依赖下载工具、vite前端项目构建工具、VUE3优秀的渐进式前端框架、router通过路由实现页面切换、pinia通过状态管理实现组件数据传递、axios封装ajax异步请求实现前后端数据交互、Element-plus可以提供丰富的快速构建网页的组件仓库。
3 箭头函数没有自己的this 箭头函数中的this是外层上下文环境中的this

		console.log(this) //此时代表Window对象
        let person = {
            name:'张三',
            showName:function(){
                console.log(this.name)
            },
            viewName:() =>{
                console.log(this.name)//Window对象没有name属性
            }
        }
        person.showName()
        person.viewName()

4 this参数转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #xdd{
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div id="xdd"></div>
    <script>
        var xdd = document.getElementById("xdd")
        xdd.onclick = function (){
            console.log(this)
            let _this = this    //参数转换
            // window.setTimeout( function(){
            //     _this.style.backgroundColor="yellow"
            //     },3000)

            //转换为箭头函数(第一个参数的函数写成了箭头函数)无需参数转换
            window.setTimeout( ()=>{
                this.style.backgroundColor="blue" 
                //console.log(this) 
            },3000)
        }
    </script>
</body>
</html>

5

22 MVC架构模式

1 高内聚低耦合：模块内部聚合性非常高，模块与模块之间的连接尽量简单，这样修改一个模块对其他一个模块的影响降的非常低。
2 开闭原则：增加代码对拓展进行开放，尽量不修改原有代码意味着对修改进行关闭。
3 MVC是软件工程中的一种软件架构模式。Model模型层存放VO对象和业务处理代码，View视图层html css js代码或已经衍化成的独立的前端项目，Controller控制层接收客户请求获得请求数据将准备好的数据相应给客户端。
4 dao全称数据访问对象Data Access Object
5