Combate real del proyecto de separación de front-end y back-end de SpringBoot + Vue || Cuatro: implementación de la función de gestión de usuarios

Serie de artículos:
Práctica del proyecto de separación de front-end y back-end de SpringBoot + Vue || Uno: diseño de front-end de Vue
Práctica del proyecto de separación de front-end de SpringBoot + Vue || Dos: backend de Spring Boot y conexión de base de datos
SpringBoot + Vue front-end práctica del proyecto de separación final || Tres: conexión Spring Boot back-end y Vue front-end
Práctica del proyecto de separación SpringBoot + Vue front-end y back-end || Cuatro: implementación de la función de gestión de usuarios Práctica del proyecto de separación SpringBoot + Vue front-end || Tres: implementación de la función de gestión de usuarios
SpringBoot + Vue práctica del proyecto de separación front-end || Tres: conexión de back-end de Spring Boot y Vue front-end | | Cinco: Seguimiento de la función de gestión de usuarios

Directorio de artículos

Implementación frontal

La página previamente personalizada user.vueestaba en blanco, ahora implementemos su función
Insertar descripción de la imagen aquí

Primero vaya al elementsitio web oficial para buscar los componentes necesarios.Enlace
al sitio web oficial: https://element.eleme.cn/2.13/#/zh-CN/component/dialog
Versión: 2.13.2
Insertar descripción de la imagen aquí

Componentes necesarios:

tarjeta
hoja
Paginación: funcionalidad completa
Cuadro de entrada
botón
Abrir el cuadro de diálogo del formulario.

Escriba user.vue (el `user.vue`código completo se encuentra al final del artículo)

La página general está dividida en 3 partes, búsqueda - visualización - complemento de paginación
Insertar descripción de la imagen aquí

Primera parte: cuadro de búsqueda

El código del componente front-end es el siguiente:
Insertar descripción de la imagen aquí

Rojo: Vincular datos
Amarillo: Función de vinculación
Blanco: Icono del propio elemento
Insertar descripción de la imagen aquí

rojo:
color naranja:
Blanco

Parte 2 - tabla de datos

Insertar descripción de la imagen aquí

Rojo: variable de lista de datos enlazada
Naranja, muestra el número de serie de los datos de la tabla, involucrando dos searchModel.pageNovariablessearchModel.pageSize
Blanco: consistente con el nombre de la variable de entidad del backend

Parte 3: complemento de paginación

Insertar descripción de la imagen aquí

Rojo: cambiar el número de páginas de visualización del complemento volverá a consultar los datos de visualización de la base de datos
Naranja: algunas variables del complemento de paginación.En

este punto, se introducen las tres partes del front-end.

Escriba la función de enlace de front-end (la página consultará automáticamente la base de datos y luego la mostrará)
Insertar descripción de la imagen aquí

Configurar la interfaz de backend

Escribir código en src\apiuno nuevo.userManage.js
Insertar descripción de la imagen aquí

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

    });
  },

}

Luego ve y user.vueregistra el archivo.
Insertar descripción de la imagen aquí

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

Escribir código en el backend

UserControllerEscriba el código para acoplar la interfaz en él.
Insertar descripción de la imagen aquí

// 增删改查，增：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);
}

Tenga en cuenta que la parte roja en la imagen a continuación userManage.jsdebe ser consistente con la parte roja central de la parte delantera.
Insertar descripción de la imagen aquí

El nombre de los datos devueltos por el backend aquí también debe ser coherente con el frontend.
Insertar descripción de la imagen aquí

Con la ayuda de la verificación del cartero
Insertar descripción de la imagen aquí
, aquí se devuelve un objeto json, que contiene campos y code, y hay campos en él .messagedatadatatotalrows

user.vueEl código en el front-end this.total = response.data.total;es para obtener los datadatos.total

Nuevo Mybatis-Pluscódigo de configuración de paginación config\: agregue un nuevo MpConfigarchivo a continuación
Insertar descripción de la imagen aquí

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

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