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

安装Node以及Express


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

1
$ 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 项目的入口文件

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

1
node app

温馨提示:

  1. module.exports = app语句之前添加app.listen(3000)
  2. 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数据库中输入:

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

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

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

1
2
3
4
5
6
7
8
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代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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代码:

1
2
3
4
5
6
7
8
9
10
11
12
<!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代码:

1
2
3
4
5
6
7
8
9
10
11
<!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代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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;

如果您觉得我的文章对您有用,请随意打赏。

您的支持将鼓励我继续创作!

¥ 打赏支持

文章导航

目录

×
  1. 1. 安装Node以及Express
  2. 2. 创建项目
  3. 3. 创建数据库
  4. 4. 在views文件夹下创建视图文件
  5. 5. 路由配置