day24Node-node的Web框架Express

news2025/5/28 1:58:17

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 -S

Koa 是由 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")
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2387149.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！