后台测试页面使用说明

后台测试页面

一、简述

对DataTables、jquery、jquery-ajax、熟悉的开发者可不必阅读

后端项目地址： Gsms_web_app

页面项目地址： Test_For_Backend

二、使用步骤（以meeting_user表为例）

1. 传递参数，自动生成，参数如下所示

   {
     "htmlPageName": "meetingUser",
     "htmlPagePkgName": "meetingUser",
     "beanName ":"metting",
     "beanPackageName": "com.myqm.pojo.xxb.meeting",
     "controllerPkgName": "com.myqm.controller.xxb.meeting",
     "controllertestName":"com.myqm.test.controller",
     "daoPackageName": "com.myqm.dao.xxb.meeting",
     "daotestPackageName": "com.myqm.dao.xxb.meeting",
     "mybatisMapperPackageName":"mybatis-mappers",
     "servicePackageName": "com.myqm.service.xxb.meeting",
     "tableName": "meeting_user",
     "voName": "MeetingUserQuery",
     "voPackageName": "com.myqm.vo.xxb.meeting"
   }
              

2. 将

   gsms2_web_app/admin/code/back/

   目录下的后端文件分别拷贝到后端项目相应目录下并修改(此处省略)
3. 将

   gsms2_web_app/admin/code/front/

   目录下的

   meetingUser

   文件夹拷贝到

   test_for_backend/src/pages/meeting/

   目录下
4. 编辑

   test_for_backend/src/index.html

   文件中的sideBar部分添加指向meetingUser页面的链接

   

5. 此时可尝试打开

   index.html

   页面，已经可以看到新生成的页面了

三、后端需要懂得的配置

• test_for_backend/src/config/config.js

  文件

  //定义json格式字符串
  var userData = {
      token: '4500fe68-4d7a-4777-9f5f-b5025d6a72cc' // token
  };
  var API = {
      URL: 'http://localhost:8085' // url
  }
  // 将数据存入sessionStorage中
  setSessionStorage('userData', userData)
  setSessionStorage('api', API)
             

• test_for_backend/src/pages/metting/mettingUser/mettingUser.html

  表格配置
  • 数据库结构

    

  • 该数据结构是直接从数据库中取出的字段名，假如在pojo里修改了字段名，则在此处相应修改，使得该数据结构与NetWork中的json匹配

    

  • 该HTML代码是表格的表头部分，需要与columns匹配

    

• test_for_backend/src/pages/meeting/mettingUser/mettingUser-add.html

  文件

  添加框配置

  • html

    该form下有多个input，请根据add接口所需的参数自行配置

    

  • js

    此处为添加框表单的验证规则，请和上方的html相匹配

    

• test_for_backend/src/pages/meeting/mettingUser/mettingUser.html

  文件

  编辑框配置，请与

  /edit

  接口相互匹配
  • html

    

  • js

    该函数是点击

    编辑/删除

    按钮后获取该行的主码，传给

    /get

    接口获取该条数据

    可以通过修改eq()函数的参数来获取其他列的值

    tds.eq(0).text() // 获取该行第一列的数据传给get接口
               

    

• 删除配置

  同编辑框同理，通过

  getRowId

  函数获取

  id

  传给

  /del

  接口,可按照需求自行更改

• 搜索框配置

  请根据项目需求自行配置

  • html

    

  • js

    获取搜索框的

    value

    ，构建一个

    searchParam

    。此处需注意

    if

    语句的假值问题

    

四、配置完毕

本项目主要依赖于

• jquery的表格插件DataTables
• layui的模态框
• jquery-Ajax