百川平台项目总结

百川平台项目总结

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

项目背景

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

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

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

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

要点：

1. 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；

2. 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>
   

   注意点：

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

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

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

3. 折叠面板

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

4. 树形组件不支持页面跳转，也就是说url没法设置在组件上。

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

5. 深度克隆对象
   使用插件 clone deep，此插件还依赖于buffer。

6. 基于vue的一键复制插件

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

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

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

总结

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