配置数据
将配置数据从代码中分离出来，以后可能会修改的参数不可以写死在代码里，需要提取出来通过变量配置。
需要提取的数据
1、图片
2、URL
3、提示语
4、验证
5、重复的值
6、未来可能变更的值
图片
utils - img-local-path.js
const iconAll = {
// 提示
icon_tip: require('@/assets/images/tips.svg'),
}
export {iconAll}
使用图片的组件
import { iconAll } from "@/utils/img-local-path";
export default {
name: "generalTips",
data(){
return{
iconAll: iconAll,
}
}
}
<img :src="iconAll.icon_tip" alt="">
URL
const api = {
// 图片上传
imgManage: '/imgUpload',
// 文章管理
articleManage: {
articleList: params => axios.get('/articleList', {params}),
articleDetail: params => axios.get('/articleDetail', {params}),
},
}
export default api
提示语
utils - text-local.js
const messageAll = {
// 提示语位置
messagePosition: 300,
/**
* @position article.vue
* */
// 1、文章列表删除文章成功后
// 2、产品列表删除产品成功后，上移，下移，置顶成功后
operationMsg: '操作成功',
}
export { messageAll }
验证
utils - validate.js
const validateAge = (rule, value, callback) => {
if (value === '') {
return callback(new Error('请输入年龄'))
} else if (value.length >3) {
return callback(new Error('不能超过3位数'))
} else if (!/^\d{1,3}$/.test(value)) {
return callback(new Error('请输入数字'))
} else {
callback()
}
}
const validate = {
// 输入长度限制
maxLengthSmall: 50,
maxLengthMiddle: 100,
maxLengthLarge: 500,
age: [
{
required: true,
validator: validateAge,
trigger: 'blur'
}
],
name: [
{
required: true,
message: '请输入姓名',
trigger: 'blur'
}
],
}
export default validate
