Front-end and back-end separation project—universal back-end management system (Vue + SpringBoot) [3]

Universal backend management system

This system mainly combinesElement component editing front-end and back-end to implement business logic, forming a simple front-end and back-end separation project.

This part mainly introduces the implementation of the function of adding, deleting, checking and modifying data.

introduce

Specifically includes 5 functions: adding data, editing data, deleting data, searching data, and paging query. (Paging is implemented through the back-end interface) The front-end page is as follows:

The data contains fields: 姓名, 年龄, < a i=4>, , correspond to database fields , , , , 性别出生日期地址namesexagebirthdateaddr

Front-end part

User form information

	  <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>

rulesThe object is used to prompt and check whether the content of the input box meets the standards.

	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 user form method

	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
        }
      })
    },

Get list data

	// 获取列表的数据
    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
      })
    },

When the pop-up window is closed, clear the form information

	// 弹窗关闭的时候
    handleClose() {
    
    
      this.$refs.form.resetFields()
      this.dialogVisible = false
    },

Edit function

	handleEdit(row) {
    
    
      this.modelType = 1
      this.dialogVisible = true
      // 需要对当前数据进行深拷贝
      this.form = JSON.parse(JSON.stringify(row))
    },

search button

	// 列表的查询
    onSubmit() {
    
    
      this.getList()
    }

page

<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>

backend part

Interface used by the front end
import {getUser, addUser, deleteUser, editUser, getUserCount} from '@/api'
Controller layer

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 layer

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 layer

<?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 entity, corresponding to the people table in the database

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;
}