Combate real del proyecto de separación de front-end y back-end de SpringBoot + Vue || Cinco: Seguimiento 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

Revisión y perspectivas

Anteriormente, presentamos la visualización de datos de la interfaz de administración de usuarios, luego necesitamos agregar, modificar y eliminar usuarios.

Implementación de nuevas funciones de usuario.

Implementación frontal

Al user.vueescribir el código para el cuadro de diálogo emergente, el código también proviene del componente Element-UI

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

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

    <el-form-item label="联系电话" prop="phone" :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="电子邮件" prop="email" :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="saveUser">确 定</el-button>
  </div>
</el-dialog>

Este cuadro de diálogo tiene tres propiedades importantes:

• Rojo: la operación de cerrar el cuadro de diálogo. Después de cerrar el cuadro de diálogo, debe borrar el formulario y borrar las reglas de validación del formulario. Esta parte del código está escrita methodsen
  
• Naranja: es el título del cuadro de diálogo emergente. Aquí configuramos el nuevo cuadro de diálogo y el cuadro de diálogo de edición para que sean iguales. Según las diferentes operaciones, se muestran diferentes nombres. Debido a que es una variable
  
  
  , :titledebe estar registrado.
  
• Blanco: modifica si se muestra la ventana emergente. De hecho, la ventana emergente siempre está ahí. Solo se muestra después de hacer clic en el botón y luego se oculta después de cerrar. También debe registrarse como una variable, por lo que hazlo invisible primero.
  

Tres propiedades de la forma.

• Rojo: el nombre de la variable de primer nivel de los datos del formulario. Si desea acceder a los datos internos userForm.username, este es el campo en la entrada v-model. Este campo debe ser coherente con el nombre de la clase de entidad de back-end. Al mismo tiempo, los campos del elemento proptambién son coherentes con el backend.

• Naranja: refnombre de la variable utilizada para la verificación del formulario, clearFormutilizada en la sección anterior

• Bai: defina las reglas de verificación del formulario. El siguiente código se puede Element-UIencontrar en el sitio web oficial. El código está escrito dataen returnel área, no en los métodos.
  

  rules:{
        
           // 表单校验
       username: [
         {
        
         required: true, message: '请输入用户名', trigger: 'blur' },
         {
        
         min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
       ],
       password: [
         {
        
         required: true, message: '请输入初始密码', trigger: 'blur' },
         {
        
         min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
       ],
       email: [
         {
        
         required: true, message: '请输入电子邮件', trigger: 'blur' },
         {
        
         validator: checkEmail, trigger: 'blur' }
       ],
       phone: [
         {
        
         validator: checkPhone, trigger: 'blur' }
       ],
     },
  

  

  Hay dos verificaciones de reglas personalizadas en la verificación de reglas: checkEmail, checkPhone, estas dos son expresiones regulares. Puede buscar las reglas de verificación de correo electrónico y teléfono en Baidu. Puede usarlas aquí directamente. Tenga en cuenta que estas dos reglas de verificación están escritas en data, no data\returnen
  

   var checkEmail = (rule, value, callback) => {
        
        
     var reg = /^([a-zA-Z\d][\w-]{2,})@(\w{2,})\.([a-z]{2,})(\.[a-z]{2,})?$/
     if (!reg.test(value)) {
        
        
       return callback(new Error('邮箱格式错误'));
     }
     callback();   // 效验成功
   };
  
   var checkPhone = (rule, value, callback) => {
        
        
     var reg = /^[1]+\d{10}$/
     if (!reg.test(value)) {
        
        
       return callback(new Error('请输入正确的手机号码'));
     }
     callback();    // 效验成功
   };
  

El formulario completo es la parte roja en la imagen de abajo.

• Naranja: es el nombre de la variable del campo receptor del formulario, que es coherente con la clase de entidad de la base de datos back-end.
• Blanco: Al modificar la información del usuario, no dé la oportunidad de cambiar la contraseña. Sin embargo, al agregar un nuevo usuario, se establecerá una contraseña inicial, por lo que es necesario tomar una decisión. Si desea modificar un usuario, entonces el usuario tendrá una ID. Si existe userForm.id, significa que está modificando al usuario. La información del usuario se mostrará y luego se modificará.
  Nota: Todos los atributos en la clase de entidad se pasan desde el backend y userForm también recibe todos los atributos. Solo se muestran el nombre, el correo electrónico, etc.. El resto de los atributos no se muestran y aún son accesibles.

botón de enviar

• Naranja: haga clic en 取消el botón para establecer la propiedad de visualización del cuadro de diálogo falseen invisible
• Blanco: 保存Función que se activa al hacer clic en el botón: saveUser, el proceso de funcionamiento de esta función se ha explicado en los comentarios
  

  saveUser(){
        
        
     // 触发表单验证
     this.$refs.userFormRef.validate((valid) => {
        
        
       if (valid) {
        
          // 验证通过
         // 数据传给后端
         userApi.saveUser(this.userForm).then(response=>{
        
        
           // 提交成功后的操作
  
           // 插入数据成功提示
           this.$message({
        
        
             message: response.message,
             type: 'success'
           });
  
           // 关闭对话框，清除表单数据
           this.dialogFormVisible = false;
           this.clearForm();
  
           // 刷新表格
           this.getUserList();
  
         });
       } else {
        
          // 验证失败
         console.log('error submit!!');
         return false;
       }
     });
   },
  

---

El código vue de todos los formularios de diálogo es el siguiente

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

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

    <el-form-item label="联系电话" prop="phone" :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="电子邮件" prop="email" :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="saveUser">确 定</el-button>
  </div>
</el-dialog>

Implementación de la interfaz front-end

Los archivos de la interfaz front-end están en la ruta src\api\userManage.js. Tenga en cuenta que los métodos correspondientes para agregar, eliminar, modificar y verificar son post// delete/putget

import request from '@/utils/request'


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

    });
  },

  addUser(user){
    
    
    return request({
    
    
      url:'/user',
      method:'post',
      data:user   // 传回后端的实体数据
    });
  },

  saveUser(user){
    
    
    if(user.id == null || user.id == undefined){
    
    
      return this.addUser(user);
    }else{
    
    
      return this.updateUser(user);
    }
  },

  updateUser(user){
    
    
    return request({
    
    
      url:'/user',
      method:'put',
      data:user
    });
  },

  getUserById(id){
    
    
    return request({
    
    
      // url:'/user/' + id,   // 写法一
      url:`/user/${
      
      id}`,    // 写法二 ，对应后端的 @PathVariable
      method:'get'
    });
  },

  deleteUserById(id){
    
    
    return request({
    
    
      url:`/user/${
      
      id}`,    // 对应后端的 @PathVariable
      method:'delete'
    });
  },


}

