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

    相关视频制作完成,上传优酷。教学app制作中。我是邯郸戏曲开发,tel:15175073123,qq:1017945251

     

     扫描二维码,看高清教学视频。

  • 相关阅读:
    15分钟学会使用Git和远程代码库
    关注的一些个人博客记录
    vue实现筛选功能,文字选中变色
    为博客添加二次元人物方法
    收藏几个用的到的网站
    《代码整洁之道》学习记录
    《架构整洁之道》学习记录
    《指尖上行--移动前端开发进阶之路》学习记录
    《JavaScript设计模式》学习记录
    《以匠心,致设计》学习记录
  • 原文地址:https://www.cnblogs.com/fangziffff123/p/6178710.html
Copyright © 2020-2023  润新知