共计 1814 个字符,预计需要花费 5 分钟才能阅读完成。
后台测试页面
一、简述
对 DataTables、jquery、jquery-ajax、熟悉的开发者可不必阅读后端项目地址:Gsms_web_app 页面项目地址:Test_For_Backend
二、使用步骤(以 meeting_user 表为例)
传递参数,自动生成,参数如下所示
{
“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”
}
将 gsms2_web_app/admin/code/back/ 目录下的后端文件分别拷贝到后端项目相应目录下并修改 (此处省略)
将 gsms2_web_app/admin/code/front/ 目录下的 meetingUser 文件夹拷贝到 test_for_backend/src/pages/meeting/ 目录下
编辑 test_for_backend/src/index.html 文件中的 sideBar 部分添加指向 meetingUser 页面的链接
此时可尝试打开 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