一个简单的JavaWeb技术点复盘

0. 要想开发一个简单的看得过去的JavaWeb界面，需要学些啥？

想要学好JavaWeb，以下的技术不能少，这一整套可以让你比较详细的了解，一定程度深入学习原理。可以这么说，熟练掌握了这些东西，再学习SSM框架，就可以到外面找到工作了！

下面会介绍每个技术点，通过以下几个点来介绍

1. 概述：也就是介绍它是什么，它能起什么作用
2. 快速入门：通过一些简单的例子，来描述一下它，让你更能体会它的作用
3. 原理：通过一些简单的描述，让你知道这个技术是怎么实现的。

下面我们就好好掰扯一下上述的所有技术要点。

1 mysql基础

1.1 概述

1 数据库概念：在没有学习过数据库之前，	我们存储数据都是靠文件存储，txt、word、excel等等。这样的方式固然能够存储数据，但是当我们的数据量增大之后，我们想要更快捷的存储数据，用以前传统的文件形式存储存在诸多问题：不便于管理、数据量大之后存储查询速度慢，通常只是需要简单的一个查询，就需要消耗大量的时间。这时数据库就站出来了，数据库（Database）是按照数据结构来组织、存储和管理数据的仓库。既然有组织了，那么性能就更优，因此数据库的应用就更加广泛，而MySQL就是众多优秀数据库中的一员。

1.2 快速入门

select * from tb_user;	这条语句就是查询用户表的所有信息，select是查询，*代表所有，from tb_user表示从tb_user表中来获取。

1.3 MySQL原理

MySQL数据库是RDBMS即关系数据库管理系统(Relational Database Management System)，它有如下优点：
	1. 数据以表格的形式出现（理解：一个班级的所有学生信息集成在一张表上）
	2. 每行为各种记录的名称（理解：每一行即为一个学生的所有信息）
	3. 每列记为记录名称所对应的数据域（理解：每一列即为某种特性，比如姓名列，年龄列）
	4. 许多的行和列组成一张表单（理解：一整张表单表示一个班级的信息）
	5. 若干的表单组成database（理解：所有班级组合在一起就是整个学习的信息，也就是仓库）

而操控数据库需要一种语言，操控MySQL的就是SQL语言，当然SQL语言也可以操控其它很多的数据库，因此我们学习完一门MySQL数据库之后，相应的学习其它数据库也就很快上手了，因为SQL语言都是大体相同的，只是在某些语法的规定上可能略有不同。我们学习MySQL最主要的就是学习它的增删改查功能insert delete update select：
（增加表格，写语句）
	增：在数据库增加一条数据，比如班级转校来了一名学生，增加他的信息到数据库中
	删：在数据库中删除数据，比如班级转校转出一名学生，从数据库中删除他的信息
	改：在数据库中更改已经存在的数据，比如某个学生的姓名录入的时候书写错误，发现后通过改的方式更新数据。
	查：在数据库中查询已有的数据，比如我们要查询班级上所有男生的信息

2 MySQL高级

2.1 概述

	在1中我们入门，知道了MySQL是什么，能干什么事，在第二part我们聊点高级的东西
	我们在讲高级的时候抛出几个问题：
		1 既然能够存储数据，那么怎么避免小明的数据被输入两次呢？
		2 建立表的时候，比如年龄这一栏肯定是正数，万一输入错误成负数该如何避免呢？
		3 在实际的查询过程中，很可能学生信息在一个表，学生成绩在一个表，如何联合两张表来进行组合查询呢？
		4 在增删改的过程中，因为涉及到数据的变更，我们如何来保证数据的可靠性，不被非预期的修改。

2.2 技术点原理

其实对应2.1中提及到的4个问题，我们都是可以通过MySQL数据库的几种特性来一一解释的。
	一一对应的是约束、表关系及建表原则、表的联合查询、事务
		约束：通过约束，比如唯一约束，说明这一列的数据只能存在唯一值，比如学生学号。在学生学号后面建立唯一约束
		表关系及建表原则：
		联合查询：
		事物：

3 JDBC

3.1 概述

JDBC（Java DataBase Connectivity）Java数据库连接，有了数据库，如何能通过Java来获取数据库中的知识呢？这就涉及到了JDBC，Java官方设计了一个数据库链接的接口，各个厂家（包括MySQL）去拿接口设计出一套自家的驱动，实现接口，来调用自家的数据给Java。

3.2 使用

1 编写Java代码
2 Java代码将SQL发送到MySQL服务端
3 MySQL服务端收到SQL语句并执行该SQL
4 将SQL语句执行的结果返回给Java代码

3.3 进阶

