前端用express搭建本地服务器

new出一个对象

已于 2024-12-01 22:27:24 修改

阅读量1.1k

点赞数 13

文章标签：前端 express

于 2024-12-01 22:04:30 首次发布

本文链接：https://blog.csdn.net/weixin_52830464/article/details/144174702

版权

express官网地址：Express - 基于 Node.js 平台的 web 应用开发框架 - Express中文文档 | Express中文网

一、引言

Express 是一个基于 ‌Node.js‌ 平台的 ‌Web开发框架‌，它提供了快速、开放、极简的解决方案，用于创建Web应用程序和API。Express通过封装Node.js的HTTP模块，简化了Web服务器的创建过程，使得开发者能够更高效地开发Web应用‌。

二、环境搭建、工具

安装下载node(express是node的一个框架，node自然是必备的）

注意：下载安装和配置node非本文重点的，所以有需要node的详细安装和下载，请自行搜索。

node下载地址：下载 | Node.js 中文网

如果你已经处理好nodejs，可以直接执行以下命令，创建项目和安装express

新建一个文件夹，打开终端，执行以下命令：

npm init -y
npm install express cors body-parser

cors：用于解决跨域问题

body-parser: Express 中间件，用于解析 HTTP 请求体中的数据，支持 JSON、URL 编码和多部分表单数据，让我们可以直接使用数据。

正常情况下，看到这里就是初始化和安装成功了。

三、express常用知识点

在根目录下创建一个server.js文件，写入以下代码：

const express = require('express')
const cors = require('cors')
 
const app = express() //创建一个express实例
const port = 8000 //这里设置的8000,也就是http://localhost:8000
//服务启动的端口号（只要符合端口要求，都可以设置，比如常用端口3000,4000,5000这些都可以）
 
app.use(cors()) // 解决跨域问题，这里是设置所有域名都可以访问
// 使Express能够解析JSON格式的请求体
app.use(express.json());
// 启动服务器
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`)
})

打开终端，执行文件：

node server.js

能看到这个，则表示服务器已经启动。

接下来开始写请求。

get方法

get 方法是 Express 框架中用于处理 HTTP GET 请求的简便方法。它允许你定义路由处理程序，当客户端发送 GET 请求到指定路径时，这些处理程序会被触发。get 方法的基本语法如下：

path：这是客户端请求的路径，可以是字符串或字符串数组。
callback：这是当请求到达时执行的函数，通常包含两个参数：req（请求对象）和res（响应对象）。

测试get方法：

在server.js文件新增以下代码：

//案例一：
app.get('/hello', (req, res) => {
  res.send('Hello World!');
});
 
 
//案例二：
let data = [
  { question: '你好吗？', answer: '我很好，谢谢！' },
  { question: '今天天气怎么样？', answer: '今天天气不错，适合外出。' },
  { question: '你会什么技能？', answer: '我会编程、设计和解决问题。' },
  { question: '你是谁？', answer: '我是你的智能助手。' },
]
 
// 获取所有问题和答案的路由
app.get('/api/qna', (req, res) => {
  res.json(data)
})

重新启动服务：node server.js

打开浏览器，分别访问接口地址：

(注意：端口号（我这里设置的8000）根据你自己设置的进行修改）

http://localhost:8000/hello

http://localhost:8000/api/qna

post方法

在Express框架中，post 方法用于处理HTTP POST请求，它允许你接收客户端发送的数据，通常用于表单提交或API交互。

app.post(path, callback);

path：客户端请求的路径。
callback：请求到达时执行的函数，包含req（请求对象）和res（响应对象）两个参数。
req对象包含了请求体（request body），你可以从中获取客户端发送的数据。

在sever.js中新增以下代码：

// 定义一个POST请求处理程序,接收id和name参数
app.post("/api/submit", (req, res) => {
  // 从请求体中获取id和name
  const { id, name } = req.body;

  // 检查id和name是否都存在
  if (!id || !name) {
    return res.status(400).json({ error: "Both id and name are required" });
  }

  // 处理id和name，例如保存到数据库或进行其他操作
  // 这里只是简单地返回接收到的值
  let successFlag = "true";
  res.status(200).json({ id, name, successFlag });
  console.log("Received data:", req.body); //post请求发送成功后，在控制台显示的请求体数据
});

重新启动服务：node server.js

测试post请求

打开apipost（一个调试接口的工具，有需要自行搜索下载）看图按步骤进行

新建POST接口-写入接口地址-写入需要的参数（json格式，这里我们需要id和name参数）-发送-查看响应结果

同时在终端，你也可以看见如下信息。

（因为我们在post方法中书写了一条控制台打印语句）

console.log('Received data:', req.body)   //post请求发送成功后，在控制台显示的请求体数据