tlias

在这里插入图片描述

介绍

tlias 是一款简单的教辅系统 其架构主要是采用了 当前流行的前后端分离思想 ,前端使用的 vue.js Element ui 等框架来完成 后端使用java springBoot2框架来完成 数据库使用的mysql 构建起来的一个 简单的项目 其中主要包括的功能 有对员工的管理 部门的管理 涉及到的知识点有 对员工 部门 的增删改
查有分页查询(框架)、文件上传(框架)、登录校验 、事务AOP等等。

开发前须知

2.1 Rest风格

什么事Rest 风格
REST(Representational State Transfer),表现形式状态转换,它是一种软件架构风格。
是一个种对url 简单定义的一种风格
在这里插入图片描述
在Rest风格的URL中 我们通过四种请求方式 来操作数据库的增删改查
Get 查询
Post 新增
Put 修改
Delete 删除
在这里插入图片描述

2.2 统一响应结果

前后端交互时 采用统一访问结果 Result
在这里插入图片描述

2.3 开发流程

1.页面原型 需求分析 分析字段 分析大概流程
2.接口文档 数据分析 分析请求和响应
3.思路分析
4.接口开发
5.post测试
6.前后端联调测试

3.配置文件

配置文件开始会使用的是properties 文件来配置 之后会慢慢往里面加上配置 直到后面 配置文件中配置会越来越多 为了 简化配置 会映入yml 配置方式 以及后期的整合 学习这个系统 可以让你加深配置文件的了解。

4. 员工管理

1.页面原型

在这里插入图片描述
从图中我们大概可以 看到这个界面功能比较齐全 可以尝试写出来。

4.1

需求: 新增员工
当用户点击新增员工时 用户输入数据 提交后 前端会发送一个 请求 到服务器
在这里插入图片描述
前端的要求的员工基本都是一个一个的 要求的数据 需要我们后端来处理 一般我们都是处理数据的完整性 我们是直接对数据库 处理 的前段传过来的数据 有部分个别字段不填 但是数据库中有的字段是有约束的 约束了一些字段必填 约束了一些字段 不需要你填 前端不能在没有在对数据进行验证是否合理的情况下直接对数据库进行操作 这时候就用到了后端 后端负责处理前端字段的合理性 可行性 以及一些比较复杂的逻辑。所以说 我们后端主要就是为了处理这些字段 将这些字段处理维护好 将字段传入对应的sql 中 操作数据库。所以说为啥前端的数据为啥很散乱 而后端就比较完整 因为数据都是用对象来表示的 都封装在对象中 前端参数一般都会进后端的对象 而后端的对象 又与数据库 存在映射关系通过这种关系 我们可以数据库的各种操作。

4.2.接口文档:

在这里插入图片描述
从接口文档中我们可以看出 一些比较重要的信息
请求路径为 /emps PostMapping(“/emps”)
请求方式:post 方法上面的注解为PostMapping
参数格式 :json 需要用对象接收 并带上requestBody 注解
字段必须 前面三个字段必须有 要不不能写进数据库(前端校验了)

4.3思路分析

前端传过来的数据被EmpController通过路径 接收了
在这里插入图片描述
路径在类上我们就用requestmapper 来统一配置了

在这里插入图片描述
带上这个配置表示 我们每个下面的每个方法前面都要带上/emps这个路径

controller 负责接收这个请求 调用service 层处理逻辑
在这里插入图片描述
service 层 找到实现类 impl
在这里插入图片描述
仔细看下里面 干了什么 逻辑上是干了 将对象中的更新时间字段 和修改时间字段 加上了现在的时间
为啥要加入呢? 这就要说到数据库的表结构了 数据库的表结构是最终数据的形态 我们前后端数据最终都要向数据库的数据表结构看齐。
在这里插入图片描述
id 这个字段我们不用处理 主键自增 password 有默认值 写入的时候 可以管可以不管
username、name、gender 这个不能为null 在前端就以及做了验证 null 的传不过来(正则验证了)
image job entrydate dept_id可以为空 可以不为null 这就得看用户怎么填 一切以用户填入的数据为主
但是具体看看就可以看出 create_time和update_time 这两个字段约束是不能为null 的 如果我们不对这个两个字段插入数据将会报错。
在这里插入图片描述
如果我们不插入数据会怎么样 试试
重启服务。
前端联调
在这里插入图片描述
添加员工试试
在这里插入图片描述
说明这个是后端错误
在这里插入图片描述
爆错了 说你的create_time 这个字段不能为null
在这里插入图片描述
正常加上呢 ? 重启服务。
在这里插入图片描述
数据库 王五已入库

