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

snakeshe1010
231 阅读4分钟

从本节课开始我们正式开始学习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
  1. 请求和响应
  • 请求
    • 如果请求体的内容为JSON
    • 那么请求头就要有Content-Type:application/json
    • 这一规范可以在MDN查看
  • 响应
    • 如果响应体的内容为JSON
    • 那么响应头就要有Content-Type:application/json
  • HTTP的复杂性
    • HTTP复杂就复杂在它有很多请求头和响应头
    • 每个请求头或响应头功能各不相同
  • 通过下图可对比http的响应和请求

  1. Web框架
  • 功能
    • 更方便地处理HTTP请求与响应
    • 更方便地链接数据库、Redis
    • 更方便的路由
    • 其他：HTML模板
  • 理念
    • Web框架的主流思路都是MVC
    • Model处理数据相关逻辑
    • View处理视图相关逻辑，前后分离之后，View不重要
    • Controller负责其他逻辑
  1. 架构示意图
  • 我们宏观的从下图中了解，web框架在应用中的位置

  1. 处理HTTP请求与响应
  • 最简单的封装
    • 将请求封装为[['get,'xxx'],{请求头}，'请求体']
    • 将响应封装为[status,{响应头}，'响应体]
  • Node.js的封装
    • 封装在http模块中了
    • 使用request(IncomingMessage的实例)读取请求
    • 使用response(ServerResponse的实例)设置响应
  • Express的封装
    • 封装级别高一点点，只需理解Express的编程模型即可
    • 中文文档
  1. 创建并使用express项目
  • 创建项目
    • 新建一个文件夹，命名为express-demo
    • 用ide打开,运行yarn init -y;git init;
    • 新建.gitignore，提交到git,推送至GitHub
/.vscode/
/.idea/
/node_modules/
*.log
  • 开始学习express
    • CRM学习法：Copy-Run-Modify
  1. 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一样的效果就算成功了
  1. 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
  1. Express脚手架
  • 脚手架可以帮助我们一键搞定项目目录
  • express的脚手架有express-generator
    • 安装`yarn global add express-generator``
    • 使用
      • express -h 查看帮助
      • express --view=ejs .注意有一个点，这句话用于创建文件，点表示当前目录
      • 然后运行yarn install;yarn start;，此时可以访问http://localhost:3000/，看到以下页面

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

  • CRM学习法

    • 分析app.js,主要API为app.set和app.use
    • app.set用于改配置，app.use用于使用中间件
    • 记得提交可运行的代码，防止后面改出问题
  1. 总结
  • 我们从本次课程正式开始学习Node.js的Web框架，重点关注了Express，并通过Curl命令了解了HTTP请求和响应的基本知识。
  • 我们深入了解了Web框架的功能，包括方便处理HTTP请求与响应、连接数据库和Redis、路由等。通过架构示意图，我们理清了Web框架在应用中的位置。
  • 最后，我们介绍了Express脚手架的使用，以及使用CRM学习法分析Express的API。我们还创建了一个配置良好的学习环境，方便后续的项目使用。
avatar
文章
阅读
粉丝