shenchengyv的博客

而由于我们当前是基于springboot开发的，所以放行之后是进入到了spring的环境当中，也就是要来访问我们所定义的controller当中的接口方法。在拦截器当中，我们通常也是做一些通用性的操作，比如：我们可以通过拦截器来拦截前端发起的请求，将登录校验的逻辑全部编写在拦截器当中。，表示拦截所有资源，而在配置拦截器时，不仅可以指定要拦截哪些资源，还可以指定不拦截哪些资源，只需要调用。首先我们先来看拦截器的拦截路径的配置，在注册配置拦截器的时候，我们要指定拦截器的拦截路径，通过。

而这个链上的过滤器在执行的时候会一个一个的执行，会先执行第一个Filter，放行之后再来执行第二个Filter，如果执行到了最后一个过滤器放行之后，才会访问对应的web资源。刚才通过浏览器的开发者工具，我们可以看到在后续的请求当中，都会在请求头中携带JWT令牌到服务端，而服务端需要统一拦截所有的请求，从而判断是否携带的有合法的JWT令牌。访问完web资源之后，按照我们刚才所介绍的过滤器的执行流程，还会回到过滤器当中来执行过滤器放行后的逻辑，而在执行放行后的逻辑的时候，顺序是反着的。

JWT全称：JSON Web Token （官网：https://jwt.io/）定义了一种简洁的、自包含的格式，用于在通信双方以json数据格式安全的传输信息。由于数字签名的存在，这些信息是可靠的。简洁：是指jwt就是一个简单的字符串。可以在请求参数或者是请求头当中直接传递。自包含：指的是jwt令牌，看似是一个随机的字符串，但是我们是可以根据自身的需求在jwt令牌中存储自定义的数据内容。如：可以直接在jwt令牌中存储用户的相关信息。

什么是会话？在我们日常生活当中，会话指的就是谈话、交谈。在web开发当中，会话指的就是浏览器与服务器之间的一次连接，我们就称为一次会话。在用户打开浏览器第一次访问服务器的时候，这个会话就建立了，直到有任何一方断开连接，此时会话就结束了。在一次会话当中，是可以包含多次请求和响应的。比如：打开了浏览器来访问web服务器上的资源（浏览器不能关闭、服务器不能断开）第1次：访问的是登录的接口，完成登录操作第2次：访问的是部门管理接口，查询所有部门数据第3次：访问的是员工管理接口，查询员工数据。

在前面的课程中，我们已经实现了部门管理、员工管理的基本功能，但是大家会发现，我们并没有登录，就直接访问到了Tlias智能学习辅助系统的后台。登录服务端的核心逻辑就是：接收前端请求传递的用户名和密码 ，然后再根据用户名和密码查询用户信息，如果用户信息存在，则说明用户输入的用户名和密码正确。如果查询到的用户不存在，则说明用户输入的用户名和密码错误。在登录界面中，我们可以输入用户的用户名以及密码，然后点击 “登录” 按钮就要请求服务器，服务端判断用户输入的用户名或者密码是否正确。我们参照接口文档来开发登录功能。

如果要注入的属性非常的多，并且还想做到复用，就可以定义这么一个bean对象。在其他的类当中，我要想获取到注入进来的属性，我直接注入 bin 对象，然后调用 get 方法，就可以获取到对应的属性值了。前面我们一直使用springboot项目创建完毕后自带的application.properties进行属性的配置，那其实呢，在springboot项目当中是支持多种配置方式的，除了支持properties配置文件以外，还支持另外一种类型的配置文件，就是我们接下来要讲解的yml格式的配置文件。

在进行修改员工信息的时候，我们首先先要根据员工的ID查询员工的信息用于页面回显展示，然后用户修改员工数据之后，点击保存按钮，就可以将修改的数据提交到服务端，保存到数据库。关于员工管理的功能，还有两个需要实现新增和修改员工。当用户修改完数据之后，点击保存按钮，就需要将数据提交到服务端，然后服务端需要将修改后的数据更新到数据库中。参数格式：application/json。参数格式：application/json。参数格式：application/json。根据ID查询员工数据。

文件上传，是指将本地图片、视频、音频等文件上传到服务器，供其他用户浏览或下载的过程。文件上传在项目中应用非常广泛，我们经常发微博、发微信朋友圈都用到了文件上传功能。在我们的案例中，在新增员工的时候，要上传员工的头像，此时就会涉及到文件上传的功能。在进行文件上传时，我们点击加号或者是点击图片，就可以选择手机或者是电脑本地的图片文件了。当我们选择了某一个图片文件之后，这个文件就会上传到服务器，从而完成文件上传的操作。

