NodeJS+Express+mongoose+Jade+bootstrap+jquery+inspector(调试工具)开发网站demo总结

花了两周时间学习nodejs，遇到的问题还真不少，不过大部分是由于粗心导致的。刚开始的时候看到 NodeJS+Express+Mongoose +Jade+bootstrap+jquery 都不知道怎么入手，随着一遍遍的写代码，慢慢的找到手感，排查问题的速度更快了。下面就讲讲上面各个组件在使用过程中的一些经验。

NodeJs:

  这个作为开发平台，自己百度里搜，网上下载安装就可以了，没有什么特别的地方。在网站的首页有个例子，可以拿下来保存到js文件里，用node 执行下，在浏览器访问文件里设置的端口就可以看到返回的结果了。

       仅仅一个nodejs平台还是不够的，想要做出更好更大的网站，还需要一些中间模块。所谓中间模块相当于一个个能够更有效处理html，url，文件，内容等信息的插件。上面提到的几个都是常用的中间件。比如：express可以处理客户端请求的路由（url）；mongoose对mongodb操作；jade可以快速动态生成html；bootstrap可以快速布局HTML样式等。underscore（backbone）是个js类库的扩展（个人觉得），里面定义了许多方法，便于我们处理一些数据转换的操作。jquery就不说了，如果你是做前端的话。 inspector 是nodejs 的调试工具，我博客里有介绍它的使用，不过个人感觉不是太好。可能有些功能还不会用吧。当然有人在Eclipse里调试，没试过，无法发言。

Express：

    express.js是nodejs的一个MVC开发框架，并且支持jade等多种模板。express可以通过use方法，使用其他一些中间模块，更有效的
处理浏览器路由，请求信息，解析html，配置静态文件 和html模板引擎（jade）等。

    在express里有个：app.use(bodyParser()); 按照网上的代码写法（非这种）会报错，提示需要单独安装。具体解决方案可以看我最近的博客。

使用如下：

var express=require('express');
var bodyParser = require('body-parser');
var port=process.env.PORT ||3000;
var app=express();
app.set('views','./views/pages');//jade文件目录
app.set('view engine','jade');//模板引擎
app.use(bodyParser());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json({ type: 'application/vnd.api+json' }))
//app.use(express.bodyParser());
app.use(express.static(path.join(__dirname,'/')) );//网站静态文件目录
app.locals.moment =require('moment');//一个对时间各种处理的中间模块
app.listen(port);//监听端口
// - module.paths
console.log('started on port' + port  );

Mongoose:

    用于保存网站前台提交的数据。需要单独下载mongodb。官网上下载一下，本地安装运行就好了。记得在cmd中运行mongod.exe 时候要加上 --dbpath 文件存放路径。然后再双击运行mongo.exe。成功后界面会提示端口号，就可以在浏览器中相应端口的url看到mongodb的显示界面。在具体使用的时候，我们需要建立模型（schemas），用于新增，修改，删除数据等。

使用如下：

var mongoose =require('mongoose');
mongoose.connect('mongodb://localhost/imooc/');//连接数据库，这个名称随取，mongodb会自动生成
db = mongoose.connection;
db.once('open', function callback () {
   console.log('open mongodb');
}); 

var mongoose =require("mongoose");
var MovieSchema =new mongoose.Schema({
	doctor:String,
	meta:{
		createAt:{
			type:Date,
			default: Date.now()
		},
		updateAt:{
			type:Date,
			default: Date.now()
		}
	}
})

jade

    Jade是一款高性能简洁易懂的模板引擎，Jade是Haml的Javascript实现，在服务端（NodeJS）及客户端均有支持。要注意的是：在写html的时候，要注意内容的缩进。不要在文件里tab键和空格键同时使用，否则可能提示出错。我一般的方法是根据错误提示行数，先检查前后空格等，如果不行就先删除这行代码，调试看看。在模板里我们经常要写多行文本，为了防止出错，我们在多行的前面加上 竖线（|）用于将同一块内容放在一起。比如css内容块或者js函数。这个竖线不一定是必须加的，只是有时候看页面源代码的时候，会发现本来该在一个模块的内容变为了一个html标签等多块内容。无法表达我们代码的意图。

使用如下：（注意我标颜色的部分，要对应上。类似于asp.net模板页的占位符）

layout.jade（模板页）

doctype //<span style="background-color: rgb(255, 0, 0);">这个很重要，不然jade解析有问题</span>
html
	head
		meta(charset='utf-8')
		title #{title}
		include ./includes/head
		style(type="text/css")
			| body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {margin:0;padding:0;list-style-type:none;}
			| A:hover {border-color:red}	

	body
		include ./includes/header //引入的头文件（共享内容块。）
		.container
			block content  //占位符
		block script

具体页面：

extends ../layout
block content

.container

#{title}

#{movie._id}  //页面要动态显示的内容。后台传入前台的变量用 #{}表示

bootstrap

    bootstrap大家应该很熟悉，是个前端框架，官网上看看。这里要提的是：要知道里面的栅格系统布局。这个用处很大。上面jade里用的.container也是这个框架css文件里的。

jquery:

        是在jade文件里加入了jquery.js文件的引用，用于在客户端提交数据。用于和我们平常前端开发使用一样。（我没有在服务端使用jquery，如果需要对提交的数据用jquery解析的话，记得下载jQuery，而不是jquery。暂时还不知道为什么node这样。

node-inspector

    用于在浏览器上调试nodejs程序。命令有两个，是：

    node-inspector --web-port:3000 ; //这个端口随便起。

       node —debug-brk  app.js ；//需要调试的程序。//推荐用brk，因为有些程序始终无法进入调试，用这个命令，可以保证程序进入调试程序的开头。

以上所有东西总结完了，但是这些中间模块在哪里呢，还是要用过npm insall 中间模块名 -g 去安装才能够使用。

npm init 对项目打包 生成package.json文件

bower init 项目打包生成package.json文件

打包好后，我们可以返回到当前目录的上级目录，来测试安装一下这个模块，假设文件夹名称为：hello：

$ npm install hello/
hello@0.0.1 ./node_modules/hello

$ node
> var Hello = require('hello').Hello;
> Hello('world');
Hello world
正确输出了”Hello world”。
接下来我们把它发布到NPM上
$ node
> var Hello = require('hello').Hello;
> Hello('world');
Hello world
正确输出了”Hello world”。
接下来我们把它发布到NPM上
首先，我们需要有一个NPM帐号，可以使用npm adduser来注册一个：
$ npm adduser
Username: elmerzhang
Password:
Email: freeboy6716@gmail.com
简单三步，一个NPM用户注册成功。
最后回到 hello 根目录，执行一下npm publish，如果没有任何错误提示，那么就发布成功了。去 http://search.npmjs.org/上看一下吧，你的模块应该已经显示在”Latest Updates”一栏里了。
至此，一个NodeJS模块成功发布到NPM，以后就可以在任何能访问npm库的地方通过npm install来安装你的模块了。

$ node
> var Hello = require('hello').Hello;
> Hello('world');
Hello world

正确输出了”Hello world”。

接下来我们把它发布到NPM上