在这里插入图片描述
说了这么久 让我们继续往下面跑 时间设置好了 接下来的业务逻辑 就是业务层 调用dao层 进行数据的持久化操作
在这里插入图片描述
这里要注意的几个点 首先 前面的insert into emp()字段名是数据库中的字段 而value中代表着预编译的字段传进来的是java实体类 数据库中的数据书写格式是单词间使用_(下划线来分割) 而java中单词用驼峰命名 这会造成字段中的映射错误 我们是开启了驼峰映射配置的 所以这里 你只要在遵循驼峰命名的前提下 这里可以直接写你的属性名 配置已经帮我们搞定了

有时候 我们会爆空指针异常的问题 这时候就要注意 方法的参数是否传递下来了 如果没有传递下来你前面的数据都没有传过来 就会出现空指针异常

到这里 逻辑也就写完了

5.postman测试

测试中有令牌的存在 postman怎么测试 都被拦截器拦截了
在这里插入图片描述
这里被拦截了 我们就需要调整思路 我们先需要获取令牌 那就需要 先登录 产生令牌
在这里插入图片描述
将令牌带上(尚方宝剑)
重新测试 添加员工
在有令牌的情况下我们有 就不只是需要将 emp 传过去了 还要加上令牌 令牌是放在请求头中的
在这里插入图片描述

先在请求头里面写上token 令牌

在加上body 数据
在这里插入图片描述

在解决令牌的情况下成功了 我们看看数据库怎么样

在这里插入图片描述
林平之 以入库

6. 前后联调

前后联调需要 先将 前端的服务器挂起来

在这里插入图片描述
挂起

启动后端

前段启动之后下面就会有一个地址 我们点那个地址或者他会自动帮你蹦出一个页面
在这里插入图片描述
来到新增员工页面 点击新增员工 联调试试数据有没有成功
在这里插入图片描述
恭喜 这就是做一个接口的大致流程。

ps 第一个接口 写的会完整些 后面如果一些简单功能相似 的接口 就会简便一些 当然涉及到 一些新技术的出现时 逻辑还是得理清楚的。

删除员工

在这里插入图片描述
删除员工 从图中可以看出 删除员工是 可以分为 单个删除和批量删除的
1.从页面中我们可以得知 什么 我们什么也得知不到 只知道删除条件 一般的是 以id来删除的 这是经验
2.查看接口文档
在这里插入图片描述
在这里插入图片描述
首先:可以得到路径 是/empl/ids
请求方式是delete 到时候方法名上又得是 DeleteMapping
参数格式是 路径参数 到时候是写在路径后面的 多了用逗号分开
请求参数是 ids 是个数组
返回统一响应结果

3. 思路分析

其实上面已经分析的差不多了 直接写代码

4.接口开发

在这里插入图片描述
删除员工 他传的数组 因为不知道客户会删除几个数据 所以用数组接收 并且泛型是Integer 这里要注意的点 这里是数组 加路径参数 我们可以分析一下 底层的sql 语句 改怎么写 按照道理 是 你传一个id 我删除一个 你传两个id 我删除两个 是不是动态的 还有一个点需要注意 这是个数组 让我莫名的想到了一个动态中常用的东西 foreach 如果我们不用动态sql 写的话 sql 语句会写死 只能确定你是传一个参数 当你传一个参数的 时候可以怎么写 传多个参数 是不能写死的
注解中的参数记得用{}包住 记得使用@PathVariable 来接收参数 因为是路径参数

controller 接收请求参数 调用业务层

在这里插入图片描述
业务层没有逻辑要处理 只负责传送数据 并且调用mapper层

在这里插入图片描述
并没有在mapper层写具体的sql 具体的sql 要在xml 中写

