上一篇我们简单实现了登录功能，这篇我们继续实现后端的业务
目录
前言
由于我们之前将菜单栏是直接通过div的方式写死在页面中，而在实际开发过程中，我们的菜单栏以及下拉框等一些数据都是应该来自与数据库，所以我们需要对于主页进行一个改造
那么我们这篇文章的目的就十分清晰了，主要实现将菜单栏和表格的数据通过读取数据库的形式显示
一、菜单栏的显示？
1、首先在vo层中新建一个MenuVo类定义我们所需要的属性
2、在service层中新建一个MenuInfoService接口来构造方法，根据登录的角色进行菜单的查询显示
3、 同时在mapper层中新建MenuInfoMapper接口，构造sql查询方法的接口
4、分别在impl层进行service层接口方法的实现，以及mapper.xml中sql语句的编写
5、编写control类进行数据交互，这里同样需要使用到我们的JsonDto类进行页面数据的返回
6、最后在js中进行ajax操作编写
initMenu();
var curAdmin = "暂无"
//切换页面的方法
function turnPage(item) {
document.getElementById("itemFrame").src = "page?p="+item.getAttribute('itemUrl') ;
}
//初始化菜单的方法
function initMenu() {
$.ajax({
//连接服务器的URL定位符
url: 'initMenu',
//调用的方法
type: 'POST',
//设置异步提交
async: true,
//传递的数据
data: {},
//返回对象设置为JSON
dataType: 'JSON',
//成功时调用的方法
success: function (resp) {
// console.log(resp)
//修改欢迎的名字
$('#welcome').html("欢迎：" + resp.datas.adminName);
curAdmin = resp.datas.adminName;
menuArr = resp.datas.initMenuList;
menuStr = "";
//遍历集合，初始化菜单
for (var menu of menuArr) {
if (menu.menuPid === 0) {
menuStr +=
//拼接代码 ES6
`<li><a href="#"><i class="icon icon-tasks"></i>${menu.menuName}</a>`;
// '<li><a href="#"><i class="icon icon-tasks"></i>'+menuName+'</a>'
selectSonItem(menu);
}
;
}
//赋值给网页
$('#leftMenu').html(menuStr);
},
error: function (err) {
}
});
}
//查询子菜单的递归方法
function selectSonItem(menu) {
var menuItemStr = "";
var findItem = false;
//再次遍历集合寻找子菜单
for (var item of menuArr) {
//若找到子菜单
if (item.menuPid === menu.menuId) {
findItem = true;
//拼接字符串
menuItemStr +=
`<li><a onclick="turnPage(this)" itemUrl="${item.menuUrl}" href="#">${item.menuName}</a></li>`;
//则再次调用自己本身
selectSonItem(item);
}
}
//若有找到子菜单，则将子菜单代码拼接上去
if (findItem) {
menuStr += `<ul>${menuItemStr}</ul></li>`;
}
}这样我们就成功将数据库中有关菜单的数据读取并显示在了页面上
二、对前端界面进行简单改造
上一步中我们将菜单栏通过数据库显示，并且实现了点击不同的菜单进行不同的界面的显示，接下来我们可以直接在浏览器中进行跳转页面的查看右键点击人员管理后，点击检查，在开发这模式中我们就可以找到在上一步中菜单栏给我们分配的url
此时我们可以新建html文件，将我们的表格有关的信息添加到这个html中，这样就可以实现点击“人员管理”标签展示对应的表格信息。
注意给html中一些重要的标签添加id，方便后续js中进行操作。
三、表格数据获取
这一步还是和人员相关的操作，那么我们可以继续选择再Admin有关的层中进行编写；
首先我们需要对表格的格式进行分析，这里需要姓名、角色、部门，根据我的数据库，这里就需要进行多表链接查询，这时候同样需要我们的vo层发挥作用了，由于后续我们还会添加搜索的功能，所以我们可以直接选择进行模糊查询。
1、新建类AdminTableVo将需要的属性全部在这里进行定义
2、在service层与mapper层中进行接口的构建
AdminInfoService：
/**
* 模糊查询表格中数据的个数
* @param adminTableVo AdminTableVo 对象 存放表格相关属性
* @return Integer 整型 个数
*/
Integer selectAdminTableCount(AdminTableVo adminTableVo);
/**
* 模糊查询表格中的数据
* @param adminTableVo AdminTableVo 对象 存放表格相关属性
* @return List 列表 存放数据
*/
List<AdminTableVo> selectAdminTableData(AdminTableVo adminTableVo);AdminInfoMapper：
/**
* 模糊查询表格中数据的个数
* @param adminTableVo AdminTableVo 对象 存放表格相关属性
* @return Integer 整型 个数
*/
Integer selectAdminTableCount(@Param("vo") AdminTableVo adminTableVo);
/**
* 模糊查询表格中的数据
* @param adminTableVo AdminTableVo 对象 存放表格相关属性
* @return List 列表 存放数据
*/
List<AdminTableVo> selectAdminTableData(@Param("vo") AdminTableVo adminTableVo);3、在impl层与mapper.xml中进行接口方法的实现与sql语句的编写
AdminInfoServiceimpl：
@Resource //注意引入实例化的mapper对象
AdminInfoMapper adminInfoMapper;
@Override //实现获取表格中数据的个数
public Integer selectAdminTableCount(AdminTableVo adminTableVo) {
return adminInfoMapper.selectAdminTableCount(adminTableVo);
}
@Override //实现获取表格中的数据
public List<AdminTableVo> selectAdminTableData(AdminTableVo adminTableVo) {
return adminInfoMapper.selectAdminTableData(adminTableVo);
}AdminInfomapper.xml：这里我先选择对姓名进行模糊搜索
<!-- 获取表格中数据的个数 -->
<select id="selectAdminTableCount" resultType="java.lang.Integer">
SELECT COUNT(*) FROM admin_info a
<where>
a.admin_state != 0
<if test="vo.adminName != null and vo.adminName != ''">
AND a.admin_name LIKE CONCAT('%', #{vo.adminName}, '%')
</if>
</where>
</select>
<!-- 模糊查询 获取表格中的数据 -->
<select id="selectAdminTableData" resultType="com.wave.vo.AdminTableVo">
SELECT a.admin_id, a.admin_name, a.section_id, r.role_name, a.admin_state
FROM admin_info a, role_info r
<where>
a.role_id = r.role_id
AND a.admin_state != 0
<if test="vo.adminName != null and vo.adminName != ''">
AND a.admin_name LIKE CONCAT('%', #{vo.adminName}, '%')
</if>
</where>
LIMIT #{vo.offset}, #{vo.limit}
</select>4、在control层中进行页面交互与数据返回
@Resource //注意引入实例化的service对象
AdminInfoService adminInfoService;
/**
* 实现表格数据的显示
* @param adminTableVo 多表查询展示数据
* @return JsonDto
*/
@PostMapping("selectAdminTable")
public JsonDto selectTable(AdminTableVo adminTableVo) {
JsonDto jsonDto = new JsonDto();
try {
System.out.println("adminTableVo\n" + adminTableVo);
Integer adminTableCount = adminInfoService.selectAdminTableCount(adminTableVo);
List<AdminTableVo> adminTableData = adminInfoService.selectAdminTableData(adminTableVo);
System.out.println("adminTableCount\n" + adminTableCount);
System.out.println("adminTableData\n" + adminTableData);
System.out.println("name\n" + adminTableVo.getAdminName());
System.out.println("section\n" + adminTableVo.getSectionId());
System.out.println("role\n" + adminTableVo.getRoleName());
System.out.println("state\n" + adminTableVo.getAdminState());
if (adminTableData.size() > 0) {
jsonDto.setId(1);
jsonDto.getDatas().put("tableCount", adminTableCount);
jsonDto.getDatas().put("tableList", adminTableData);
}
}catch (Exception e) {
e.printStackTrace();
}
return jsonDto;
}5、最后新建JavaScript进行Ajax操作
//初始化查询参数
let searchName = "";
let searchSection = null;
let searchRole = null;
let searchState = null;
//初始化页码参数
let offset = 0;
const limit = 7;
let count = 0;
let currPage = 1;
let allPage = 1;
//一进入页面就进行数据的获取
initTable();
//表格初始化
function initTable() {
$.ajax({
url: 'selectAdminTable',
type: 'POST',
data: {
adminName: searchName,
sectionId: searchSection,
roleName: searchRole,
adminState: searchState,
offset: offset,
limit: limit
},
dataType: "JSON",
success: function (response) {
count = response.datas.tableCount; //获取总数据的个数
list = response.datas.tableList; //获取表格总数据
//计算总页数
allPage = Math.ceil(count/limit);
//显示数据个数
if (count < 0) {
$("#infoCount").html("详情 --- 暂无数据");
} else {
$("#infoCount").html("详情 --- 共" + count + "条数据");
}
let str = ""; //往表格添加的数据
let num = (currPage - 1) * limit; //表格中数据序号
for (let i = 0; i < list.length; i++) {
var obj = list[i];
var state = obj.adminState === 1 ? '启用' : obj.adminState === 2 ? '禁用' : 0;
var section = obj.sectionId === 1 ? '管理中心' : '运输部';
num++;
str +=
`<tr>
<td>${num}</td>
<td>${obj.adminName}</td>
<td>${section}</td>
<td>${obj.roleName}</td>
<td>${state}</td>
<td>
<button class="btn btn-primary " type="button" style="margin-right: 10px">修改</button>
<button onclick="removeAdminRow(${i})" class="btn btn-danger " type="button" style="margin-right: 10px">删除</button>
<button onclick="disableAdmin(${i})" class="btn btn-info " type="button" style="margin-right: 10px">禁用</button>
<button class="btn btn-warning " type="button" style="margin-right: 10px">重置密码</button>
</td>
</tr>
`
}
$('#mgrTable').html(str);
}
})
}
//上一页操作
function lastPage() {
if (currPage === 1) {
alert('当前已经是首页');
} else {
currPage--;
offset -= limit;
initTable();
}
}
//下一页操作
function nextPage() {
if (currPage === allPage) {
alert('当前已是最后一页');
} else {
currPage++;
offset += limit;
initTable();
}
}至此就完成了表格中数据的显示
总结
通过在vo层定义属性，service与mapper层中构造接口，impl与mapper.xml中进行接口方法的实现，最后由control层进行数据与前端页面的传输，Ajax处理数据后返回页面，这样我们就实现菜单栏与表格数据的显示以及翻页功能的实现，后续我们再对表格中的数据实现增删改查操作，这样我们的业务就基本都实现完了，订单管理在内的其他业务也都是大相径庭。
补充：
- 注意sql语句中进行模糊查询的写法<where>和<if>标签的使用
- 注意var let const区别，详情请看：var，let，const三者的特点和区别_js let-CSDN博客
- 通过ajax添加表格时我们可以直接摒弃原先字符串拼接的方式而采用反引号，极大的方便了我们代码的编程
3975
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
