资讯专栏INFORMATION COLUMN

后台测试页面使用说明

nevermind / 1092人阅读

摘要:此处需注意语句的假值问题四配置完毕本项目主要依赖于的表格插件的模态框

后台测试页面 一、简述

DataTablesjqueryjquery-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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100724.html

相关文章

  • Vue-book 2.0 一个移动端简单的全栈 web APP

    摘要:本项目是一个简单的全栈项目,前端新手可以拿来练练手。项目实现了一些简单的功能,后台可以对图书进行录入录出扫码或手动,前台显示录入的图书,并且前台注册登录后可以将书的订单发给服务器,并存到服务器。 Vue-book 2.0 Github 地址:https://github.com/percy507/v... 【觉得不错就来个 star 吧 ^_^】 说明(菜鸟请进,大神绕道 ~) 前端...

    wh469012917 评论0 收藏0
  • Vue-book 2.0 一个移动端简单的全栈 web APP

    摘要:本项目是一个简单的全栈项目,前端新手可以拿来练练手。项目实现了一些简单的功能,后台可以对图书进行录入录出扫码或手动,前台显示录入的图书,并且前台注册登录后可以将书的订单发给服务器,并存到服务器。 Vue-book 2.0 Github 地址:https://github.com/percy507/v... 【觉得不错就来个 star 吧 ^_^】 说明(菜鸟请进,大神绕道 ~) 前端...

    NotFound 评论0 收藏0
  • 两篇文章帮你入门Django(下)

    摘要:原文地址在两篇文章帮你入门上一文中,我们已经做了一个简单的小网站,实现了保存用户数据到数据库,以及从后台数据库读取数据显示到网页上这两个功能。注意测试时并不需要运行服务,这样能节省服务的开销,提高测试的速度。 原文地址 在两篇文章帮你入门Django(上)一文中,我们已经做了一个简单的小网站,实现了保存用户数据到数据库,以及从后台数据库读取数据显示到网页上这两个功能。 看上去没有什么问...

    voidking 评论0 收藏0

发表评论

0条评论

nevermind

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<