从零开始使用express搭建博客系统（二）：博客前台功能实现

2018-02-25 本文已影响104人 darrell

这篇文章主要给大家分析一下此博客系统前端的搭建，我会分析几个我碰到的问题及一些常用的插件

具体的代码我就不一一贴上来了，大家可以参考：博客系统的源码。

整体的博客系统前端的效果如下图：

效果图

主要是通过bootstrap源码下载中的docs/examples/文件下blog与dashboard两个文件。

bootstrap1.png

将这两个主题中的index.html通过将html转换为jade转化为相应的jade，关于jade的规则大家可以参考jade官网，我们在public/css下对相应的css的编写。

首先需要安装Mongodb，大家可以参考如何安装MongoDB，相应相应的客户端管理工具，我使用的是Robo 3T。

blog的路由如下图：

前端路由表

这里主要就是对于mongoose的使用，我这里就提一下三个点，其他的我会附上相应的文档，大家可以参考。

populate的用法：与关系型数据库中的外健作用一样。

拿post举例，我们有post表与user表，mongodb是noSql，他没有外键这一个定义，当我们查找post表的时候，如果要用到user表的数据的时候，就可以使用populate了。如下图：
posts数据

mongoose对于数据库的操作

在代码中使用到的最多的是model.find()，model.findOne()，model.save()，分别是查找所有的，查找一个，保存方法。

对于mongoose的链接数据库的方法，这篇文章大家可以参考：Mongoose简要API。
分页的实现

后端的实现如下图，我们在后台默认设置的pageSize为10。
分页 node
前端jade的写法就是得到后端传过来的pageNum、pageCount，即是第几页和总共有有几页，后台我们默认设置的是每页显示10条。
分页 jade

需要将config.js里面的文件指向修改一下

之前：
var controllers = glob.sync(config.root + '/app/controllers/*.js');
现在
var controllers = glob.sync(config.root + '/app/controllers/**/*.js');

如下图：

express的控制器config

信息提示——connect-flash

需要使用到相应的依赖。

首先安装：

npm install connect-flash --save-dev

然后在项目中引用依赖：

var flash = require('connect-flash'); 
app.use(flash());             //Express使用这个插件

在相应的jade模版引用：

req.flash('info', '评论添加成功')

提示插件

随即数据生成，方便我们测试
随机数据生成
这个data.js是为了帮助我们随机插入大量文章数据，方便我们的测试。

我们需要安装几个依赖:
```
npm install lorem-ipsum slug --save-dev // 这两个依赖是帮助我们生成随机数据的。
```
具体的实现方法大家可以参考代码。

然后进入相应的目录，执行如下语句就能随机插入数据：
```
node data.js
```
效果如下图：
效果

结语：此篇文章是我参考网上的一个express课程，学习课上老师的思路做的，如果大家有什么不明白的地方，我们可以使用简信交流哦。

文章中加了自己的一些思考以及一些常见的问题，希望能给大家带来一点帮助。

来自一个奔跑在前端路上的前端小白。