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

Posted 2020-08-23 邯郸戏曲开发

 前几天帮人设计了一个手机版（做了屏幕适配，电脑使用也正常）的考题框架，供学习交流使用，今天把设计思路与技巧命整理一下。

一 效果演示：

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