Express补充二
分页的补充
在之前分页的时候,数据量比较小还没有什么,如果数据量比较大,这个时候就出问题了,如图所示
这个时候,我们可以看到右下脚的页数过多,所以我们要解决这个问题
解决思路
之前我们的分页数据是通过一个叫PageModel
的对象来进行的,现在我们把这个对象打开看一下
/**
* 页面分页信息
*/
const appConfig = require("../config/appConfig.js");
/**
* @class PageModel
* @description 用来形容分页信息
*/
class PageModel {
/**
* @param {Number} totalCount 总记录数
* @param {Number} pageIndex 页码
*/
constructor(totalCount, pageIndex) {
this.totalCount = totalCount;
this.pageIndex = pageIndex;
//总的页数
this.pageCount = Math.ceil(this.totalCount / appConfig.pageSize);
//如果页码过多,这个时候就会出问题 ,必须动手动的指定开始与结束
this.pageStart = this.pageIndex - 4 > 1 ? this.pageIndex - 4 : 1;
this.pageEnd = this.pageStart + 9 < this.pageCount ? this.pageStart + 9 : this.pageCount;
console.log(this);
}
}
module.exports = PageModel;
在这个对象上面,我们又添加了两个新的属性,一个是pageStart
,一个是pageEnd
,这两个值不是固定
接下来,在前端的模板渲染里面,我们更改代码
<!-- 通用分页
子级模板页默认共享父级模板页的数据
同时父级模板页也可以单独传递数据给子级模板页
-->
<div class="clearfix">
<ul class=" pagination pull-right">
<li><a data-pageindex="1" href="#">第一页</a></li>
<%for(var i=pageModel.pageStart;i<=pageModel.pageEnd;i++){%>
<li class="{{pageModel.pageIndex==i?'active':''}}"><a data-pageindex="{{i}}" href="#">{{i}}</a></li>
<%}%>
<li><a data-pageindex="{{pageModel.pageCount}}">最后一页</a></li>
</ul>
</div>
<script>
if(location.search==""){
$(".pagination>li>a").each(function(index,ele){
var pageindex=$(this).attr("data-pageindex");
$(this).attr("href",location.pathname+"?pageIndex="+pageindex);
});
}
else{
$(".pagination>li>a").each(function(index,ele){
var pageindex=$(this).attr("data-pageindex");
//只需要把pageIndex更换为具体的值
var s=new URLSearchParams(location.search);
s.set("pageIndex",pageindex);
$(this).attr("href",location.pathname+"?"+s.toString());
});
}
</script>
上面在进行模板渲染的时候就已经变成pageStart
与pageEnd
了
关于回调地址的应用
在之前的操作里面,我们如果由列表页面点击编辑调转到编辑页面,无论是直接返回还是点击保存数据以后的返回,都是直接跳转了了首页去了,这个不是很方便
例如,当用户点击搜索或分页到了某一个页面以后,如果再次点击编辑,保存数据或返回的时候,这个时候应该是去跳到之前的某一个或某一个搜索结果页面
第一步
//编辑
$(".btn-edit").click(function () {
var ckLength = $("[name='ck']:checked").length;
if (ckLength == 1) {
var sid = $("[name='ck']:checked").val(); //拿到选中的这个值
// 跳转页面,告诉后台 ,我要修改哪一条记录
location.href = "/StuInfo/editStuInfo?sid=" + sid+"&callBackUrl="+encodeURIComponent(location.href);
} else {
layer.alert("一次只能编辑一项信息");
}
})
我们在当前的地址后面添加了一个东西叫callBackUrl
这个参数,这个参数记录了当前的地址值 ,然后在后台接收到这个地址(注意,这个地址要经过encodeURIComponent
加密编码)
**第二步:后台接收到值 **
let {
sid,
callBackUrl
} = req.query; //拿到要修改的学生的学号
//........
resp.render("StuInfo/editStuInfo", {
classInfoList,
nationList,
stuInfo: result[0],
callBackUrl //把这个值直接返回到了editStuInfo前台页面
});
第三步:前台页面记录这个值
<!--前面还有很多代码 -->
<form>
<input type="hidden" name="callBackUrl" value="{{callBackUrl}}">
</form>
<!--后面不家很多代码 -->
<a href="{{callBackUrl||'/StuInfo/List'}}" class=" btn btn-danger">
<span class=" glyphicon glyphicon-arrow-left"></span>返回列表
</a>
在这一步,我们在页面上面拿到这个值以后还要记录下来,可以直接返回,也要放在表单里面提交到doEditStu
的后面,方便后台再一次操作
第四步:服务器的处理
//处理修改学生的请求
router.post("/doEditStu", async (req, resp) => {
try {
let {
callBackUrl
} = req.body;
//接收参数,调用Service的方法,返回结果
let stuInfoService = ServiceFactory.createStuInfoService();
let flag = await stuInfoService.editStuInfoBySid(req.body);
if (flag) {
MessageBox.alertAndRedirect("修改成功", callBackUrl||"/StuInfo/List", resp);
} else {
MessageBox.alertAndRedirect("修改失败", resp);
}
} catch (error) {
resp.status(500).send("服务器出错了");
console.log(error);
}
});
nodemon插件应用
这个插件可以监控某一个目录下面的文件变化,如果变化以后自动重新启动服务器,但是在使用的时候需要在package.json
里面进行相关配置
第一步:安装模块
$ yarn add nodemon
第二步:配置启动命令
这一步主要是配置两个地方,第一个是main:"app.js"
,第二个是配置scripts
里面的start
与dev
{
"name": "studentmanager",
"version": "1.0.0",
"description": "学生信息管理系统",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node app.js",
"dev":"nodemon --watch ./"
},
"keywords": [],
"author": "杨标",
"license": "ISC",
"dependencies": {
"art-template": "^4.13.2",
"axios": "^0.19.0",
"body-parser": "^1.19.0",
"crypto-js": "^3.1.9-1",
"express": "^4.17.1",
"express-art-template": "^1.0.1",
"express-session": "^1.17.0",
"multer": "^1.4.2",
"mysql": "^2.17.1",
"node-xlsx": "^0.15.0",
"nodemon": "^1.19.4",
"svg-captcha": "^1.4.0",
"urlencode": "^1.1.0"
}
}
第三步:启动项目
$ npm run dev
dev不属于内部命令,需要添加
run
评论区