（1）vue-element-admin使用：baseURL设置，登录登出

第一步：去git上面下载vue-element-admin，或者看官方文档下载，具体步骤如下

下载项目

git clone https://github.com/PanJiaChen/vue-element-admin.git

到vue-element-admin目录下

cd vue-element-admin

安装依赖包（会比较慢）还有可能失败

npm install

启动程序

npm run dev

第二步：设置baseURL，改成后端项目接口

 设置baseRUL在dev环境下

         在vue.config.js文件中，找到

before: require('./mock/mock-server.js')

         并且注释掉，并且在位置上添加如下代码

    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true, // 配置跨域
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    }

        此时baseURL已经配置好，可以删除文件mock，该文件是模板自带的后台，注解掉vue.config.js那段代码后，该文件已经失效。

登录：

        找到登录页面中的请求方法

标记1：点击登录的时候会去验证输入的数据是否符合我们的规定，可以看elementui的验证

标记2：如果符合valid就会为ture执行下面流程

标记3：回去store文件夹找到对应方法，下面会细说

标记4：如果请求没有报错就进入then方法

标记5：记录的是来到登录页面之前的请求路径，登录成功后会直接进入该路径页面

标记6：请求出错进入catch方法。

跟着标记3找到对应文件

 

标记1：拿到前面传入过来的数据

标记2：调用login方法，通过import导入的进来的，在src/api文件下

标记3：把token存入到vuex缓存中（个人理解，错误了请留言告诉我）

标记4：表token存入到cookie中 （个人理解，错误了请留言告诉我）

执行请求方法请求的路径会是baseURL+url，如下图所示

 返回数据结构如下

 主要是要有code和token两个，不然会报错，数据返回成功后会进入reques.js文件中做验证

         20000是成功响应的标识，我加了‘’，因为我返回的是字符串不是整型。如果返回的code不是20000就会报错。

        密码验证正确后，模板会自己发生一个getinfo请求把token传过去验证角色信息，需要返回的数据结构如下

         如果返回数据结构不一致就会报错。到此就能正确登录进去，因为有些接口没完成，所有控制台会报错但是不影响我们进行登录登出测试。

登出

         登出就很简单了，在后端实现登出接口，返回的code为20000，就行。

到此使用vue-element-admin实现登录登出已经完成，如果上述有什么说错的地方可以留言指出。