Express补充二-杨标的博客

Express补充二

分页的补充

在之前分页的时候，数据量比较小还没有什么，如果数据量比较大，这个时候就出问题了,如图所示

1571800485065

这个时候，我们可以看到右下脚的页数过多，所以我们要解决这个问题

解决思路

之前我们的分页数据是通过一个叫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了

1571800708379

关于回调地址的应用

在之前的操作里面，我们如果由列表页面点击编辑调转到编辑页面，无论是直接返回还是点击保存数据以后的返回，都是直接跳转了了首页去了，这个不是很方便

例如，当用户点击搜索或分页到了某一个页面以后，如果再次点击编辑，保存数据或返回的时候，这个时候应该是去跳到之前的某一个或某一个搜索结果页面

第一步

//编辑
$(".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

目录CONTENT

Express补充二