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

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

1.前端准备
  1. 准备环境:安装好nodejs & npm(略)
    在这里插入图片描述

  2. 获取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.后端准备
  1. 快速创建一个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
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值