Vue.js微型问卷调查平台
使用Vue.js实现一个微型问卷调查管理平台
入门Vue有几周时间了,学习过程也只是写一些小demo,比如TodoList,购物车之类的,了解了Vue的一些基础的特性和使用方法。刚好年后开学就想做个稍微像样点的东西,于是就找出了16年百度前端学院的任务五十来作为本次将要实现的项目。废话不多说,下面看东西。
链接地址
项目地址:GitHub
预览地址:在线预览
任务描述
传送门:任务地址
技术栈
- Vue.js:使用最新的Vue2的语法
- vue-router:单页应用必备的路由管理
- ES6:使用ES6语法实现大部分功能
- Sass:CSS预处理
- LocalStorage:本地存储,方便保存用户的问卷数据
问题及解决
- 全选状态的切换 比如:
点击全选切换所有问卷的选中状态
点击任意问卷时计算是否全部问卷均选中来实时控制全选按钮的样式
/*问卷的check按钮*/
<li @click="checkItem(item)"><i :class="{'checked': item.checked}"></i></li>/*全选按钮*/
<p @click="checkAll(isCheckedAll)"><i :class="{'checked': isCheckedAll}"></i></p>
methods: {checkItem(item, flag = null) {if (typeof item.checked === 'undefined') {Vue.set(item, 'checked', true);}else if (flag !== null) {item.checked = !flag;}else {item.checked = !item.checked;}},checkAll(flag) {this.quList.forEach( item => {this.checkItem(item, flag)});}},/*通过ES6的数组every方法来很方便的得知的问卷列表中全部问卷是否为全选或非全选*/computed: {isCheckedAll() {return this.quList.every( item => item.checked);}}
- 操作问卷时提示用户的弹窗功能
点击操作按钮会执行一个Generator函数
用户可选择提示框中的确定/取消来决定是否执行该操作
/*问卷的编辑按钮*/<span v-if="!item.state" @click="iterator = editItem(item); iterator.next()">编辑</span>/*提示框的选择按钮*/<span @click="iterator.next(); isShowPrompt = false">确定</span><span @click="isShowPrompt = false">取消</span>/*通过Generator函数来控制是否要进行下一步操作*/*editItem(item) {yield this.showPrompt(`确认要编辑《${item.title}》?`);yield this.$router.push({name: 'Edit', params: {id: item.id}});}
- 用户回答问卷提交过程的检查必填项是否已填
/*执行提交操作时,会先调用下面的函数,来检查用户是否已经填写所有必填的项目,否则return false不提交*/requireValidate() {let textareas = document.querySelectorAll('textarea');return [].every.call(textareas, item => {if (item.hasAttribute('required') && item.value.trim() === '') {return false;}return true;})}
- 用户在填写问卷时会保存一份答案的数据
最后用户提交时后将所有答案合并在一个对象里方便提交至服务器
这个项目非真实线上项目所以我只打印在控制台看看)
/*文本框的答案由一个字符串保存*/<textarea v-model="item.answer"></textarea>/*单选钮的答案是选中的选项的索引,也是由字符串保存*/<input v-if="item.type === 'radio'" :type="item.type" @change="item.answer = optIndex">/*复选框的答案是选中的选项的索引,由一个数组保存*/<input v-else :type="item.type" @change="checkboxAnswer($event, optIndex, item.answer)">
- 问卷编辑页面里的坑就比较多了,我就不一一贴出来了,我说说几个我印象比较深刻的
编辑页面中每个问题的题目和选项都可以点击后切换成input来进行修改,我用的是样式来控制他们的显示和隐藏,这里因为编辑选项时会影响到处于其父级元素的题目的input的显示,所以我在这个部分加了双重验证,如果只是编辑题目就控制一项class,如果是编辑选项就要先隐藏题目的input,然后显示出选项的input。
- 由于修改问卷可能会修改多处地方,所以不用每修改一处都保存一次,所以我把数据进行了复制而不是引用,在最后由用户决定是否保存修改后的问卷。
- 这个页面的Generator函数有的两个yield有的是三个yield所以我在执行next()之前加了&&判断,这样就不会在控制台报错。
- 使用了一个子组件,就是日历选择器,通过$emit()将选择的日期传给父组件的input中。
......
- 回答的数据展示是自己用Math.random()来随机生成的数据,饼状图是使用了ECharts生成的。
总结
Vue是个好东西,努力学吧。
在写这个项目的时候确实遇到挺多问题,不过还好都一一解决了。
第一次写文章,如果哪里写的不好说的不好,望各位大佬轻喷。
溜了 0.0。
Vue.js微型问卷调查平台相关推荐
- 基于Vue实现的问卷调查平台
问卷调查平台 今天给大家分享的是基于vue实现的问卷调查平台 安装教程 vue的安装环境其实挺简单的 1.首先安装node.js,vue是基于上面运行的 2.安装vue 环境 这里就不写教程了,大家可 ...
- div+mui+vue.js 制作问卷调查单页 ——题目答案是造的json
div+mui+vue.js 制作问卷调查单页 --题目答案是造的json 先来看一下效果图: 主要就是用读取json题目和答案,记录答案ID. 一次性去读10道题目,vue.js控制当前题目的显示影 ...
- 计算机登录平台,计算机毕业设计之SpringBoot+Vue.js工会管理系统平台
系统功能 工会管理平台基于 Java Web 技术研发,可以对工会工作进行自动化管理,实现工会管理及日常活动工作的各项业务支持.分析系统的业务要求及开发目标,提出系统的功能需求分为会员添加.福利发放. ...
- ajax制作调查问卷,div+mui+vue.js 制作问卷调查单页 ——题目答案由后台随机给出10道...
封装的ajax获取数据.代码可能有些是多余的,没做处理!!点击提交后有弹框,在这里我没有贴出来. 第一次写博客,这些也是别人教我的,经理解后,贴出来于大家分享 --html-- .mui-input- ...
- vue跳转到外部链接_前端实战项目:Vue.js实现外卖平台webapp,饿了么项目的翻版...
链接:https://github.com/ljianshu/mt-app 适合没有经验的朋友. 项目涉及到技术栈: vue全家桶:Vue.Vue-router.Vue-cli等 组件化:单Vue文件 ...
- 使用 Vue.js 制作一个简单的调查问卷平台
使用 Vue.js 制作一个简单的调查问卷平台 原文 https://github.com/pramper/Demos/tree/master/Vue-Demos/Questionnaire 主题 ...
- 微信公众平台菜单编辑php,如何使用Vue.js实现微信公众号菜单编辑器(思路详解)...
这次给大家带来如何使用Vue.js实现微信公众号菜单编辑器(思路详解),使用Vue.js实现微信公众号菜单编辑器的注意事项有哪些,下面就是实战案例,一起来看一下. 学习一段时间Vue.js,于是想尝试 ...
- 微信公众平台菜单编辑php,Vue.js实现微信公众号菜单编辑器步骤详解(上)
这次给大家带来Vue.js实现微信公众号菜单编辑器步骤详解(上),Vue.js实现微信公众号菜单编辑器的注意事项有哪些,下面就是实战案例,一起来看一下. 学习一段时间Vue.js,于是想尝试着做一个像 ...
- vue+js练手前端项目->游戏平台(贪吃蛇、俄罗斯方块、飞机大战、飞翔的小鸟、2048、五子棋)
线上地址:http://codeape.site/ 源码地址:https://gitee.com/wooden-joint/my-game 觉得有用可以点个star 项目介绍 该游戏平台涉及的知识点有 ...
最新文章
- golang 字段 序列化 反序列化 简介
- 【推荐】《精通.NET互操作:P/Invoke,C++ Interop和COM Interop》
- 自然语言处理中的符号表征
- 微软bi 架构 服务器,微软BI体系结构.
- AI应用开发实战系列之一: 从零开始配置环境
- js设置cookie,包含多个name
- 计算机用户 图片存储位置,电脑版微信图片存在哪里?存储地址是什么?
- 中职学校计算机教师 述职报告,中学教师个人述职报告4篇
- 计算机应用工程师如何评定,个人如何申请工程师职称评定
- Matlab基于主分量的人脸重建显示
- 什么是大数据可视化,有什么作用?
- mysql 竖线_为什么MySQL拒绝在INSERT INTO字符串中使用竖线('|')字符?
- Cheat Enginee(CE)对扫雷中部分属性的内存地址寻找以及修改~逆向分析
- Matlab R2012a/b反复激活无效+license checkout failed解决方案
- IT史记:愤怒的杰里·桑德斯
- [521]plt.cm.Spectral
- 转载:注册表修改--鼠标左右键菜单篇
- 逻辑数字电路的卡诺图
- 核心组件自主造,国产化超融合亮剑“新基建”
- element-ui之el-collapse-transition(折叠展开动画)源码解析学习
热门文章
- 神码ai人工智能写作机器人_真正的人工智能和机器学习的未来
- uvalive 7480 Association for Control Over Minds
- 电子学会图形化一级编程题解析:希神吓走猫头鹰
- ffmpeg批量切片音频
- 打造适用于KVM云服务器的极简Win7PE(仅80MB)
- 错误:System.Data.MetadataException: 无法加载指定的元数据资源。
- Ubuntu 代理设置与取消
- 快停下 劣质移动电源会把手机充坏
- 多卡聚合智能融合通信设备无人机图传在防汛应急指挥中的解决方案
- quartz 每月一次_quartz cron表达式 启动时先执行一次 以后每个月执行一次