Node.js Express 框架学习笔记（一）入门篇

初心：

开始学习Node.js Express框架主要是为了能自己学会去搭建一个完整的网站，其次是由于个人的技术比较杂，从最初的前端HTML、CSS、JS、React、Vue到改学后台用C#、.net开发，直到慢慢的接触到数据库设计、服务器部署等方面的知识，也希望自己能慢慢的走上全栈的路，不管技术怎么样，一直学总是会有提高的总是会达到心中的标准的，于是，开始自己一人学习独立开发一款APP,想要把自己已经掌握的和想要学的全用上，一步一步的完善；就先从后台框架开始，选用对前端来说好理解的Express框架。

Express 入门：

Express 官网地址：http://www.expressjs.com.cn/

一、安装

首先得安装 Node.js ，如果没有可以参照 菜鸟教程（http://www.runoob.com/nodejs/nodejs-install-setup.html），当然也得装上淘宝镜像。

1、创建一个工作目录，这里取名 myexpress ，通过命令行进入当前目录下

2、通过 npm init 命令为你的应用创建一个 package.json 文件，代码如下

{
  "name": "myexpress",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

如果你想详细了解其中配置项的含义，建议参考https://docs.npmjs.com/files/package.json，有人给出了译文

https://www.cnblogs.com/nullcc/p/5829218.html

3、接下来安装 Express 并将其保存到依赖列表中，这里使用了淘宝镜像

cnpm install express --save

这里所说的添加到依赖列表中指的是将信息添加到 package.json 文件中 

{
  "name": "myexpress",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.3"
  }
}

到此，安装过程完成，主要分为两步  npm init 和 cnpm install express --save。

二、简单应用

1、进入 myapp 目录，创建一个名为 app.js 的文件并添加如下代码

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

var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;

  console.log('Example app listening at http://%s:%s', host, port);
});

2、通过命令启动

> node app.js

3、在浏览器中打开 http://localhost:3000

三、Express 应用生成器

通过应用生成器工具 express 可以快速创建一个应用的骨架。

1、通过如下命令安装：

> cnpm install express-generator -g

2、在当前工作目录  myexpress 下创建一个命名为 myapp 的应用

> express myapp

   create : myapp
   create : myapp/package.json
   create : myapp/app.js
   create : myapp/public
   create : myapp/public/javascripts
   create : myapp/public/images
   create : myapp/routes
   create : myapp/routes/index.js
   create : myapp/routes/users.js
   create : myapp/public/stylesheets
   create : myapp/public/stylesheets/style.css
   create : myapp/views
   create : myapp/views/index.jade
   create : myapp/views/layout.jade
   create : myapp/views/error.jade
   create : myapp/bin
   create : myapp/bin/www

3、然后安装所有依赖包

> cd myapp 
> cnpm install

4、启动应用

MacOS 或 Linux 平台

$ DEBUG=myapp npm start

Windows 平台

> set DEBUG=myapp & npm start

5、应用目录一般如下

.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.jade
    ├── index.jade
    └── layout.jade

7 directories, 9 files

浏览器中打开 http://localhost:3000/ 和 http://localhost:3000/users




6、添加 favicon.ico 

在 myapp 下的 public/images 添加文件 favicon.ico 

打开 myapp 下的 app.js 在其中添加

var favicon = require('serve-favicon');
app.use(favicon(__dirname+'/public/images/favicon.ico'));

然后通过命令行安装 serve-favicon 

> cnpm install serve-favicon --save

重新启动项目

> set DEBUG=myapp & npm start

注意要清除缓存，这样我们就可以在新开的 http://localhost:3000/ 中看到图标了

四、基本路由

路由（Routing）是由一个 URI（或者叫路径）和一个特定的 HTTP 方法（GET、POST 等）组成的，涉及到应用如何响应客户端对某个网站节点的访问。
每一个路由都可以有一个或者多个处理器函数，当匹配到路由时，这个/些函数将被执行。
路由的定义由如下结构组成：app.METHOD(PATH, HANDLER)。其中，app 是一个 express 实例；METHOD 是某个 HTTP 请求方式中的一个；PATH 是服务器端的路径；HANDLER 是当路由匹配到时需要执行的函数。

我们可以从之前创建的 myapp 应用中看到，在 app.js 中

app.use('/', indexRouter);
app.use('/users', usersRouter);

在 routes 下的 index.js 和 user.js 中

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;

五、静态文件

通过 Express 内置的 express.static 可以方便地托管静态文件，例如图片、CSS、JavaScript文件等。

将静态资源文件所在的目录作为参数传递给 express.static 中间件就可以提供静态资源文件的访问了。例如，假设在 public 目录放置了图片、CSS 和 JavaScript 文件，你就可以：

app.use(express.static('public'));

现在，public 目录下面的文件就可以访问了。

http://localhost:3000/images/favicon.ico

如果你的静态资源存放在多个目录下面，你可以多次调用 express.static 中间件：

app.use(express.static('public'));
app.use(express.static('images'));

访问静态资源文件时，express.static 中间件会根据目录添加的顺序查找所需的文件。

http://localhost:3000/favicon.ico

如果你希望所有通过 express.static 访问的文件都存放在一个“虚拟（virtual）”目录（即目录根本不存在）下面，可以通过为静态资源目录指定一个挂载路径的方式来实现，如下所示：

app.use('/virtual', express.static('public'));

现在，你就爱可以通过带有 “/virtual” 前缀的地址来访问 public 目录下面的文件了。

http://localhost:3000/virtual/images/favicon.ico