首先我们先完成"新增员工"的功能开发，再完成"修改员工"的功能开发。而在"新增员工"中，需要添加头像，而头像需要用到"文件上传"技术。代码开发完成后，重启服务器，打开Postman发送 POST 请求，请求路径：http://localhost:8080/emps。在新增用户时，我们需要保存用户的基本信息，并且还需要上传的员工的图片，目前我们先完成第一步操作，保存用户的基本信息。问题2：怎么在controller中接收json格式的请求参数？参数格式：application/json。

前面我们已经完了基础的分页查询，大家会发现：分页查询功能编写起来比较繁琐。查询总记录数指定页码的数据列表在Service当中，调用Mapper接口的两个方法，分别获取：总记录数、查询结果列表，然后在将获取的数据结果封装到PageBean对象中。大家思考下：在未来开发其他项目，只要涉及到分页查询功能(例：订单、用户、支付、商品)，都必须按照以上操作完成功能开发结论：原始方式的分页查询，存在着"步骤固定"、"代码频繁"的问题解决方案：可以使用一些现成的分页插件完成。

在Spring当中为了简化请求路径的定义，可以把公共的请求路径，直接抽取到类上，在类上加一个注解@RequestMapping，并指定请求路径"/depts"。功能开发完成后，我们就可以启动项目，然后打开postman，发起GET请求，访问 ：http://localhost:8080/depts。完成了查询部门的功能，我们也通过postman工具测试通过了，下面我们再基于前后端分离的方式进行接口联调。点击 “新增部门” 按钮，弹出新增部门对话框，输入部门名称，点击 “保存” ，将部门信息保存到数据库。

前面我们已经讲解了Web前端开发的基础知识，也讲解了Web后端开发的基础(HTTP协议、请求响应)，并且也讲解了数据库MySQL，以及通过Mybatis框架如何来完成数据库的基本操作。我们需要做的，就是参考接口文档完成后端功能的开发，然后结合前端工程进行联调测试即可。在前后端分离的开发模式中，前后端开发人员都需要根据提前定义好的接口文档，来进行前后端功能的开发。而在前后端进行交互的时候，我们需要基于当前主流的REST风格的API接口进行交互。我们按照前面学习的开发流程，开始完成功能开发。

在页面原型中，列表上方的条件是动态的，是可以不传递的，也可以只传递其中的1个或者2个或者全部。而在我们刚才编写的SQL语句中，我们会看到，我们将三个条件直接写死了。如果页面只传递了参数姓名name 字段，其他两个字段 性别 和 入职时间没有传递，那么这两个参数的值就是null。此时，执行的SQL语句为：这个查询结果是不正确的。正确的做法应该是：传递了参数，再组装这个查询条件；如果没有传递参数，就不应该组装这个查询条件。

性能更高更安全(防止SQL注入)性能更高：预编译SQL，编译一次之后会将编译后的SQL语句缓存起来，后面再次执行这条语句时，不会再次编译。（只是输入的参数不同）更安全(防止SQL注入)：将敏感字进行转义，保障SQL的安全性。

通过Mybatis的快速入门，我们明白了，通过Mybatis可以很方便的进行数据库的访问操作。但是大家要明白，其实java语言操作数据库呢，只能通过一种方式：使用sun公司提供的 JDBC 规范。Mybatis框架，就是对原始的JDBC程序的封装。那到底什么是JDBC呢，接下来，我们就来介绍一下。JDBC： ( Java DataBase Connectivity )，就是使用Java语言操作关系型数据库的一套API。本质：sun公司官方定义的一套操作所有关系型数据库的规范，即接口。

在前面我们学习MySQL数据库时，都是利用图形化客户端工具(如：idea、datagrip)，来操作数据库的。在客户端工具中，编写增删改查的SQL语句，发给MySQL数据库管理系统，由数据库管理系统执行SQL语句并返回执行结果。增删改操作：返回受影响行数查询操作：返回结果集(查询的结果)我们做为后端程序开发人员，通常会使用Java程序来完成对数据库的操作。Java程序操作数据库，现在主流的方式是：Mybatis。什么是MyBatis?MyBatis是一款优秀的持久层框架，用于简化JDBC的开发。

在实际的业务开发中，有些业务操作要多次访问数据库。一个业务要发送多条SQL语句给数据库执行。需要将多次访问数据库的操作视为一个整体来执行，要么所有的SQL语句全部执行成功。如果其中有一条SQL语句失败，就进行事务的回滚，所有的SQL语句全部执行失败。简而言之：事务是一组操作的集合，它是一个不可分割的工作单位。事务会把所有的操作作为一个整体一起向系统提交或撤销操作请求，即这些操作要么同时成功，要么同时失败。事务作用：保证在一个事务中多次操作数据库表中数据时，要么全都成功,要么全都失败。

多表查询：内连接、外连接、子查询 详细代码示例讲解

