第一步:去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实现登录登出已经完成,如果上述有什么说错的地方可以留言指出。

 

Logo

前往低代码交流专区

更多推荐