SpringBoot + Vue front-end and back-end separation project actual combat || Four: User management function implementation

Series of articles:
SpringBoot + Vue front-end and back-end separation project practice || One: Vue front-end design
SpringBoot + Vue front-end separation project practice || Two: Spring Boot backend and database connection
SpringBoot + Vue front-end separation project practice || Three: Spring Boot backend and Vue frontend connection
SpringBoot + Vue front-end and front-end separation project practice || Four: User management function implementation
SpringBoot + Vue front-end separation project practice || Five: User management function follow-up

Front-end implementation

The previously customized user.vuepage was blank, now let’s implement its function

First go to elementthe official website to browse the required components
. Official website link: https://element.eleme.cn/2.13/#/zh-CN/component/dialog
Version: 2.13.2

Components needed:

1. card
   
2. sheet
   
3. Pagination - full functionality
   
4. Input box
   
5. button
   
6. Open the form's dialog box
   

Write user.vue (the entire user.vuecode has been placed at the end of the article)

The overall page is divided into 3 parts, search - display - paging plug-in

Part One - Search Box

The front-end component code is as follows:

Red: Bind data
Yellow: Bind function
White: Element’s own icon

• red:
  

• orange color:
  
  

• White
  

Part 2 - data table

• Red: bound data list variable
  

• Orange, displays the serial number of the table data, involving two searchModel.pageNovariablessearchModel.pageSize
  

• White: consistent with the entity variable name of the backend
  

Part 3 - Pagination plugin

• Red: Changing the number of display pages of the plug-in will query the database display data again
  
• Orange: Some variables of the paging plug-in
  
  . At this point, the three parts of the front end are introduced.

Write the front-end hook function (the page will automatically query the database and then display it)

Configure backend interface

Write code in src\apia new oneuserManage.js

import request from '@/utils/request'


export default{
    
    
  getUserList(searchModel){
    
    
    return request({
    
    
      url:'/user/list',
      method:'get',
      params:{
    
        // 传给后端的参数
        pageNo: searchModel.pageNo,
        pageSize: searchModel.pageSize,
        username: searchModel.username,
        phone: searchModel.phone,
      }

    });
  },

}

Then go and user.vueregister the file

// 前后端对接的配置
import userApi from '@/api/userManage'

Writing code on the backend

UserControllerWrite the code for docking the front end in it

// 增删改查，增：post请求，查：get请求，修改：put请求，删除：delete请求
@GetMapping("/list")
public Result<Map<String,Object>> getUserList(@RequestParam(value = "username",required = false) String username,
                                              @RequestParam(value = "phone",required = false) String phone,
                                              @RequestParam(value = "pageNo") Long pageNo,
                                              @RequestParam(value = "pageSize") Long pageSize
                                              ){
    
    

    LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();

    // 第一个参数是对username进行判空条件，第三个username是传过来进行比较的值
    wrapper.eq(StringUtils.hasLength(username),User::getUsername,username);
    wrapper.eq(StringUtils.hasLength(phone),User::getPhone,phone);

    // 苞米豆 里的Page包，不是Spring的，传入当前页数和每页大小
    Page<User> page = new Page<>(pageNo, pageSize);

    // 分页查找，用 .page()方法
    userService.page(page,wrapper);

    Map<String,Object> data = new HashMap<>();
    data.put("total",page.getTotal());
    data.put("rows",page.getRecords());

    return Result.success(data);
}

Note that the red part in the picture below userManage.jsneeds to be consistent with the middle red part of the front end.

---

The data name returned by the backend here also needs to be consistent with the frontend.

With the help of postman verification

, a json object is returned here, which contains code, messageand datafields, and there are fields datain it .totalrows

user.vueThe code in the front end this.total = response.data.total;is to obtain the datadatatotal

New Mybatis-Pluspaging configuration code config\: add a new MpConfigfile below

package com.ums.config;

import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;


// 官网地址 https://baomidou.com/pages/2976a3/#spring
@Configuration
public class MpConfig {
    
    
    //配置 mybatis plus的分页插件，死代码
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
    
    
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }
}

