这篇文章主要给大家分析一下此博客系统前端的搭建，我会分析几个我碰到的问题及一些常用的插件
具体的代码我就不一一贴上来了，大家可以参考：博客系统的源码。
整体的博客系统前端的效果如下图：
效果图
一：前端页面的搭建
主要是通过bootstrap源码下载中的docs/examples/文件下blog与dashboard两个文件。
bootstrap1.png
bootstrap1.png
将这两个主题中的index.html通过将html转换为jade转化为相应的jade，关于jade的规则大家可以参考jade官网，我们在public/css下对相应的css的编写。
二：连接数据库与设计表
首先需要安装Mongodb，大家可以参考如何安装MongoDB，相应相应的客户端管理工具，我使用的是Robo 3T。
-
创建相应的数据库
-
建表，即使用
Mongoose建立相应的Schema我们会建立三个表，
user，post，categoriespost表：
post表
user表：
user表
categories表：
catagories表
关于表的字段
type，这里就不细讲了，大家可以参考Mongoose简要API中的字段类型解释。 -
修改
config下相应的数据库的名字，填上我们刚刚的数据库名，这样我们就能连上我们的数据库了。
三：使用node实现blog的后端逻辑
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课程，学习课上老师的思路做的，如果大家有什么不明白的地方，我们可以使用简信交流哦。文章中加了自己的一些思考以及一些常见的问题，希望能给大家带来一点帮助。
来自一个奔跑在前端路上的前端小白。
网友评论