百川平台项目总结

技术栈：vue + vuex + vue-router + vee-validate + Element-ui;

项目背景

为配合有钱花业务发展，提升效率，更加精细化运营。

百川平台包括页面管理、渠道管理、策略管理和数据管理四大模块。

一期为页面管理，即“有钱花”落地页的后台发布系统，包括表单页，列表页，实现新建、编辑、复制和发布功能。

可以根据不同的投放渠道，在后台配置内容，生成相应的推广页。

要点：

vee-validate校验插件的中的坑

因为开发中会用到很多表单，所以就把表单封装成了组件，具体的校验在父组件中引用组件时通过props传入对应的校验规则，这是没有任何问题的，但是在最后提交表单时会对所有添加了校验规则的表单做一次校验，使用vee-validate提供的API如下：它的原理是把当前组件中没有校验通过的表单信息添加在computed计算属性的errors数组中，最后提交表单时判断数组的长度，如果为0，则result为true，反之。

this.$validator.validateAll()
  .then(result => {
       if (result) {
            // 提交
       }
  });

所以校验不通过的表单信息只是添加在了当前组件即子组件的computed属性的errors中，那么在最后提交时，父组件中的computed中的errors的长度为0，result始终为true。并没有最优的解决方式，只能重复的使用一堆堆的代码。最后不得不弃用该插件，期待插件的改进。最后改用Element-ui；

element-ui表单校验的坑

<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
    <el-form-item label="活动名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
</el-form>

    export default {
        data() {
            return {
                ruleForm: {
                    name: ''
                },
                rules: {
                    name: [{required: true, message: '请输入活动名称', trigger: 'blur'}]
                }
            }
        }
    }

ruleForm为整个form对象，里边所有的表单均为ruleForm的直接属性，但是我需要返给落地页的数据是多层嵌套的，扁平化的，那这样的话element-ui的表单校验就失效了。

比如我返给落地页的数据结构是这样的：

let ruleForm = {
    page: {
        name: '',
        title: ''
    }
}

校验规则就需要直接作用在组件上，比如

<el-form :model="ruleForm" ref="ruleForm">
    <el-form-item label="活动名称" 
                 :prop="'page.name'"
                 :rules="{required: true, message: '请输入活动名称', trigger: 'blur'}">
        <el-input v-model="ruleForm.page.name"></el-input>
    </el-form-item>
     <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    </el-form-item>
</el-form>

注意点：

如果多个校验规则，则包到一个数组中。
prop中的值一定要加一层单引号。

最后在提交表单时通过如下方式也可以实现对form中设置了校验规则的表单进行一次总体校验

submitForm(formName) {
   this.$refs[formName].validate((valid) => {
     if (valid) {
       alert('submit!');
     } else {
       console.log('error submit!!');
       return false;
     }
   });
 }

折叠面板

每一个面板有一个name属性，作为唯一标示。默认情况下，所有面板是折叠状态，当给el-collapse设置了value属性值为某一个name的值，那么对应的面板为打开状态。如果想让所有面板的初始状态为均为打开状态，则value的值为数组，数组的每一项为name的值即可。如：:value="['1','2']"。
树形组件不支持页面跳转，也就是说url没法设置在组件上。

@node-click="handleNodeClick"给组件设置方法，点击节点时回调参数为当前层级和下面所有层的数据对象。获取到数据对象后，通过location.href 实现跳转。（二期优化：使用导航菜单）
深度克隆对象
使用插件 clone deep，此插件还依赖于buffer。

基于vue的一键复制插件

    <div id="coderedeem" data-clipboard-text="这是要复制的内容" @click='copy'>复制</div>

    import Clipboard from 'clipboard';
    copy() {
        let copy = new Clipboard('#coderedeem');
    }

使用v-img插件实现图片预览

总结

1、此项目为从0开始的项目，开发中的所有模式都将作为标准，比如数据管理、语法（es6/7）、代码风格、命名规则、文件目录等；
2、整个应用的所有数据都在model层vuex中管理；所有请求都在actions中实现，使用async/await；所有数据的更改都通过mutations，vm中没有不做任何数据更改的动作，只是dispatch 和 commit；

百川平台项目总结

百川平台项目总结

技术栈：vue + vuex + vue-router + vee-validate + Element-ui;

项目背景

要点：

注意点：

总结

推荐阅读更多精彩内容