项目的创建—————–本项目使用 Vue3 框架

登录页面：Login.vue，页面的大致效果如下图，当用户名及密码均正确时，页面跳转，否则根据用户名及密码来提示错误

1.创建页面，并为 Login.vue 页面配置路由

使用Element-plus组件库（该组件库是针对Vue3的一个组件库），使用该组件库中的组件。

①第一安装：npm install element-plus –save

②在入口文件main.js中导入组件库、样式并use，此处要注意的是第一引入该组件库，其次还要引入样式，最后还要use(ElementPlus) ，后续就可以使用该组件库中的组件。

③在官网中复制所需要的样式的组件，然后在需要使用该组件的地方，复制代码。

2.根据后台接口定义登录数据

导入reactive及toRefs，并且定义一个对象，对象内的属性为loginId和登录密码loginPwd,使用…toRefs方法来展开loginData对象，这样我们可以在DOM中直接使用该对象内的数据loginId和loginPwd，然后给DOM中的两个input和一个checkbox双向绑定该三个属性。

3.使用html及css将页面画完，实现如下效果，此时登录页面就画好了

4.页面交互

①给登录按钮绑定一个点击事件 login         (@click=”login”)，并在setup中写一个login方法，如下图

将loginId和loginPwd从loginData中解构出来，由于要向后台发送请求来验证用户名及密码，所以需要先安装axios，然后发送请求，由于该请求需要传参（用户输入的loginId及loginPwd）来向后台验证用户名及密码是否正确，所以需要传参（params），格式如下图

                                                                            params:{loginId,loginPwd}                                            

②DOM界面如下图，当输入好用户名及密码后点击登录按钮，就会触发login函数，并向登录接口后台发送axios请求，请求数据

此时，后台会返回一个data数据，如下图，该data数据对象中，包含了多个属性，如下图，此时虽然登录名及登录密码均正确填写，但返回的信息中显示密码错误，是由于一般情况下，我们都会对 进行一个加密处理，防止黑客拦截。

加密处理就是对原始字符串进行一个篡改，常用的加密方式：MD5加密

③MD5加密

安装：     npm i -g md5-js

导入：     import md5 from md5-js

加密：   loginPwd = md5( md5(loginPwd).split( ).reverse().join( ))

(对密码进行打散并反转再组成字符串然后进行md5加密，再进行一遍md5加密)

当我们将密码加密处理后，在DOM页面中登录，此时会返回如下图，显示登录成功

此处我们可以对我们的代码进行优化处理（由于login发送请求方法代码较长，并且登录的接口将来可能会发生改变，因此我们可以对方法进行封装，并对接口地址进行一个整合）

第一新建一个utils工具包，新建request.js文件，其中定义一个封装请求的库，之后所有的请求都可以使用这个库来解决

④封装发送axios请求的库

4.1第一创建一个请求对象： 

4.2定义get获取请求方法、post修改请求方法、put修改请求、delete删除请求方法并导入

4.3在页面中使用request请求库中定义的方法：

cong request.js中导入定义的$get方法，并使用，如下图所示

⑤封装adminAPI

将整个发送请求方法及md5加密封装成一个API，因此创建api文件夹，并创建adminAPI.js文件

要在该文件中使用axios请求及加密方法，就需要导入先前已经创建好的工具包中的request文件内的$get方法及md5，如下图所示

此处，要传的参数则是Login.vue中的loginData对象，所以此处的形参设为params，然后在params中解构出loginID和loginPwd，然后将密码加密，在使用$get方法来发送请求，将两个参数传进去，并返回结果，这样我们在Login.vue中只需要这样写即可，只需要引入$login方法，并传入loginData即可得到结果

⑥配置config，项目中的常量

创建congif配置项文件夹，在目录向创建conster.js文件，该文件夹中定义项目中的常量，并创建base_url，设置为所需的接口地址

然后在utils文件夹的request.js文件中导入base_url，格式如下

这样写的好处是：方便今后的统一修改。

⑦设置token令牌

发送请求后，后台会返回信息，如下图，其中有message，success，token

message：返回登录消息

success：返回是否登录成功

token：返回登录成功后的令牌，令牌是后期操作后台数据的权限，保存在浏览器的缓存中，之后向服务器发送的每个请求，都要携带这个令牌！！！

因此，我们需要使用sessionStorage来保存token（ sessionStorage方法保存的数据会在浏览器关闭时自动清楚数据 ！！！），格式如下图

先在缓存中设置一个属性token

一般在定义请求对象中我们还会设置两个属性，一个是请求超时时间，还有一个是请求头，请求超时时间，当axios请求响应的时间超过设置的时间，则请求会自动终止，一般我们将token保存到缓存中有两个方法，一个是发送请求时作为参数传入，这种方法一般不使用，还有一个则是在请求头中导入，如下图所示：

name，我们如何将后台返回的token保存到本地缓存呢？

如下图所示，该方法必须要登录两次才能将token令牌保存到本地缓存，由于当第一次登录前，本地缓存中的token为空，只有登录成功后，token令牌才能保存到本地缓存中，当第二次登录时，在第一次登录的基础上可以获取到token令牌。因此该方法不可行。

那么到底该使用什么方法在第一次登录时就将token令牌保存到本地缓存中呢？

我们要在登录成功后，单独写一个方法来添加请求头，第一在request库中定义一个用于添加token信息的方法 

然后在Login页面中引入$setToken，并执行，如下图所示

这样之后发送的所有请求，都会通过请求头携带上token令牌，但是这种情况下依旧会有一个bug，即：当我们刷新页面。token就会丢失，所以要解决这种方法，我们还是要在创建请求对象时，在headers对象中写下请求头，这样可以保证，当第一次获取到token时，token就直接保存在本地缓存中了。（由于刷新页面就是重新发送请求）

⑧登录时，用户名及密码正确，页面跳转至管理页

当登录用户名及密码全部正确时，页面会发生跳转，格式如下，即当密码正确时，message会返回登录成功，当用户名错误，会返回用户名错误，当密码错误，会返回密码错误

当密码及用户名正确时，页面将跳转到Manager.vue（管理页），所有要创建该页面，并配置路由

那么如何跳转到管理页Manager.vue呢：

在当前Login页导入useRouter，并返回当前路由器对象，定 义为$router

然后在success时，使用$router.push方法来跳转，此处的success就是先前从返回的data中解构出来的success，只有用户名和密码均正确时，则返回success：true，否则是false

此时登录页就已经完成