vue+elementui+pagehelper分页完成增删改查

效果图1：

效果图2：
后端pom文件：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.fh</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <spring-boot.version>2.3.7.RELEASE</spring-boot.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.apache.velocity</groupId>
            <artifactId>velocity-engine-core</artifactId>
            <version>2.2</version>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.3.2</version>
        </dependency>
        <dependency>
            <groupId>org.freemarker</groupId>
            <artifactId>freemarker</artifactId>
            <version>2.3.31</version>
        </dependency>
        <dependency>
            <groupId>com.ibeetl</groupId>
            <artifactId>beetl</artifactId>
            <version>3.3.2.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
            <version>2.3.4.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <version>2.3.4.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.1</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.6</version>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.12</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>


        <!--pageHelper分页-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.13</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-dependencies</artifactId>
                <version>${
    
    spring-boot.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <encoding>UTF-8</encoding>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.3.7.RELEASE</version>
                <configuration>
                    <mainClass>com.fh.DemoApplication</mainClass>
                </configuration>
                <executions>
                    <execution>
                        <id>repackage</id>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>

在Controller控制器代码

package com.dd.controller;


import com.dd.entity.Drug;
import com.dd.service.DrugService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("/drug")
@CrossOrigin
public class DrugController {
    
    


    @Autowired
    private DrugService drugService;

    //查询数据
    @RequestMapping("queryDrug")
    public PageInfo queryDrug(Integer currentPage, Integer pageSize) {
    
    
        //调用PageHelper.startPage()
      PageHelper.startPage(currentPage,pageSize);
        //查询数据
       List<Drug>drugList=drugService.queryDrug();
        //将数据返回前端
       PageInfo pageInfo=new PageInfo(drugList);
       return pageInfo;
//        return drugService.queryDrug();
    }


    //新增
    @RequestMapping("addDrug")
    public void addDrug(Drug drug) {
    
    

        drugService.addDrug(drug);
    }


    //删除
    @RequestMapping("deleteDrug")
    public void deleteDrug(Integer id) {
    
    
        drugService.deleteDrug(id);
    }

    //回显
    @RequestMapping("queryDurgById")
    public Drug queryDurgById(Drug drug) {
    
    

        return drugService.queryDurgById(drug);

    }

    //修改
    @RequestMapping("updateDrug")
    public void updateDrug(Drug drug) {
    
    
        drugService.updateDrug(drug);
    }





}

在ServiceImpl中代码：修改复选框是分割一下

@Override
    public void updateDrug(Drug drug) {
    
    
        if(StringUtils.isNotBlank(drug.getPerson())){
    
    
            String[] split = drug.getPerson().split(",");
            for (String arr : split) {
    
    
                drug.setPerson(arr);

            }
        }
        drugMapper.updateById(drug);
    }

App.Vue代码：

<template>
  <div id="app">
    <!--操作按钮-->
    <el-button type="primary" round @click="openAdd('form')" icon="el-icon-circle-plus-outline"> 新增</el-button>
    <el-button type="danger"   round icon="el-icon-delete" @click="openAelete(multipleSelection)" :disabled="this.multipleSelection.length === 0">批量删除</el-button>

    <!--
    查询数据列表
    -->
    <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%"
              @selection-change="handleSelectionChange" v-show="tableData.length>0">
      <el-table-column type="selection" width="55" fixed label="#"></el-table-column>
      <el-table-column fixed prop="id"  label="序号"  >
        <!--如果想要对当前字段进行转换，需要用到template-->
        <template slot-scope="scope">{
    
    {
    
    scope.$index+1}}</template>
      </el-table-column>
      <el-table-column prop="username" label="用户名称"  width="120"><template slot-scope="scope">{
    
    {
    
     scope.row.username }}</template></el-table-column>
      <el-table-column prop="realName" label="真实姓名"  width="120"><template slot-scope="scope">{
    
    {
    
     scope.row.userPrice }}</template></el-table-column>
      <el-table-column prop="sex" label="性别"   show-overflow-tooltip width="100">
        <template slot-scope="scope">{
    
    {
    
    scope.row.sex == null ? "" : scope.row.sex == 1?"男":"女"}}</template>
      </el-table-column>
      <el-table-column prop="hobby" label="爱好"   show-overflow-tooltip width="210">
        <template slot-scope="scope">{
    
    {
    
    scope.row.hobby == null?"":scope.row.hobby.toString().replace("1","唱歌").replace("2","吃饭").replace("3","游泳").replace("4","健身").replace("5","跑步").replace("6","玩手机")}}</template>
      </el-table-column>
      <el-table-column prop="areaName" label="地区"  width="120"></el-table-column>
      <el-table-column prop="birthday" label="出生时间"  width="200"><template slot-scope="scope">{
    
    {
    
     scope.row.birthday }}</template></el-table-column>
      <el-table-column prop="createtime" label="创建时间"  width="200"><template slot-scope="scope">{
    
    {
    
     scope.row.createtime }}</template></el-table-column>
      <el-table-column prop="updatetime" label="修改时间"  width="200" ><template slot-scope="scope">{
    
    {
    
     scope.row.updatetime }}</template></el-table-column>
      <el-table-column prop="userimg" label="图片" show-overflow-tooltip >
        <template slot-scope="scope" ><img :src="scope.row.userimg" width="50" ></template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button  type="text" size="small" @click="del(scope.row)">删除</el-button>
          <el-button type="text" size="small" @click="upda(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


    <!--新增表单-->

    <el-dialog   title="用户数据" :visible.sync="dialogFormVisible" @close="close1('form')">
      <el-form ref="form" :rules="rules" :model="form" label-width="80px"  >
        <el-form-item label="用户名称"   prop="username" style="width: 400px"><el-input   v-model="form.username"></el-input></el-form-item>
        <el-form-item label="真实姓名"  prop="realName" style="width: 400px"><el-input  v-model="form.realName"></el-input></el-form-item>
        <el-form-item label="性别"  prop="sex" style="width: 200px"><el-radio-group v-model="form.sex">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
        </el-form-item>

        <el-form-item label="爱好" prop="hobby" style="width: 560px">
          <el-checkbox-group v-model="form.hobby">
            <el-checkbox label="1" name="hobby">唱歌</el-checkbox>
            <el-checkbox label="2" name="hobby">吃饭</el-checkbox>
            <el-checkbox label="3" name="hobby">游泳</el-checkbox>
            <el-checkbox label="4" name="hobby">健身</el-checkbox>
            <el-checkbox label="5" name="hobby">跑步</el-checkbox>
            <el-checkbox label="6" name="hobby">玩手机</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="出生地区" prop="areaId" style="width: 300px">
          <el-select v-model="form.areaId" placeholder="请选择地区">
            <el-option :label="area.areaName" :value="area.areaId" v-for="area in areaList"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="生产日期"  prop="birthday" style="width: 300px">
          <el-date-picker
            v-model="form.birthday" value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item  label="用户图片"    prop="imageUrl" style="width: 300px">
          <el-upload
            ref="upload"
            :on-success="handleAvatarSuccess"
            class="avatar-uploader"
            action="http://localhost:8080/file/uploadPhoto"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">

            <i v-else class="el-icon-plus avatar-uploader-icon"></i>

          </el-upload>
        </el-form-item>

        <el-form-item>
          <el-button v-if="aaa" type="primary" @click="add('form')">新增</el-button>
          <el-button v-if="bbb" type="primary" @click="update1('form')">修改</el-button>
          <el-button @click="cancel('form')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>



<script>
  export default {
    
    
    name:'App',
    created(){
    
    
      //初始化方法
      this.queryUser();
      this.queryArea();
    },
    data(){
    
    
      return {
    
    
       // token:localStorage.setItem("token"),
        fileList: [], //文件列表
        imageUrl:"",
        tableData:[],
        areaList:null,
        currentPage: 1, // 当前页数
        total:0, // 总页数
        pageSize:5, // 每页显示多少条
        brandList:null,
        //复选框默认
        multipleSelection: [],
        dialogFormVisible: false,
        form:{
    
    
          areaId:null,
          imageUrl:"",
          username:"",
          realName:"",
          sex:null,
          hobby:[],
          birthday:"",
          userimg:"",
          img:"" //用于删除老图片
        },

        aaa:true,
        bbb:false,
        rules: {
    
    
          username: [
            {
    
     required: true, message: '请输入用户名称', trigger: 'blur' },
            {
    
     min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          realName: [
            {
    
     required: true, message: '请输入真实名称', trigger: 'blur' },
            {
    
     min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          birthday: [
            {
    
    validator: this.birthday, required: true, message: '请选择日期', trigger: 'change' }
          ],
          hobby: [
            {
    
    type: 'array', required: true, message: '请至少选择一个', trigger: 'change' }
          ],
          sex: [
            {
    
     required: true, message: '请选择', trigger: 'change' }
          ]
        }
      }
    },
    methods:{
    
    

      //查询列表
      queryUser:function () {
    
    
        var _this = this;
        this.$axios.get("http://localhost:8080/user/users?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then(function (result) {
    
    
          _this.tableData = result.data.data.list;
          _this.total=result.data.data.total;
        })
      },
      //查询地区列表
      queryArea(){
    
    
        var _this = this;
        this.$axios.get("http://localhost:8080/area/areas").then(function (result) {
    
    
          _this.areaList = result.data.data;
        })
      },
      //新增
      add(form){
    
    
        var _this = this;
        _this.aaa=true;
        _this.bbb=false;
        this.$refs[form].validate((valid) => {
    
    
            if (valid) {
    
    

              this.form.hobby=this.form.hobby.toString();
              //this.$qs.stringify()如果$qs.stringify()方法点不出来，就安装qs命令  nqm install qs
              this.$axios.post("http://localhost:8080/user/users",this.$qs.stringify(this.form)).then(function () {
    
    
                _this.$message.success("新增成功")
                _this.dialogFormVisible=false;

                _this.queryUser();

              }).catch(function () {
    
    
                _this.$message.success("新增失败")
              })
            } else {
    
    
              return false;
            }
          }

        )
      }
      ,
      //新增弹框
      openAdd(form){
    
    

        this.dialogFormVisible=true;
      },
      //清空表单数据
      close1(form){
    
    
        this.$refs[form].resetFields()
        //清空图片数据
        this.imageUrl = "";
        this.form.username="";
        this.form.realName="";
        this.form.sex="";
        this.form.hobby="";
        this.form.birthday="";
        this.form.areaId="";


      },
      //弹框取消
      cancel: function (form) {
    
    
        this.dialogFormVisible = false;

        //清空图片数据
        this.imageUrl = "";
      },
      //回显
      upda(row) {
    
    
        var _this = this;
        _this.aaa=false;
        _this.bbb=true;

        //回显数据
        this.form=row;


        //回显复选框
        let arr=row.hobby.toString().split(",");

        this.form.hobby=arr;


        //回显图片
        this.imageUrl=row.userimg;

        //回显图片删除老图片
        this.form.img=row.userimg;

        //打开弹框
        _this.dialogFormVisible=true;


      },
      //修改
      update1:function (form) {
    
    
        var _this = this;
        this.$refs[form].validate((valid) => {
    
    
            if (valid) {
    
    

              this.form.hobby=this.form.hobby.toString();
              //this.$qs.stringify()如果$qs.stringify()方法点不出来，就安装qs命令  nqm install qs
              this.$axios.put("http://localhost:8080/user/users",this.$qs.stringify(this.form)).then(function () {
    
    
                _this.$message.success("修改成功")
                _this.queryUser();

                _this.dialogFormVisible=false;
              }).catch(function () {
    
    
                _this.$message.success("修改失败")
              })
            } else {
    
    
              return false;
            }
          }
        )
      }
      ,
      //删除
      del(row){
    
    
        var _this = this;
        var id=row.id;
        //删除图片
        var img=row.userimg;

        if (confirm("您确定要删除吗？")){
    
    
          this.$axios.delete("http://localhost:8080/user/users?id="+id+"&img="+img).then(function () {
    
    
            _this.$message.success("删除成功")
            // 删除最后一页数据跳转回上一页
            const totalPage = Math.ceil((_this.total  -1 ) / _this.pageSize) // 总页数
            _this.currentPage = _this.currentPage > totalPage ? totalPage : _this.currentPage
            _this.currentPage = _this.currentPage < 1 ? 1 : _this.currentPage

            _this.queryUser();
          }).catch(function () {
    
    
            _this.$message.success("删除失败")
          })
        }

      },

      //批量删除
      openAelete(row){
    
    
        var _this = this;
        var ids = [];
        var userimgs=[];
        row.forEach(element =>{
    
    
          ids.push(element.id);
          userimgs.push(element.userimg);
        })
        this.$confirm('确定删除这'+row.length+'条数据吗？','提示').then(() =>{
    
    
          this.$axios.post("http://localhost:8080/user/deleteBachUser?ids="+ids+"&userimgs="+userimgs.toString()).then(dara =>{
    
    
            _this.$message.success("删除成功")

            // 批量删除最后一页数据跳转回上一页
            const totalPage = Math.ceil((this.total - this.multipleSelection.length) / this.pageSize) // 剩余数据总页数
            this.currentPage = this.currentPage > totalPage ? totalPage : this.currentPage
            this.currentPage = this.currentPage < 1 ? 1 : this.currentPage
            _this.queryUser();
          })
        }).catch(()=>{
    
    
          _this.$message.success("删除失败")

        })

      },
      //文件上传服务端成功时的钩子
      handleAvatarSuccess(res, file) {
    
    
        //新增图片
        this.form.userimg=res.filePath;
        this.imageUrl = URL.createObjectURL(file.raw);

      },
      beforeAvatarUpload(file) {
    
    

        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
    
    
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
    
    
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      handleSelectionChange(val) {
    
    
        //被选中的行组成数组
        this.multipleSelection = val;


      }
      ,
      //每页条数
      handleSizeChange(val){
    
    
        this.pageSize=val;
        this.queryUser();
      },
      //当前页
      handleCurrentChange(val){
    
    
        this.currentPage=val;
        this.queryUser();
      },

    }
  }
</script>
<style>
  /* 解决element-ui的table表格控件表头与内容列不对齐问题 */
  .el-table th.gutter{
    
    
    display: table-cell!important;
  }
</style>
<style>
  .avatar-uploader .el-upload {
    
    
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    
    
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    
    
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    
    
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

main.js代码：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//引用
import axios from 'axios'
import VueAxios from 'vue-axios'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import QS from 'qs'

Vue.config.productionTip = false


Vue.prototype.$axios= axios
Vue.prototype.$qs= QS

//使用
Vue.use(VueAxios,axios)
Vue.use(ElementUI);

/* eslint-disable no-new */
new Vue({
    
    
  el: '#app',
  router,
  components: {
    
     App },
  template: '<App/>'
})