前端VUE+后端Springboot 项目搭建

网址：https://v3.cn.vuejs.org/guide/introduction.html#vue-js-是什么
vue.js
node下载：https://nodejs.org/zh-cn/

C:\Users\GW00240066\Desktop\springboot_vue>npm -v
6.14.14
C:\Users\GW00240066\Desktop\springboot_vue>node -v
v14.17.4
C:\Users\GW00240066\Desktop\springboot_vue>npm install -g @vue/cli
...
C:\Users\GW00240066\Desktop\springboot_vue>vue create vue_springboot_demo

Ctrl + c 关闭当前启动的项目。

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://10.20.46.76:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

终止批处理操作吗(Y/N)? y

安装Element-plus

//网址：https://element-plus.gitee.io/#/zh-CN/component/installation
$ npm install element-plus --save

阿里云的springboot搭建网站：

https://start.aliyun.com 

上图为搭建项目时所选择的依赖。

下图为项目结构：前端vue，后端springboot

搭建数据库表

启动时出现程序包不存在的错误，要将如图所示选项勾上

Mybatis - plus ：官网：https://mp.baomidou.com/

<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.4.3.1</version>
</dependency>

自定义Result 函数返回方法。

package com.example.demo.common;

public class Result<T> {
    private String code ;
    private String msg ;
    private T data ;
    
    public String getCode() { return code ; }
    
    public void setCode(String code) { this.code = code ; }

    public String getMsg() { return msg; }

    public void setMsg(String msg) { this.msg = msg; }

    public T getData() { return data; }

    public void setData(T data) { this.data = data; }

    public Result(){
        
    }
    
    public Result(T data) { this.data = data ; }
    
    public static Result success() {
        Result result = new Result<>();
        result.setCode("0");
        result.setMsg("成功");
        return result;
    }
    
    public static <T> Result<T> success(T data){
        Result result = new Result<>();
        result.setCode("0");
        result.setMsg("成功");
        return result;
    }
    
    public static Result error(String code , String msg){
        Result result = new Result();
        result.setCode(code);
        result.setMsg(msg);
        return result;
    }
}

https://blog.youkuaiyun.com/xqnode/article/details/118325868
Vue项目搭建常用的配置文件，request.js和vue.config.js

工具类：https://www.hutool.cn/

chrom添加JSON格式：https://www.cnblogs.com/xifenglou/p/11364426.html

选中文件： shift +F6 改名

断点模式，F8跳转

BigDecimal Decimal

@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
private Date date;

add as maven project

富文本编辑器：https://www.wangeditor.com/