Spring boot 入门(二):后台集成PageHelper插件,前端搭建环境，然后做对userinfo的增删改查

最新推荐文章于 2024-06-29 13:41:51 发布

小爱同学-Allen

最新推荐文章于 2024-06-29 13:41:51 发布

阅读量554

点赞数

分类专栏： springboot数据增删改查文章标签： vue java

本文链接：https://blog.csdn.net/qq_34595425/article/details/106584573

版权

springboot数据增删改查专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue 如何创建项目的环境依赖如下vue环境搭建

在本地创建个vue项目如下

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200606105758744.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTk1NDI1,size_16,color_FFFFFF,t_70

目录结构如下

在这里插入图片描述

打开项目，进入当前文件夹，输入npm i element-ui axios -S

elementui官网
在这里插入图片描述

在.src/main.js中添加如下

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false

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

把app.vue里面的图片删除

在这里插入图片描述

复制components下的HelloWorld.vue,名字为userinfo.vue，把里面的内容清空，引入axios依赖，并且测试下elementui有没有生效,userinfo.vue如下

<template>
  <div>
    <el-button>按钮</el-button>
  </div>
</template>

<script>
export default {
  name: 'userinfo',
  data () {
    return {
    }
  }
}
</script>

<style scoped>

</style>

打开router下面的index.js，添加userinfo的路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import UserInfo from '@/components/userinfo'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/helloWorld',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/',
      name: 'userInfo',
      component: UserInfo
    }

  ]
})

在控制台输入npm run dev，看到如下界面，说明前端环境搭建好了

在这里插入图片描述

我们从elementui里面去烤table的样式，然后通过axios去后台取数据，userinfo.vue代码如下

<template>
  <div class="userinfo">
    <div class="userinfo-div">userInfo信息管理
      <el-button size="mini" class="btn"
                 @click="openDialog" type="primary">添加</el-button></div>
    <el-table
      :data="tableData"
      stripe
      border
      style="width: 100%">
      <el-table-column
        prop="userid"
        label="id"
        align="center"
        width="">
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名"
        align="center"
        width="">
      </el-table-column>
      <el-table-column
        prop="phone"
        align="center"
        label="电话">
      </el-table-column>
      <el-table-column
        prop="sex"
        align="center"
        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>
</template>

<script>
  import axios from 'axios'
    export default {
        name: 'userinfo',
        data () {
            return {
                tableData: [],
            }
        },
        mounted(){
            this.getData()
        },
        methods:{
            handleEdit(val){

            },
            handleDelete(val){

            },
            openDialog(){

            },
            // 获取数据
            getData(){
                axios({
                    // 默认请求方式为get
                    method: 'get',
                    url: 'http://localhost:9000/user/findAll',
                    // 传递参数
                    data: {
                    },
                    // 设置请求头信息
                    headers: {
                    },
                    responseType: 'json'
                }).then(response => {
                    // 请求成功
                    this.tableData = response.data.data;
                }).catch(error => {
                    // 请求失败，
                    console.log(error);
                });
            }
        }
    }
</script>

<style scoped>
  .userinfo{
    padding: 2% 5%;
  }
  .userinfo-div{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    position:relative;
  }
  .btn{
    position: absolute;
    right:0px;
  }
</style>

在这里插入图片描述

看下界面没有数据，我们现在按F12看到浏览器报这个错误,这个是跨域问题，我们在后台加这个配置就行

在这里插入图片描述

@CrossOrigin(origins = “*”,maxAge = 3600)在controller里面加上这个配置

在这里插入图片描述

然后出来的界面是这样的

在这里插入图片描述

现在我们来做前后端的增加跟修改，删除，后端代码主要改service里面的services和Serviceimpl文件，还有controller下的UserController，文件如下

comtroller文件

package com.allen.controller;

import com.allen.pojo.UserInfo;
import com.allen.service.Services;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
// 跨域
@CrossOrigin(origins = "*", maxAge = 3600)
@RequestMapping(value = {"/user"})
public class UserController {
    @Autowired
    private Services services;

    // 查询
    @RequestMapping(value = {"/findAll"}, produces = {"application/json;charset=UTF-8"}, method = RequestMethod.GET)
    public List<UserInfo> fillUserAll() {
        return services.fillUserAll();
    }

    // 添加
    @RequestMapping(value={"/insert"},produces = {"application/json;charset=utf-8"},method = RequestMethod.POST)
    public int insert(@RequestBody UserInfo userInfo){
        return services.insert(userInfo);
    }