后期我们会学一门技术Mybatis，此技术会大大简化SQL的注册，配置问题，因此在这里就不过多赘述JDBC的使用，主要是了解它的概念为主

4 Maven&Mybatis

4.1 Maven

	Maven是用来管理和构建Java项目的工具，它的主要功能有
	1 提供了一套标准的项目结构
	2 提供了一套标准化的构建流程（编译，测试，打包，发布。。。）
	3 提供了一套依赖管理机制

1 标准项目结构：在不同的IDE中，项目的结构是不一样的，在不同的IDE中切换是一件非常繁杂的事，因此Maven站出来了，它可以统一一种项目构建方式，让同一个项目在不同的IDE中都能正常的跑起来。
2 标准化的构建流程：代码需要进行一系列的编译，测试，打包，发布，如果自己操作就显得复杂繁琐，Maven提供了一套简单的命令来帮助我们执行。
3 依赖管理：在项目的构建过程中，需要很多的第三方jar包、插件等，在以前的方式中，我们需要自己到官网去下载，但是有了Maven之后，我们可以在每个项目的pom.xml文件中写简短的代码，就能导入所依赖的jar包。如下所示代码就是导入mysql的驱动包，只需要三行就能自动导入，非常方便。

<dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.32</version>
        </dependency>

4.2Mybatis

在JDBC阶段，我们说到了只是依靠JDBC来操作数据库是一件很繁琐的事，因此需要一个工具，来封装代码，简化操作，而Mybatis就是一个优秀的持久层框架，用来简化JDBC的配置。
相比JDBC，MyBatis有很多的优点：
	1 解决了硬编码：配置文件不再写在Java代码中，而是写在配置文件中，当出现更改的情况，直接更改配置文件即可；Java代码中不再涉及到SQL语句，实现了解耦。
	2 操作简便：不再需要手动设置参数，自动封装结果。

mybatis-config.xml
在MyBatis中，比较重要的一个东西就是配置文件。我们来详细说一下配置文件中的标签所代表的东西是什么

<environments></environments>标签是用来配置与数据库连接的信息的，其中可以包含多个数据库连接配置<environment></environment>，有一个参数defaulet来设置默认的连接数据库的信息。

Mapper代理：MyBatis提供的是一套可以快速连接，封装查询结果的工具，但是没法解决SQL硬编码的问题，但是有了Mapper代理后，我们可以通过Mapper代理的方式，来动态的调用SQL语句。

5 HTML、CSS、JavaScript

HTML，CSS，JavaScript是前端中的非常重要的三个组成部分

HTML：要想页面中有内容，就得有HTML骨架的支撑
CSS：光有了内容也不够，CSS可以提供一系列的描绘功能，将整个骨架丰满起来，颜色，布局上足，让页面看着更适合人的审美
JavaScript：在某些网站，我们还需要动态的获取一些知识，比如在京东点击评论时，可以动态的点击下一页，这都是通过JavaScript来实现了。

所以说，有了这三剑客，我们的网页也就变得更加的丰富多彩

6 HTTP、TomCat、Servlet

HTTP：网页和后端之间需要传输数据，前端要能理解后端的数据，后端也要能理解前端的数据，就像两个人交流一样，在交流之前我们要规定好，交流过程中用什么语言，HTTP就是一种传输协议，它规定了传输的格式，在传输过程中才能让前端、后端提取数据，解析数据。
TomCat：TomCat是一个Web服务器，它就是一个大型的Java程序，不用TomCat服务器，我们也可以通过Java代码来实现前后端的数据连接，但是这样效率很低，而且容易出错，因此TomCat的功能就是封装了一系列的传输处理层的功能，它能够自动的执行数据的解析封装等，我们只需要进行部署即可拿来用。
Servlet：Servlet是JavaWeb最为核心的内容，它是Java提供的一门动态Web资源开发技术；使用Servlet可以实现在不同的登录用户在页面上动态显示不同内容。Servlet从狭义来讲是JavaEE提供的一个接口，从广义来讲它是一种服务。HttpServlet是实现了Servlet接口的实现类，因为我们是针对HTTP协议开发的web项目，因此在写Servlet类的时候是继承于HttpServlet类的。
urlPattern四种配置方式：
	精确匹配 >
	目录匹配 >
	扩展名匹配 >
	任意匹配

7 Request、Response

服务器在处理Servlet的时候，会创建两个对象，一个request，一个response对象，

7.1 Request

Request是请求对象，浏览器会发送HTTP请求信息到服务器后台中，而在HTTP中会包含诸多信息，包括请求行，请求头，请求体等。后台TomCat通过创建Request对象来对HTTP数据进行封装，当我们处理Servlet程序的时候，需要什么数据就通过该对象来进行调用。

7.2 Response

