使用 Vue.js 制作一个简单的调查问卷平台
使用 Vue.js 制作一个简单的调查问卷平台
Questionnaire
一个用Vue.js写的微型问卷调查
任务基于百度ife 任务四
demo
任务目的
- 基于阶段三的各个组件,学习模块化、前端工程等内容,综合运用HTML,CSS,JavaScript完成一个小型完整网站的实现
任务描述
- 参考设计图 实现一个简易版的问卷管理系统,有如下功能:
问卷管理列表
- 有一个头部可以显示logo,不需要实现登录等操作
- 问卷管理列表页面默认为首页
- 有一个表格用于展示所有已创建的问卷
- 列表中包括列有:问卷名称,问卷状态(未发布,发布中,已结束),和操作区域(编辑、删除、查看数据)
- 问卷状态为未发布时,可以做的操作为编辑、删除、查看问卷
- 问卷状态为发布中和已结束时,可以做的操作为查看数据、查看问卷
- 表格最左侧有批量选择(多选)的checkbox,多选后,可以进行批量删除功能,checkbox样式用默认即可,不需要按照设计图的样式
- 当一个问卷都没有的时候,表格不展现,页面显示大大的新建问卷按钮
问卷新建及编辑
- 点击问卷管理列表中的新建按钮后,进入到问卷新建页面
- 点击问卷列表中某个问卷行的编辑按钮后,进入到问卷的编辑页面
- 新建页面和编辑页面基本相同
- 问卷有一个标题字段,点击后可以进入编辑状态
- 可以针对问卷中的问题进行增删改操作,每个问卷最少一个问题,最多十个问题
- 问题类型包括:单选题、多选题、单行文本题
- 可以对所有问题进行位置改变(上移、下移),复用,删除的操作
- 最上面的问题没有上移操作,最下面的问题没有下移操作
- 点击复用时,在被复用的问题紧接着的下方新增一个和被复用完全一样的问题(包括选项)
- 对于单选题和多选题,可以对问题的选项进行增、删、改、排序操作
- 文本题可以设定是必填还是非必填的问题
- 有一个问卷调查填写截止时间,使用一个日历组件来进行时间的选择,日期选择不能早于当前日期
- 保存问卷可以进行问卷的保存
- 发布问卷可以使得问卷状态变为发布中的状态
- 当点击发布时,如果截止日期早于当前日期,则需要提示修改截止日期
删除问卷
- 在问卷管理列表中点击某个问卷的删除按钮后,弹出一个浮出层,让用户二次确认是否删除该问卷,如果用户点击是,则删除掉该问卷
查看问卷
- 在问卷管理列表中点击查看问卷的按钮后,在新窗口中打开该问卷的页面,该页面是可供用户进行问卷填写的页面,在问卷未发布状态和已结束状态时,问卷提交是无效的。
- 该页面在移动端需要进行良好的兼容支持
查看数据
- 在问卷管理列表中点击查看数据按钮后,进入到一个数据报告页面,用图表形式呈现各个单选题和多选题的选择情况
- 如设计稿中呈现,每一个问题在右侧用某种图表来呈现答题情况,自行选择合适的图表,设计稿中仅为示意,图表样式不需要和设计稿一致。推荐单选题使用饼状图,多选题使用条形图
- 文本题用一个百分比图展现有效回答占比即可
- 返回按钮点击后返回列表页面
- 在项目中尝试模块化的方法及工具
- 在项目中尝试CSS预处理工具
- 在项目中尝试项目构建、打包工具
任务注意事项
- 上面描述中的示意图仅为需求描述参考,不作为实现的设计参考
- 上面的需求描述中存在与真实产品合理性的差异,本任务以技术学习为主,忽略产品设计上的问题
- 请注意代码风格的整齐、优雅
- 代码中含有必要的注释
- 可以合理使用第三方框架、类库
- 所有数据可以采用前端模拟,也可以真实创造一个服务端的环境及代码 不要求有真实的保存、问卷填写等操作,均可采用随机、自制数据模拟来mock数据
任务协作建议
- 如果是各自工作,可以按以下方式:
- 团队集中讨论,明确题目要求,保证队伍各自对题目要求认知一致
- 各自完成任务实践
- 交叉互相Review其他人的代码,建议每个人至少看一个同组队友的代码
- 相互讨论,最后合成一份组内最佳代码进行提交
- 如果是分工工作(推荐),可以按以下模块切分
- 列表页面
- 新建及编辑页面
- 问卷填写页面
- 查看数据报告页面
Build Setup
# install dependencies npm install# serve with hot reload at localhost:8080 npm run dev# build for production with minification npm run build# run unit tests npm run unit# run e2e tests npm run e2e# run all tests npm test
For detailed explanation on how things work, checkout the guide and docs for vue-loader .
使用 Vue.js 制作一个简单的调查问卷平台相关推荐
- vue.js制作的简单美观的卡片
NX卡 (nx-card) Simple and beautiful card made for vue.js. 为vue.js制作的简单美观的卡片. View demo 查看演示 Download ...
- js制作一个简单的div弹窗:
js制作一个简单的div弹窗: 演示地址:http://demo.jb51.net/js/2015/jquery-simple-alert-style-demo/ <!DOCTYPE html ...
- Android:设计一个简单的调查问卷
设计一个简单的调查问卷,要求用到TextView,Button,CheckBox,RadioButton,EditText等控件 今天写了一个demo,里面用到了常用的布局,以及常用的几种控件,这里调 ...
- 使用原子电子和vue.js制作的简单RSS阅读器
RSS阅读器 (RSS Reader) Simple Desktop RSS Reader made using VueJS. 使用VueJS制作的简单桌面RSS阅读器. Download Sourc ...
- 今天我教大家用js制作一个简单的计算器
首先我们先打好框架 代码如图: 下面我们来看一下页面显示效果: 然后我们开始写js效果: 这样,我们一个简单的计算器就做好了,效果如图:
- 初识javaWeb:纯JSP+CSS+JS构建一个简单的电商平台
github地址:https://github.com/yaodebian/GoGoLe 初识java web,想在后端用java有一技之长.注:以下仅是自己的一个程序记录. 首先java web的动 ...
- 用HTML.JS制作一个简单的灯泡
作业目标 使用图片制作简单的灯泡开关操作 步骤 实现的最终结果 1 2 图片中点击灯泡可以使灯泡发光 图片中点击开关可以使灯泡发光并且右边文本框中显示什么时间灯亮和灯灭 代码块 CSS样式 <s ...
- vue结合php增删改查实例,用vue.js写一个简单的增删改查
Title tbody:empty:after { content: '没有找到'; } 姓名年龄操作 {{item.stuName}}{{item.age}}修改 删除 添加 var app = n ...
- php对话框制作,js制作一个简单的对话框教程
这篇文章主要为大家详细介绍了js实现简易聊天对话框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了js实现简易聊天对话框的具体代码,供大家参考,具体内容如下 聊天对话框 *{f ...
最新文章
- C# Message 消息处理
- find your place
- php 位运算与权限,PHP中的二进制位运算和权限存储
- Spring框架学习3:bean元素属性
- 论文解读丨文档结构分析
- iPhone 11“机模”上手:硕大后置相机模组很突兀
- Java和web前端,IT新人该如何选择?
- 指针4-指针的运算和指针变量占几个字节
- Ubuntu中ssh远程报错:packet_write_wait: Connection to 192.168.163.190 port 22: Broken pipe lost connection
- python生成个性二维码学习笔记
- scrapy_redis 相关: 将 jobdir 保存的爬虫进度转移到 Redis
- 中国天气预报网接口及城市代码
- 浅读艾宾浩斯遗忘曲线
- 电脑误删了计算机 怎么恢复,电脑误删文件怎么恢复 电脑误删文件恢复方法【步骤介绍】...
- 关于74HC573使用
- 关于纯流量卡-物联网卡的一点个人看法
- 云队友丨顶级高手,如何进行系统思考?
- 浏览器去除烦人的黑白滤镜
- 软件测试与软件开发的关系是怎样的?
- 粗心店主下班忘关店门 执勤巡特警守候至凌晨