在这里插入图片描述
语句简单 in 用得少 注意一下 delete id = 接口中的id

写完 收工

5.测试和联调

在这里插入图片描述
删除一条数据
在这里插入图片描述
删除多条数据
在这里插入图片描述
在这里插入图片描述

修改员工在这里插入图片描述

当我们点击 编辑的时候就 修改员工的数据 先点击一下 金庸
在这里插入图片描述
看到 金庸这个数据就被 显示在我们面前 我们可以对 金庸的数据进行修改 试试
在这里插入图片描述
我们这里将金庸的名字 修改了 职务 入职日期修改了
在这里插入图片描述
成功 那么上面我们 都经历了哪些操作呢 ? 点击编辑的是不是有一个请求 回显 向后端请求获取金庸的数据呢? 得到数据之后是不是 在回显 的 前端呢? 根据 这个请求获得的数据 我们在次修改在向后端发送请求保存数据呢?仔细想想这个里面包含着两条sql 其本身也有两个 按钮 没问题
一个是查询 一个是保存

2.查询接口文档 看文档里面怎么说
在这里插入图片描述
文档里面 啥都没说 说的是就是修改 但是按照我们分析 是先要查询数据的 不查询数据你修改不了
翻了一遍接口文档 发现里面有一个查询 根据id 查询
在这里插入图片描述
如果只看我们上面的页面原型可以看出 里面基本没有查询 一个是查询根据id 查询出一个对象
回显 所以简单过一下

3.接口开发

在这里插入图片描述
controller 调用 业务层
在这里插入图片描述
业务层调用mapper 层
在这里插入图片描述
直接成功

4.测试和联调

在这里插入图片描述
数据回显成功

接下来就写修改这个功能了。

1.接口文档

在这里插入图片描述
路径我们看出来 /emps 方法上不用写路径了
请求方式:PUT PutMapping
参数格式:json @RequestBody
返回统一结果 Result

2.思路分析

前端传过来的参数 有的数据会被修改 有的数据不会被修改 按照这个说法 他底层的sql应该是个动态sql 暴露可以修改的字段给客户 除了前面四个字段是必须的 后面的字段是非必须的 可以修改 可以不修改 请求参数全部put 进去 我后端只需要维护一下更新时间就行。

3.接口开发

在这里插入图片描述
其实按照逻辑来说 我感觉需要最后返回一个对象的 但是这里的事情好像被 你请求的时候就被查询分页干了 你修改数据 其底层这里的分页查询 每次在你和服务端请求的时候 分页插件也会偷偷的一起发送请求 所以这里的数据就被刷新了。
在这里插入图片描述
修改更新时间 调用mapper层。
在这里插入图片描述
在这里插入图片描述
不熟悉的点 有一个 就是关于最后条件的 id 这个数据是 前端带过来 的 而前端数据 则是分页查询全部查询查出来的。

4.前后端联调测试。

在这里插入图片描述

将张 改成张三
在这里插入图片描述

成功。


现在我们增删改已经完成了 只剩下一个 查的功能 查怎么查
在这里插入图片描述
查询分两个 一个是查询数据库中所有的数据 并返回显示在 前端页面 一个是上面的 三个输入框 按照条件查询 我们先来完成 全部查询
将表中的数据全部查询出来并返回给前端 select * from emp 连id 都不要 前端获得了所有的数据 直接在表格中拼接出来。就行了 但是有一个问题 就是 我们数据库中的数据 大部分都是很多行的 一个大公司 员工表 大概几千个人都有可能 所以 我们这里就要分页 将数据分页显示 比如总共有1000条数据 分成每页显示10 条就有100页 那我们也得将分页写成分页查询。后面带个分页的两个参数数 page pagesize

1.查看查询分页文档

