web前端 | 博客（十一）文章列表展示

文章列表展示

找到文章列表请求页面的路由请求处理函数，先将所有数据查询出来，并展示在页面当中，之后再实现分页功能。
在route/admin/下的article.js中，将文章集合的构造函数导入到当前文件中。
并且增加代码

  let articles =  await Article.find({
     });
  res.send(articles);

此时，在localhost/admin/article下，就可以看到以json数组形式展示的文章列表了。
接下来，为res.render('admin/article.art');方法添加第二个参数，它是对象类型，这个对象的属性在模板中可以拿得到。

  res.render('admin/article.art', {
     
    articles: articles
  });

现在，模板文件article.art可以直接拿到articles数组了。

<tbody>
		{
    {each articles}}
        <tr>
            <td>{
    {@$value._id}}td>
            <td>{
    {$value.title}}td>
            <td>{
    {$value.publishDate}}td>
            <td>{
    {$value.author}}td>
            <td>
            a>
            <i class="glyphicon glyphicon-remove" data-toggle="modal" data-target=".confirm-modal">i>
            td>
        tr>
		{
    {/each}}
tbody>

显示结果

此时，由于希望对时间格式有显示，而且希望作者列显示的是作者名称而不是id，所以需要进行修改。

联合查询作者名

进行多集合联合查询，在route/admin/文件夹下的article.js中，
使用populate('author')=

  let articles =  await Article.find({
     }).populate('author');

此时，Article中的author变成了一个对象，需要得到作者名称只需要.username即可。
articles数组中的内容：

修改模板文件

<td>{
    {$value.author.username}}td>

此时，用户名可以正常显示

修改日期格式

使用第三方模块dateformat，处理日期格式。
使用npm i dateformat安装。
在app.js中进行配置，配置完成以后，在所有的模板当中，就可以使用这个模块了。
引入

const dateFormat = require('dateformat');

由于日期的数据并不在js中，而在模板中，要遭模板文件中调用这个方法。
由于之前对art-template这个模板引擎进行的配置，在模板中开放了外部变量，所以在模板内部才能调用这样的方法。
之前使用的是art-template，现在使用的是express-art-templete。而express-art-template依赖的其实也是art-template，所以在下载express-art-template时，art-template也在下好了。所以可以在app.js中直接把这个模板引擎导入。
然后向模板内部导入dataFormate变量

template.defaults.imports.dateFormat = dateFormat;

之后就可以在模板当中调用这个方法了。

<td>{
    {dateFormat($value.publishDate, 'yyyy-mm-dd')}}td>

此后，日期也可以按要求显示了。

分页功能

使用第三方模块mongoose-sex-page
示例代码

const pagination = require('mongoose-sex-page');
//page()表示当前页，想查询第几页就传什么参
//size()表示每页显示的条数
//display()表示客户端要显示的页码数量
//exec()向数据库发送查询请求
pagination(集合构造函数).page(1).size(20).display(8).exec();

查询的返回结果是一个对象类型。

使用npm i mongoose-sex-page安装。

找到route下的article.js，导入模块
使用

let articles =  await pagination(Article).find().page(1).size(2).display(3).populate('author').exec();

其中articles的内容是


它不再是数组，而成为了一个对象。
在模板中获取文章信息是，不能再循环articles了，而要循环articles.records。
而页码的显示需要循环articles.display，并且要在点击页码时显示该页的数据。

{
    {each articles.display}}
<li><a href="/admin/article?page={
      {$value}}">{
    {$value}}a>li>
{
    {/each}}

并且再服务器端要接受这个页码，接受完成这个页码后，在把它传递到page方法当中。
在article.js中，使用

const page = req.query.page;

接受客户端传递过来的页码，并且在方法中修改page的参数

.page(page)

此后，页码按钮生效。
上一页和下一页按钮

{
    {if articles.page > 1}}
	<li>
		<a href="/admin/article?page={
      {articles.page-1}}">
		<span>«span>
		a>
	li>	
{
    {/if}}


{
    {if articles.page < articles.pages}}
	<li>
		<a href="/admin/article?page={
      {articles.page-0+1}}">
		<span>»span>
		a>
	li>
{
    {/if}}

此时，上一页和下一页按钮生效。

修改文章和删除文章功能和用户管理部分相似。