Vue3+Element-PIus 登录功能业务流程设计 五

1 登录业务流程

1.1登录业务流程 

① 在登录页面输入用户名和密码

② 调用后台接口进行验证

③ 通过验证之后，根据后台的响应状态跳转到项目主页

---

1.2登录业务的相关技术点

① http 是无状态的 

② 通过 cookie 在客户端记录状态

③ 通过 session 在服务端记录状态

④ 通过token 方式维持状态

---

 因http是无状态的，如果想记录用户的登录状态。有两种方案

㈠ 通过cookie或session进行记录

㈡ 通过token 记录用户的登录状态

---

使用两种方案的场景

㈠ 如果前端和后台接口不存在跨域的问题，推荐使用cookie或session的方式

㈡ 如果前端项目运行在一个新的端口号，前端项目与服务器之间存在跨域的问题。就需要使用token 的方式来维持登录状态。

---

1.3 登录 --token 原理（token如何维持状态）

 ①  例如，现在有一个客户端和服务器。

       服务器专门提供登录之类的API接口，客户端需要通过ajax等技术对服务器接口进行访问。

② 当用户对服务器进行请求时，服务器根据请求的用户登录成功后，返回当前用户的token。也就是token是由服务器生成的，每个用户请求服务器返回的token不相同。

注意：如果客户端和服务器之间存在跨域问题，就不能使用cookie和session了，要使用token

③ 当用户收到服务器返回的token时，客户端需要进行存储在本地。因为这个token值记录了客户端的登录状态信息。

④ 当用户记录了服务器返回自己的token值后，客户端后续的所有请求都要携带该token 进行发送请求。因为用户登录成功后，token是保证用户登录成功的唯一令牌，必须要有才能进行正常的操作。

 当用户发起新一轮请求时，服务器会根据用户提交过来的token进行验证是那个用户。从而根据用户的操作返回不同的结果。

⑤所以,这里token主要是进行客户端和服务端身份校验。当服务器接受到用户token后，服务器会验证这个token是否存在。存在则就证明用户已经登录过了，根据token返回不同的数据

2. 登录功能页面设计实现

1.1登录页面的布局

  通过Element-UI 组件实现布局

• el-form    (整个登录框可以认为是一个表单)
• el-form-item (item项，它可以是用户名或是密码，或是界面中的登录按键文字都是一个item项)
• el-input  （文本输入框，用户名和密码输入的框框）
• el-button  （界面按钮）
• 字体图标  (文本输入框前端的小图标)

1.2 实现步骤 

1. 用vs code 打开项目，先不要着急写代码。首先打开终端，输入git status 看看工作目录是否干净

      2.每一次进行功能开发之前，新建立一个分支进行开发。当功能开发完成以后，再去合并这个分支到master 主分支。

      3.创建分支指令,现在是做登录功能，分支名称就叫login，git checkout -b login

       使用 git checkout 创建完成分支的时候，就已经切换到了新分支了。

      5.查看分支指令  git branch

     分支前面*号，代表当前所在的分支

 1.3 项目结构的梳理

 ㈠ 在进行登录功能之前，先进行项目结构的梳理。那么在梳理之前，先查看一下效果的运行效果。

㈡ 查看项目运行效果，打开可视化面板，选择任务，点击serve 命令，点击运行按钮

㈢ 当项目编译成功后，就可以点击启动app，查看项目的运行效果

㈣ 项目运行起来的效果

㈤ 进行界面修改，假如我们想把它修改成一个空白的页面或者想把原来页面删除干净，添加自己想要的页面。

  首先打开vs code ,打开src。来看一个文件main.js

1. main.js是整个项目的入口文件 ,双击打开

    2.在main.js中，它先后引入了 vue组件、App.vue组件、router 路由和ElementPlus对应的组件。

  3.接下来，通过caeateApp创建App根组件，再通过使用router 挂载到vue实例

 4.首先，进入App.vue根组件，看一下组件的结构。一个单文件组件中，一共分三大部分

•   template UI结构
•   scrpit 行为
•   style  样式

小知识： 每一个单页面都是由三个部分组成的，分别是结构，行为，样式

㈥ 如果要把页面清理空白或换成自己想要的，只需要把<template></template>里面的内容清理干净并添加自己的内容即可。

㈦ 接下来，梳理路由组件，router

㈧ 打开router组件，把路由清理干净。把没有用到的路由数组和页面全部清理干净

 (九) 再次刷新页面，没有问题。证明清理代码组件成功了。最后，基于这个干净的项目结构，进行开发了。

(十) 项目初始化进行开发时，把没有用到的组件清理干净。然后再用干净的项目结构去重新构建自己的项目

1.4 创建登录组件

㈠ 创建一个登录组件，并且通过路由的形式，把登录组件宣染App根组件中

这个Login.vue登录组件，是一个单文件组件。前面说过，单文件组件中，都是由三部分组成：结构、行为、样式

 小技巧：

• 在样式中，lang="less" 意思是在这个单文件组件页面样式节点中，支持less 语法格式
• scoped 是vue中的一个指令，用来控制样式生效的区间。如果加上scoped 指令样式只会在当前(局部)组件内生效。如果把scoped 去掉，这个样式会在全局生效
• 所以这里需要注意一点，一个组件中，它的样式肯定是用来美化当前组件的结构的，当前页面组件的样式不应当汲及到其他组件。所以在这里推荐，只要是定义了单文件形式的组件，那么一定要给style 标签加上scoped 指令。从而防止组件之间的样式冲突

㈡ Login.vue组件创建完成后，需要在router文件夹index.js路由规则中，添加路由，通过路由的形式，把Login.vue渲染到App.vue 根组件中。

1. 进入router\index.js中
2. 先导入Login.vue 组件
3. 导入Login.vue组件后，在路由规则数组中，新增一个路由规则。路由规则由path以及component属性 组成
4. 路由规则中 path :指定路径。component 指定要展示的组件

       5.路由规则说明，当用户访问/login这个地址时，通过component展示出要访问的组件

㈢ 路由规则添加完成后，还需要在App.vue 根组件中，放置一个路由占位符

 小知识：

路由占位符作用：通过路由匹配到的组件，都会渲染到router-view 组件中去进行展示

㈣ 运行页面时，一直提示一个错误，无法通过编译

 说来也奇怪，找不到组件不应该报错才对。可能是安装eslint的原因，语法检查时出错，导致无法通过编译

 这个确实是个不存在的组件。但是不至于不通过编译吧。那就跳过吧。把它处理掉

㈤ 接着，直接访问/login就能显示登录组件 

㈥ 现在我们想要这样，只要我们用户访问根路径的时候，localhost:8080，就自动重定向到login登录页面。

1. 希望用户访问/线的地址，也就是根路径时，自动重定向到login
2. 
3. 需要添加路由规则进行控制。那么就在路由规则文件中，添加一个重定向的路由规则
4. 去监听用户访问 / 这个地址时，去重定向到/login

 踏坑小助手：eslint 语法检查非常严格，稍微少打一个空格就有可能导致编译不通过的情况

㈦ 编译完成后，直接输入http://localhost:8080/ 就自动重定向到/login了

 以上出自于：【黑马程序员】前端开发之Vue项目实战_Element-UI【配套源码+笔记】_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1x64y1S7S7?p=1