后台管理系统--编写过程中遇到的问题总结（二）

声明：开发的总结记录，涉及到很多小点，可能不太详细。

1、vuex的使用

　　若接口返回的数据在多处都要用到，则可以使用vuex来访问并存储返回的数据；先通过actions（异步操作）访问接口、获取到数据同时调用mutations（同步操作）中的方法，mutations才能将变量存储到state中；最好再将state的值放到getters里，这样在组件的computed里就方便被访问到。

// 引入到组件
import { mapGetters } from 'vuex'
computed: {
    ...mapGetters([
        'getCates'      // 例如vuex的getters里的名称为getCates
    ])
}

2、函数命名的技巧

　　函数名命名好了方便阅读，一读方法名就能知道该方法是做什么的（还得积累）。

　　can -- 判断是否可执行某个动作（权限），返回布尔值；canRead()；has -- 判断是否含有某个值，返回布尔值；is -- 判断是否为某个值，返回布尔值；get -- 获取某个值，如getName()；set -- 设置某个值；load -- 加载某些数据……

3、点击事件的参数包含当前点击元素标签、值、位置属性等；e.target.style -- 给当前元素设置样式（先让全部样式为一种，再让该元素样式为一种）；e.terget.value -- 获取到当前元素的值。

4、数据经常会需要拷贝然后在多处被使用，其间不希望拷贝后的数据改变而影响原始数据变化，就需要对数据进行深拷贝 -- JSON.parse(JSON.stringify())。

5、iview的Form -- 表单验证

<Form ref="add_form" :rules="add_rules" :model="add_form">
    <FormItem prop="name">
        <Input type="text" v-model="add_form.name"/>
    </FormItem>
    <FormItem prop="phone">
        <Input type="tel" v-model="add_form.phone"/>
    </FormItem>
</Form>

data () {
    const phonesrule  = (rule,value,callback){
        let reg = /^1[3,4,5,8]{1}[0-9]{9}$/;
        if (reg.test(value){
            callback('电话格式不正确');
        } else {
            callback();
        }
    }
    return {
        add_form: {
            name: '',
            phone: ''
        },
        add_rules: {
            name: [
                { required: true, message: '必填', trigger: 'blur' }
            ]
            // 还可以自定义规则，如
            phone: [
                { required: true, validator: phonesrule  }
            ]
        }
    }
}
methods: {
　　okSubmit () {
　　　　this.$refs.add_form.validate(valid=>{
　　　　　　if (valid) { console.log('符合验证条件');}else{this.$Message.warning('验证不通过')}
　　　　})
　　}
}

6、分页，不使用iview的Page

　　如果后端没有传递页码和每页条数，则需要前端请求回来全部数据后，分开显示数据。思路：前端设置pageSize。

7、样式使用less，这样只有parent-box下的child-one、child-two才会有字色。

.parent-box{
    .child-one{
        color: pink;
    }
    .child-two{
        color: #eee;
    }
}

8、树形结构  Tree

　　需要额外的按钮就在Tree标签里写“:render='setRender'”，点击事件on-select-change返回的是当前数据；root.find()是组件特有的，参数为函数，获得的是当前数据节点和父节点；获得了数据需要把一些属性和获得的数据递归结合一下才能更好的渲染：

Object.assign(datas,{
    expand: true,
    title: datas.name,
    nodeKey: datas.id
})

9、让普通标签具有表单标签的一些方法，如focus、blur，通过设置tabindex。

// hideName就会在div标签失去焦点后执行
<div tabindex="9999 @blur.stop="hideName"></div>

　　有些下拉列表里要有树形结构，就可以使用这个方法 -- div+span+icon+icon+tree，让div有下拉效果（设置tabindex属性），给tree设置display。

10、上下架、是否黑名单等都最好用开关来显示。

11、上传数据

　　有三种格式：表单提交，application/x-www-form-urlencode；json提交，application/json；流媒体文件提交，multiple/form-data。

　　前端操作有两种方法传递想要的数据，

// 针对add_form里不止有id，name时，而接口又只需要这两种
let {id, name} = this.add_form;
// or
this.add_form.map(item=>{
    return {
        id: item.id,
        name: item.name
    }
})

 

转载于:https://www.cnblogs.com/liuw44/p/10900863.html