Response是响应对象，当数据处理完成后，我们需要对处理好的数据进行封装成前端能看懂的格式（即封装成为HTTP协议格式的数据），因此服务器先创建一个Response对象，然后调用相关的方法，对我们需要传输的数据进行处理，然后再传递给前端进行处理。

7.3结和6、7理解

前端页面（HTML、CSS、JavaScript）和后端（Java）之间相当于是两个不同国家的人，做着不同的事情；前端是舞蹈员，负责貌美如花，全球各地巡演，后端是经纪人，负责处理业务逻辑，帮忙解决订机票、定酒店等等。然而两者之间语言并不相同，因此就产生了HTTP中间协议，通过规范协议；协议就好比是翻译机器，你说的话通过机器翻译成为我能听懂的话；
前端：用于展示，貌美如花
后端：处理业务逻辑，帮忙订机票，定酒店，解决前端跳舞所需要的数据（衣服，鞋子。。。）等等
HTTP：前后端联系通讯的协议，两者必须遵守这个协议，才能准确的知晓彼此之间需要什么
TomCat：封装的Java代码，能够自动的处理HTTP协议数据
Request：TomCat自动生成的一个请求对象，用于处理前端传递过来的数据；将舞蹈员的请求（鞋子坏了，买双鞋子）打包，处理好
Servlet：是具体后端人员处理逻辑的过程；比如拿到了前端的信息之后，在Servlet中书写去哪里买鞋，买什么鞋，鞋的尺码多大，要什么颜色等等
Response：TomCat自动生成的一个响应对象，用于处理后端传递给前端的数据；将后台的数据（买的鞋子）打包，送给舞蹈员

8 JSP

JSP（Java Server Pages）是一种动态网页技术，其中既可以定义HTML、JS、CSS等静态资源，还可以定义Java代码 JSP = Java + HTML
某些应用场景，需要动态的执行网页信息，比如登录京东之后，我们能在每个页面的右上角都能看到当前账户得用户名和头像，这种功能就能通过JSP技术来实现，通过直接在页面中书写Java代码的形式，动态传递数据，来进行网页的动态更新。JSP本质上就是一个Servlet；
JSP执行过程：
	1 浏览器访问demo.jsp页面
	2 服务器会将demo.jsp转换为demo_jsp.java的一个Servlet
	3 服务器会再将Servlet装换编译为一个字节码文件demo_jsp.class
	4 服务器执行处理该字节码文件，然后提供服务

9会话技术

HTTP协议是一种无状态协议，在每一次的访问过程中服务器都是不知道此次访问是否是来自于同一个浏览器，这样就会造成很多问题，比如登录了一个页面之后经过一次跳转，之前的信息全忘了，新页面也就不能知道前面登录的是什么账户；因此需要相关技术来解决此问题。那就是Cookie和Session

9.1 Cookie

Cookie是客户端技术，将数据保存到客户端，以后每次请求的时候都会携带Cookie进行数据访问。
服务器响应时：set-cookie行设置数据
浏览器段请求数据时：cookie行设置数据
cookie在浏览器中存储的时间是有限的：默认情况下当浏览器关闭，内存释放掉之后，cookie信息就会丢失，我们可以调用一个cookie的setMaxAge方法来将cookie数据保存在硬盘中，持久化存储，到时间会自动删除。
存储中文：用到编码和解码的方法

9.2 Session

Session是服务端技术，将数据保存到服务端，在某些场景，将数据直接保存在浏览器是不安全的做法，比如验证码、用户密码等，因此存储在客户端更加安全。Session是基于Cookie来实现的。
在使用Session中的时候，还需要保证多次访问的session对象是同一个对象，这样才能调用共同的数据。在第一次获取session的时候，session对象会生成一个唯一标识，服务器在响应数据的时候在set-cookie行中，会将session的唯一id值传递给浏览器，浏览器会将唯一id值存储起来，在同一次会话中，浏览器会携带该cookie值到服务器中，服务器解析id值的时候会自动搜寻是否有该session，如果有就直接调用该session，如果没有，那么就再重新创建一个session。在有session的情况下，session都是同一个，调用的数据都是一样的，这样就保证了数据的稳定性。如果关闭了浏览器，相当于浏览器内存中的数据丢失，响应的cookie也就丢失，因此也就无法获取到该对应的session。
在正常的服务器关闭的过程中，session会存在一个钝化、活化过程；钝化即在正常关闭之前，将session的信息以文件的方式存储起来，活化即在服务器在启动的过程中，将钝化的文件给激活，产生一个Session对象；session有一个默认的存活时间为30分钟，时间结束之后，将会自动执行销毁方法，销毁掉session，或者主动执行session.invalidate()方法来主动销毁session。
Session是结合Cookie来使用的，Session在同一个会话中才是有效的，
Cookie和Session的比较
存储位置：浏览器，客户端
安全性：不安全，安全
数据大小：最大3KB，无大小限制
服务器性能：无影响，降低服务器性能

