用 Node.Js Express MongoDB 搭建 Web 应用 2

Introduction

在之前一篇博客中, 我们了解到了如何用Express框架创建一个Node.js Web应用,以及Expree是如何运行一个web server, 我们是如何用app.get 和app.post 和服务器数据库的。

在这篇博客中,我们要学习如何修改之前的app,让它成为一个single page 应用,我们的目标有

  1. 理解 REST 是什么意思
  2. 在MongoDB 中用HTTP POST 和 HTTP GET 存储和索引 JSON 数据
  3. 用HTTP DELETE 数据
  4. 用AJAX处理前后端数据传输
  5. 用JQuery update DOM

Part 1 - REST到底是啥

Wiki百科中的答案是 Representational State Transfer (REST) as: an architectural style that abstracts the architectural elements within a distributed hypermedia system. 不知道你是不是看得懂,反正我是完全不是到他在说啥。到底啥是分布式超媒体系统 ?!!引用IBM的解释是:

  1. Use HTTP methods
  2. Be stateless
  3. Expose directory structure-like URIs
  4. Trander XML, JSON

Use HTTP methods, 使用HTTP协议,这很容易理解,索引数据用GET,创建数据用POST, 修改数据用PUT, 删除数据用DELETE.
Be stateless, 就是 不要存储state信息到server. 如何你必须要save state的话,用cookies或者其他方式把它存到client side. 比如说Angular就很好的解决了这个问题, 它创建了一个权证的前端MVC, 你可以所以存储和操作state 而不会影响server。 可以联想到Angular的route.
Expose directory structure-like URIs. 这很简单, 我们用
http://app.com/files/video/skyrim/68
代替了
http://app.com/getfile.php?type=video&game=skyrim&pid=68
Transder XML, JSON. 确保后端会传出XML或者是JSON格式的数据。

我们现在有了对REST的了解, 让我们回到项目中。

Part 2 - Setup

我们将要创建的是一个关于jusernames 和emails的数据库,

1
npm update -g express

更新xpress

1
npm update -g express-generator

跟新express generator

1
express nodetest2

创建一个新的node.js 项目nodetest2, 然后打开package文件,更新我们所需的dependencies, 确保我们添加了mongodb和monk

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
"name": "nodetest2",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.18.2",
"cookie-parser": "~1.4.3",
"debug": "~2.6.9",
"express": "~4.15.5",
"jade": "~1.11.0",
"mongodb": "~3.0.1",
"monk": "~6.0.5",
"morgan": "~1.9.0",
"serve-favicon": "~2.4.5"
}
}

然后回到command termina, 在nodetest2文件夹中, 输入

1
npm install

我们会需要一些时间下载和安装所有的dependencies, 之后再输入

1
mkdir data

创建一个data文件夹, 之后我们会用来存储我们的数据库文件. 要记住的是在运行MongoDB之前,我们必须要有这么个数据库目录. 当然我们可以另取名字.

Part 3 - HTML

如果我们想要搭建一个single page web应用的话, 第一件我们要做的事就是创建一个single page页面. 用你们所喜欢的IDE或者EDITOR打开项目, 首先修改layout.jade, 这是我们项目所有的page模板