CGB2102-京淘项目day14

1.实现用户新增

1.1 编辑新增页面

1.1.1 官网API

###1.1.2 定义对话框

1.2 关于正则表达式

1.2.1 正则介绍

正则表达式，又称规则表达式。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。

1.2.2 正则语法

{固定次数} [取值的范围] (分组)
demo: “[a-z]+.(jpg|png|gif)”

1.2.3 完成用户校验

<script>
  export default {
    data(){

      //自定义校验规则 rule:当前规则对象一般不用  value: 当前校验的数据  callback:回调函数
      //校验邮箱规则
      const checkEmail = (rule, value, callback) => {
        //定义邮箱的正则表达式  JS中用/来表示正则表达式的开始和结束
        const emailRege = /^[a-zA-Z0-9-_]+@[a-zA-Z0-9-_]+\.[a-zA-Z0-9-_]+$/
        if (emailRege.test(value)) {
          //表示邮箱合法 正确返回  通过返回true   失败返回false
          return callback() //自定义规则执行成功,之后后续操作
        }
        callback(new Error('请填写正确的邮箱地址'))
      }

      //校验手机号的邮箱规则
      const checkPhone = (rule, value, callback) => {

        //定义校验手机号的正则语法
        const phoneRege = /^1[3456789][0-9]{9}$/
        if (phoneRege.test(value)) {

          return callback()
        }
        callback(new Error('请填写正确的手机号'))

      }

      //密码确认  判断与password是否相同
      const checkPassword = (rule, value, callback) => {

        if(value !== this.addUserForm.password){
           return callback(new Error('2次密码填写不一致'))
        }
        //如果相同,则调用回调函数
        callback()
      }

      return {
        //定义分页查询对象
        queryInfo: {
          query: '',    //用户查询的数据
          pageNum: 1,   //默认第一页
          pageSize: 5   //每页5条
        },
        userList: [],   //获取分页后的结果
        total: 0,
        addUserDialogVisible: false,
        //设定新增用户的对象
        addUserForm: {
          username: '',
          password: '',
          password2:  '',
          phone:  '',
          email:  ''
        },
        rules: {
           username: [
                      { required: true, message: '请输入用户名', trigger: 'blur' },
                      { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
                    ],
           password: [
                      { required: true, message: '请输入密码', trigger: 'blur' },
                      { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
                    ],
           password2: [
                      { required: true, message: '请输入密码', trigger: 'blur' },
                      { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' },
                      { validator: checkPassword, trigger: 'blur' }
                    ],
           phone: [
                      { required: true, message: '请输入电话', trigger: 'blur' },
                      { min: 11, max: 11, message: '长度必须11个字符', trigger: 'blur' },
                      { validator: checkPhone, trigger: 'blur' }
                    ],
           email: [
                      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                      { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' },
                      { validator: checkEmail, trigger: 'blur' }
                    ],
        }
      }
    }

1.3 重置表单

1.3.1 官网API

说明: 当用户点击取消/关闭对话框时,触发关闭回调操作.

1.3.2 编辑页面

1.4 用户最终校验

1.4.1 编辑页面JS

1.4.2 用户新增业务接口

1.4.3 编辑页面JS

1.4.4 编辑UserController

    /**
     * 业务分析: 实现用户新增 注意密码加密
     * URL: /user/addUser
     * 请求参数: 用户的form表单
     * 返回值: SysResult对象
     * 请求类型: post
     * 关于ajax说明:
     *      @RequestBody PUT/POST  要求ajax传递的对象 自己封装为JSON 所以在后端添加注解
     */
     @PostMapping("/addUser")
     public SysResult addUser(@RequestBody User user){
         userService.addUser(user);
         return SysResult.success();
     }

1.4.5 编辑UserService

    @Override
    public void addUser(User user) {
        //1.密码加密
        String md5Pass =
                DigestUtils.md5DigestAsHex(user.getPassword().getBytes());
        user.setPassword(md5Pass).setStatus(true);

        userMapper.insert(user);
    }

1.5 数据自动填充

1.5.1 业务说明

由于架构设计通常会添加一些必要的属性,但是该属性每次都要写,造成重复. 代码冗余,能否优化?

1.5.2 编辑POJO

说明: 将公共的属性进行抽取,之后根据MP的自动填充的机制,跳转合适的操作(CRUD)进行填充

package com.jt.pojo;
import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.TableField;
import lombok.Data;
import lombok.experimental.Accessors;
import java.io.Serializable;
import java.util.Date;

//pojo基类，完成2个任务，2个日期，实现序列化
@Data
@Accessors(chain=true)
public class BasePojo implements Serializable{
	@TableField(fill = FieldFill.INSERT)
	private Date created;	//表示入库时需要赋值
	@TableField(fill = FieldFill.INSERT_UPDATE)
	private Date updated;	//表示入库/更新时赋值.
}

1.5.3 编辑自动填充代码

mybatisplus自动填充功能

package com.jt.config;
import com.baomidou.mybatisplus.core.handlers.MetaObjectHandler;
import org.apache.ibatis.reflection.MetaObject;
import org.springframework.stereotype.Component;
import java.util.Date;

@Component
public class MyMetaObjectHandler implements MetaObjectHandler {

    //入库操作时,需要更新 创建事件/更新时间
    @Override
    public void insertFill(MetaObject metaObject) {
        Date date = new Date();
        this.setFieldValByName("created",date,metaObject);
        this.setFieldValByName("updated",date,metaObject);
    }

    @Override
    public void updateFill(MetaObject metaObject) {
        this.setFieldValByName("updated",new Date(),metaObject);
    }
}

1.6 用户数据删除

1.6.1 官网API

1.6.2 编辑前端JS

async deleteUser(user){
        //定义消息确认框 promise对象 如果从中获取用户的选项 不方便
        const result = await this.$confirm('此操作将永久删除'+user.username+', 是否继续?', 
        '提示',{  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
              }).catch(error => error)

        //确定: confirm   取消 cancel
        if(result !== 'confirm') return this.$message.info("用户取消操作")

        //发起ajax请求实现数据的删除...
        const {data: resultDB} = await this.$http.delete('/user/'+user.id)
        if(resultDB.status !== 200) return this.$message.error("用户删除失败!")
        this.$message.success("用户删除成功!")
        //重新加载用户列表
        this.getUserList()
      }

1.6.3 编辑UserController

    /**
     * 删除用户
     * URL: /user/{id}
     * 参数: 用户的ID号
     * 返回值: SysResult对象
     * 关于ajax说明:
     *      @RequestBody PUT/POST  要求ajax传递的对象 自己封装为JSON 所以在后端添加注解
     *      GET/DELETE   数据都是普通数据  后端正常接收可以
     *  @PathVariable是spring3.0的一个新功能：接收请求路径中占位符的值
     *    @PathVariable("xxx")
通过 @PathVariable 可以将URL中占位符参数{xxx}绑定到处理器类的方法形参中@PathVariable(“xxx“) 
    */
    @DeleteMapping("/{id}")
    public SysResult deleteUserById(@PathVariable Integer id){

        userService.deleteUserById(id);
        return SysResult.success();
    }

1.6.4 编辑UserService

 @Override
    public void deleteUserById(Integer id) {
        userMapper.deleteById(id);
    }

2 关于知识点梳理

2.1 列表页面结构

2.2 新增用户页面

作业

实现用户的修改 要求只修改电话/邮箱