应用场景：
添加购物车数据、记住账户名 以Cookie来存储
验证码、展示登录用户名称用Session来存储

Cookie是用来保证用户在未登录情况下的身份识别，Session是用来保存用户登录后的数据

10 Filter、Listener

Filter和Listener和Servlet是JavaWeb的三大组件之一。
三大组件在服务器阶段都是用注解来动态精准执行相关逻辑代码的
	Servlet：@WebServlet("/资源路径")
	Filter：@WebFilter("/资源路径")
	Listener：@WebListener

10.1 Filter

Filter表示过滤器，可以将资源请求拦截下来，从而实现一些功能。
浏览器向服务器发送请求的时候，需要调用很多资源，Servlet，html，jsp，图片，视频等等，在访问这些资源之前，如果实现了Filter接口，那么会经过一个Filter过滤器，它就相当于一个安检，将不符合规矩的资源给拦截下来。
配置拦截资源：@WebFilter（“/*”）书写规则和Servlet注解的资源路径配置类似。访问路径会和注解中的资源路径进行匹配，一旦匹配成功，就自动执行该类中的doFilter方法，在该方法中书写放行代码逻辑，比如校验当前是否有账户登录以便开放权限给用户是否访问到某些核心页面（比如商品库存界面）。
多个Filter：当存在多个Filter的时候，按照实现类的名称自然排序方式来逐个执行，当执行完所有的Filter之后，才将获得允许的资源给到本次请求，然后再逐个返回到Filter的doFilter方法中执行剩下的放行后代码。最终才将数据返回给前端页面。

10.2 Listener

Listener表示监听器，可以监听在application，session，request三个对象创建、销毁或者往其中添加修改删除属性时自动执行代码的功能组件。使用@WebListener
application是ServletContext类型的对象，它代表整个web应用，在服务器启动的时候，服务器会自动创建该对象。在服务器关闭的时候自动销毁该对象。
JavaWeb总共提供了8个监听器，目前我们只接触ServletContextListener，它是用来监听ServletContext对象的创建和销毁的。

11 Ajax

Asynchronous JavaScript And XML：异步的JavaScript和XML。
Ajax的作用：
	1 与服务器进行数据交换：通过ajax与服务器进行通信，以达到html + ajax来替换jsp页面
	2 异步交互：再不重写加载整个页面的情况下，更新部分网页的技术。

axios：axios是对原生的ajax进行封装，简化书写
JSON：JavaScript object notation JavaScript对象表示法，在发送请求携带参数时通常以JSON格式来进行传递，而我们比较关注的就是在后端的处理中①如何处理来自前端请求的JSON字符串②如何封装JSON字符串
Fastjson：是阿里巴巴提供的一个处理Java语言编写的高性能功能完善的JSON库，可以实现JSON字符串和Java对象的相互转换
	1 Java对象转换为JSON
		String jsonStr = JSON.toJSONString(obj);
	2 JSON字符串转换为Java对象
		User user = JSON.parseObject(jsonStr, User.class);

12 Vue、Element

12.1 Vue

Vue是一套前端框架，是基于MVVM思想，来实现数据的双向绑定的，将编程的关注点放在数据上。
Model是数据，View是显示，ViewModel是两者之间的连通者，数据时通过ViewModel来进行动态绑定的。ViewModel是Vue进行创建的。
Vue指令：
	v-bind：为HTML标签绑定属性，href，css等
	v-model：在表单元素上创建双向数据绑定
	v-on：为HTML标签绑定事件
	v-if：条件性渲染某元素
	v-else
	v-else-if
	v-show：和v-if功能类似，原理不同；if是决定渲染和不渲染的关系，而show是先渲染，然后根据条件执行隐藏和不隐藏的关系
	v-for：列表渲染，遍历容器元素对象
通过上述的指令，我们可以将View 和Model之间的数据做动态的绑定，从而实现部分页面的更新加载

Vue生命周期：总共有8个生命周期事件，这些生命周期也称为钩子方法。

在这里特别说明mounted方法：表示挂载完成，Vue初始化成功，HTML页面渲染成功。然后在此方法类可以书写相关的方法，发送异步请求加载数据，比如发送异步请求获取表格数据。

12.2 Element

是饿了么前端开发团队提供的一套基于Vue的网站组件库，用于快速构建网页
地址：https://element.eleme.cn/#/zh-CN
关于Element的学习：Ctrl+C，Ctrl+V；哪里不会删哪里！！！