如果在业务系统当中，对用户的基本信息查询频率特别的高，但是对于用户的身份信息查询频率很低，此时出于提高查询效率的考虑，我就可以将这张大表拆分成两张小表，第一张表存放的是用户的基本信息，而第二张表存放的就是用户的身份信息。一对一关系表在实际开发中应用起来比较简单，通常是用来做单表的拆分，也就是将一张大表拆分成两张小表，将大表中的一些基础字段放在一张表当中，将其他的字段放在另外一张表当中，以此来提高数据的操作效率。当我们添加了外键之后，再删除ID为1的部门，就会发现，此时数据库报错了，不允许删除。

DQL英文全称是Data Query Language(数据查询语言)，用来查询数据库表中的记录。查询关键字：SELECT查询操作是所有SQL语句当中最为常见，也是最为重要的操作。在一个正常的业务系统中，查询操作的使用频次是要远高于增删改操作的。当我们打开某个网站或APP所看到的展示信息，都是通过从数据库中查询得到的，而在这个查询过程中，还会涉及到条件、排序、分页等操作。

插入数据：INSERT INTO table_name (column1, column2, …) VALUES (value1, value2, …);更新数据：UPDATE table_name SET column1=value1, column2=value2, … WHERE condition;删除数据：DELETE FROM table_name WHERE condition;

前面我们讲解了DDL中关于数据库操作的SQL语句，在我们编写这些SQL时，都是在命令行当中完成的。没有任何代码提示。（全靠记忆，容易敲错字母造成执行报错）操作繁琐，影响开发效率。（所有的功能操作都是通过SQL语句来完成的）编写过的SQL代码无法保存。在项目开发当中，通常为了提高开发效率，都会借助于现成的图形化管理工具来操作数据库。

在我们讲解SpringBootWeb基础知识(请求响应案例)的时候，我们讲到在web开发中，为了应用程序职责单一，方便维护，我们一般将web应用程序分为三层，即：Controller、Service、Dao。之前我们的案例中，是这样子的请求流程：浏览器发起请求，先请求Controller；Controller接收到请求之后，调用Service进行业务逻辑处理；Service再调用Dao，Dao再解析user.xml中所存储的数据。

在我们进行程序设计以及程序开发时，尽可能让每一个接口、类、方法的职责更单一些（单一职责原则）。单一职责原则：一个类或一个方法，就只做一件事情，只管一块功能。这样就可以让类、接口、方法的复杂度更低，可读性更强，扩展性更好，也更利用后期的维护。我们之前开发的程序呢，并不满足单一职责原则。下面我们来分析下之前的程序：数据访问：负责业务数据的维护操作，包括增、删、改、查等操作。逻辑处理：负责业务逻辑处理的代码。请求处理、响应数据：负责，接收页面的请求，给页面响应数据。Controller：控制层。

但是在我们所书写的Controller中，只在类上添加了@RestController注解、方法添加了@RequestMapping注解，并没有使用@ResponseBody注解，怎么给浏览器响应呢？上述案例的功能，我们虽然已经实现，但是呢，我们会发现案例中：解析XML数据，获取数据的代码，处理数据的逻辑的代码，给页面响应的代码全部都堆积在一起了，全部都写在controller方法中了。大家有没有发现一个问题，我们在前面所编写的这些Controller方法中，返回值各种各样，没有任何的规范。

在上一次的课程中，我们开发了springbootweb的入门程序。基于SpringBoot的方式开发一个web应用，浏览器发起请求 /hello 后 ，给浏览器返回字符串 “Hello World ~”。其实呢，是我们在浏览器发起请求，请求了我们的后端web服务器(也就是内置的Tomcat)。而我们在开发web程序时呢，定义了一个控制器类Controller，请求会被部署在Tomcat中的Controller接收，然后Controller再给浏览器一个响应，响应一个字符串 “Hello World”。

Maven的生命周期就是为了对所有的构建过程进行抽象和统一。描述了一次项目构建，经历哪些阶段。在Maven出现之前，项目构建的生命周期就已经存在，软件开发人员每天都在对项目进行清理，编译，测试及部署。虽然大家都在不停地做构建工作，但公司和公司间、项目和项目间，往往使用不同的方式做类似的工作。Maven从大量项目和构建工具中学习和反思，然后总结了一套高度完美的，易扩展的项目构建生命周期。这个生命周期包含了项目的清理，初始化，编译，测试，打包，集成测试，验证，部署和站点生成等几乎所有构建步骤。

这里所设置的maven的环境信息，并未指定任何一个project，此时设置的信息就属于全局配置信息。上述配置的maven环境，只是针对于当前工程的，如果我们再创建一个project，又恢复成默认的配置了。Local repository ：指定Maven的本地仓库的路径 (如果指定了settings.xml, 这个目录会自动读取出来, 可以不用手动指定)打开IDEA，选择右侧Maven面板，点击 + 号，选中对应项目的pom.xml文件，双击即可。2、创建模块，选择Maven，点击Next。

