springboot+vue前后端分离项目-项目搭建2

1.创建springboot项目，进入https://start.spring.io生成

也可使用https://start.aliyun.com阿里云的镜像和脚手架（一开始第二步用官网生成的springboot包没好使，报错连接到仓库超时，后来想着用阿里的仓库试试也没弄成功，最后重新安装了maven，又使用官网的，自动下载成功了。。）

2.新建模块，创建Maven模块

（从gitee上拉取的项目，要先配置maven，然后添加成maven项目，之后会自动下载各种包，下载之后就能识别启动类）

新建项目：

springbootdemo模块下src和pom都删除，导入第一步新建的springboot项目

直接将src和pom都复制到springbootdemo下即可

复制后maven会自动下载依赖，如果没下载可以重新开启idea，或手动刷新Maven，下载依赖

3. 项目结构优化，vue和java区分，新建文件夹取名vue，将原路径下截图文件都剪切到vue中

修改vue启动配置

4.配置服务端口，连接mysql，mysql需要自行安装，本人安装后直接使用idea连接数据库创建的表

server.port=9090
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/springboot-vue?allowMultiQueries=true&useSSL=false&useUnicode=true&characterEncoding=UTF-8&autoReconnect=true&zeroDateTimeBehavior=convertToNull&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=GMT%2B8&nullCatalogMeansCurrent=true
spring.datasource.username=root
spring.datasource.password=Abcd@123

创建user表
create table user

(
    id        int          not null        primary key,
    username  varchar(255) null,
    password  varchar(255) null,
    nick_name varchar(255) null,
    age       int          null,
    sex       varchar(255) null,
    address   varchar(255) null
)
    comment '用户信息表';

端口和mysql配置后可以正常启动java服务

效果

5.pom里增加mybatisplus依赖

在官网https://baomidou.com/里查找mybatisplus依赖

在官网https://baomidou.com/里查找分页插件配置方法

导入依赖快捷键Alt+Enter

创建mapper包，添加扫描

@MapperScan("com.example.demo.mapper")

6.封装一个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<T> result = new Result<>(data);
        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;
    }
}

7.创建接口UserController，UserController中使用UserMapper和User

效果：

报错，mybatisplus和mybatis兼容版本问题，网上查找没有直接告诉如何解决的。

想到自己到maven仓库看看版本匹配一下，maven仓库地址：https://mvnrepository.com/artifact/com.baomidou/mybatis-plus-boot-starter，进入mvn仓库查看mybatisplus和mybatis的版本和时间

mybatis是用的最新版，mybatisplus也用的最新版，mybatis时间是2023年，mybatisplus时间是2024年，和mybatis相差较远，将mybatisplus改成2023年用的比较多的5.5.5，刷新maven，启动成功，解决报错

效果：

8.改造HomeView，表格字段与后台user表对应，新增按钮弹出dialog，dialog里是个form，提交后传数据到后台（代码没写完，还不全，暂时是这些，后边还要继续改造补充）

<template>
  <div style="width: 100%; padding: 10px">
<!--    功能区-->
    <div style="margin: 10px 0">
      <el-button type="primary" @click="add()">新增</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="primary">导出</el-button>
    </div>
<!--    搜索区-->
    <div style="margin: 10px 0">
      <el-input v-model="search" placeholder="请输入关键字" style="width: 20%"></el-input>
      <el-button type="primary" style="margin-left: 10px">查询</el-button>
    </div>
    <el-table :data="tableData" border stripe>
      <el-table-column prop="id" label="ID"
        sortable
      />
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="nickName" label="昵称" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="sex" label="性别" />
      <el-table-column prop="address" label="地址" />
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default>
          <el-button link type="primary" size="small" @click="handleEdit">
            编辑
          </el-button>
          <el-button link type="primary" size="small">查看</el-button>
          <el-popconfirm title="确认删除吗?">
            <template #reference>
              <el-button link type="primary" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 10px 0">
      <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[10, 20, 50, 100]"
          :size="size"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog v-model="dialogVisible" title="提示" width="30%">
      <el-form :model="form" style="width: 600px">
        <el-form-item label="用户名">
          <el-input style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="radio1" class="ml-4">
            <el-radio value="1" size="large">男</el-radio>
            <el-radio value="2" size="large">女</el-radio>
            <el-radio value="3" size="large">未知</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="地址">
          <el-input type="textarea" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save()">
            确 定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
  components: {

  },
  data() {
    return {
      form:{},
      dialogVisible: false,
      search: '',
      currentPage4: 1,
      pageSize4: 10,
      total: 10,
      tableData: [

      ]
    }
  },
  methods: {
    add(){
      this.dialogVisible = true
      this.form = {}
    },
    save(){

    },
    handleEdit() {

    },
    handleSizeChange() {

    },
    handleCurrentChange() {

    }
  }
}

</script>