在微信框架模塊中，基於Vue&Element前端，通過動態構建投票選項，實現單選、復選的投票操作

最近把微信框架的前端改造一下，在原來基於Bootstrap框架基礎上的微信后台管理，增加一套Vue&Element的前端，畢竟Vue的雙向綁定開發起來也還是很方便的，而且Element本身也提供了很強大的界面組件。因此在原來數據庫的基礎上，增加Web API+Vue&Element的前端，相當於雙前端的后台管理，可以根據自己的喜歡選擇不同的開發方式和管理界面。

1、基於WebAPI+Element的方式改造微信框架

在原先的微信框架功能基礎上，我們在他們的基礎上增加了一個新的前端，完全的前后端分離，后端是基於C#的Web API，通過Area的域方式構建多個模塊的應用Web API服務。

前端、后端完全分離的架構設計，后端采用基於Asp.net的Web API技術，並提供按域來管理API的分類，Web API如下架構所示。

原先的解決方案項目繼續可以重用。解決方案的工程如下所示，分為對公眾號、企業微信、小程序的所有接口封裝，以及構建的Bootstrap框架基礎的后台管理界面。

在重用這些模塊的基礎上，我們增加了一個基於Area分區的Web API服務項目。

 基礎改造過程可以參考《在Bootstrap開發框架基礎上增加WebApi+Vue&Element的前端》 、《利用過濾器Filter和特性Attribute實現對Web API返回結果的封裝和統一異常處理》、《利用查詢條件對象，在Asp.net Web API中實現對業務數據的分頁查詢處理》等隨筆。

 

2、基於Vue&Element前端，通過動態構建投票選項，實現單選、復選的投票操作

基於Vue&Element前端，可以根據方便把界面拆分作為組件，同時也可以利用雙向綁定的方式，減少JS腳本的賦值處理等過程。

首先我們先來了解一下微信投票的設計和后台處理過程，以及后面應用於公眾號投票、企業微信投票的處理。

投票相關信息的表設計如下所示。

 以上表的意思，就是一個投票發起記錄，有多個投票問題，每個投票問題有多個選項，而投票結果存儲則比較簡單，把投票項目整合即可，相關信息用外鍵獲取處理。

我們來看看改造后的微信投票管理界面如下所示，列表展示可維護的投票記錄信息。

 新建投票界面如下所示

 問題列表可以通過添加多項的方式動態創建，這里面使用了

vue-dynamic-form-component 組件，具體可以參考使用。

查看界面如下所示

測試桌面端的投票界面如下所示 

 

 

 上圖中紅色方框里面的就是利用Vue&Element動態生成選項的處理方式。

這里拿來詳細介紹一下，主要是動態構建屬性，往往需要通過Vue.Set的方式來強行關聯對象的雙向綁定的響應關系。

如上面的動態構建的界面代碼如下所示。

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

這里不論是單選框或者多選項，這里面綁定的屬性item.choice 不是響應式的，我們需要通過JS代碼的方式來關聯他們和視圖的響應關系，才能記錄用戶的選擇，否則用戶不能選擇復選框或者單選框的。

我們窗體視圖綁定的表單模型如下代碼所示。

 

 但是voteitems里面則沒有固定的選項，因為這個是動態構建的，另外它的選擇項目也是需要設置響應關系才可以綁定視圖上。

如下代碼就是通過Vue.set的方式來建立他們的關系的。

  vote.GetVoteResult(param).then(data => {
    Object.assign(this.voteForm, data.result)
    //給復選框增加選擇的集合為空
    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', []) //設置視圖和模型的響應關系
      })
      this.voteForm.voteItems.filter(item => item.choiceType === 0).map(function (item, index) {
        Vue.set(item, 'choice', null) //設置視圖和模型的響應關系
      })
    }
  })

注意使用Vue.set之前，我們需要導入Vue 對象再使用。

import Vue from 'vue'

這樣相當於每條投票項目里面，都這就了一個choice的屬性，並且和界面建立了雙向綁定的關系，可以響應界面的選擇處理。

 

我們通過工具跟蹤到表單的變量就可以很清晰看到它們的數據結構了，如下界面所示。

 以上就是在微信框架模塊中，基於Vue&Element前端，通過動態構建投票選項，實現單選、復選的投票操作的一些經驗，希望對大家有所幫助和增益。