建站：Node+MongoDb+Express简单实例

2016-01-24

NodeMongoDb

MongoDb, Node

安装Node以及Express

前往官网https://nodejs.org 下载安装NodeJs,跟常规的软件安装类似，安装成功测试代码:

$ node -v

成功如下图所示：

当前显示我的NodeJs版本是5.10.0，安装Node的同时，系统会自带NPM工具，我们可以利用NPM下载我们所需的强大的node开源框架——Express，安装命令如下:

1	npm install -g express

其中-g是表示全局安装，如果不写是本地安装
安装完最新版的express之后，需要再安装:express-generator

1	npm install -g express-generator

同上安装成功后我们可以通过如下命令查看是否安装成功

1	express -V

成功如图所示：

Tips:注意是大写的V

创建项目

我们通过命令行工具在E盘下用express创建一个项目，名字叫demo，用的模板引擎是ejs。代码如下:

1	express -e demo

Tips: -e表示使用的是ejs模板，如果不写表示使用默认的jade模板
如图所示：

然后再在命令行中输入：

1 2	cd demo //进入到刚才创建的demo项目中 npm install //读取根目录中的package.json文件然后安装项目所依赖的包

项目文件夹如下图：

node_modules 项目中依赖的包
public 公共资源目录
routes 路由配置
views 视图文件夹
app.js 项目的入口文件

然后通过命令行启动运行项目

node app

温馨提示:

在module.exports = app语句之前添加app.listen(3000)
Ctrl + C终止运行

接下来我们可以在浏览器地址栏里敲入http://127.0.0.1:3000/ 或者 http://localhost:3000

创建数据库

mongodb的安装

2016-5-5更新Ubuntu下安装请参考官方文档

在官网https://www.mongodb.com/ 上下载对应系统的安装包，因为我系统是win10的，所以选择下载window系统对应的msi文件，如图，下载完成后可按常规软件方法进行安装，不过我把安装目录改在C盘根目录下，新建一个mongodb文件夹，安装在此文件夹下，方便在命令行中调用命令

然后在此文件夹中创建data文件夹，在data文件夹中创建db文件夹，接着我们以管理员身份运行命令行工具，输入以下命令安装mongod服务：

1	mongod --dbpath "C:\mongodb\data\db" --logpath "C:\mongodb\data\mongo.log" --install --serviceName "MongoDB"

删除此服务，以管理员身份运行以下代码：

1	mongod --remove --serviceName "MongoDB"

接着我们在命令行窗口输入services.msc命令启动mongodb服务

在CMD中输入mongo，这样就可以使用了，如下图:

接着设计我们所需要的数据库，在刚打开的mongodb数据库中输入：

use demo  //创建demo数据库
db.createCollection(“users”) //创建数据表users
db.users.insert({“name”:“admin”,“password”:“123456”}) //给数据表users添加一条数据
db.users.find() //查询数据表users中所有的数据

下图是运行上面代码的效果图：

在项目根目录下创建model文件夹，在里面创建model.js文件，js代码如下：

var mongoose = require('mongoose');
var db = mongoose.connect('mongodb://localhost/demo');//连接数据库
var Schema = mongoose.Schema;   //创建模型
var userScheMa = new Schema({
	name: String,
	password: String
}); //定义了一个新的模型，但是此模式还未和users表有关联
exports.user = db.model('users', userScheMa); //与users表关联

在views文件夹下创建视图文件

我们上面用express创建的项目视图文件的后缀名是ejs，我们一般习惯使用html后缀名。
所以我们通过以下代码进行实现，在app.js入口文件中进行修改
原代码：
app.set('view engine', 'ejs');
替换成:
app.set('view engine', 'html');
然后再通过app.engine()方法注册模板引擎的后缀名
app.engine('.html',require('ejs').__express);
创建登录页面
login.html代码：

<!DOCTYPE html>
<html>
  <head>
	<title>登录页</title>
	<link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
	<h1>Hello</h1>
	<p>Welcome to</p>
	<form action="userCenter" method="post">
		<p>
			<span>name:</span>
			<br>
			<input id="name" name="name" type="text">
		</p>
		<p>
			<span>password:</span>
			<br>
			<input id="password" name="password" type="password">
		</p>
		<p><input type="submit" value="submit"></p>
	</form>
  </body>
</html>

index.html代码：

<!DOCTYPE html>
<html>
  <head>
	<title>首页</title>
	<link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
	<h1>Hello</h1>
	<p>Welcome to</p>
	<p><a href="login">登陆</a></p>
  </body>
</html>

userCenter.html代码：

<!DOCTYPE html>
<html>
  <head>
	<title>用户中心</title>
	<link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
	<h1>Hello</h1>
	<p>你已经成功登陆</p>
  </body>
</html>

路由配置

routes目录下的index.js代码：

var express = require('express');
var router = express.Router();
var user = require("../model/model").user;
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: '首页' });
});
router.get("/login",function(req,res){
	res.render("login",{title:"登陆"})
})
router.post("/userCenter",function(req,res){
	var query = {
		name:req.body.name,
		password:req.body.password
	};
	(function(){
		user.count(query,function(err,doc){
			if(doc==1){
				console.log(query.name +"：登陆成功" + new Date());
				res.render("userCenter",{title:"用户中心"})
			}else{
				console.log(query.name+":登陆失败"+new Date());
				res.redirect("/");
			}
		})
	})(query);
})
module.exports = router;