    // 更新
    @RequestMapping(value={"/update"},produces = {"application/json;charset=utf-8"},method = RequestMethod.POST)
    public int update(@RequestBody UserInfo userInfo){
        return services.update(userInfo);
    }

    // 删除
    @RequestMapping(value={"/delete"},produces = {"application/json;charset=utf-8"},method = RequestMethod.GET)
    public int delete(int userid){
        return services.delete(userid);
    }
}

services

package com.allen.service;

import com.allen.pojo.UserInfo;

import java.util.List;

public interface Services {
    // 查询
    List<UserInfo> fillUserAll();

    // 增加
    int insert(UserInfo userInfo);

    // 修改
    int update(UserInfo userInfo);

    // 删除
    int delete(int userid);
}

serviceimpl

package com.allen.service.impl;

import com.allen.dao.UserInfoMapper;
import com.allen.pojo.UserInfo;
import com.allen.service.Services;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class ServiceImpl implements Services {
    @Autowired
    private UserInfoMapper userDao;// 这里会报错，但是不影响
    // 查询
    @Override
    public List<UserInfo> fillUserAll() {
        List<UserInfo> userInfos = userDao.fillUserAll();
        return userDao.fillUserAll();
    }
    // 添加
    @Override
    public int insert(UserInfo userInfo) {
        return userDao.insert(userInfo);
    }

    // 更新
    @Override
    public int update(UserInfo userInfo) {
        return userDao.updateByPrimaryKey(userInfo);
    }
    
    // 删除
    @Override
    public int delete(int userid) {
        return userDao.deleteByPrimaryKey(userid);
    }
}

前端文件主要目录如下，添加了AddDialog.vue

在这里插入图片描述

userinfo.vue文件

<template>
  <div class="userinfo">
    <div class="userinfo-div">userInfo信息管理
      <el-button size="mini" class="btn"
                 @click="openDialog" type="primary">添加</el-button></div>
    <el-table
      :data="tableData"
      stripe
      border
      style="width: 100%">
      <el-table-column
        prop="userid"
        label="id"
        align="center"
        width="">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="姓名"
        align="center"
        width="">
      </el-table-column>
      <el-table-column
        prop="phone"
        align="center"
        label="电话">
      </el-table-column>
      <el-table-column
        prop="sex"
        align="center"
        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>
    <dialog-div :flag="addFlag" :data="addData" title="添加userinfo" @closeDialog="closeDialog" @saveDialog="saveDialog"></dialog-div>
    <dialog-div :flag="editFlag" :data="editData" title="修改userinfo" @closeDialog="closeDialog" @saveDialog="saveEditDialog"></dialog-div>
  </div>
</template>

