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种相关,缺一不可。如果你想做完一个小项目,哪怕是个演示性的小东东,开始努力吧。

时间: 2024-10-12 14:13:15

wex5 教程 之 图文讲解 考题模块框架设计的相关文章

wex5 教程 之 图文讲解 智能数据库设计 之(1) 触发器

一:设计需求: 智能数据库设计,其实没有这个说法,只是由于我设计视频播族器的需要,对数据库的设计有一些智能化的需求. 目的有三个: 1.减少前台后端操作数据库代码量 2.数据库操作失败可以回滚.保证数据库的完整,正确. 3.充分利用数据库性能. 今天用到的是触发器 例子是我之前的一个设计要求,在戏曲管理后台把热门戏曲的id添加到热门表之后,戏曲表里相应的字段自动填充hot标记为1.以往的设计是在前台对表操作,今天用触发器的功能监控操作表自动填充字段.简单理解就是,用触发器监控一个表的变化,来修改

wex5 教程 之 图文讲解 头像裁剪与上传

视频教程地址: http://v.youku.com/v_show/id_XMTgyMDE5NjEyOA==.html 一 效果演示 1.点击头像,弹出图片裁剪框 2,选择图片,裁剪,上传 3.上传成功后,头像图标更改 二 案例解读 案例目录 wex5为我们提供了一个picut图片裁剪案例,如下: 组件部局 加入file标签用来打开文件管理器进行图片选择,div标签进行图片预览,image标签为裁剪图片 后端服务 后端接收请求参数后,对路径进行了拼接,创建文件流,并创建文件,成功后将成功信息传给

wex5 教程之 图文讲解 Cloudx5一键部署

视频教程地址:http://v.youku.com/v_show/id_XMTc3OTExNTUwNA==.html 效果预览: 一键部署cloudx5三要领 1.数据源命名为x5 2.数据库命名为x5 3.数据库初始化语句sql的生成与上传 工具栏下,选择导出数据库脚本 注意事项: 1.数据库与表的创建必段选择.否则不能创建数据库与表. 2.数据选项含义依次为:无数据(即空表),插入与删除,插入,忽略插入(不允许插入数                              据),覆盖数据.

WiFi模块Demo(新手教程)图文详解模块使用教程

第一步我们需要在开发控制台创建一个Native App应用以及添模块的准备工作: 按照下图步骤 输入完点创建完成之后 最好点击添加按钮之后返回看看你是否添加了需要的模块,添加完模块之后在点击自定义的 然后云端操作就完成 接下来我们把云端代码拉取到本地 通过svn拉取本地 使用开发工具直接打开拉取到本地的代码进行开发: 如果你们使用的是官网工具apicloud-studio-2.exe 那么请看下面的链接教程把代码拉取到本地: https://docs.apicloud.com/Dev-Tools

使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块(菜单)管理源码分享

http://www.cnblogs.com/huyong/p/3454012.html 使用Jquery+EasyUI 进行框架项目开发案例讲解之五  模块(菜单)管理源码分享    在上四篇文章  <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享>  <使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享>  <使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享> <

Verilog HDL基础语法讲解之模块代码基本结构

Verilog HDL基础语法讲解之模块代码基本结构 ? 本章主要讲解Verilog基础语法的内容,文章以一个最简单的例子"二选一多路器"来引入一个最简单的Verilog设计文件的基本结构. 以下为本章中例子中的代码: 01????/*======================================= 02????*????file neme : mux2.v 03????*????author????:????小梅哥 04????*????Verison????:????

图文讲解:iOS App提交流程

原地址:http://www.toceansoft.com/ios/3287.jhtml 摘要: 由于苹果的机制,在非越狱机器上安装应用必须通过官方的App Store,开发者开发好应用后上传App Store,也需要通过审核等环节.AppCan作为一个跨主流平台的一个开发平台,也对ipa包上传App Store作了支持.本文从三个流程来介绍如何实现AppCan在线编译出ipa包,以及上传到苹果App Store. 一.证书的导出 1.1.前期工作 首先你需要有一个苹果的开发者帐号,一个Mac系

用JSmooth制作java jar文件的可运行exe文件教程【图文】

这是我之前在个人博客3yj上面写的一篇文章,如今转载过来,原文地址 (这不是广告哦) 几年前,刚接触java的是,就想用一些方法把自己的劳动果实保护起来,曾经也用过非常多这种工具,有一个特别好用,今天写篇文章跟大家分享. 今天要用到的工具有 JSmooth 0.9.9-7 汉化版,能够到本站下载:JSmooth 0.9.9-7 汉化版 首先要把你的程序打包成双击能够运行的包,详细的方法我就不多说了,网上非常多的,主要命令是:jar cvfm test.jar *.* -C  之类的 主要是确保其

eclipse 发布签名APK图文讲解

eclipse 发布 签名android 程序 1 在项目上右键 export 2 export android application 3 第一次发布 要创建一个新的keystore 4 填写key信息 5 6 finish 第二次发布的时候  可以直接选择已有的keystore 选择以后的alias 或者新建 ok  搞定 eclipse 发布签名APK图文讲解,布布扣,bubuko.com