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

原创

已于 2022-11-20 10:45:36 修改 · 2.1k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #spring boot #git

于 2022-11-20 10:13:57 首次发布

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

1.前端准备

准备环境:安装好nodejs & npm(略)
获取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.后端准备

快速创建一个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