<script>
  import axios from 'axios'
  import dialogDiv from './common/AddDialog.vue'
    export default {
        name: 'userinfo',
        data () {
            return {
                tableData: [],
                addFlag:false,
                editFlag:false,
                addData: {
                    userName: '',
                    phone: '',
                    sex: ''
                },
                editData:{
                    userName: '',
                    phone: '',
                    sex: ''
                },
                userid:'',
            }
        },
        mounted(){
            this.getData()
        },
        components:{
            dialogDiv
        },
        methods:{
            //删除 row.userid
            handleDelete(row){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        // 默认请求方式为get
                        method: 'get',
                        url: 'http://localhost:9000/user/delete?userid='+row.userid+'',
                        // 传递参数
                        data:{
                            // userid:row.userid
                        },
                        // 设置请求头信息
                        headers: {
                        },
                        responseType: 'json'
                    }).then(res => {
                        // 请求成功
                        // this.tableData = response.data;
                        if(res.data==1){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getData()
                        }else{
                            this.$message.error('删除失败');
                        }
                    }).catch(error => {
                        // 请求失败，
                        this.$message.error('服务器异常');
                        console.log(error);
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 添加
            saveDialog(val){
                let params = {
                    userName:val.userName,
                    phone:val.phone,
                    sex:val.sex
                }
                axios({
                    // 默认请求方式为get
                    method: 'post',
                    url: 'http://localhost:9000/user/insert',
                    // 传递参数
                    data: params,
                    // 设置请求头信息
                    headers: {
                    },
                    responseType: 'json'
                }).then(res => {
                    // 请求成功
                    // this.tableData = response.data;
                    if(res.data==1){
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        this.getData()
                    }else{
                        this.$message.error('添加失败');
                    }
                }).catch(error => {
                    // 请求失败，
                    this.$message.error('服务器异常');
                    console.log(error);
                });
                this.closeDialog()
            },
            // 修改
            saveEditDialog(val){
                let param = {
                    userid: this.userid,
                    userName:val.userName,
                    phone:val.phone,
                    sex:val.sex
                }
                axios({
                    // 默认请求方式为get
                    method: 'post',
                    url: 'http://localhost:9000/user/update',
                    // 传递参数
                    data: param,
                    // 设置请求头信息
                    headers: {
                    },
                    responseType: 'json'
                }).then(response => {
                    // 请求成功
                    console.log(response)
                    if(response.data>0){
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        this.closeDialog()
                        this.getData()
                    }else{
                        this.$message({
                            message: '修改失败',
                            type: 'error'
                        });
                    }
                    // this.tableData = response.data;
                }).catch(error => {
                    // 请求失败，
                    console.log(error);
                });
            },
            openDialog(){
                this.addFlag = true
            },
            closeDialog(){
                this.addFlag = false
                this.editFlag = false
            },
            // 获取数据
            getData(){
                axios({
                    // 默认请求方式为get
                    method: 'get',
                    url: 'http://localhost:9000/user/findAll',
                    // 传递参数
                    data:{},
                    // 设置请求头信息
                    headers: {
                    },
                    responseType: 'json'
                }).then(response => {
                    // 请求成功
                    this.tableData = response.data;
                }).catch(error => {
                    // 请求失败，
                    console.log(error);
                });
            },
            // 编辑
            handleEdit(row){
                this.userid = row.userid
                this.editData={
                    userName: row.userName,
                    phone: row.phone,
                    sex: row.sex
                }
                this.editFlag = true
            },
        }
    }
</script>

<style scoped>
  .userinfo{
    padding: 2% 5%;
  }
  .userinfo-div{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    position:relative;
  }
  .btn{
    position: absolute;
    right:0px;
  }
</style>

AddDialog.vue

<template>
  <el-dialog :title="title" :visible.sync="isShow" :before-close="close">
    <el-form :label-position="labelPosition" label-width="80px" :model="userInfo" :rules="rules" ref="userInfo">
      <el-form-item label="名称" prop="userName">
        <el-input v-model="userInfo.userName"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="userInfo.phone"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-input v-model="userInfo.sex"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="isShow = false">取 消</el-button>
      <el-button type="primary" @click="savaDialog">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'dialogDiv',
    props:['title','flag','data'],
    data() {
        return {
            isShow: false,
            labelPosition: 'right',
            userInfo: {
                userName: '',
                phone: '',
                sex: ''
            },
            rules:{
                userName: [
                    { required: true, message: '请输入姓名', trigger: 'change' },
                ],
                phone: [
                    { required: true, message: '请选择电话号码', trigger: 'change' }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
            }
        };
    },
    methods:{
        close(){
            this.$emit("closeDialog")
        },
        savaDialog(){
            this.$refs['userInfo'].validate((valid) => {
                if (valid) {
                    console.log('dialog',this.userInfo)
                    this.$emit("saveDialog",this.userInfo)
                    // this.$refs['userInfo'].resetFields();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    },
    watch:{
      flag(val){
          this.isShow = val
          if(!val){
              this.$refs['userInfo'].resetFields();
          }
          if(this.title=='修改userinfo'){
              this.userInfo = this.data
          }
      },
      data(val){
          this.userInfo = val
      }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

界面显示如下

在这里插入图片描述

下面做下分页，然后集成后台分页和前端分页

在pom.xml加入分页插件
<!-- pagehelper -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.5</version>
        </dependency>

在application.yml替换成下面这段

server:
  port: 9000  # 端口号

spring:
  datasource: #  数据库连接
    name: test
    url: jdbc:mysql://127.0.0.1:3306/spring_test
    username: root
    password: root
    driver-class-name: com.mysql.jdbc.Driver
mybatis:  #  mybatis连接
  mapper-locations: classpath:mapping/*Mapper.xml
  type-aliases-package: com.allen.pojo

  #配置分页插件pagehelper
  pagehelper:
    helperDialect: mysql
    reasonable: true
    supportMethodsArguments: true
    params: count=countSql

在pojo下面添加UserPage

package com.allen.pojo;

public class UserPage {
    private int pageSize;

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public int getPageNum() {
        return pageNum;
    }

    public void setPageNum(int pageNum) {
        this.pageNum = pageNum;
    }

    private int pageNum;
}

下面更改controller

package com.allen.controller;

import com.allen.pojo.UserInfo;
import com.allen.pojo.UserPage;
import com.allen.service.Services;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
// 跨域
@CrossOrigin(origins = "*", maxAge = 3600)
@RequestMapping(value = {"/user"})
public class UserController {
    @Autowired
    private Services services;

    // 查询
    @RequestMapping(value = {"/findAll"}, produces = {"application/json;charset=UTF-8"}, method = RequestMethod.POST)
    public PageInfo<UserInfo> fillUserAll(@RequestBody UserPage page) {
        return services.fillUserAll(page);
    }

    // 添加
    @RequestMapping(value={"/insert"},produces = {"application/json;charset=utf-8"},method = RequestMethod.POST)
    public int insert(@RequestBody UserInfo userInfo){
        return services.insert(userInfo);
    }

    // 更新
    @RequestMapping(value={"/update"},produces = {"application/json;charset=utf-8"},method = RequestMethod.POST)
    public int update(@RequestBody UserInfo userInfo){
        return services.update(userInfo);
    }

    // 删除
    @RequestMapping(value={"/delete"},produces = {"application/json;charset=utf-8"},method = RequestMethod.GET)
    public int delete(int userid){
        return services.delete(userid);
    }
}

services和servicelmpl代码如下

package com.allen.service;

import com.allen.pojo.UserInfo;
import com.allen.pojo.UserPage;
import com.github.pagehelper.PageInfo;


public interface Services {
    // 查询
    PageInfo<UserInfo> fillUserAll(UserPage page);

    // 增加
    int insert(UserInfo userInfo);

    // 修改
    int update(UserInfo userInfo);

    // 删除
    int delete(int userid);
}

package com.allen.service.impl;

import com.allen.dao.UserInfoMapper;
import com.allen.pojo.UserInfo;
import com.allen.pojo.UserPage;
import com.allen.service.Services;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class ServiceImpl implements Services {
    @Autowired
    private UserInfoMapper userDao;// 这里会报错，但是不影响
    // 查询
    @Override
    public PageInfo<UserInfo> fillUserAll(UserPage page) {
        // num 第几页 size每页有几条
        PageHelper.startPage(page.getPageNum(),page.getPageSize());
        List<UserInfo> list = userDao.fillUserAll();
        PageInfo<UserInfo> pageInfo = new PageInfo<>(list);
        return pageInfo;
    }

    // 添加
    @Override
    public int insert(UserInfo userInfo) {
        return userDao.insert(userInfo);
    }

    // 更新
    @Override
    public int update(UserInfo userInfo) {
        return userDao.updateByPrimaryKey(userInfo);
    }

    // 删除
    @Override
    public int delete(int userid) {
        return userDao.deleteByPrimaryKey(userid);
    }
}

前端去elementui里面找到el-pagination，然后添加到table下面 userinfo代码如下

<template>
  <div class="userinfo">
    <div class="userinfo-div">userInfo信息管理
      <el-button size="mini" class="btn"
                 @click="openDialog" type="primary">添加</el-button></div>
    <el-table
      :data="tableData"
      stripe
      border
      style="width: 100%">
      <el-table-column
        prop="userid"
        label="id"
        align="center"
        width="">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="姓名"
        align="center"
        width="">
      </el-table-column>
      <el-table-column
        prop="phone"
        align="center"
        label="电话">
      </el-table-column>
      <el-table-column
        prop="sex"
        align="center"
        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 style="margin-top: 20px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <dialog-div :flag="addFlag" :data="addData" title="添加userinfo" @closeDialog="closeDialog" @saveDialog="saveDialog"></dialog-div>
    <dialog-div :flag="editFlag" :data="editData" title="修改userinfo" @closeDialog="closeDialog" @saveDialog="saveEditDialog"></dialog-div>
  </div>
</template>

<script>
  import axios from 'axios'
  import dialogDiv from './common/AddDialog.vue'
    export default {
        name: 'userinfo',
        data () {
            return {
                tableData: [],
                addFlag:false,
                editFlag:false,
                addData: {
                    userName: '',
                    phone: '',
                    sex: ''
                },
                editData:{
                    userName: '',
                    phone: '',
                    sex: ''
                },
                userid:'',
                pageSize:10,
                pageNum:1,
                total:0,
                currentPage:1
            }
        },
        mounted(){
            this.getData()
        },
        components:{
            dialogDiv
        },
        methods:{
            handleSizeChange(val){
                this.pagesize = val
                this.getData()
            },
            handleCurrentChange(val){
                this.pageNum = val
                this.getData()
            },
            //删除 row.userid
            handleDelete(row){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        // 默认请求方式为get
                        method: 'get',
                        url: 'http://localhost:9000/user/delete?userid='+row.userid+'',
                        // 传递参数
                        data:{
                            // userid:row.userid
                        },
                        // 设置请求头信息
                        headers: {
                        },
                        responseType: 'json'
                    }).then(res => {
                        // 请求成功
                        // this.tableData = response.data;
                        if(res.data==1){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getData()
                        }else{
                            this.$message.error('删除失败');
                        }
                    }).catch(error => {
                        // 请求失败，
                        this.$message.error('服务器异常');
                        console.log(error);
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 添加
            saveDialog(val){
                let params = {
                    userName:val.userName,
                    phone:val.phone,
                    sex:val.sex
                }
                axios({
                    // 默认请求方式为get
                    method: 'post',
                    url: 'http://localhost:9000/user/insert',
                    // 传递参数
                    data: params,
                    // 设置请求头信息
                    headers: {
                    },
                    responseType: 'json'
                }).then(res => {
                    // 请求成功
                    // this.tableData = response.data;
                    if(res.data==1){
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        this.getData()
                    }else{
                        this.$message.error('添加失败');
                    }
                }).catch(error => {
                    // 请求失败，
                    this.$message.error('服务器异常');
                    console.log(error);
                });
                this.closeDialog()
            },
            // 修改
            saveEditDialog(val){
                let param = {
                    userid: this.userid,
                    userName:val.userName,
                    phone:val.phone,
                    sex:val.sex
                }
                axios({
                    // 默认请求方式为get
                    method: 'post',
                    url: 'http://localhost:9000/user/update',
                    // 传递参数
                    data: param,
                    // 设置请求头信息
                    headers: {
                    },
                    responseType: 'json'
                }).then(response => {
                    // 请求成功
                    console.log(response)
                    if(response.data>0){
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        this.closeDialog()
                        this.getData()
                    }else{
                        this.$message({
                            message: '修改失败',
                            type: 'error'
                        });
                    }
                    // this.tableData = response.data;
                }).catch(error => {
                    // 请求失败，
                    console.log(error);
                });
            },
            openDialog(){
                this.addFlag = true
            },
            closeDialog(){
                this.addFlag = false
                this.editFlag = false
            },
            // 获取数据
            getData(){
                axios({
                    // 默认请求方式为get
                    method: 'post',
                    url: 'http://localhost:9000/user/findAll',
                    // 传递参数
                    data:{
                        pageSize:this.pageSize,
                        pageNum:this.pageNum
                    },
                    // 设置请求头信息
                    headers: {
                    },
                    responseType: 'json'
                }).then(response => {
                    // 请求成功
                    this.tableData = response.data.list;
                    this.total = response.data.total
                }).catch(error => {
                    // 请求失败，
                    console.log(error);
                });
            },
            // 编辑
            handleEdit(row){
                this.userid = row.userid
                this.editData={
                    userName: row.userName,
                    phone: row.phone,
                    sex: row.sex
                }
                this.editFlag = true
            },
        }
    }
</script>

<style>
  .el-pagination{
    position: relative;
    text-align: right;
  }
  .el-pagination__total{
    position: absolute;
    left: 0;
  }
  .el-pagination__sizes{
    position: absolute;
    left:70px
  }
</style>
<style scoped>
  .userinfo{
    padding: 2% 5%;
  }
  .userinfo-div{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    position:relative;
  }
  .btn{
    position: absolute;
    right:0px;
  }
</style>

在这里插入图片描述
后端代码
链接：https://pan.baidu.com/s/1nFyPBbOJ9IHUWXjTViD7VA
提取码：4s2q
复制这段内容后打开百度网盘手机App，操作更方便哦

前端代码
链接：https://pan.baidu.com/s/1erOzjawYRgjo-3wp2u61gw
提取码：jc59

QQ1210584652那里需要改进的可以跟我提下哈

小爱同学-Allen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Spring boot 入门(二):后台集成PageHelper插件,前端搭建环境，然后做对userinfo的增删改查

vue 如何创建项目的环境依赖如下vue环境搭建在本地创建个vue项目如下![在这里插入图片描述](https://img-blog.csdnimg.cn/20200606105758744.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTk1NDI1,size_16,color_FFFFFF,t_70目录结构如下打开项目，
复制链接

扫一扫

专栏目录