1.引言

企业开发中的前端工程一般不会让程序员自己从零搭建，所以咱们要学会使用别人封装好的架子，或者低代码开发平台，这里咱们快速上手一个第三方的脚手架。

2.安装步骤

# 克隆项目
git clone https://github.com/PanJiaChen/vue-admin-template.git

# 进入项目目录
cd vue-admin-template

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run dev

3.登录流程分析

vuex-> user.js

api->user.js

utils->request.js

在没有后端接口时，走的是前端mock 数据，这个请求会到 mock 下面的 user.js

token的数据结构

mock 的返回结果被 util 下的响应拦截获取

响应又传到 vuex 的 user.js的 login 方法的响应中

紧接着前端就调用 getInfo 获取用户信息

api->user.js -> getInfo

请求 utils 下 request.js , 他会对请求进行拦截让请求携带请求头

请求到 mock 下的user.js 的用户信息的数据

返回的用户信息的数据结构

页面跳转到 dashboard

切换为后端接口，修改 vue.config.js

    proxy: {
    
    
      [process.env.VUE_APP_BASE_API]: {
    
    
        // target: 'http://localhost:8080',    // 配置 请求后台的地址
        target: 'http://localhost:81',    // 配置   nginx 请求后台的地址
        changeOrigin: true,       // 开启跨域
        pathRewrite: {
    
    
          //     /dev/api/vue-admin-template/user/login   ---- >    /user/login
          ['^' + process.env.VUE_APP_BASE_API + '/vue-admin-template']: ''
        }
      }
    }

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

这里咱们切断了前端请求自身mock 数据的路线，由proxy 代理到后端接口

后端创建相应的接口返回前端需要的数据

@PostMapping("/login")
    @UnInterception
    public R login(@RequestBody User user){
    
    
        System.out.println("登录操作");

        User currentUser = userService.login(user);

        return R.ok().data("token","admin-token").code(20000);
    }

    @GetMapping("/info")
    public R info(String token){
    
    
        System.out.println(token);

        HashMap<Object, Object> map = new HashMap<>();
        map.put("roles","admin");
        map.put("introduction","I am a super administrator");
        map.put("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
        map.put("name","Super Admin");
        return R.ok().data(map).code(20000);
    }

t(“avatar”,“https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif”);
map.put(“name”,“Super Admin”);
return R.ok().data(map).code(20000);
}

7脚手架与jwt

1.引言

2.安装步骤

3.登录流程分析

猜你喜欢