使用vue-admin-template+SpringBoot快速搭建前后端分离项目

使用vue-admin-template+SpringBoot快速搭建前后端分离项目

1.前端准备

0. 准备环境:安装好nodejs & npm(略)
   

1. 获取vue-admin-template
   可以使用如下Git命令直接获取

git clone https://gitee.com/panjiachen/vue-admin-template.git

下载成功后可以给文件改名,这里我将文件名改为front

2. 使用idea将文件front打开

3. 安装框架所需包

npm install

4. 运行

• nodejs版本小于等于17的直接使用npm run dev运行
  

• nodejs版本大于17的在执行前加上一个参数
  

 $env:NODE_OPTIONS="--openssl-legacy-provider"
 npm run dev  

看到这里说明前端部署成功!!!

2.后端准备

0. 快速创建一个SpingBoot项目
   
   添加一个controller和User以及统一返回结果类Result
   
   在pom.xml中添加一个lombok插件,开发快一点
   

User.java

package com.example.back.entity;

import lombok.Data;

@Data
public class User {

    private String username;

    private String password;

}

Result.java

package com.example.back.utils;
import lombok.Data;

@Data
public class Result<T> {

    //返回码
    private Integer code;

    //返回消息
    private String message;

    //返回数据
    private T data;

    public Result(){}

    // 返回数据
    protected static <T> Result<T> build(T data) {
        Result<T> result = new Result<T>();
        if (data != null)
            result.setData(data);
        return result;
    }

    public static <T> Result<T> build(T body, Integer code, String message) {
        Result<T> result = build(body);
        result.setCode(code);
        result.setMessage(message);
        return result;
    }

    public static <T> Result<T> build(T body, ResultCodeEnum resultCodeEnum) {
        Result<T> result = build(body);
        result.setCode(resultCodeEnum.getCode());
        result.setMessage(resultCodeEnum.getMessage());
        return result;
    }

    public static<T> Result<T> ok(){
        return Result.ok(null);
    }

    /**
     * 操作成功
     * @param data  baseCategory1List
     * @param <T>
     * @return
     */
    public static<T> Result<T> ok(T data){
        Result<T> result = build(data);
        return build(data, ResultCodeEnum.SUCCESS);
    }

    public static<T> Result<T> fail(){
        return Result.fail(null);
    }

    /**
     * 操作失败
     * @param data
     * @param <T>
     * @return
     */
    public static<T> Result<T> fail(T data){
        Result<T> result = build(data);
        return build(data, ResultCodeEnum.FAIL);
    }

    public Result<T> message(String msg){
        this.setMessage(msg);
        return this;
    }

    public Result<T> code(Integer code){
        this.setCode(code);
        return this;
    }
}

ResultCodeEnum.java

package com.example.back.utils;

import lombok.Getter;

/**
 * 统一返回结果状态信息类
 *
 */
@Getter
public enum ResultCodeEnum {

    SUCCESS(200,"成功"),
    FAIL(201, "失败"),
    SERVICE_ERROR(2012, "服务异常"),
    DATA_ERROR(204, "数据异常"),
    ILLEGAL_REQUEST(205, "非法请求"),
    REPEAT_SUBMIT(206, "重复提交"),
    ARGUMENT_VALID_ERROR(210, "参数校验异常"),

    LOGIN_AUTH(208, "未登陆"),
    PERMISSION(209, "没有权限"),
    ACCOUNT_ERROR(214, "账号不正确"),
    PASSWORD_ERROR(215, "密码不正确"),
    LOGIN_MOBLE_ERROR( 216, "账号不正确"),
    ACCOUNT_STOP( 217, "账号已停用"),
    NODE_ERROR( 218, "该节点下有子节点，不可以删除")
    ;

    private Integer code;

    private String message;

    private ResultCodeEnum(Integer code, String message) {
        this.code = code;
        this.message = message;
    }
}

LoginController.java

package com.example.back.controller;


import com.example.back.entity.User;
import com.example.back.utils.Result;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;

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

@RestController
public class LoginController {

    /**
     * 登录
     * @return
     */
    @PostMapping("/login")
    public Result login(@RequestBody User user) {

        System.out.println("=============="+user);
        
        Map<String, Object> map = new HashMap<>();
        map.put("token","admin");
        return Result.ok(map);
    }
    /**
     * 获取用户信息
     * @return
     */
    @GetMapping("/info")
    public Result info() {
        Map<String, Object> map = new HashMap<>();
        map.put("roles","[admin]");
        map.put("name","admin");
        map.put("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
        return Result.ok(map);
    }
    /**
     * 退出
     * @return
     */
    @PostMapping("/logout")
    public Result logout(){
        return Result.ok();
    }
}

3.连接前后端

1. 修改响应状态码
   
2. 使用代理

// before: require('./mock/mock-server.js')
    proxy: {
      '/dev-api': { // 匹配所有以 '/dev-api'开头的请求路径
        target: 'http://localhost:8080',
        changeOrigin: true, // 支持跨域
        pathRewrite: { // 重写路径: 去掉路径中开头的'/dev-api'
          '^/dev-api': ''
        }
      }
    }

3. api中axios的地址改为后端对应地址
   

4.测试

1. 运行后端
2. 运行前端
3. 点击登录
   

5.后续前端开发基本步骤

1. 在api中定义各种请求

2. 在views中定义前端页面

3. 在router中添加路由
   

4. 前端页面调用api中的方法发送axios请求,并使用vue框架展示后端返回数据