Node.js Web框架入门：使用Express搭建简单应用并深入了解中间件与错误处理(上)

从本节课开始我们正式开始学习nodejs的web框架，包括express，koa等等。

1. curl命令的使用

• 之前我们已经使用过curl命令，它能很好的帮助我们查看请求响应体curl -s -v 网址
• -s是silent,用于隐藏进度条
• -v是verbose,用于打印全部header
• *开头的是注释
• >开头的是HTTP请求
• <开头的是HTTP响应
• 举例
• curl -s -v http://xiedaimala.com
• 得到301和Location,于是重新请求(-L自动重定向)
• curl -s -o nul -v https://xiedaimala.com
• -o nul是为了隐藏HTML文本，内容太多不方便演示
• Linux或mac要将nul改成/dev/null

2. 请求和响应

• 请求
• 如果请求体的内容为JSON
• 那么请求头就要有Content-Type:application/json
• 这一规范可以在MDN查看
• 响应
• 如果响应体的内容为JSON
• 那么响应头就要有Content-Type:application/json
• HTTP的复杂性
• HTTP复杂就复杂在它有很多请求头和响应头
• 每个请求头或响应头功能各不相同
• 通过下图可对比http的响应和请求

3. Web框架

• 功能
• 更方便地处理HTTP请求与响应
• 更方便地链接数据库、Redis
• 更方便的路由
• 其他：HTML模板
• 理念
• Web框架的主流思路都是MVC
• Model处理数据相关逻辑
• View处理视图相关逻辑，前后分离之后，View不重要
• Controller负责其他逻辑

4. 架构示意图

• 我们宏观的从下图中了解，web框架在应用中的位置

5. 处理HTTP请求与响应

• 最简单的封装
• 将请求封装为[['get,'xxx'],{请求头}，'请求体']
• 将响应封装为[status,{响应头}，'响应体]
• Node.js的封装
• 封装在http模块中了
• 使用request(IncomingMessage的实例)读取请求
• 使用response(ServerResponse的实例)设置响应
• Express的封装
• 封装级别高一点点，只需理解Express的编程模型即可
• 中文文档

6. 创建并使用express项目

• 创建项目
• 新建一个文件夹，命名为express-demo
• 用ide打开,运行yarn init -y;git init;
• 新建.gitignore，提交到git,推送至GitHub

/.vscode/
/.idea/
/node_modules/
*.log

• 开始学习express
• CRM学习法：Copy-Run-Modify

7. express之hello world

• yarn add express
• 新建app.js

let express = require('express')
let app = express();

app.get('/', function (req, res) {
  res.send('Hello World!');
});
app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

• 运行node-dev app.js，浏览器输入localhost:3000，能看到Hello world就对了
• 开始改，我们大概就能了解路径,res.send,port等一些基本功能

let express = require('express')
let app = express();

app.get('/xxx', function (req, res) {
  res.send('你好');
});

const port = 4000
app.listen(port, function () {
  console.log(`Example app listening on port ${port}!`);
});

8. 使用TypeScript在做一遍

• 准备工作

• yarn global add typescript ts-node全局安装工具
• yarn add @types/express安装类型支持

• 新建app2.ts，将app.js中的所有内容复制过来

• 让ts变得严格,运行tsc --init
• 这里需要注意下依赖版本，类型的版本和express版本不一致可能会导致类型报错

  "dependencies": {
    "express": "4.17.1"
  },
  "devDependencies": {
    "@types/express": "4.17.6"
  }

• 修改tsconfig

 "target": "es2015", // es6
 "noImplicitAny": true, // 没有隐式的any  

• 将require改为import
• 运行ts-node app2.ts，能实现和app1.js一样的效果就算成功了

9. app.js是什么

• 使用IDE查看类型
• 用VSCode或webStorm可以查看app对象的类型
• 类型为Express接口
• Express extends Application
• Application extends EventEmitter,IRouter,..
• 其中IRouter包含了get/post/put等方法
• 当前项目是一个配置的不错的学习环境
• 建议将其单独上传到express-starter-1

// codingories是我的git名称，需要替换成你自己的git名称
git remote add starter git@github.com:codingories/express-starter-1.git
git push starter master

• 写上readMe

// codingories是我的git名称，需要替换成你自己的git名称
git clone git@github.com:codingories/express-starter-1.git 目录名
cd 目录名
yarn install
node app.js 或者ts-node app2.ts

• 方便之后的项目直接git clone

10. Express脚手架

• 脚手架可以帮助我们一键搞定项目目录
• express的脚手架有express-generator
• express -h 查看帮助
• express --view=ejs .注意有一个点，这句话用于创建文件，点表示当前目录
• 然后运行yarn install;yarn start;，此时可以访问http://localhost:3000/，看到以下页面
• 安装`yarn global add express-generator“
• 使用

- 由于它会覆盖文件，所以要重新安装@types/express

• CRM学习法
• 分析app.js,主要API为app.set和app.use
• app.set用于改配置，app.use用于使用中间件
• 记得提交可运行的代码，防止后面改出问题

11. 总结

• 我们从本次课程正式开始学习Node.js的Web框架，重点关注了Express，并通过Curl命令了解了HTTP请求和响应的基本知识。
• 我们深入了解了Web框架的功能，包括方便处理HTTP请求与响应、连接数据库和Redis、路由等。通过架构示意图，我们理清了Web框架在应用中的位置。
• 最后，我们介绍了Express脚手架的使用，以及使用CRM学习法分析Express的API。我们还创建了一个配置良好的学习环境，方便后续的项目使用。