9.14 Day51---ElementUI表单校验

目录

ElementUI表单校验

回忆jQuery表单校验是怎么做的

ElementUI校验

分析:model

分析:rules

ref 可以理解为给表单取名字

是表单子元素项

label属性

prop属性

提交按钮

重置按钮

规则对象中有哪些属性可以使用

Axios前后端交互规范

GET请求 (查询)

POST请求 (添加)

PUT请求 (修改)

DELETE请求 (删除)

后端控制器

---

ElementUI表单校验

回忆jQuery表单校验是怎么做的

1. 表单元素注册事件

2. 事件绑定回调函数

3. 在回调函数中获取用户输入的值

用js代码进行校验

用正则表达式进行校验

ElementUI校验

1. 写校验规则

2. 绑定校验规则

<el-form></el-form>是整个form表单的父元素

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

</el-form>

重点讲一下这三个表单属性

属性前面带:的, 取值必须是data中声明的变量

属性名前面不带:的, 取值是一个直接量

:model="ruleForm"

:rules="rules"

ref="ruleForm"

分析:model

:model = "变量"

:model 绑定数据

分析:rules

:rules绑定校验规则

ref 可以理解为给表单取名字

注意ref前面没有: , 取值是一个直接量

也就是说这个取值 userForm就是一个字符串, 不是一个变量

<el-form-item></el-form-item>是表单子元素项

 

<el-form-item label="用户编号" prop="id">

<el-input v-model="user.id" readonly disabled></el-input>

</el-form-item>

<el-form-item label="用户名" prop="username">

<el-input v-model="user.username"></el-input>

</el-form-item>

label属性

取值是直接量, 显示表单元素的左边文字

prop属性

取值是直接量

从:rules绑定的校验规则对象中寻找名为"username"的校验规则

rules: {

username: [

{ required: true, message: '请输入用户名', trigger: 'blur' },

{ min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }

]

}

 

提交按钮

@click是注册点击事件 ==> 调用submitForm函数, 并传参数'userForm'

methods:{} 中需要定义这个submitForm函数

this.$refs[formName]表示根据参数formName找到视图中指定名称的表单

这个formName是上面提交按钮传过来的'userForm'

视图中有一个ref="userForm"的表单

validate() 函数的作用是将这个表单中所有带有校验规则的子项全部进行校验

validate() 函数的参数是一个箭头函数 (valid) =>{}

这个valid是一个boolean值, 为true表示所有元素全部校验通过, 为false表单有校验失败的

validate((valid) =>{

if( valid ){ // valid为true 才执行提交表单

}

})

重置按钮

按钮

回调函数

规则对象中有哪些属性可以使用

属性名	说明
required	必填字段，即非空验证。视图的元素上会显示*
min/max	判断数据大小范围，通常对数字大小范围做校验。对于字符串和数组类型，将根据长度进行比较。
len	具体长度
enum	枚举, 取值为数组
whitespace	验证是否只有空格
pattern	正则校验, 取值为正则表达式
message	错误信息
trigger	触发时机

Axios前后端交互规范

基于Axios封装的http通信模块

在main.js中导入了http对象, 并且注册到了Vue的原型对象上面, 取名为$http

有了上面的代码前提

我们可以在任意一个Vue组件中使用

this.$http发起http请求

GET请求 (查询)

情况1: 根据id查询一个对象

因为只有一个参数id, 所有可以使用占位符的方式将id拼接在地址后面传

后端取得时候, 注意在地址里面取参数

情况2: 条件+分页查询一个集合

参数是一个对象, 里面包含多个条件和分页参数

必须把参数放在 {params: {}}

这种方式得参数会拼接在url后面

 

this.$http.get('url', {params: 参数})

.then((data) => {

})

POST请求 (添加)

这种方式得参数会放在请求体里面

 

this.$http.post('url', 参数)

.then((data) => {

})

后端需要使用@RequestBody请求体里面获取数据, 否则数据取不到

 

PUT请求 (修改)

参数得传和取同POST请求

this.$http.put('', 参数)
    .then((data) => {
    
    })

DELETE请求 (删除)

这种请求一般也是携带id, 可以使用占位符得方式

this.$http.delete('')
    .then((data) => {
    
    })

后端控制器

处理get请求用@GetMapping

处理post请求用@PostMapping，参数使用@RequestBody从请求体获取

处理put请求用@PutMapping，参数使用@RequestBody从请求体获取

处理delete请求用@DeleteMapping

所有得控制器方法得返回值统一使用封装得ResponseData类型

所有得控制器方法中只有一行return 代码

这样控制器层得代码会非常干净，整洁

所有得业务代码全部交给Service层取实现

@RestController
@RequestMapping("/api/user")
public class UserController {
    @Resource
    private UserService userService;

    @GetMapping("/list")
    public ResponseData list(UserPage userPage){
        return userService.selectPage(userPage);
    }

    @DeleteMapping("/del/{id}")
    public ResponseData del(@PathVariable("id") Integer id){
        return userService.logicDeleteById(id);
    }

    @GetMapping("/detail/{id}")
    public ResponseData detail(@PathVariable("id") Integer id){
        return userService.selectById(id);
    }

    @PutMapping("/edit")
    public ResponseData edit(@RequestBody User user){
        return userService.edit(user);
    }

    @PostMapping("/login")
    public ResponseData login(@RequestBody User user){
        return userService.login(user);
    }
}

因为控制器层方法得返回值是ResponseData类型

这里直接返回调用得service层方法得返回值

那么，编写Service层接口和实现类得时候，也需要统一Service层全部返回ResponseData类型

public interface UserService {
    ResponseData selectPage(UserPage userPage);

    ResponseData logicDeleteById(Integer id);

    ResponseData selectById(Integer id);

    ResponseData login(User user);

    ResponseData edit(User user);
}

@Service
public class UserServiceImpl implements UserService {
    @Resource
    private UserMapper userMapper;

    @Override
    public ResponseData selectPage(UserPage userPage){
        QueryWrapper qw=new QueryWrapper();
        qw.likeRight(StringUtils.hasText(userPage.getUsername()),"username",userPage.getUsername());
        qw.likeRight(StringUtils.hasText(userPage.getIdCode()),"id_code",userPage.getIdCode());
        qw.likeRight(StringUtils.hasText(userPage.getMobile()),"mobile",userPage.getMobile());
        qw.eq("is_delete", 0);
        return ResponseData.success(userMapper.selectPage(userPage,qw));
    }

    @Override
    public ResponseData logicDeleteById(Integer id) {
        User user = new User();
        user.setId(id);
        user.setIsDelete(1);
        return ResponseData.success(userMapper.updateById(user) > 0 ? true: false);
    }

    @Override
    public ResponseData selectById(Integer id) {
        return ResponseData.success(userMapper.selectById(id));
    }

    @Override
    public ResponseData login(User user) {
        User dbUser = userMapper.selectByUsername(user.getUsername());
        if (dbUser == null){
            throw new CustomException(ResponseMsg.USER_NOT_EXIST);
        }else {
            if(!user.getPassword().equals(dbUser.getPassword())){
                throw new CustomException(ResponseMsg.PASSWORD_ERROR);
            }
        }
        String token = TokenUtil.getToken(dbUser);
        dbUser.setToken(token);
        return ResponseData.success(dbUser);
    }

    @Override
    public ResponseData edit(User user) {
        return ResponseData.success(userMapper.updateById(user));
    }
}

在调试前后端通信得时候，一定要学会浏览器F12功能里面得网络