Implementación de back-end

El código backend está UserController.javaen

Usuarios nuevos

	 // 前端addUser方法的url就是"/user" 故此处无url
    @PostMapping
    public Result<?> addUser(@RequestBody User user){
    
    
        // @RequestBody 用于json转为实体对象

        // 做了加盐处理
        user.setPassword(passwordEncoder.encode(user.getPassword()));
        userService.save(user);
        return Result.success("新增用户成功");
    }

La interfaz correspondiente es la siguiente:

Operación de cifrado:
hay una función de cifrado de contraseña en el nuevo usuario. Cuando la contraseña del usuario se escribe en la base de datos, se cifra y se sala, como se muestra a continuación. El texto sin formato de la contraseña es123456

(Sal: para la misma combinación de contraseña, el texto cifrado también es diferente)

Agregar dependencias en pom.xml:

<dependency>
    <groupId>org.springframework.security</groupId>
    <artifactId>spring-security-core</artifactId>
</dependency>

Regístrese en la clase de inicioBean

@Bean
public PasswordEncoder passwordEncoder(){
    
    
    // 密码加密的工具类，来自依赖spring-security-core
    return new BCryptPasswordEncoder();
}

UserControllerRegistrar variables en

Modifique la
lógica de inicio de sesión. Una vez cifrada la contraseña, no puede simplemente hacer coincidir la contraseña de la base de datos al iniciar sesión. Se requiere un proceso de coincidencia de descifrado.
Modifique el archivo back-end.service\impl\UserServiceImpl

@Override
public Map<String, Object> login(User user) {
    
    
    // 根据用户名查询
    LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
    wrapper.eq(User::getUsername, user.getUsername());
    User loginUser = this.baseMapper.selectOne(wrapper);

    // 结果不为空，并且密码与数据库解密后的密码匹配，生成token，将用户信息存入redis
    if (loginUser != null &&
            passwordEncoder.matches(user.getPassword(), loginUser.getPassword())    // 匹配加密密码
    ) {
    
    
        // 用UUID，终极方案是jwt
        String key = "user:" + UUID.randomUUID();

        // 存入redis
        loginUser.setPassword(null);    // 设置密码为空，密码没必要放入
        redisTemplate.opsForValue().set(key, loginUser,10, TimeUnit.MINUTES);   // timeout为登录时间

        // 返回数据
        Map<String, Object> data = new HashMap<>();
        data.put("token",key);
        return data;
    }

    // 结果不为空，生成token，前后端分离，前端无法使用session，可以使用token
    // 并将用户信息存入redis
    return null;
}

En este punto, la función de nuevo usuario está completa.

---

Modificar usuario

	@PutMapping
    public Result<?> updateUser(@RequestBody User user){
    
    
        // @RequestBody 用于json转为实体对象

        user.setPassword(null);
        userService.updateById(user);
        return Result.success("修改用户成功");
    }

El front-end correspondiente es el siguiente:

eliminar usuarios

	@DeleteMapping("/{id}")
    public Result<?> deleteUserById(@PathVariable("id") Integer id){
    
    
        userService.removeById(id);
        return Result.success("删除用户成功");
    }

La parte delantera es la siguiente:

En la gestión de proyectos de la empresa, generalmente se utiliza la eliminación lógica, que en realidad no elimina los registros en la base de datos, sino que establece un campo en la tabla de datos deletedcomo una marca. 0 significa no eliminado, 1 significa eliminado

resources\application.ymlAgregar configuración en

mybatis-plus:
  global-config:
    db-config:
      logic-delete-field: deleted # 全局逻辑删除的实体字段名,与数据库的字段名一致
      logic-delete-value: 1 # 逻辑已删除值(默认为 1)
      logic-not-delete-value: 0 # 逻辑未删除值(默认为 0)

De esta manera, Spring unirá automáticamente declaraciones SQL al realizar consultasWHERE deleted = 0

Después de la configuración, después de eliminar 删除oioi用户前la base de datos , el último campo pasa a ser 1

---

Encuentre usuarios según su identificación y muestre datos en el formulario de modificación

	@GetMapping("/{id}")
    public Result<User> getUserById(@PathVariable("id") Integer id){
    
    
        User user = userService.getById(id);
        return Result.success(user);
    }

El front-end correspondiente es el siguiente:

¡Terminé de esparcir flores! ! !