前端工程师使用node.js打造日记社区教程之序章

hello 大家好，我是Kvkens，一年多没有碰node.js了，几天前上网的时候看到了一个高手自己用node.js开发的日记记录分享的社区（http://www.tuer.me/）觉得真心挺不错的，比我去年写的音乐网站好的多，内容也丰富，业务也非常有意思，决定捡起nodejs的技能，自己写博客来记录一下开发时候的事情，决心仿照此网站来记录一些开发过程中遇到的事情，也算是教程让大家都看得懂的。

我会按照从下载、安装、配置来一步一步来讲解，小白都看得懂的技术讲解！希望大家喜欢，文笔不好，尽量详细吧！

1、详细的分析网站

说下我们的需求，是兔耳日记，从视觉上我们可以看出，类似bootstrap风格，我们来查看下源代码Ctrl+U

果真是用bootstrap来作为前端CSS框架开发的，可以看出，link引用的是bootstrap的css，这里多说一下，它采用了多css压缩，也就是说，它采用了node.js写了一个对外接口，传入相对路径的css，就可以把多个css压缩成一个文件，这个后面我会讲这个，属于前端优化的东西吧。

刚才说到使用了bootstrap，简单介绍一下，前端CSS框架吧属于，个人理解。官网（http://getbootstrap.com/）这里不详细讲解bootstrap了，等写到UI的时候我会大概的讲解一下，尽量去模仿兔耳的。

头部

尾部

可以看出属于上中下的结构，这样的布局在bootstrap依次排列就可以了三列，其中中间的还要分为几个区域，用栅格化布局就可以。格子里面分左右，在右面在继续分上下的作为其他功能区，这种布局在bootstrap里最常见了，先不说了。

其他的JavaScript库就是jQuery了毋庸置疑。我也不采用牛逼闪闪的angularjs，费事，一般前端还听不懂。

2、基本的软件下载以及部署

现在来说一下，未来的开发是什么情况：

前端：Bootstrap：3.3.6、jQuery：2.2.0

后端：Node.js：0.12.9（这里我不会采用最新的ES6 io.js+node.js的那个4.x.x、5.x.x版本，问题好多还是老版本好用）

数据库：MongoDB：3.2.1

其他使用工具：

1、Bower  前端框架管理利器，用于下载静态资源部署

2、Grunt 或Gulp自动化工具后面会使用

我会从数据库配置开始讲解，从官网下载最新的3.2.1 64位版本，

解压到文件夹C:\Program Files\MongoDB\Server\3.2\bin，这里我会按照windows 7为开发环境来讲解，创建data文件夹用于保存数据文件，打开cmd运行到此目录，输入：“mongod --dbpath E:\MongoDB\data ” 这样就会开启MongoDB服务了，如下图所示：

然后访问：http://localhost:27017 出现如下图显示即为运行成功：

具体的MongoDB使用操作我会在开发的过程中一点点为大家介绍，推荐查看此书

Node.js的安装比较简单，下载完0.12.9后以管理员运行一直下一步即可，打开cmd输入“node -v”出现版本号信息即可正确。

这样我们的开发基本环境已经成功了，可以继续做后面的事情了，代码编写工具推荐 HBuilder 或者 Sublime Text 2，各有所长，写前端部分我会用HBuilder编写，后端JS部分我会用Sublime去写，因人而异吧！

首先我们从建立工程开始做，建立如下图所示文件夹：

先这样建立吧，后面可能会适当的修改，想到什么修改什么吧！

接下来，准备一下bower需要管理的前端资源文件，建立文件“.bowerrc”内容如下：

{"directory" : "assets/libs"}

这个意思就是说，默认bower安装的前端资源库都会安装在这个文件夹里面。

接着打开cmd输入：“bower init” 根据提示得到 bower.json 文件。

再建立node.js的核心文件：package.json 输入“npm init” 

最终的文件是这样：

我们来通过bower来安装前端的资源库，打开cmd，输入：“bower install jquery --save”

添加参数“--save”的意思是把安装的库信息写入到bower.json里面，npm安装也是同理.

接着继续输入：“bower install bootstrap --save” 【注：这里可以用一条安装命令 bower install jquery bootstrap --save】

这样我们的前端静态资源文件都安装成功了，比自己去网上搜索要简单多了，bower依赖git大家记得安装，以及python2.x windows还需要vs2013来编译gcc的东西是个坑啊 。

后端采用node.js开发，我会使用业界上比较流行的node框架“Express”，TJ大神所写的杰作，KOAJS也是他写的，但是这里我采用前者，比较贴近地气！

Express 安装最新版本   

npm install express --save

这时候会发现package.json 增加了如下：

{
  "name": "diary",
  "version": "1.0.0",
  "description": "this is a study for diary",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Kvkens (kvkens@qq.com)",
  "license": "MIT",
  "dependencies": {
    "express": "^4.13.4"
  }
}

我们来写一段代码，来测试下我们的node环境是否正确！

新建JS文件 app.js

var express = require('express')
var app = express();
 
app.get('/', function (req, res) {
  res.send('Hello World');
})
 
app.listen(3000);

浏览器访问：http://localhost:3000 看到如下图就说明环境是没问题的了。

未完成，待续……

后面会讲一下以下这些中间件都是干什么的

  "dependencies": {
    "body-parser": "^1.14.2",
    "connect-mongo": "^1.1.0",
    "ejs-mate": "^2.3.0",
    "express": "^4.13.4",
    "express-session": "^1.13.0",
    "moment": "^2.11.1",
    "mongoose": "^4.3.7",
    "multer": "^1.1.0",
    "multiline": "^1.0.2"
  }