百川平臺項目總結
技術棧：vue + vuex + vue-router + vee-validate + Element-ui;
項目背景
為配合有錢花業(yè)務發(fā)展，提升效率，更加精細化運營。
百川平臺包括頁面管理、渠道管理、策略管理和數據管理四大模塊。
一期為頁面管理，即“有錢花”落地頁的后臺發(fā)布系統(tǒng)，包括表單頁，列表頁，實現新建、編輯、復制和發(fā)布功能。
可以根據不同的投放渠道，在后臺配置內容，生成相應的推廣頁。
要點：
-
vee-validate校驗插件的中的坑
因為開發(fā)中會用到很多表單，所以就把表單封裝成了組件，具體的校驗在父組件中引用組件時通過props傳入對應的校驗規(guī)則，這是沒有任何問題的，但是在最后提交表單時會對所有添加了校驗規(guī)則的表單做一次校驗，使用vee-validate提供的API如下：它的原理是把當前組件中沒有校驗通過的表單信息添加在computed計算屬性的errors數組中，最后提交表單時判斷數組的長度，如果為0，則result為true，反之。
this.$validator.validateAll()
.then(result => {
if (result) {
// 提交
}
});
所以校驗不通過的表單信息只是添加在了當前組件即子組件的computed屬性的errors中，那么在最后提交時，父組件中的computed中的errors的長度為0，result始終為true。并沒有最優(yōu)的解決方式，只能重復的使用一堆堆的代碼。最后不得不棄用該插件，期待插件的改進。最后改用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: '' } }校驗規(guī)則就需要直接作用在組件上， 比如
<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')">立即創(chuàng)建</el-button> </el-form-item> </el-form>注意點：
- 如果多個校驗規(guī)則，則包到一個數組中。
- prop中的值一定要加一層單引號。
最后在提交表單時通過如下方式也可以實現對form中設置了校驗規(guī)則的表單進行一次總體校驗
submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); } -
折疊面板
每一個面板有一個name屬性，作為唯一標示。默認情況下，所有面板是折疊狀態(tài)，當給
el-collapse設置了value屬性值為某一個name的值，那么對應的面板為打開狀態(tài)。如果想讓所有面板的初始狀態(tài)為均為打開狀態(tài)，則value的值為數組，數組的每一項為name的值即可。如：:value="['1','2']"。 -
樹形組件不支持頁面跳轉，也就是說url沒法設置在組件上。
@node-click="handleNodeClick"給組件設置方法，點擊節(jié)點時回調參數為當前層級和下面所有層的數據對象。獲取到數據對象后，通過location.href實現跳轉。（二期優(yōu)化：使用導航菜單） 深度克隆對象
使用插件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開始的項目，開發(fā)中的所有模式都將作為標準，比如數據管理、語法（es6/7）、代碼風格、命名規(guī)則、文件目錄等；
2、整個應用的所有數據都在model層vuex中管理；所有請求都在actions中實現，使用async/await；所有數據的更改都通過mutations，vm中沒有不做任何數據更改的動作，只是dispatch 和 commit；