学习完前端Web开发技术后，我们即将开始学习后端Web开发技术。做为一名Java开发工程师，后端Web开发技术是我们学习的重点。后端Web开发技术的学习，我们会先学习Java项目的构建工具：MavenMaven是Apache旗下的一个开源项目，是一款用于管理和构建java项目的工具。官网：https://maven.apache.org/Apache 软件基金会，成立于1999年7月，是目前世界上最大的最受欢迎的开源软件基金会，也是一个专门为支持开源项目而生的非盈利性组织。

将资代码/vue-project(路由)/vue-project/src/views/tlias/DeptView.vue拷贝到我们当前EmpView.vue同级，其结构如下：此时我们希望基于4.4案例中的功能，实现点击侧边栏的部门管理，显示部门管理的信息，点击员工管理，显示员工管理的信息，效果如下图所示：这就需要借助我们的vue的路由功能了。

Dialog: 在保留当前页面状态的情况下，告知用户并承载相关操作。其企业开发应用场景示例如下图所示：首先我们需要在ElementUI官方找到Dialog组件，如下图所示：然后复制如下代码到我们的组件文件的template模块中并且复制数据模型script模块中：其完整的script部分代码如下：然后我们打开浏览器，点击按钮，呈现如下效果：那么ElementUI是如何做到对话框的显示与隐藏的呢？是通过如下的属性：具体释意如下图所示：visible属性绑定的dialogTableVisble属性一开始默

接下来我们来学习一下ElementUI的常用组件，对于组件的学习比较简单，我们只需要参考官方提供的代码，然后复制粘贴即可。本节主要学习Tbale表格组件和Pagination分页组件。

不知道同学们还否记得我们之前讲解的前端开发模式MVVM，我们之前学习的vue是侧重于VM开发的，主要用于数据绑定到视图的，那么接下来我们学习的ElementUI就是一款侧重于V开发的前端框架，主要用于开发美观的页面的。Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等。

我们前端页面中的数据，如下图所示的表格中的学生信息，应该来自于后台，那么我们的后台和前端是互不影响的2个程序，那么我们前端应该如何从后台获取数据呢？因为是2个程序，所以必须涉及到2个程序的交互，所以这就需要用到我们接下来学习的Ajax技术。Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。与服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并。

通过我们学习的html+css+js已经能够开发美观的页面了，但是开发的效率还有待提高，那么如何提高呢？我们先来分析下页面的组成。一个完整的html页面包括了视图和数据，数据是通过请求 从后台获取的，那么意味着我们需要将后台获取到的数据呈现到页面上，很明显， 这就需要我们使用DOM操作。正因为这种开发流程，所以我们引入了一种叫做MVVM(Model-View-ViewModel)的前端开发思想，即让我们开发者更加关注数据，而非数据绑定到视图这种机械化的操作。那么具体什么是MVVM思想呢？

如下图所示的百度注册页面，当我们用户输入完内容，百度可以自动的提示我们用户名已经存在还是可以使用。那么百度是怎么知道我们用户名输入完了呢？这就需要用到JavaScript中的事件了。什么是事件呢？按钮被点击鼠标移到元素上输入框失去焦点而我们可以给这些事件绑定函数，当事件触发时，可以自动的完成对应的功能。这就是事件监听。

var 对象名 = {属性名1: 属性值1,属性名2: 属性值2,属性名3: 属性值3,函数名称: function(形参列表){}对象名 . 属性名对象名.函数名()接下来，我们再VS Code中创建名为04. JS-对象-JSON.html的文件演示自定义对象< script > //自定义对象age: 10,console.log("用膳~");user.eat();< script >< script > //自定义对象age: 10,

通过代码/js效果演示提供资料进行效果演示，通过浏览器打开，我们点击主题5按钮，页面的主题发生了变化，所以js可以让我们的页面更加的智能，让页面和用户进行交互。function 函数名(参数1,参数2..){要执行的代码形式参数不需要声明类型，并且JavaScript中不管什么类型都是let或者var去声明，加上也没有意义。返回值也不需要声明类型，直接return即可接下来我们需要在VS Code中编写代码来演示。

我们介绍Web网站工作流程的时候提到，前端开发，主要的职责就是将数据以好看的样式呈现出来。说白了，就是开发网页程序，如下图所示：那在讲解web前端开发之前，我们先需要对web前端开发有一个整体的认知。主要明确一下三个问题：1). 网页有哪些部分组成 ?文字、图片、音频、视频、超链接、表格等等。2). 我们看到的网页，背后的本质是什么 ?程序员写的前端代码 (备注：在前后端分离的开发模式中，)3). 前端的代码是如何转换成用户眼中的网页的 ?通过浏览器转化（解析和渲染）成用户看到的网页浏览器中对代码进行解析和