9.14 Day51---ElementUI表单校验

<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功能里面得网络

相关阅读:
内衣洗衣机和手洗哪个干净？迷你洗衣机品牌推荐
355. 设计推特
lua 中文字符的判断简介
历史上最愚蠢的代码
QML相关bug记录
Axure绘制折叠面板-手风琴效果
套接字编程：TCP通信程序
2024年CSP-J暑假冲刺训练营(2)：排序
嘉立创EDA的一些使用技巧
抖音背后的视频体验分析体系与优化技术揭秘

原文地址：https://blog.csdn.net/qq_63771774/article/details/126857730