APP
在微信框架模塊中，基于Vue&Element前端，通過(guò)動(dòng)態(tài)構(gòu)建投票選項(xiàng)，實(shí)現(xiàn)單選、復(fù)選的投票操作
最近把微信框架的前端改造一下，在原來(lái)基于Bootstrap框架基礎(chǔ)上的微信后臺(tái)管理，增加一套Vue&Element的前端，畢竟Vue的雙向綁定開(kāi)發(fā)起來(lái)也還是很方便的，而且Element本身也提供了很強(qiáng)大的界面組件。因此在原來(lái)數(shù)據(jù)庫(kù)的基礎(chǔ)上，增加Web API+Vue&Element的前端，相當(dāng)于雙前端的后臺(tái)管理，可以根據(jù)自己的喜歡選擇不同的開(kāi)發(fā)方式和管理界面。
1、基于WebAPI+Element的方式改造微信框架
在原先的微信框架功能基礎(chǔ)上，我們?cè)谒麄兊幕A(chǔ)上增加了一個(gè)新的前端，完全的前后端分離，后端是基于C#的Web API，通過(guò)Area的域方式構(gòu)建多個(gè)模塊的應(yīng)用Web API服務(wù)。
前端、后端完全分離的架構(gòu)設(shè)計(jì)，后端采用基于Asp.net的Web API技術(shù)，并提供按域來(lái)管理API的分類(lèi)，Web API如下架構(gòu)所示。
原先的解決方案項(xiàng)目繼續(xù)可以重用。解決方案的工程如下所示，分為對(duì)公眾號(hào)、企業(yè)微信、小程序的所有接口封裝，以及構(gòu)建的Bootstrap框架基礎(chǔ)的后臺(tái)管理界面。
在重用這些模塊的基礎(chǔ)上，我們?cè)黾恿艘粋€(gè)基于Area分區(qū)的Web API服務(wù)項(xiàng)目。
?基礎(chǔ)改造過(guò)程可以參考《在Bootstrap開(kāi)發(fā)框架基礎(chǔ)上增加WebApi+Vue&Element的前端》 、《利用過(guò)濾器Filter和特性Attribute實(shí)現(xiàn)對(duì)Web API返回結(jié)果的封裝和統(tǒng)一異常處理》、《利用查詢(xún)條件對(duì)象，在Asp.net Web API中實(shí)現(xiàn)對(duì)業(yè)務(wù)數(shù)據(jù)的分頁(yè)查詢(xún)處理》等隨筆。
?
2、基于Vue&Element前端，通過(guò)動(dòng)態(tài)構(gòu)建投票選項(xiàng)，實(shí)現(xiàn)單選、復(fù)選的投票操作
基于Vue&Element前端，可以根據(jù)方便把界面拆分作為組件，同時(shí)也可以利用雙向綁定的方式，減少JS腳本的賦值處理等過(guò)程。
首先我們先來(lái)了解一下微信投票的設(shè)計(jì)和后臺(tái)處理過(guò)程，以及后面應(yīng)用于公眾號(hào)投票、企業(yè)微信投票的處理。
投票相關(guān)信息的表設(shè)計(jì)如下所示。
?以上表的意思，就是一個(gè)投票發(fā)起記錄，有多個(gè)投票問(wèn)題，每個(gè)投票問(wèn)題有多個(gè)選項(xiàng)，而投票結(jié)果存儲(chǔ)則比較簡(jiǎn)單，把投票項(xiàng)目整合即可，相關(guān)信息用外鍵獲取處理。
我們來(lái)看看改造后的微信投票管理界面如下所示，列表展示可維護(hù)的投票記錄信息。
?新建投票界面如下所示
?問(wèn)題列表可以通過(guò)添加多項(xiàng)的方式動(dòng)態(tài)創(chuàng)建，這里面使用了
查看界面如下所示
測(cè)試桌面端的投票界面如下所示?
?
?
?上圖中紅色方框里面的就是利用Vue&Element動(dòng)態(tài)生成選項(xiàng)的處理方式。
這里拿來(lái)詳細(xì)介紹一下，主要是動(dòng)態(tài)構(gòu)建屬性，往往需要通過(guò)Vue.Set的方式來(lái)強(qiáng)行關(guān)聯(lián)對(duì)象的雙向綁定的響應(yīng)關(guān)系。
如上面的動(dòng)態(tài)構(gòu)建的界面代碼如下所示。
<template v-for="(item, index) in voteForm.voteItems">
<el-form-item :label="(index+1) + '、' + item.itemTitle" :key="index">
<el-checkbox-group v-model="item.choice" v-if="item.choiceType === 1">
<el-checkbox v-for="(opt, idx) in item.options" :label="opt.id" :key="idx">
{{opt.optionTitle}}
</el-checkbox>
</el-checkbox-group>
<el-radio-group v-model="item.choice" v-if="item.choiceType === 0">
<el-radio v-for="(opt, idx) in item.options" :label="opt.id" :key="idx">
{{opt.optionTitle}}
</el-radio>
</el-radio-group>
</el-form-item>
</template>
這里不論是單選框或者多選項(xiàng)，這里面綁定的屬性item.choice 不是響應(yīng)式的，我們需要通過(guò)JS代碼的方式來(lái)關(guān)聯(lián)他們和視圖的響應(yīng)關(guān)系，才能記錄用戶(hù)的選擇，否則用戶(hù)不能選擇復(fù)選框或者單選框的。
我們窗體視圖綁定的表單模型如下代碼所示。
?
?但是voteitems里面則沒(méi)有固定的選項(xiàng)，因?yàn)檫@個(gè)是動(dòng)態(tài)構(gòu)建的，另外它的選擇項(xiàng)目也是需要設(shè)置響應(yīng)關(guān)系才可以綁定視圖上。
如下代碼就是通過(guò)Vue.set的方式來(lái)建立他們的關(guān)系的。
vote.GetVoteResult(param).then(data => {
Object.assign(this.voteForm, data.result)
//給復(fù)選框增加選擇的集合為空
if (this.voteForm.voteItems && this.voteForm.voteItems.length > 0) {
this.voteForm.voteItems.filter(item => item.choiceType === 1).map(function (item, index) {
Vue.set(item, 'choice', []) //設(shè)置視圖和模型的響應(yīng)關(guān)系
})
this.voteForm.voteItems.filter(item => item.choiceType === 0).map(function (item, index) {
Vue.set(item, 'choice', null) //設(shè)置視圖和模型的響應(yīng)關(guān)系
})
}
})
注意使用Vue.set之前，我們需要導(dǎo)入Vue 對(duì)象再使用。
import Vue from 'vue'
這樣相當(dāng)于每條投票項(xiàng)目里面，都這就了一個(gè)choice的屬性，并且和界面建立了雙向綁定的關(guān)系，可以響應(yīng)界面的選擇處理。
?
我們通過(guò)工具跟蹤到表單的變量就可以很清晰看到它們的數(shù)據(jù)結(jié)構(gòu)了，如下界面所示。
?以上就是在微信框架模塊中，基于Vue&Element前端，通過(guò)動(dòng)態(tài)構(gòu)建投票選項(xiàng)，實(shí)現(xiàn)單選、復(fù)選的投票操作的一些經(jīng)驗(yàn)，希望對(duì)大家有所幫助和增益。
?
主要研究技術(shù)：代碼生成工具、會(huì)員管理系統(tǒng)、客戶(hù)關(guān)系管理軟件、病人資料管理軟件、Visio二次開(kāi)發(fā)、酒店管理系統(tǒng)、倉(cāng)庫(kù)管理系統(tǒng)等共享軟件開(kāi)發(fā)專(zhuān)注于Winform開(kāi)發(fā)框架/混合式開(kāi)發(fā)框架、Web開(kāi)發(fā)框架、Bootstrap開(kāi)發(fā)框架、微信門(mén)戶(hù)開(kāi)發(fā)框架的研究及應(yīng)用。
??轉(zhuǎn)載請(qǐng)注明出處：
撰寫(xiě)人：伍華聰??http://www.iqidi.com?????
本文摘自 ：https://blog.51cto.com/w
