基于nodejs+mysql+html实现图书管理系统（3）

配置好node接口后，就可以做页面了

先看文件目录

蓝色框是我们今天的内容

红色框内是引入的两个文件，一个是有名的jquery，另一个是用来获取路由的js。

静态资源托管库

在链接中搜索就可以了，可以下载到本地也可以使用本地的

先创建一个壳子

 这tbody中渲染我们的数据

我们根据写的接口路径发起ajax请求

 然后执行   getBooksList(options);  这个函数就可以获取到数据了

红色的部分就实现了，当然你们的可能不是很好，没关系，先添加css样式

 添加上就有表格样式了，数据的话可以暂时手动添加数据

 我们把需要的数据梳理清楚， 获取的时候全部都传给指定的函数

这里把对象转化为字符串，是因为查询的传参方式只能这url地址后面进行拼接，这样就能做到筛选功能了。

于是接口部分也要为之相应的调整，因为获得不同的查询参数，需要更改不同的mysql语句

 这里使用的是比较笨的拼接方法，当有指定值时，就会加上对应的sql

函数中第一句的赋值方式是es6中添加的解构赋值的方式，大致是说，从对象中获取执行的属性名，声明并把对像中一样的属性名的值赋值给声明的属性名

即：let id=object.id     ===      let {id}= object

 我们给查询设置一个点击事件，然后清除表单的默认行为，通过jquery获取dom节点

 然后就可以使用了

细心的朋友可能发现了，我的右下角是有页码的，那我们需要怎么实现页码呢？

node 部分添加总条数

可以看到，因为mysql语句的规范原因，获得好的条件后，sql语句是获取指定条件第一页的数据，sql2是获取指定条件的所有数据，通过count得到总条数。

这样我们返回的接口数据中，就具备了总条数信息了。当前页码，根每页几条数据都是通过option对象中的属性传递过去的

下面我们看一下具体的代码

红色框部分就是渲染分页的过程，放在了获取数据中，通过getPages获得一个页码的数组，

通过forEach遍历，进行渲染

蓝色框部分取消了a标签的默认行为

通过find方法，获取到.pager下面所有的a标签，通过索引的方式为选中标签添加link效果

页码函数，大家可以参考一下

 

 页面函数的css样式。

这样就实现了首页的基本样式，查询按钮与页面切换。