user.vue

<template>
  <div>
    <!-- 搜索栏 -->
    <el-card id="search">

      <el-row>
        <el-col :span="20">
          <el-input v-model="searchModel.username" placeholder="用户名" clearable></el-input>
          <el-input v-model="searchModel.phone" placeholder="电话" clearable></el-input>
          <el-button @click="getUserList" type="primary" round icon="el-icon-search">查询</el-button>
        </el-col>

        <el-col :span="4" align="right">
          <el-button @click="openEditUI" type="primary" icon="el-icon-plus" circle></el-button>
        </el-col>
      </el-row>

    </el-card>

    <!-- 结果列表 -->
    <el-card>
      <el-table :data="userList" stripe style="width: 100%">
        <el-table-column  label="#" width="80">
          <template slot-scope="scope">
            <!-- (pageNo-1) * pageSize + index + 1 -->
            {
   
   {(searchModel.pageNo-1) * searchModel.pageSize + scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column prop="id" label="用户ID" width="180">
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="180">
        </el-table-column>
        <el-table-column prop="phone" label="电话" width="180">
        </el-table-column>
        <el-table-column prop="email" label="电子邮件">
        </el-table-column>
        <el-table-column label="操作" width="180">
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页插件 -->
    <el-pagination 
    @size-change="handleSizeChange" 
    @current-change="handleCurrentChange"
      :current-page="searchModel.pageNo" 
      :page-sizes="[5, 10, 20, 30, 40]" 
      :page-size="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper" 
      :total="total">
    </el-pagination>


    <!-- 用户信息编辑对话框 -->
    <!-- :title 加了冒号就变成一个变量，属性绑定了,后面的东西需要在data中说明 -->
    <el-dialog @close="clearForm" :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="userForm">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="userForm.username" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="登录密码" :label-width="formLabelWidth">
          <el-input type="password" v-model="userForm.password" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="userForm.phone" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="用户状态" :label-width="formLabelWidth">
          <el-switch v-model="userForm.status" 
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66" 
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>

        <el-form-item label="电子邮件" :label-width="formLabelWidth">
          <el-input v-model="userForm.email" autocomplete="off"></el-input>
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<!-- 定义查询对象 -->
<script>
  // 前后端对接的配置
  import userApi from '@/api/userManage'

  // 页面变量
  export default {
      
      
    data () {
      
      
      return {
      
      
        formLabelWidth: '130px',
        userForm: {
      
      },
        dialogFormVisible: false,
        title: "",
        total: 0,
        searchModel: {
      
          // 当前页面参数，会调用方法传给后端
          pageNo: 1,
          pageSize: 5
        },
        userList: [],
      }
    },

    methods: {
      
      
      clearForm(){
      
      
        // 清空表单
        this.userForm={
      
      }
      },

      openEditUI(){
      
      
        this.title = '新增用户';
        this.dialogFormVisible = true;
      },

      // 此处对应pageSize和pageNo改变时更改前端的显示
      handleSizeChange(pageSize){
      
      
        // 更新数据，完毕后重新调用函数
        this.searchModel.pageSize = pageSize;
        this.getUserList(); 
      },

      handleCurrentChange(pageNo){
      
      
        // 更新数据，完毕后重新调用函数
        this.searchModel.pageNo = pageNo;
        this.getUserList(); 
      },
      getUserList(){
      
      
        // userApi.getUserList 开始调用后端，并传递参数searchModel
        // then表示后端查询后返回的数据
        userApi.getUserList(this.searchModel).then(response=>{
      
      
          this.userList = response.data.rows;   // 后端返回的 json中的字段
          this.total = response.data.total;
        });
      }
    },

    // 钩子函数定义处
    created(){
      
      
      // 定义了一个钩子函数，即加载页面后就自动执行getUserList函数，显示数据
      this.getUserList();
    },

  }
</script>


<style>
  #search .el-input {
      
      
    width: 200px;
    margin-right: 10px;
  }
  .el-dialog .el-input{
      
      
    width: 85%;
  }
</style>