在这里插入图片描述
分析: 请求路径/emps
请求方式/GET
参数格式:queryString 这个格式很重要 也很有意思 怎么多数据 不用emp 传参 看来是格式不对
在这里插入图片描述
这个数据只有一个参数 都用json 封装 为啥不用参数类型接收 为啥用json
我唯一想到的就是参数不适合用json 类封装不好整
上面 四个参数是 上面按条件查询 下面的 两个是按照条件查询。按照这个文档的意思 分页查询是可以写在一起的 当你按条件查询 的时候 下面会出现 带条件的结果 分页显示 出来 当你不带条件查询时,
你可以将总数据查询出来 分页显示在下面
在这里插入图片描述
响应数据 一大堆 这一次返回数据属于复合数据 我们先来做个简单的分页 不带条件的 就带显示数据库中所有数据的那种 那种我们只要两个参数 这样也便于理解下面的分页框架 pageHelper
从上面页面理解 其实我们前端需要就就是两个数据 一个是总行数 一个是每页显示的条数

这两个数据要一起返回给前端 我们可以给一个更好的类来封装这个数据 将数据返回回去 由于 每次返回的数据都不同 我们可以定义一个实体类来 将这两个属性封装好
在这里插入图片描述
只要获取这两个数据 前端就可以显示 页面 和总条数了

本质就是三条数据 后面两个1数据是同一个数据
在这里插入图片描述

2.接口开发

在这里插入图片描述
假如我们只需要 查询数据库中的总数 显示第一页 每页显示10条数据 使用@RequestParam给定默认值 建立分页方法 返回的是一个pageBean 进入servic层看看具体逻辑
在这里插入图片描述
里面的有两个方法表示有两个接口 让我想起了 一个概念事务 我开始的时候也是想那个修改员工的功能的 那个功能能不能在一个接口中写出来 但是现在仔细想想 那个就是不一样 那个有两个按键 而这个没有按键 或者说只有一个功能 并且这里数据还是经过了再一次的封装 不同之处要搞懂 下次好分辨业务的不同。
count 的方法 统计了页面总条数
在这里插入图片描述
limit 方法是返回显示的页面 limit 分页sql 是有两个参数的 一个是起始显示的数据 一个是每页显示的页数 每页显示的数据 默认是10 其实显示的页面的数据 有一个公式
起始展示的页面数= (page-1)*pagesize
将两个参数传进去 我们获得一个集合 集合中是每页显示的数据 可能是10 条 可能是5条 看你前端怎么调
在这里插入图片描述
这样我们就可以实现原始的分页查询功能了

3前后端联调

在这里插入图片描述
先换成原始的分页查询来实现业务

在这里插入图片描述
显示成功 开发完毕

下面我们知道了 逻辑 来使用框架来开发 使用 框架开发 在开发中是最长见的一种方式 因为我们开发不只是一个页面 有可能有一些页面也会用到分页查询 这时候使用框架就比较方便了 可以简化代码的书写。
接下来就 使用pageHelper 来开发接口文档中的需求

第一步导包

com.github.pagehelper
pagehelper-spring-boot-starter
1.4.6

第二步:controller 层建立相对的方法接收请求
在这里插入图片描述
六个参数 仔细看看这个六个参数 page pagesize 这个已经接触过了了 里面的入职时间 姓名 性别
六个参数业务层。
在这里插入图片描述
调用框架了 pagehelper.startPage(page ,pagesize)这个就是以往的分页了 以往的就不用自己写了
下面的是自己的业务逻辑了
业务逻辑差不多 其实这个分页查询 理解到业务层这里有点差 下面这个是按条件查询 查询出来的结果本来是list 容器中的 那上面那行代码的意思就是要倒腾数据 容器间的转换 好像是 将你的数据都放进page里面。
最后构建pagebean 将数据去出来 这框架好用么 没啥感觉 感觉和自己手写差不多。
继续往下
在这里插入图片描述
前端传的参数有可能有有可能没有 (薛定谔的猫 )用动态sql 先确定 数据在组装sql.
concat 函数是功能是将字符串拼接成一个字符串 好像也是 要不你不好写 其本身就是一个条件。

分页框架的思想是 你将数据都 放进 以往的两个数据 都放进page容器 中 不是一样的数据 要转换 其实 好像也可以不用 转换 当你直接从数据返回的就是page的时候呢?也可以
在这里插入图片描述

4.前后端框架联调

