SpringBoot+Vue 04--SpringBoot增删改查

建立Sringboot项目

进入网站https://start.spring.io/






把原来自带的src、pom.xml文件换成刚刚在官网上下载的压缩包里面的src和pom.xml

更改项目结构

此时启动Vue项目，结果OK

说明这个文件夹布局没有问题。

建立数据库

主键自增

在application.properties中配置启动端口

因为前端启动端口是8080，后端默认端口也是8080.
把后端改成9090.

server.port=9090
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url= jdbc:mysql://localhost:3306/springboot-vue?useUnicode=true&characterEncoding=utf-8&allowMultiQueries=true&useSSL=false&serverTimezone=GMT%2B8
spring.datasource.username=root
spring.datasource.password=mysql2021

启动项目

写接口（user）

建立common文件夹，放常用配置类

引入mybatisplus包
打开官网：https://baomidou.com/
找到依赖

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

放到pom.xml文件里面
MybatisPlusConfig.java

Result.java
返回前台数据的包装类

code 告诉前台返回的数据是成功还是失败，非0就是失败

新建controller

User

UserController

UserMapper接口

再回到UserController
一般来说是controller引入service类，service引入mapper，这里不规范地简化一下。
通过UserMApper来进行数据库的新增

完善前台

新增操作

需要打开弹窗，在弹窗里面操作（dialog对话框+form表单）
别忘记定义el+里面的变量






保存到后台：

axios使用之前要先把它引进来
view→tool window→Terminal打开idea终端

-S 本地安装
安装好了之后在request.js中引入
https://blog.csdn.net/xqnode/article/details/118325868?spm=1001.2014.3001.5502

ip地址、接口、传参

请求后台接口

启动前端和后端
fn+f12 快捷键


解决：
改成这个：


出现跨域提示，表示8081没法访问9090

建立配置文件：

如果配置文件没有生效就重启一遍serve

别忘前端和后端都要启动（前端serve，后端debug）
成功接收到从前端传来的数据

下面把数据插入到数据库中

点这个把debug放行
进去了！！！！！！！！！！！！！！！！！！！！！！！！！！！！

但是昵称没写进来，可能是因为字段没有对应上：User里面忘写了


OK
设置默认密码：

因为没有给idea安装lombox插件：
https://blog.csdn.net/weixin_40052304/article/details/116653287

把后端的数据拿到前端的表格里展示（渲染）

写接口 分页查询
之前写的分页查询配置类就可以派上用场了↓

UserController：
添加Hutool组件

<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.8.0.M3</version>
</dependency>

写完之后需要对后台进行重启，访问网页查看(http://localhost:9090/user)

注意！！
数据库里面的下划线一定要跟User里面的驼峰对应！！！（把表单里面的也改改）


把数据放到表里：

balabala把前面表单里相关的一些改一改


出来了！！！
写上后台返回的总条数

查询

输入框清除按钮

编辑

弹窗，把要编辑的数据赋到弹窗里

因为弹窗和form绑定了，所以给form赋值就行
对表格里面的对象进行深拷贝，让这个form变为独立的一项，跟之前表格里的行对象是完全隔离开的，避免编辑到一半点取消之后对表格里面的数据造成影响。


如果点了“确定”，post就会报错500（主键重复）
所以就不能继续用原来新增的那个Mapper了，写一个新的：

写完之后别忘重启后端
因为弹窗的提交还是save方法，所以在save方法里面改一下，并且通过弹窗提示是否成功

分页、跳页

但是请求里面的参数并未改变

可以去element+官网去看一看会改变哪些参数

对这两项数据进行修改

删除

成功取出了要删除的数据的id，但是点击确认之后并没有删除数据，因为删除函数是写在“删除”按钮上的，不是写在二次确认函数上的。


点击“删除”时没有取到id，点击“确认”时成功取到id

下面就可以把id传到后台，后台再利用id将数据删除