SpringBoot + Vue projeto de separação de front-end e back-end combate real || Cinco: Acompanhamento da função de gerenciamento de usuários

Série de artigos:
prática de projeto de separação de front-end e back-end SpringBoot + Vue || Um: design de front-end Vue
Prática de projeto de separação de front-end SpringBoot + Vue || Dois: backend Spring Boot e conexão de banco de dados
SpringBoot + Vue front- prática de projeto de separação final || Três: Back-end Spring Boot e conexão front-end Vue
Prática de projeto de separação front-end e back-end SpringBoot
+ Vue || Quatro: Implementação da função de gerenciamento de usuários Prática de projeto de separação front-end SpringBoot + Vue || | Cinco: Acompanhamento da função de gerenciamento de usuários

Revisão e Perspectiva

Anteriormente, introduzimos a exibição de dados da interface de gerenciamento de usuários. Em seguida, precisamos adicionar, modificar e excluir usuários.

Implementação de novas funções de usuário

Implementação front-end

Ao user.vueescrever o código para a caixa de diálogo pop-up, o código também vem do 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>

Esta caixa de diálogo possui três propriedades importantes:

• Vermelho: A operação de fechar a caixa de diálogo. Após fechar a caixa de diálogo, você precisa limpar o formulário e limpar as regras de validação do formulário. Esta parte do código está escrita methodsem
  
• Laranja: É o título da caixa de diálogo pop-up. Aqui definimos a nova caixa de diálogo e a caixa de diálogo de edição como iguais. De acordo com diferentes operações, nomes diferentes são exibidos. Por ser uma variável,
  
  
  ela :titleprecisa ser registrado.
  
• Branco: Modifica se a janela pop-up é exibida. Na verdade, a janela pop-up está sempre lá. Ela só é exibida após clicar no botão e oculta após fechar. Ela também precisa ser registrada como uma variável, então torne-o invisível primeiro.
  

Três propriedades do formulário

• Vermelho: o nome da variável de primeiro nível dos dados do formulário. Se você deseja acessar os dados internos userForm.username, este é o campo na entrada v-model. Este campo deve ser consistente com o nome da classe da entidade de back-end. Ao mesmo tempo, os campos do item proptambém são consistentes com o backend.

• Laranja: refNome da variável usada para verificação do formulário, clearFormusada na seção anterior

• Bai: Defina as regras de verificação do formulário. O código a seguir pode Element-UIser encontrado no site oficial. O código está escrito datana returnárea, não nos 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' }
       ],
     },
  

  

  Existem duas verificações de regras personalizadas na verificação de regras: checkEmail, checkPhone, essas duas são expressões regulares. Você pode pesquisar as regras de verificação de e-mail e telefone no Baidu. Você pode usá-las diretamente aqui. Observe que essas duas regras de verificação estão escritas em data, não data\returnem
  

   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();    // 效验成功
   };
  

O formulário inteiro é a parte vermelha da imagem abaixo

• Laranja: É o nome da variável do campo de recebimento do formulário, que é consistente com a classe de entidade do banco de dados back-end.
• Branco: Ao modificar as informações do usuário, não dê a oportunidade de alterar a senha. Porém, ao adicionar um novo usuário, uma senha inicial será definida, portanto é necessário fazer um julgamento. Se você quiser modificar um usuário, então o usuário terá um ID. Se userForm.idexistir, significa que você está modificando o usuário. As informações do usuário serão exibidas e depois modificadas.
  Observação: todos os atributos da classe de entidade são passados ​​do back-end, e userForm também recebe todos os atributos. Somente nome, email, etc. são exibidos. O restante dos atributos não são exibidos e ainda estão acessíveis.

botão de envio

• Laranja: Clique 取消no botão para definir a propriedade de exibição da caixa de diálogo falsecomo invisível
• Branco: 保存Função acionada ao clicar no botão: saveUser, o processo de funcionamento desta função foi explicado nos comentários
  

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

---

O código vue de todos os formulários de diálogo é o seguinte

<!-- 用户信息编辑对话框 -->
<!-- :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>

Implementação de interface front-end

Os arquivos da interface front-end estão no caminho src\api\userManage.js. Observe que os métodos correspondentes para adicionar, excluir, modificar e verificar são 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'
    });
  },


}

Implementação de back-end

O código de back-end está UserController.javaem

Novos usuários

	 // 前端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("新增用户成功");
    }

O front-end correspondente é o seguinte:

Operação de criptografia:
Existe uma função de criptografia de senha no novo usuário. Quando a senha do usuário é gravada no banco de dados, ela é criptografada e salgada, conforme mostrado abaixo. O texto simples da senha é123456

(Salga: Para a mesma combinação de senha, o texto cifrado também é diferente)

Adicione dependências em pom.xml:

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

Inscreva-se na aula de inicializaçãoBean

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

UserControllerRegistrar variáveis ​​em

Modifique a
lógica de login. Depois que a senha for criptografada, você não poderá simplesmente corresponder a senha do banco de dados ao efetuar login. É necessário um processo de correspondência de descriptografia.
Modifique o arquivo de 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;
}

Neste ponto, a nova função do usuário está concluída

---

Modificar usuário

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

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

O front-end correspondente é o seguinte:

excluir usuários

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

O front-end é o seguinte:

No gerenciamento de projetos da empresa, geralmente é usada a exclusão lógica, que na verdade não exclui os registros do banco de dados, mas define um campo na tabela de dados como uma deletedmarca. 0 significa não excluído, 1 significa excluído

resources\application.ymlAdicionar configuração em

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

Desta forma, o Spring irá unir automaticamente as instruções SQL ao consultarWHERE deleted = 0

Após a configuração, após a exclusão 删除oioi用户前do banco de dados , o último campo passa a ser 1

---

Encontre usuários com base no ID e exiba dados no formulário de modificação

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

O front-end correspondente é o seguinte:

Terminei de espalhar flores! ! !