在微信框架模块中,基于Vue&Element前端,通过动态构建投票选项,实现单选、复选的投票操作

简介: 在微信框架模块中,基于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前端,通过动态构建投票选项,实现单选、复选的投票操作的一些经验,希望对大家有所帮助和增益。

 

专注于代码生成工具、.Net/.NetCore 框架架构及软件开发,以及各种Vue.js的前端技术应用。著有Winform开发框架/混合式开发框架、微信开发框架、Bootstrap开发框架、ABP开发框架、SqlSugar开发框架等框架产品。
 转载请注明出处:撰写人:伍华聪  http://www.iqidi.com

相关文章
|
27天前
|
机器人 数据安全/隐私保护 Python
企业微信自动回复软件,企业微信自动回复机器人,python框架分享
企业微信机器人包含完整的消息处理流程,支持文本消息自动回复、事件处理、消息加密解密等功能
|
3月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
288 1
|
27天前
|
JSON 机器人 API
微信机器人自动回复插件,vx自动回复机器人脚本助手,python框架分享
这个微信机器人系统包含三个主要模块:主程序基于itchat实现微信消息监听和自动回复功能
|
28天前
|
JSON 机器人 数据安全/隐私保护
微信自动聊天机器人, 微信自动回复机器人,python框架分享
这个微信机器人实现包含主程序、配置文件、工具函数和测试脚本四个模块。主程序使用itchat库
|
2月前
|
人工智能 监控 数据可视化
微信养号脚本插件,全自动化工具,【autojs实现框架】
这是一套微信养号自动化脚本,包含主脚本`wechat_auto.js`和配置文件`config.json`。脚本实现自动浏览朋友圈、订阅号新闻文章及指定公众号历史文章三大功能,支持自定义滚动次数、阅读时长与运行时间等参数。特点包括随机化操作、多种浏览模式交替及完善的日志记录。配套UI模块提供可视化控制界面,方便监控任务状态与调整参数。下载地址:https://www.pan38.com/share.php?code=n6cPZ,提取码:8888(仅供学习参考)。
|
3月前
|
JavaScript 前端开发 编译器
Vue与TypeScript:如何实现更强大的前端开发
Vue.js 以其简洁的语法和灵活的架构在前端开发中广受欢迎,而 TypeScript 作为一种静态类型语言,为 JavaScript 提供了强大的类型系统和编译时检查。将 Vue.js 与 TypeScript 结合使用,不仅可以提升代码的可维护性和可扩展性,还能减少运行时错误,提高开发效率。本文将介绍如何在 Vue.js 项目中使用 TypeScript,并通过一些代码示例展示其强大功能。
154 22
|
4月前
|
JavaScript 前端开发 API
|
4月前
|
前端开发 Java 物联网
智慧班牌源码,采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署
智慧班牌系统是一款基于信息化与物联网技术的校园管理工具,集成电子屏显示、人脸识别及数据交互功能,实现班级信息展示、智能考勤与家校互通。系统采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署与私有化定制。核心功能涵盖信息发布、考勤管理、教务处理及数据分析,助力校园文化建设与教学优化。其综合性和可扩展性有效打破数据孤岛,提升交互体验并降低管理成本,适用于日常教学、考试管理和应急场景,为智慧校园建设提供全面解决方案。
332 70
|
4月前
|
移动开发 前端开发 JavaScript
Vue与React两大前端框架的主要差异点
以上就是Vue和React的主要差异点,希望对你有所帮助。在选择使用哪一个框架时,需要根据项目的具体需求和团队的技术栈来决定。
297 83
|
5月前
|
人工智能 JavaScript 前端开发
Vue 性能革命:揭秘前端优化的终极技巧;Vue优化技巧,解决Vue项目卡顿问题
Vue在处理少量数据和有限dom的情况下技术已经非常成熟了,但现在随着AI时代的到来,海量数据场景会越来越多,Vue优化技巧也是必备技能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等