后台测试页面

一、简述

DataTablesjqueryjquery-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页面的链接
    添加至sideBar
  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语句的假值问题
      图片描述

四、配置完毕

本项目主要依赖于

心难收
717 声望32 粉丝