在微信框架模塊中，基于Vue&Element前端，通過(guò)動(dòng)態(tài)構(gòu)建投票選項(xiàng)，實(shí)現(xiàn)單選、復(fù)選的投票操作
2021-07-22 19:02:08

最近把微信框架的前端改造一下，在原來(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的分類，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)一異常處理》、《利用查詢條件對(duì)象，在Asp.net Web API中實(shí)現(xiàn)對(duì)業(yè)務(wù)數(shù)據(jù)的分頁(yè)查詢處理》等隨筆。

?

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)系，才能記錄用戶的選擇，否則用戶不能選擇復(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ì)大家有所幫助和增益。