直播课堂系统06-搭建项目前端环境

模板

模版为vue-admin-template，是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发。
在https://github.com/PanJiaChen/vue-admin-template里下载好。

搭建环境

cd 进文件夹 运行npm install，我这边必须在vscode里才能运行成功，在bash里不可以，可能是公司电脑的问题。
然后运行 npm run dev，即可出现模版

修改登录功能

首先在前端界面点击登录之后，可以看到其向前端发送两个请求，一个是login，一个是info，所以后端要注意返回相同格式的response。

login

其请求的URL为：http://localhost:9528/dev-api/vue-admin-template/user/login
发送的json为：{
“username”: “admin”,
“password”: “111111”
}
返回的数据为：{“code”:20000,“data”:{“token”:“admin-token”}}

info

其发送请求的url为：http://localhost:9528/dev-api/vue-admin-template/user/info?token=admin-token
发送的数据为：admin-token
返回的数据为：{“code”:20000,“data”:{“roles”:[“admin”],“introduction”:“I am a super administrator”,“avatar”:“https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif”,“name”:“Super Admin”}}

创建登录接口

@CrossOrigin可以处理跨域请求,让其能访问不是一个域的文件。
在controller文件夹下新建用户登录的controller，代码如下

@RestController
@RequestMapping("/admin/vod/user")
@CrossOrigin
public class UserLogging {
    //登录功能
    @PostMapping("login")
    public Result login(){
        //注意下面返回的是data code在Result的ok里面返回了
        Map<String,Object> map = new HashMap<>();
        map.put("token","admin");
        return Result.ok(map);
    }
    //获取用户信息 使用get还是post按照前端发送的要求来
    @GetMapping("info")
    public Result info(){
        Map<String,Object> map = new HashMap<>();
        //附带的没有前端默认的这么多 估计到时候要进前端文件处理
        map.put("roles","[admin]");
        map.put("name","admin");
        map.put("introduction","I am a superrrrrr administrator");
        map.put("avatar","https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_handsome.jpg");
        return Result.ok(map);
    }
    //退出
    @PostMapping("logout")
    public Result logout(){
        return Result.ok(null);
    }
}

修改登录前端

修改接口路径

在.env.development里面，将路径修改成自己这边的路径。

修改js文件

在src/api/user.js里面修改对应的访问地址。

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/admin/vod/user/login',
    method: 'post',
    data
  })
}

export function getInfo(token) {
  return request({
    url: '/admin/vod/user/info',
    method: 'get',
    params: { token }
  })
}

export function logout() {
  return request({
    url: '/admin/vod/user/logout',
    method: 'post'
  })
}

状态码

注意一下，里面utils/request下写的必须状态码为20000才算成功，需要把其改成200才能够登入系统。