在这里插入图片描述
完成。
现在我们一些基本的功能增删改查就完成了 但是看看上面我们还可以看到一些关于图片加载的情况这个叫做文件上传我们一般是要存储图片到数据库中的。
我们先试试前端也一个上传功能 后端试着来接收一下(文件上传在网络中应用十分广泛 上传功能不只是上传图片 还可以上传视屏 音频)
我们试着在前端页面上写一个简单的上传 form 表单 上传也是用form 表单 真强

在这里插入图片描述
前端是这样的
在这里插入图片描述
我们可以选择一个图片上传试下 在后端接收 前端选择好文件

在这里插入图片描述
准备提交 由于这里是8080端口 所以一定是访问tomcat 服务器 毕竟你的页面是在项目的资源文件下写出来的。
如果要上传我们就要准备好controller 首先回顾一下 文件上传的三要素是什么
先上图
在这里插入图片描述
其实仔细看一下 文件上传的三要素就在里面 分别是
请求路径 upload
请求方法 post
以及enctype 接收类型 一种数据回发到服务器的 一种编码类型 multipart/form-data
写个controller在说
在这里插入图片描述
后端接收我们要使用到spring自带的api multipartFile 通过这个我们就可以实现数据的接收操作
现在后端已经打开了数据库 试试前端传过来的数据能不能直接发送过来 接收到并且 打印出名字
在这里插入图片描述
前端已经发送到这个地步了说明后端已经有数据了 看看能不能显示数据
在这里插入图片描述
通过debug 调试 可以看到 filename 是jpg 并且路径是存在C盘的临时路径中 。
现在我们要做的就是将网络中的数据拿出来 持久化到硬盘中。

先在仔细想想 我们这个文件上传功能是在新增员工的时候上传的

在这里插入图片描述
仔细整理里面的逻辑 我们点击图像的时候点击的是另外一个controller 也就是上传 也就是将数据从另外一个对方复制到这个地方 并且还是临时文件。然后我们会获得一个url 并且 将url 路径放到数据库中以便我们以后查找。

![在这里插入图片描述](https://img-blog.c

sdnimg.cn/adc3875deff348668c2ba40515c32db2.png)
报了一个错误 字符串截取错误。刚刚试了一下 想想还是不截取了 截取报错 一个名字而已不用计较

在这里插入图片描述
成功
在这里插入图片描述
去E盘看下

在这里插入图片描述
上传成功

我们也可以用流的方式来用一下 这里推荐使用commons-io 来帮助我们 关于流方面的操作

commons-io
commons-io
2.11.0

导入依赖

完成代码

在这里插入图片描述

在这里插入图片描述
两张图片成功。

上面的图片都是保存在本地的 但是在企业开发及项目 上传的图片不会到本地服务器 因为
在这里插入图片描述
自己搭建 文件存储系统又太贵 所以在开发中我们一般用的是云存储 将图片存储到 云上去 这里我们用的就是 阿里云的 OSS 服务了
在这里插入图片描述
要用阿里云存储 服务 我们首先的导入依赖
在这里插入图片描述
只有导入 依赖之后 才可以 使用 首先我们得登录 阿里云 找到 阿里云的服务
阿里云的 网站

www.aliyun.com
在这里插入图片描述
在里面找到 oss 对象存储 服务
在这里插入图片描述
点击进去 就行了 一般新人都有3个月的 免费试用期
在这里插入图片描述

开通之后 到了这个页面
在这里插入图片描述
点击bucket列表
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
创建bucket 之后 就可以暂时写代码了
导入 aliyun 工具类
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;
import java.io.*;
import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;

