vue-admin-template实现登录过程（对接Controller）

vue-admin-template实现登录过程（对接Controller）

关注公众号，每天更新优质好文！

1.引言

vue-admin-template是使用vue+element-ui开发的一款很棒的后台管理系统基础模板。我们一般在上面进行二次开发。
我们可以预览一下，还是很棒的，我很喜欢。

项目预览地址：

https://panjiachen.gitee.io/vue-admin-template

接下来，我们就下载使用一下吧。

第一步、
下载vue-admin-template模板，然后导入到开发工具中，我用的VScode。

下载地址1：github下载地址，下载很慢

下载地址2：百度网盘下载地址
提取码：ssty

（注意：如果你是下载的百度网盘里面的模板，就不用安装依赖了，因为我已经安装好了。就是node_modules文件夹）
下载之后导入到VScode中。）

导入之后路径结构应是这样的：

然后启动项目：

右键项目名，在终端中打开

输入命令npm run dev，回车，启动项目。

npm run dev

首次加载有点慢，请耐心等待，完成之后会自动打开浏览器，而且端口号默认是9528

完成之后如下图：

点击登录，这个精简版的后台界面就好了，我们可以根据自己需要来改页面。

有的小伙伴这里就有问题了对吧，啊！我登录不上啊，报错Network Error ! 怎么会事呢？

别急，我们接下来解决。

我们先分析原因：

打开登录页面，并打开F12调试窗口，点到network

点击Sign in ,看看登录请求路径：

说明这个https://easy-mock.com/mock/接口出问题了呗，不能用了！但没事，我们自己写一个登录接口即可。

后台LoginController:

package com.example.stutea.controller;


import com.example.stutea.utils.R;
import org.springframework.web.bind.annotation.*;



@RestController
@RequestMapping("/user")
@CrossOrigin
public class LoginController {

    //login
    @PostMapping("login")
    public R login(){
        return R.ok().data("token","admin");
    }


    //info
    @GetMapping("info")
    public R getInfo(){
        return    R.ok().data("roles","[admin]").data("name","admin").data("avatar","https://img03.sogoucdn.com/app/a/100520093/d71a6360ba8601ff-19264876bfd6a308-dfbd047d3bb4f2621f01d7ae18979b6e.jpg");


    }
}

工具类：

package com.example.stutea.utils;


import lombok.Data;

import java.util.HashMap;
import java.util.Map;

//统一返回结果的类
@Data
public class R {


    private Boolean success;


    private Integer code;


    private String message;


    private Map<String, Object> data = new HashMap<String, Object>();

    //把构造方法私有
    private R() {}

    //成功静态方法
    public static R ok() {
        R r = new R();
        r.setSuccess(true);
        r.setCode(com.example.stutea.utils.ResultCode.SUCCESS);
        r.setMessage("成功");
        return r;
    }

    //失败静态方法
    public static R error() {
        R r = new R();
        r.setSuccess(false);
        r.setCode(com.example.stutea.utils.ResultCode.ERROR);
        r.setMessage("失败");
        return r;
    }

    public R success(Boolean success){
        this.setSuccess(success);
        return this;
    }

    public R message(String message){
        this.setMessage(message);
        return this;
    }

    public R code(Integer code){
        this.setCode(code);
        return this;
    }

    public R data(String key, Object value){
        this.data.put(key, value);
        return this;
    }

    public R data(Map<String, Object> map){
        this.setData(map);
        return this;
    }

}

ResultCode：

package com.example.stutea.utils;


public class ResultCode {
     public  static  Integer SUCCESS = 20000;
     public  static  Integer ERROR = 20001;

}

这样后台接口就写好了。
然后修改前端模板中的请求接口：

写好之后重新启动，前后端都要重新启动。
再次访问应该没问题了，我也是看的尚硅谷宋红康老师讲的。