後臺測試頁面使用說明

後臺測試頁面

1、簡述

對DataTables、jquery、jquery-ajax、熟悉的開發者可沒必要閱讀
後端項目地址： Gsms_web_app
頁面項目地址： Test_For_Backend

2、使用步驟（以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頁面，已經能夠看到新生成的頁面了

3、後端須要懂得的配置

• 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語句的假值問題
    

4、配置完畢

本項目主要依賴於

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