Springboot+vue 增删改查的小项目

Springboot+vue 增删改查的小项目

文章目录

前言

源码

gitee地址:https://gitee.com/lmy_020802/Lmyfirst

1. 介绍

Springboot+vue 前后端分离的增删改查小项目

2.核心功能

实现前后端交互 连接数据库实现增删改查

3.软件架构

前端:Vue 2.0+ElementUI+JS(JQuery)
后端:SpringBoot+SpringBoot JPA
数据库: MySql(8.0.26)
JDK:1.8

3.1 目录结构

在这里插入图片描述

4.项目流程

4.1导入工具类

Result工具类(后端响应结果给前端的工具类)
在这里插入图片描述

WebMvcConfig工具类(解决前后端跨域工具类)

在这里插入图片描述

4.2配置文件

连接数据库的配置文件
在这里插入图片描述

4.3创建数据库

4.3表结构

在这里插入图片描述

4.3表数据

在这里插入图片描述

4.4功能实现

4.4.1 定义一个实体类User(和数据库相对应)

在这里插入图片描述

4.4.2 定义Dao(Mapper层)

在这里插入图片描述

4.4.3 定义增删改查的方法(Service层)

在这里插入图片描述

4.4.4 定义接口(Controller层)

在这里插入图片描述

4.5前端页面

4.5.1 导入Jquery,Vue,ElementUI

注意:css样式引入一般都在开头
js样式引入一般都在结尾
在这里插入图片描述在这里插入图片描述

4.5.2 前端UI 绑定点击事件

ElementUI官网:

https://element.eleme.cn/#/zh-CN/component/table
在这里插入图片描述

代码实现:

在这里插入图片描述

5.运行结果

界面

在这里插入图片描述

新增功能

在这里插入图片描述
在这里插入图片描述

修改功能

在这里插入图片描述

在这里插入图片描述

删除功能

在这里插入图片描述

分页

在这里插入图片描述
在这里插入图片描述

总结

提示：这里对文章进行总结：

第一次自己实现CRUD 加上页面 对基础的CRUD小项目有了一定的认知还会继续努力

版权声明：本文为m0_63642902原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。