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

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

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

效果图

一：前端页面的搭建

主要是通过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，categories

  post表：

  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课程，学习课上老师的思路做的，如果大家有什么不明白的地方，我们可以使用简信交流哦。

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

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