1. Express 基础
1.1 什么是Express
node的web框架有Express 和 Koa。常用Express 。
Express 是一个基于 Node.js 的快速、极简的 Web 应用框架，用于构建 服务器端应用（如网站后端、RESTful API 等）。它是 Node.js 生态中最流行的框架之一，以轻量、灵活和易用著称。
npm install express --save
或者
yarn add express -SKoa 是由 Express 背后的团队设计的一个新的 Web 框架，旨在成为 Web 应用和 API 的更小、更具表现力和更强大的基础。 通过利用异步函数，Koa 允许你放弃回调并大大提高错误处理能力。 Koa 的核心中没有捆绑任何中间件，它提供了一套优雅的方法，使编写服务器变得快速而愉快。
1.2 Express特色和项目创建
1.2.1 Express特色
- Web 应用：Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。
- API：丰富的 HTTP 快捷方法和任意排列组合的 Connect 中间件，让你创建健壮、友好的 API 变得既快速又简单。
- 性能：Express 不对 Node.js 已有的特性进行二次抽象，我们只是在它之上扩展了 Web 应用所需的基本功能。
1.2.2 项目创建
服务端
1.在项目文件下创建一个新文件exprss1，在该文件下执行npm init -y 初始化。
2. 编写package.json文件。执行npm i 下载依赖。
{
"name": "express1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "PORT=4000 nodemon"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express":"^4.21.0"
},
"devDependencies": {
"nodemon":"^3.1.4"
}
}
3. 新建一个入口文件index.js 。在执行npm start 开启项目。
4. 编写入口文件index.js。
const express=require("express");
const app=express();
...
app.listen(process.env.PORT);
简单的服务已经搭建成功5. 下面的内容在该项目中进行讲解。
1.3 express的通信应用
const express=require("express");
const app=express();1.3.1 app.get
app.get：主要用于前后端get通信方式处理。
var express=require("express");
var app=express();
app.get("/a",function(req,res){
res.send("hello")
})
app.listen(4001);案例1：编写 express1文件下的index.js
使用浏览器直接访问服务端
1.3.2 解决express的通信的跨域问题
客户端
1. 在项目文件下新建一个clint客户端文件。
2. 在clint客户端文件打开集成终端中执行 npm i axios。
3. 在clint客户端文件新建一个index.html。
4. 在index.html文件中引入axios，并编写index.html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module">
1. 引入axios
import axios from "./node_modules/axios/dist/esm/axios.js"
2.访问服务器/a路劲，携带参数a=1,b=2
axios.get("http://localhost:4000/a?a=1&b=2").then((res)=>{
console.log(res);
})
</script>
</body>
</html>服务端
express1文件下的index.js 保持不变。
客户端直接访问服务端 涉及跨域问题会报错。
解决方法在服务端express1的package.json文件中编写添加cors跨域依赖。执行npm i 下载依赖。再次执行npm start开启项目。
修改express1的package.json文件：
{
"name": "express1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "PORT=4000 nodemon"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express":"^4.21.0",
添加依赖
"cors":"^2.8.5"
},
"devDependencies": {
"nodemon":"^3.1.4"
}
}
修改服务端express1文件下的index.js ，引入cors模块。再次使用客户端访问服务端。
const express=require("express");
const app=express();
const cors=require("cors");
一次性解决所有跨域，允许所有域名
app.use(cors());
app.get("/a",function(req,res){
服务端解析客户端url的方法1：
console.log(req.url); // a?a=1&b=2
服务端解析客户端url的方法2express 自动解析了客户端url带来的search部分参数
console.log(req.query); // {a:1,b:2}
服务端解析客户端url的方法3：路径，不带参数
console.log(req.path); // /a
服务端向客户端发送数据的方法：express 有send方法可以发送任何类型的数据，都会自动转换
//res.send("aaa");
res.send({a:1,b:2})
})
app.listen(process.env.PORT);服务端解析客户端的url:
服务端向客户端发送数据:
1.3.3 app.post
app.post： 主要用于前后端post通信方式处理。
var express=require("express");
var app=express();
app.post("/a",function(req,res){
res.send("hello")
})