前端页面常用代码参考
目录
一、vue页面结构及其常用属性参考
1.页面结构
2.span栅格占据列数，通过基础的 24 分栏，迅速简便地创建布局。
3.作用域插槽定义
4.div 中表单常用属性
rules常用配置（在return模块中配置该属性）
dialogVisible设置为false，默认不可见（在return模块中配置该属性）
closeDialog 设置关闭时重置表格数据（在methods中设置）
5.分页设置
6.常用校验规则
7.VUE过滤器用法
1）过滤器的定义
2）过滤器的使用
二、Vue中常用ajax参考
1.查找
2.新增
3.修改
4.删除
5.分类删除
一、vue页面结构及其常用属性参考
1.页面结构
2.span栅格占据列数，通过基础的 24 分栏，迅速简便地创建布局。
3.作用域插槽定义
4.div 中表单常用属性
.....
rules常用配置（在return模块中配置该属性）
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
]，
......
}dialogVisible设置为false，默认不可见（在return模块中配置该属性）
dialogVisible: false,closeDialog 设置关闭时重置表格数据（在methods中设置）
closeDialog(){
//重置表格数据
this.$refs.addUserRef.resetFields()
},5.分页设置
6.常用校验规则
data(){
//校验邮箱规则 rule校验规则 value校验的数据 callback回调函数
const checkEmail = (rule, value, callback) => {
//定义邮箱的正则表达式 JS中用/来表示正则表达式的开始和结束
const emailRege = /^[a-zA-Z0-9-_]+@[a-zA-Z0-9-_]+\.[a-zA-Z0-9-_]+$/
//正则表达式语法校验 test(xx) 校验成功 返回true 校验失败返回false
if (emailRege.test(value)) {
//表示邮箱合法 正确返回
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('请填写正确的手机号'))
}
const checkPassword = (rule, value, callback) => {
if(this.addUserModel.password !== value) return callback(new Error('2次密码输入不一致'))
//否则校验成功
callback()
}7.VUE过滤器用法
解决商品价格计算不精确问题，一般会将商品价格先放大100倍，在缩小100倍，保留小数点后两位。
1）过滤器的定义
由于过滤器是全局变量,写在main.js中
/* 定义过滤器
1.参数: 将|左侧的数据,当作参数传递给函数.
2.返回值: 必须添加返回值!!!
Vue.filter("过滤器名称",过滤器动作函数(参数){
})
*/
Vue.filter("priceFormat",function(price){
return (price / 100).toFixed(2)
})
2）过滤器的使用
参数: 将 | 左侧的数据,当作参数传递给函数.
{{scope.row.price | priceFormat}}
二、Vue中常用ajax参考
在main.js 中定义全局的axios变量 ：Vue.prototype.$http = axios
1.查找
async getUserList(){
const {data: result} = await this.$http.get('/user/list',{
params: this.queryInfo
})
if(result.status !== 200) return this.$message.error("用户列表查询失败")
this.userList = result.data.rows
this.total = result.data.total
}2.新增
addUserBtn(){
//校验用户数据
this.$refs.addUserRef.validate(async valid => {
//如果校验失败 则停止数据
if(!valid) return
const {data: result} =
await this.$http.post('/user/addUser',this.addUserModel)
if(result.status !== 200) return this.$message.error("用户新增失败")
this.$message.success("用户新增成功")
//关闭对话框
this.dialogVisible = false
//重新获取用户列表
this.getUserList()
})
},3.修改
updateUser(){
//1.预校验数据
this.$refs.updateUserRef.validate(async valid => {
if(!valid) return this.$message.error("表单验证没有通过")
//根据接口文档要求封装数据
let user = {}
user.id = this.updateUserModel.id
user.phone = this.updateUserModel.phone
user.email = this.updateUserModel.email
const {data: result} = await this.$http.put(`/user/updateUser`,user)
if(result.status !== 200) return this.$message.error("用户修改失败")
this.$message.success("用户更新成功")
this.updateDialogVisible = false
this.getUserList()
})
},4.删除
实现用户信息删除 ，注意使用模版字符串 ES6中提出的新用法 ${key}，使用反引号包裹（ ` ** ` ）
async deleteUser(user){
//1.消息确认框
const result = await this.$confirm('此操作将永久删除 '+user.username+', 是否继续?',
'提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).catch(error => error)
//如果确认 confirm 如果取消 cancel
if(result !== 'confirm'){
return this.$message.info("删除取消")
}
const {data: result2} = await this.$http.delete(`/user/${user.id}`)
if(result2.status !== 200) return this.$message.error("删除失败")
this.$message.success("删除成功")
//重新加载 数据
this.getUserList()
}
}5.分类删除
deleteItemCatBtn(itemCat) {
//删除商品分类信息,如果为父级节点则需要删除所有的子级信息
this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () =>{
//传递分类id
const {data: result} = await this.$http.delete("/itemCat/deleteItemCat",{params:{id:itemCat.id,level:itemCat.level}})
if(result.status !== 200) return this.$message.error("删除商品分类失败")
this.$message.success("删除数据成功")
//删除成功之后,刷新页面数据
this.findItemCatList()
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除AAAAAAA'
});
});
}
}