express +jade +mongoDB+bootstrap搭建个人博客

一、前期准备

      因为这个不是讲的一键建站，中间不需要敲代码的那种，所以看这篇文章之前，你至少得知道html、css和基础的js和jquery。顺带知道有node.js这种东西。如果你希望找到那种不敲一行代码就可以搭建个人博客的教程，本文并不是很好的推荐，下面这篇文章可能更适合你：

只要一小时，谁都能轻松建立个人网站：http://www.jianshu.com/p/e238222b05dd

还有一个视频，我觉得讲的很通俗易懂，中间可能稍微有些废话，跳过就好：

一小时学会建站：http://study.163.com/course/courseMain.htm?courseId=582007

说说我最后实现的功能就是：

1、使用node.js搭建了自己博客的后台管理，可以写文章，添加分类。对文章进行就修改和删除。

2、数据存储使用的mongoDB。

3、富文本编辑器使用了wangEditor。

4、实现了根据不同的分类显示博客

node.js其实在语法和使用上和js很像，只不过node.js用于处理后台操作（与数据库交互，为界面返回数据），js用在前端操作dom或与后台交互。node.js的教程可以参考：

http://www.runoob.com/nodejs/nodejs-express-framework.html

其中，只需要看看如下这几个部分，阅读本文代码就没有什么问题了

关于数据库部分，没有基础的不要担心，mongoDB的操作很简单，使用也很方便。学习来很快。推荐如下教程（本文选择mongoose来操作mongoDB）：

mongoDB教程：http://www.runoob.com/mongodb/mongodb-intro.html

mongoose介绍和入门：https://www.cnblogs.com/zhongweiv/p/mongoose.html

mongoose官网：http://www.nodeclass.com/api/mongoose.html

不需要每部分都看，大致了解一下用法，需要的时候再查找。

本文采用的模板是jade,现在已经更名为pug。关于jade的教程（半个小时左右就可以掌握）

jade的使用：https://www.w3cplus.com/html/how-to-use-jade.html

因为jade改为了pug，所以后面的安装是安装的pug,同时模板后缀是.pug

本文中使用了bootstrap的部分样式，bootstrap的教程可以参考：

boostrap官网：http://www.bootcss.com/

bootsrap教程;http://www.runoob.com/bootstrap/bootstrap-tutorial.html

本文代码中主要使用了bootstrap的网格系统，字体图标和模态框。其他部分未使用，只是需要了解本文代码，主要看这三部分就够了。后期可能加入一个分页的样式。

二、环境搭建

1.安装npm 和node.js

我们需要使用npm来管理各个第三方包。

npm是node一同安装好的，所以node安装之后，npm也安装上了，不需要单独安装

安装教程可以参考：

http://www.runoob.com/nodejs/nodejs-install-setup.html

1.1.npm初始化

进入项目目录所在文件夹，运行一下代码：

npm init

会在项目文件夹下，生成一个package.json的文件，里面就是npm下载的各个包的信息

2.安装各个包

2.1 express和jade

使用npm安装express和jade:(jade后面因为版权问题更改为pug)

npm install express pug --save

在项目文件夹下生成mode_mudules文件加，这个文件夹就是存放的通过npm下载的各种包

2.2 bower 和bootstrap

npm install bower --save

安装完成bower之后再安装bootstrap（jquery随着bootstrap一块下载到了本地）

bower install boostrap --save

2.3安装mongoose

$ cnpm install mongoose --save

2.4安装mongoDB

mongoDB才是真的数据库，mongoose是node.js操作mongoDB。

三、文件结构

(1) app.js是我们的入口文件，也就是相当于c语言中的main函数所在的文件。所以我们运行程序时，是在文件目录下运行：

node app.js。

(2) .bowerrc是bower的配置文件，里面设置了bower的下载路径。

(3) gulpfile.js是gulp的配置文件，当时想试试写，后面没用弄，可以忽略。后期等我自己研究了，再做这方面拓展。

(4) .gitignore里面设置了git上传时，忽略的文件选项，这里设置的是node_modules。这个文件夹下存放的是npm下载的包。所以，如果你在我的github上下载的代码，需要使用npm install来安装所需要的包。

(5)package.json是npm的配置文件

1.app文件夹

里面是放的是数据库的模式(shemas)、数据库的模型(models)、控制层(controllers)和视图层(views)。其实就是存放的MVC的逻辑。

2.config文件夹

主要存放的是router.js,用来处理各个请求。

3.node_modules

存放npm下载的各个第三方的依赖包

4.public存放各种静态资源

其中libs放的是bower下载的bootstrap和jquery

4、运行程序

进入到文件根目录下：

npm install   //安装各个依赖

node app.js

打开浏览器，在地址栏输入：http://localhost:8080/admin

这里localhost:8080中的8080是tcp所占用的端口号，如果运行程序显示 listen EADDRINUSE :::8080，说明8080端口在你的电脑上被其他程序占用，你可以在app.js中通过修改

var port = process.env.PORT||8080;

来更改端口号。

输入地址回车之后，你会看到如下界面：

点击导航栏的各个栏目，你可以看到写文章界面：

文章列表页：

添加分类页：

分类列表页：

当然，这里的数据都是我提前录入的，所以你可以看，你也可以操作控制台录入自己的文章或者分类。

在后台录入信息之后，在前台可以显示，通过在浏览器地址栏输入：http://localhost:8080

可以看到前台的个人博客页面是这样的：

如果你没有录入数据，显示的就会是一片空白。

点击文章的标题，就会显示文章具体信息：

5、功能说明

     在写文章时，若没有在添加分类中写分类名称，默认使用选框中的分类。如在添加分类中写了分类名称，使用添加分类中的名字创建分类。

6、功能不足说明

在此次版本中，

(1)未添加评论功能

(2)删除分类时，还没有删除该分类下的文章中的分类值。

(3)未实现显示分页功能

7.项目github地址

喜欢的请记得点个赞，或者收藏一下

https://github.com/yuanzoudetuzi/blog