/**

  • 阿里云 OSS 工具类
    */
    @Component
    public class AliOSSUtils {

    private String endpoint = “换成自己bucket的地址”;
    private String accessKeyId = “替代为自己的accessKeyId”;
    private String accessKeySecret = “替代为自己的accessKeySecret”;
    private String bucketName = “替代为自己的bucketName”;

    /**

    • 实现上传图片到OSS
      */
      public String upload(MultipartFile multipartFile) throws IOException {
      // 获取上传的文件的输入流
      InputStream inputStream = multipartFile.getInputStream();

      // 避免文件覆盖
      String fileName = LocalDateTime.now().format(DateTimeFormatter.ofPattern(“yyyy-MM-dd-HH-mm-ss”)) + multipartFile.getOriginalFilename();

      //上传文件到 OSS
      OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
      ossClient.putObject(bucketName, fileName, inputStream);

      //文件访问路径
      String url = endpoint.split(“//”)[0] + “//” + bucketName + “.” + endpoint.split(“//”)[1] + “/” + fileName;

      // 关闭ossClient
      ossClient.shutdown();
      return url;// 把上传到oss的路径返回
      }

}
从上面我们可以看到
endpoint accessKeyId accessKeySecret bucketName
这四个属性 全部都变成自己阿里云的 地址

那我们的地址改怎么找到呢 打开自己的 阿里云 oss 管理平台
在这里插入图片描述
endpoint 在 这里
在这里插入图片描述
复制就行
accessKeySecret accessKeyId
这两个
在这里插入图片描述
在这里插入图片描述
自己的这两个值 不要暴露 这就好像 是你的账号 密码 暴露了 会被别人用
创建好了 就会 有这两个 值 将数据 全部转换为 成功之后 就像这样
在这里插入图片描述
将工具类管理 交给ioc 管理 加上@Component 注解

注意上面的 注入了 这个 AliOssProperties 这个对象 么 那是因为 一般情况下 我们都不会把这些数据 写死在 代码里面 因为这涉及到账号密码的操作 像这种情况下 我们一般都会将数据配置在配置文件中 看后缀就可以看到出来。追踪一下
在这里插入图片描述
发现这个数据已经是个属性了 并且 上面 还给了 一个@ConfiguationProperties
给了一个属性 这个是什么呢? 当然也加上了 @Component注解 控制反转
这种配置类一般都可以表示在配置中直接注入数据

我们以往的方式 配置文件properties中配置
在这里插入图片描述
然后通过 注解 @Value 直接将 数据全部注入进来 具体形式为:@Value(“${key}”)
在这里插入图片描述
可以在 类中直接注入 值 但是 仔细看下去

前面我们一直使用springboot项目创建完毕后自带的application.properties进行属性的配置,那其实呢,在springboot项目中提供了多种属性的配置方式:

在这里插入图片描述
这些都是springBoot提供的配置 那么这些配置发展过程是怎么样的呢?
在以往的数据库中 我们用xml的方式配置过 数据库 的账号密码 后来觉得不够用 重复的代码标签太多 后来就有了 properties文件的格式的出现
这种方式更加的简便 我们不用去写标签了 但是还是有一个问题

在这里插入图片描述
使用properties会更加还是会出现 代码重复的问题 在配置中
在这里插入图片描述
依旧有 重复配置的问题 这时候 yml 配置就出现了 yml 配置是当前企业开发得主流 是一种 更加简洁 方便的配置文件的方式

它可以利用 代码的分层 分行 以及首行缩进 来减少不必要代码的编写
就像这样
在这里插入图片描述
server 我们不用写两遍了
在这里插入图片描述
在这里插入图片描述
大小写敏感
数值前边必须有空格,作为分隔符
使用缩进表示层级关系,缩进时,不允许使用Tab键,只能用空格(idea中会自动将Tab转换为空格)
缩进的空格数目不重要,只要相同层级的元素左侧对齐即可
表示注释,从这个字符一直到行尾,都会被解析器忽略

将原来使用的application.properties 改名为 _application.properties(名字随便一换,springboot就加载不到了)。然后创建新的配置文件 application.yml,然后再将application.properties 改造称为 application.yml。

spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/tlias
username: root
password: 1234
servlet:
multipart:
max-file-size: 10MB
max-request-size: 100MB

mybatis:
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
map-underscore-to-camel-case: true

aliyun:
oss:
endpoint: 替换为自己的
accessKeyId: 替换为自己的
accessKeySecret: 替换为自己的
bucketName: 替换为自己的

解释下 @ConfigurationProperties 这个注解的作用

这个注解可以简化
在这里插入图片描述
因为这个我们配置的时候只能写四个属性 但是前面的 aliyun oss又不能拿出来
注入进去 所以 我们可以 @ConfigurationProperties 这个注解 表示
当这个注解 放在类上的时候 表示 注解中的数据 在每个属性前面都要加上这个属性值
在这里插入图片描述
测试一下图片上传
在这里插入图片描述

在这里插入图片描述
成功 看下 阿里云有没有将图片上传 上去

在这里插入图片描述
文件上传 模块完成。

接下来要完成登录模块的开发

登录功能在web项目中非常常见 基本只要web都会有登录功能 如果不设置登录界面的话 那谁都可以访问你公式的数据路 肯定要找个大门 让有权限的人 或者是注册了的人过来实现都数据的修改及其管理 或者存储数据

登录一般的逻辑是 我们在数据库中有一个表 专门存储系统权限能进来的人的个人信息的 一般登录都会有账号密码 而账号密码就会存在数据库 中 当我们需要跳转到具体的web系统上时 我们需要通过相对 登录校验才能进来有权限才能进来 没权限就不能进来 这样就很好的保护了数据的完整性。

登录检验的逻辑 并不复杂 只要我们前端传个账号 和密码就行 然后请求携带者账号密码 去查数据库 有的话就登录页面 没有的话就不给进去 提示账号密码 错误 请求重新登录。

在这里插入图片描述
代码并不复杂
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
虽然我们设置了登录页面功能 但是 还有一个很大的缺陷 就是 我就是不想用你的登录 页面 登录
我记住了 里面访问资源的路径 比如像 对员工进行管理 我们就可以通过完整的url 来访问

在这里插入图片描述
直接输入url 就可以跳过 登录了 登录功能就废了。

这种情况下 我们怎么解决这个问题 解决这个问题很早的就有办法了 解决这种登录问题 一般有两个步骤
一个是 先将前端发出的请求 在访问后端的时候全部拦截下来 来一个一个判断 问你是否登录了 登录了就放行 么登录就给我去登录。
二 怎么去确定你是否登录了嗯? 一般情况下下 的思路是在第一次登录之后给个标记 记录一下这是个登录了的 请求 房后就放行。

基于上面两种逻辑 就衍生出两种技术 一种是 基于Session cookie 完成的 登录校验 还有一种就是 jwt
令牌
这两种技术都可以完成登录校验 先慢慢的解释下 这两种技术的实现

先说下 Session 和cookie 技术
说到这个技术 就不得得说下 会话技术

会话
会话表示的是一种连接保存连接状态的技术 由于我们http是无状态协议 当我们发送请求 达到请求结果之后 双方的请求就会断开 我们下一次 请求 又会重新请求 重新断开 这种方式 很不利用我们的开发

我们有登录验证的情况下 我们不能对每次请求都让他登录在让他去访问资源 如果不登录校验那么 资源又不安全 所有我们就有了一种技术 就是会话 其本质就是建立一次连接然后 保存这个登录状态 用一个标记 以后我们每次登录的时候都会判断这个请求有没有携带这个状态 携带就表明你已经登录了
没登录 就表明你没登录 就跳转到登录页面
这其中的技术 就用到session 和cookie 其中session 是存放在服务器的 cookie 是存放在 浏览器端的

浏览器关闭 session 就没了 就像你重启换一个浏览器的时候会 重新登录一样 一个session中有多个请求
模拟一下session 和cookie 大概的流程
我们一般是从浏览器端 开始的 浏览器端 发起一个登录请求 第一次登录的时候 是没有session的
这时候我们会在服务器进行登录验证 如果登录验证成功了 服务器端就会生成一个session 字符串 应该是唯一的 和一个 他会将这个session写入到浏览器端cookie中 以后 这个浏览器 每次访问服务端的时候都会服务端都会判断你有没cookie 没了 你登录生成 有就看看你是属于哪一个session 那后携带者这个就可以访问资源 对资源进行操作了。
session还有一个作用就是 存储一些共享的资源 像天猫 京东这些网站 的 购物栏功能有些数据就是共享的
这个本身还有一个四大作用域的概念 分别是 session request appation page 可以存放数据。

这种技术基于登录验证 在当前分布式开发 服务器集群开发下 传统的session 和cookie 就已经有点力不从心了
在这里插入图片描述
所以到这 令牌技术就出现了

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值