通用后台管理系统
该系统主要结合
Element
组件编辑前端,后端实现业务逻辑,组成一个简单的前后端分离项目。
该部分主要介绍数据的增删查改功能的实现
介绍
具体包含新增数据、编辑数据、删除数据、搜索数据、分页查询5个功能。(分页通过后端接口实现)前端页面如下:
数据包含字段:姓名
、年龄
、性别
、出生日期
、地址
对应数据库字段name
、sex
、age
、birthdate
、addr
前端部分
用户表单信息
<el-form :rules="rules" :inline="true" ref="form" :model="form" label-width="80px">
<el-form-item label="姓名" prop="name">
<el-input placeholder="请输入姓名" v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input placeholder="请输入年龄" v-model="form.age"></el-input>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-select v-model="form.sex" placeholder="请选择">
<el-option label="男" :value="1"></el-option>
<el-option label="女" :value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="出生日期" prop="birthdate">
<el-col>
<el-date-picker type="date" placeholder="选择日期" v-model="form.birthdate" value-format="yyyy-MM-dd"
style="width: 100%;"></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="地址" prop="addr">
<el-input placeholder="请输入地址" v-model="form.addr"></el-input>
</el-form-item>
</el-form>
rules
对象用来提示和检验输入框内容是否符合标准
rules: {
name: [
{
required: true, message: '请输入姓名', trigger: 'blur'},
{
min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
],
age: [
{
required: true, message: '请输入年龄', trigger: 'blur'},
// {min: 1, max: 3, message: '长度在 1 到 3 个字符', trigger: 'blur'} // 验证存在一个bug
],
birthdate: [
{
type: 'string', required: true, message: '请选择日期', trigger: 'change'}
],
sex: [
{
required: true, message: '请选择性别', trigger: 'blur'}
],
addr: [
{
required: true, message: '请输入地址', trigger: 'blur'}
],
},
提交用户表单方法
submit() {
this.$refs.form.validate((valid) => {
if (valid) {
// 后续对表单数据的处理
if (this.modelType === 0) {
addUser(this.form).then(() => {
// 重新获取列表数据
this.getList()
})
} else {
editUser(this.form).then(() => {
this.getList()
})
}
console.log(this.form, 'form')
// 清空表单数据
this.$refs.form.resetFields()
this.dialogVisible = false
this.$message({
type: 'success',
message: '添加成功'
});
} else {
return false
}
})
},
获取列表数据
// 获取列表的数据
getList() {
getUser({
params: {
...this.userForm, ...this.pageData}}).then(({
data}) => {
// console.log(data.data)
this.tableData = data.data
})
// 用来分页使用
getUserCount().then(({
data}) => {
this.total = data.data.length
})
},
弹窗关闭时,清空表单信息
// 弹窗关闭的时候
handleClose() {
this.$refs.form.resetFields()
this.dialogVisible = false
},
编辑功能
handleEdit(row) {
this.modelType = 1
this.dialogVisible = true
// 需要对当前数据进行深拷贝
this.form = JSON.parse(JSON.stringify(row))
},
搜索按钮
// 列表的查询
onSubmit() {
this.getList()
}
页面
<template>
<div class="manage">
<el-dialog
title="新增用户"
:visible.sync="dialogVisible"
:append-to-body='true'
:before-close="handleClose"
width="50%">
<!--用户的表单信息-->
<el-form :rules="rules" :inline="true" ref="form" :model="form" label-width="80px">
<el-form-item label="姓名" prop="name">
<el-input placeholder="请输入姓名" v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input placeholder="请输入年龄" v-model="form.age"></el-input>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-select v-model="form.sex" placeholder="请选择">
<el-option label="男" :value="1"></el-option>
<el-option label="女" :value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="出生日期" prop="birthdate">
<el-col>
<el-date-picker type="date" placeholder="选择日期" v-model="form.birthdate" value-format="yyyy-MM-dd"
style="width: 100%;"></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="地址" prop="addr">
<el-input placeholder="请输入地址" v-model="form.addr"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="submit">确 定</el-button>
</span>
</el-dialog>
<div class="manage-header">
<el-button @click="handleAdd" type="primary"> +新增</el-button>
<!--form搜索区域-->
<el-form :model="userForm" :inline="true">
<el-form-item>
<el-input placeholder="请输入搜索内容" v-model="userForm.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">搜索</el-button>
</el-form-item>
</el-form>
</div>
<div class="common-table">
<el-table
:data="tableData"
height="95%"
stripe
style="width: 100%; margin-top: 10px">
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="age"
label="年龄">
</el-table-column>
<el-table-column
prop="sex"
label="性别">
</el-table-column>
<el-table-column
prop="birthdate"
label="出生日期">
</el-table-column>
<el-table-column
prop="addr"
label="地址">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.row)">编辑
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="pager">
<el-pagination
layout="prev, pager, next"
:total=total
:page-size=pageData.limit
:page-sizes="[5,10,15,20]"
@current-change="handlePage">
</el-pagination>
</div>
</div>
</div>
</template>
后端部分
前端使用到的接口
import {getUser, addUser, deleteUser, editUser, getUserCount} from '@/api'
Controller层
package com.example.generalback.controller;
import com.example.generalback.model.entity.People;
import com.example.generalback.service.UserService;
import com.example.generalback.util.ResultHelper;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
@RequestMapping("/user")
@RestController
@Slf4j
public class UserController {
@Resource
private UserService userService;
/**
* 获取用户数量
* @return 用户数量的结果
*/
@GetMapping("/getUserCount")
public ResultHelper getUserCount(){
List<People> res = userService.getUserList();
if (res.size() > 0) return ResultHelper.success(res);
else return ResultHelper.fail("获取用户列表失败");
}
/**
* 获取用户列表
* @param curPage 当前页
* @param limitPage 每页数量
* @return 用户列表的结果
*/
@GetMapping("/getUser")
public ResultHelper selectFindBySql(@RequestParam(value = "name", required = false) String name, @RequestParam(value = "page", required = false) Integer curPage, @RequestParam(value = "limit", required = false) Integer limitPage) {
List<People> list;
if (name.equals("")) list = userService.selectUserBySql(curPage, limitPage);
else list = userService.selectUserByName(name);
if (list == null) {
return ResultHelper.fail("获取用户列表失败");
} else {
return ResultHelper.success(list);
}
}
/**
* 添加用户
* @param people
* @return
*/
@PostMapping("/addUser")
public ResultHelper addUser(@RequestBody People people) {
int res = userService.addUser(people);
if (res == 1) {
return ResultHelper.success("添加用户成功");
} else {
return ResultHelper.fail("添加用户失败");
}
}
/**
* 删除用户
* @param people
* @return
*/
@PostMapping("/deleteUser")
public ResultHelper deleteUser(@RequestBody People people) {
int res = userService.deleteUser(people.getId());
if (res == 1) {
return ResultHelper.success("添加用户成功");
} else {
return ResultHelper.fail("添加用户失败");
}
}
/**
* 编辑用户
* @param people
* @return
*/
@PostMapping("/updateUser")
public ResultHelper updateUser(@RequestBody People people) {
int res = userService.updateUser(people);
if (res == 1) {
return ResultHelper.success("编辑用户成功");
} else {
return ResultHelper.fail("编辑用户失败");
}
}
}
service层
package com.example.generalback.service.Impl;
import com.example.generalback.mapper.UserMapper;
import com.example.generalback.model.entity.People;
import com.example.generalback.service.UserService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Objects;
@Service
@Slf4j
public class UserServiceImpl implements UserService {
@Resource
private UserMapper userMapper;
@Override
public List<People> getUserList() {
return userMapper.getUserList();
}
public int selectCount() {
return userMapper.selectCount();
}
@Override
public List<People> selectUserBySql(int curPage, int limitPage) {
Map<String, Object> map = new HashMap<>();
int startCurrentPage = (curPage - 1) * limitPage; //从第几个数据开始
int count = selectCount();
log.info("总数据:" + count);
int totalPage = count / limitPage + 1; //总页数
log.info("总页数:" + totalPage);
if (curPage > totalPage || curPage <= 0) {
return null;
} else {
map.put("curPage", startCurrentPage);
map.put("limitPage", limitPage);
return userMapper.selectBySql(map);
}
}
@Override
public List<People> selectUserByName(String name) {
return userMapper.selectByName(name);
}
@Override
public Integer addUser(People people) {
Map<String, Object> map = new HashMap<>();
map.put("name", people.getName());
String sex = Objects.equals(people.getSex(), "1") ? "男" : "女";
map.put("sex", sex);
map.put("age", people.getAge());
map.put("birthdate", people.getBirthdate());
map.put("addr", people.getAddr());
return userMapper.addUser(map);
}
@Override
public Integer deleteUser(Integer id) {
return userMapper.deleteUser(id);
}
@Override
public Integer updateUser(People people) {
Map<String, Object> map = new HashMap<>();
map.put("id", people.getId());
map.put("name", people.getName());
String sex = Objects.equals(people.getSex(), "1") ? "男" : "女";
map.put("sex", sex);
map.put("age", people.getAge());
map.put("birthdate", people.getBirthdate());
map.put("addr", people.getAddr());
return userMapper.updateUser(map);
}
}
mapper层
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.generalback.mapper.UserMapper">
<select id="getUserList" resultType="com.example.generalback.model.entity.People">
SELECT * FROM people;
</select>
<select id="selectCount" resultType="integer">
select count(*) from people;
</select>
<select id="selectBySql" parameterType="map" resultType="com.example.generalback.model.entity.People">
select * from people limit #{curPage} , #{limitPage}
</select>
<select id="selectByName" parameterType="map" resultType="com.example.generalback.model.entity.People">
select * from people where name regexp #{name};
</select>
<insert id="addUser">
insert into people(name,sex,age,birthdate,addr)
values (#{name},#{sex},#{age},#{birthdate},#{addr})
</insert>
<delete id="deleteUser">
delete from people where id=#{id}
</delete>
<update id="updateUser">
update people set name=#{name},sex=#{sex},age=#{age},birthdate=#{birthdate},addr=#{addr} where id=#{id}
</update>
</mapper>
People实体,对应数据库中的people表
package com.example.generalback.model.entity;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
@TableName(value = "people")
@Data
public class People {
private Integer id;
private String name;
private Integer age;
private String birthdate;
private String sex;
private String addr;
}