SpringBoot实现简单增删改查页面
SpingBoot简单增删改查
·
springboot文件目录
1.创建maven项目
勾选springWeb mysql 坐标
2.pom文件添加依赖
Lombok，提供注解，简化实体类开发（lombok版本由SpringBoot提供，无需指定版本）
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>常用注解@Data 当前实体类设置对应的get/set方法，toString方法，hashCode方法，equals方法等
设置mybatis-plus依赖
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.3</version>
</dependency>设置Druid依赖
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
<version>1.2.6</version>
</dependency>3.配置yml依赖
设置端口 数据源 id生成策略使用数据库自增策略 开启mybatis-plus日志
#设置端口号
server:
port: 80
#设置数据源
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost/数据库名?serverTimezone=UTC
username: 账号
password: 密码
#设置id自增长策略
mybatis-plus:
global-config:
db-config:
id-type: auto
#开启mybatis-plus日志
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl4.编写实体类
@Data
public class User {
private int id;
private String name;
private int age;
private String email;
}5.持久层开发
@Mapper
public interface UserDao extends BaseMapper<User> {
}数据层接口与映射配置，继承BaseMapper
BaseMapper 提供基本增删改查等功能
设置分页功能 需要定义拦截器
@Configuration
public class MyConfig {
@Configuration
public class MpConfig {
@Bean
public MybatisPlusInterceptor mpInterceptor() {
//1.定义Mp拦截器
MybatisPlusInterceptor mpInterceptor = new MybatisPlusInterceptor();
//2.添加具体的拦截器
mpInterceptor.addInnerInterceptor(new PaginationInnerInterceptor());
return mpInterceptor;
}
}
}6.业务层开发
业务层接口需要继承ISrevice
public interface UserService extends IService<User> {
}业务层类需要继承ServiceImpl和实现UserService
@Service
public class UserSercieImpl extends ServiceImpl<UserDao, User> implements UserService {
}IService的配合数据层BaseMapper和实现类中ServiceImpl一起使用
7.控制层开发
为实现前后端数据格式统一 设置表现层模型类
@Data
public class R {
private Boolean flag;
private Object data;
public R(){
}
public R(Boolean flag){
this.flag = flag;
}
public R(Boolean flag,Object data){
this.flag = flag;
this.data = data;
}
}表现层需要功能 查询所有 增加 删除 修改 分页查询 根据id查询
@RestController
@RequestMapping("/users")
public class UserController {
@Autowired
private UserService userService;
//查询列表
@GetMapping
public R getList(){
return new R(true,userService.list());
}
//分页查询
@GetMapping("{currentPage}/{sizePage}")
public R getPage(@PathVariable Integer currentPage,@PathVariable Integer sizePage,User user){
return new R(true,userService.getPage(currentPage,sizePage,user));
}
//根据id查询
@GetMapping("{id}")
public R getById(@PathVariable Integer id){
return new R(true,userService.getById(id));
}
//增加
@PostMapping
public R saveUser(@RequestBody User user){
return new R(userService.save(user));
}
//删除
@DeleteMapping("{id}")
public R saveUser(@PathVariable Integer id){
return new R(userService.removeById(id));
}
//修改
@PutMapping
public R updateUser(@RequestBody User user){
return new R(userService.updateById(user));
}
}8.编写前端
前端需要先引入
<!DOCTYPE html>
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>个人管理界面</title>
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<!-- 引入样式 -->
<link rel="stylesheet" href="../plugins/elementui/index.css">
<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/style.css">
</head>
<body class="hold-transition">
<div id="app">
<div class="content-header">
<h1>个人信息管理</h1>
</div>
<div class="app-container">
<div class="box">
<div class="filter-container">
<el-input placeholder="姓名" v-model="pagination.name" style="width: 200px;" class="filter-item"></el-input>
<el-input placeholder="邮箱" v-model="pagination.email" style="width: 200px;" class="filter-item"></el-input>
<el-button @click="getAll()" class="dalfBut">查询</el-button>
<el-button type="primary" class="butT" @click="handleCreate()">添加</el-button>
</div>
<el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
<el-table-column type="index" align="center" label="序号"></el-table-column>
<el-table-column prop="name" label="姓名" align="center"></el-table-column>
<el-table-column prop="age" label="年龄" align="center"></el-table-column>
<el-table-column prop="email" label="邮箱" align="center"></el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
<el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<div class="pagination-container">
<el-pagination
class="pagiantion"
@current-change="handleCurrentChange"
:current-page="pagination.currentPage"
:page-size="pagination.pageSize"
layout="total, prev, pager, next, jumper"
:total="pagination.total">
</el-pagination>
</div>
<!-- 新增标签弹层 -->
<div class="add-form">
<el-dialog title="新增信息" :visible.sync="dialogFormVisible">
<el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
<el-row>
<el-col :span="20">
<el-form-item label="姓名" prop="name">
<el-input v-model="formData.name"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="20">
<el-form-item label="年龄" prop="age">
<el-input v-model="formData.age"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="20">
<el-form-item label="邮箱">
<el-input v-model="formData.email"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel()">取消</el-button>
<el-button type="primary" @click="handleAdd()">确定</el-button>
</div>
</el-dialog>
</div>
<!-- 编辑标签弹层 -->
<div class="add-form">
<el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">
<el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
<el-row>
<el-col :span="20">
<el-form-item label="姓名" prop="name">
<el-input v-model="formData.name"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="年龄" prop="age">
<el-input v-model="formData.age"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="20">
<el-form-item label="邮箱">
<el-input v-model="formData.email" ></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel()">取消</el-button>
<el-button type="primary" @click="handleEdit()">确定</el-button>
</div>
</el-dialog>
</div>
</div>
</div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
var vue = new Vue({
el: '#app',
data:{
dataList: [],//当前页要展示的列表数据
dialogFormVisible: false,//添加表单是否可见
dialogFormVisible4Edit:false,//编辑表单是否可见
formData: {},//表单数据
rules: {//校验规则
type: [{ required: true, message: '姓名为必填项', trigger: 'blur' }],
name: [{ required: true, message: '年龄为必填项', trigger: 'blur' }]
},
pagination: {//分页相关模型数据
currentPage: 1,//当前页码
pageSize:5,//每页显示的记录数
total:0,//总记录数
name: "",
age: "",
email: ""
}
},
//钩子函数，VUE对象初始化完成后自动执行
created() {
//调用查询全部数据的操作
this.getAll();
},
methods: {
//列表
// getAll() {
// //发送异步请求
// axios.get("/books").then((res)=>{
// // console.log(res.data);
// this.dataList = res.data.data;
// });
// },
//分页查询
getAll() {
//组织参数，拼接url请求地址
// console.log(this.pagination.type);
param = "?name="+this.pagination.name;
param +="&age="+this.pagination.age;
param +="&email="+this.pagination.email;
// console.log(param);
//发送异步请求
axios.get("/users/"+this.pagination.currentPage+"/"+this.pagination.pageSize+param).then((res)=>{
this.pagination.pageSize = res.data.data.size;
this.pagination.currentPage = res.data.data.current;
this.pagination.total = res.data.data.total;
this.dataList = res.data.data.records;
});
},
//切换页码
handleCurrentChange(currentPage) {
//修改页码值为当前选中的页码值
this.pagination.currentPage = currentPage;
//执行查询
this.getAll();
},
//弹出添加窗口
handleCreate() {
this.dialogFormVisible = true;
this.resetForm();
},
//重置表单
resetForm() {
this.formData = {};
},
//添加
handleAdd () {
axios.post("/users",this.formData).then((res)=>{
//判断当前操作是否成功
if(res.data.flag){
//1.关闭弹层
this.dialogFormVisible = false;
this.$message.success(res.data.msg);
}else{
this.$message.error(res.data.msg);
}
}).finally(()=>{
//2.重新加载数据
this.getAll();
});
},
//取消
cancel(){
this.dialogFormVisible = false;
this.dialogFormVisible4Edit = false;
this.$message.info("当前操作取消");
},
// 删除
handleDelete(row) {
// console.log(row);
this.$confirm("此操作永久删除当前信息，是否继续？","提示",{type:"info"}).then(()=>{
axios.delete("/users/"+row.id).then((res)=>{
if(res.data.flag){
this.$message.success("删除成功");
}else{
this.$message.error("数据同步失败，自动刷新");
}
}).finally(()=>{
//2.重新加载数据
this.getAll();
});
}).catch(()=>{
this.$message.info("取消操作");
});
},
//弹出编辑窗口
handleUpdate(row) {
axios.get("/users/"+row.id).then((res)=>{
console.log(res.data.data);
console.log(res.data);
if(res.data.flag && res.data.data != null ){
this.dialogFormVisible4Edit = true;
this.formData = res.data.data;
}else{
this.$message.error("数据同步失败，自动刷新");
}
}).finally(()=>{
//2.重新加载数据
this.getAll();
});
},
//修改
handleEdit() {
axios.put("/users",this.formData).then((res)=>{
//判断当前操作是否成功
if(res.data.flag){
//1.关闭弹层
this.dialogFormVisible4Edit = false;
this.$message.success("修改成功");
}else{
this.$message.error("修改失败");
}
}).finally(()=>{
//2.重新加载数据
this.getAll();
});
},
//条件查询
}
})
</script>
</html>
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
9
0- 0
已为社区贡献1条内容
所有评论(0)