wex5 教程 之 图文讲解 考题模块框架设计
前几天帮人设计了一个手机版(做了屏幕适配,电脑使用也正常)的考题框架,供学习交流使用,今天把设计思路与技巧命整理一下。
一 效果演示:
1 登陆后台
题库管理
试卷管理
考生管理
科目管理
2 考生注册
考生登陆
进入考试界面
开始答题
交卷保存即可
二 开发思路:
充分利用baasdata数据绑定与data临时组件的存储特性,实现数据同步,绑定思想贯穿整个考题模块设计。
三 页面逻辑与代码实现:
1 数据库设计
数据库设计模型基础:
(注)数据模型,是整个开发过程中对数据相关业务的描述,根据开发经验,根据以上四种分类,可以快速创建所需的基本表。
考题模块基本表如下:
学生表,描述学生基本信息及登陆状态
题库表,把所有题目和答案放到一个题库中,类似于仓库,注意,我把题目,正确答案和4个选项放在一条记录中,前台会进行拼接处理。
学科表,用于将试题分类
试卷名称表
试题集合表,是一个中间表,将多个题抽出来组成试卷。一个科目里有多个试卷。多对多的表关联,需要中间表来进行角色操作,便于前端取值方便
答题卡表,答完题后,将答案提交到答案库中,便于后台分析整理。
(注意事项)1 表名前缀t_ ,没有特别的间义,只是为了在数据库中,上百张表,把当前工程用到的表放到一起,找起来方便
2 字段前缀t_ ,虽然也没有特别意义,但是非常重要,可以避免操作数据库时与数据库的保留字段冲突,导致保存失败。
2.登陆,注册,页面跳转,传参,后台管理
大家看我博文里的详细讲解,这里不做累述。
3.考题模块
开始答题对话框
加载试题
页面与组件设计
(注)1 题目,就是一个output,绑定到当前行
2 四个选项,利用radiogroup来实现,选项用前端data装载数据,然后用radiogroup来绑定
切换试题,用当前行切换,并装载选项到临时data中去,并在点击切换后,把正误span对像隐藏。
正误判断与显示,利用radiogroup的change事件,触发判断并根据判断结果,用js方法控制正误span元素的隐藏与显示
四 总结:
1 指导思想: 绑定技术,是所有设计核心。代替大量代码,高效,易于维护
2 开发顺序:数据库--页面逻辑--代码实现
数据库,是对项目中对像的数据描述,数据模型的设计优劣,直接关系到前后端开发的优劣。很多看完官方视频的同学感觉还是什么也设计不了,那么,看看数据库吧,因为你对数据模型还没有概念。
3 问题解决:
开发过程中会遇到各种各样的问题,向别人请教固然好,解决不了就是bug。这成了很多新手的直觉。任何框架都有bug,世上没有完美无缺的软件。有bug不可怕,可怕的是站在bug面前束手无策。正确思路是,换总思维和角度,看看问题的本质是什么,从数据库开始到页面再到逻辑,一环一环测试,看看是哪里的问题,是符号错误,标点缺失,还是传参失败。100次的测试,代表的是你对错误的认识。
4 测试方法:
1 alert:大量的临时测试,做一步,测一步,不要走远了再测。 不仅仅是输出字符,可以用来测试页面加载事件,data取值事件,可观察对像的作用域,event事件是否执行,等等。
2 谷歌开发工具: 大家都在喊开发文档少,没有教程,麻烦大家把开发工具打开,看看里面的方法,成片片的方法,事件,监听器,属性,对像,元素,对像是谁,怎么获取对像,如何得到值,事件发生在谁身上,触发了哪些命令。wex5没有提供的api,谷歌里面有这么多用不完的方法,哈哈,js才是万能之王啊。
5.给初学者的忠告:
作为一个初学者,给初学者的忠告:
1 wex5官方教程,必看
2 数据库,必学
3 js 必学
4 html5,css必学
这4种相关,缺一不可。如果你想做完一个小项目,哪怕是个演示性的小东东,开始努力吧。
wex5 教程 之 图文讲解 考题模块框架设计的更多相关文章
- wex5 教程 之 图文讲解 后台管理界面设计与技巧
视频教程地址:http://v.youku.com/v_show/id_XMTgwOTAyMTkyMA==.html?from=s1.8-1-1.2&spm=a2h0k.8191407.0.0 ...
- wex5 教程 之 图文讲解 可观察对象的集群应用与绑定技术
一 前言: wex5官方教程里,开篇即以一个input输入,output即时输出的例子,为我们展现了一个概念:可观察对象.在以后我的项目开发中,将大量运用可观察对象. 那么,问题来了: 1. 可观察对 ...
- wex5 教程 之 图文讲解 bind-css和bind-sytle的异同
wex5作为网页开发利器,在前台UI数据交互设计中大量使用了绑定技术,即官方视频教学中也提到了KO,实质是数据绑定与追踪.在前台组件的属性中,为我们提供了两个重要的样式绑定属性,bind-css和bi ...
- wex5 教程之 图文讲解 文件上传attachmentSimple(1)
视频教程地址:http://v.youku.com/v_show/id_XMTc4NDAyMTY4OA==.html 效果预览: 1 调用attchmentSimple组件,打开文件管理器,并选中,显 ...
- wex5 教程 之 图文讲解 全局可观察变量与登陆状态全局控制
一 先说说,这两个概念是什么意思 全局可观察变量?没听说过,只听过全局变量,那你out了,因为我要充分发挥绑定技术来控制页面部局,组件的隐藏与显示,文字内容,样式改变.看我博文大家知道,我想用绑定技术 ...
- wex5 教程之 图文讲解 Cloudx5一键部署
视频教程地址:http://v.youku.com/v_show/id_XMTc3OTExNTUwNA==.html 效果预览: 一键部署cloudx5三要领 1.数据源命名为x5 2.数据库命名为x ...
- wex5 教程 之 图文讲解 登陆,注册,页面跳转
视频教程地址:http://v.youku.com/v_show/id_XMTc3OTE0Nzg0NA==.html 效果预览: 登陆页面 首页用windowContainer装载 注册页面 登陆 ...
- WiFi模块Demo(新手教程)图文详解模块使用教程
本文出自APICloud官方论坛,感谢论坛版主 Mr.ZhouHeng 的分享. 第一步我们需要在开发控制台创建一个Native App应用以及添模块的准备工作: 按照下图步骤 输入完点创建完成之后 ...
- Android项目中的各个模块框架设计
作为Android开发,现对项目开发中的各个模块搭建,梳理如下: Android UI框架,开发人员需要达到专家级 网络框架 浏览框架 图片加载框架 图片裁剪压缩工具类 客户端并发框架 线程池设计 ( ...
随机推荐
- "我爱记单词"测试报告兼功能展示
"我爱记单词"测试报告兼功能展示 前言: 我们大部分的测试都是一边开发一边完成的,这里给出软件开发基本完成后在使用时的一些测试例子. 一.背景介绍 我们的数据库中一共有10个表: ...
- MAC地址与IP地址的区别
介绍一下MAC地址的知识,MAC地址和IP地址的区别以及MAC地址在实际应用中所涉及到的安全问题. 一.基础知识 如今的网络是分层来实现的,就像是搭积木一样,先设计某个特定功能的模块,然后把模块拼起来 ...
- jQuery还原select下拉列表和清空input的值,回显下拉列表框的值
实现用jQuery还原select下拉列表的值,用了很多种方式,花了一些时间,最后重要找到一种可以实现的方式, 页面上有这些内容 <select id ="level" na ...
- Ubuntu下VIM的安装及其配置——Linux篇
一.Ubuntu系统默认内置: 实际上ubuntu默认没有安装老版本的vi,只装了vim.vi是vim.tiny(vim的最小化版本,不含 GUI,并且仅含有一小部分功能,并且默认与vi兼容.此软件包 ...
- NFS服务器搭建
1. 安装nfs-kernel-server,然后编辑/etc/exports. /sambadata/nfsserver 10.0.0.0/255.255.255.0(fsid=0,all_s ...
- 【iCore3 双核心板_FPGA】例程一:认识FPGA
实验指导书及代码包下载: http://pan.baidu.com/s/1kUa05FL iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...
- ng-model和ng-bind区别
ng-bind has one-way data binding ($scope --> view). It has a shortcut {{ val }} which displays th ...
- angularjs - 415 (Unsupported Media Type)
angularJs+springMVC angular表单提交一个user实体时,报 angularjs - 415 (Unsupported Media Type)错误!! 原因是$http({ u ...
- A trip through the Graphics Pipeline 2011_12 Tessellation
Welcome back! This time, we’ll look into what is perhaps the “poster boy” feature introduced with th ...
- 国内docker镜像
daocloud:https://www.daocloud.io/ 网易蜂巢:https://c.163.com/