目录

一、为什么会有这篇文章？

二、使用前的准备-如环境、工具

三、如何使用？-express常用知识点

四、代码演示-配合截图，简单易懂

---

一、为什么会有这篇文章？

 在日常前端开发中，我们离不开数据，可能是用于页面内容展示方便调样式、测试接口问题等等。在合作的过程中，我们如果需要数据的时候，但前后端的开发进度不一致，我们作为前端开发者，可以先模拟本地服务器和假数据进行测试，实现简单的前后端通信。

本地服务器为开发者提供了一个隔离的环境，便于测试代码、确保应用的安全性和稳定性，同时加快了开发流程。而模拟后端数据则允许前端在没有真实后端支持的情况下进行界面和功能的测试，提高了开发效率，确保了用户体验的一致性。这两者结合使用，能有效提升项目的开发质量和速度。

二、使用前的准备-如环境搭建、工具

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

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

node下载地址：

Node.js — 在任何地方运行 JavaScript

安装下载express框架

Express - Node.js Web 应用程序框架 - Express中文文档 | Express中文网

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

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

npm init -y
npm install express cors body-parser

//cors解决跨域问题

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

 （我用的是node18.16.0版本来演示这次案例）

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

三、如何使用？-express常用知识点

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

const express = require('express')
const cors = require('cors')

const app = express() //创建一个express实例
const port = 7000 //这里设置的7000,也就是http://localhost:7000
//服务启动的端口号（只要符合端口要求，都可以设置，比如常用端口3000,4000,5000这些都可以）

app.use(cors()) // 解决跨域问题，这里是设置所有域名都可以访问
// 使Express能够解析JSON格式的请求体
app.use(express.json());
// 启动服务器
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`)
})

 打开终端，执行文件：

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

接下来开始写请求。

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

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

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

http://localhost:7000/hello

http://localhost:7000/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请求发送成功后，在控制台显示的请求体数据

四、配合前端框架vue使用

使用的前端热门框架vue，本次案例用的vue2

注意，发送请求需要用到axios。

在前端项目文件的终端输入以下命令：

npm install axios

（而且前端每次安装完新的东西后，都需要重新启动前端项目。）

前端文件

<template>
    <div>
      <div>
        <h2>测试GET请求</h2>
        <button @click="getTestData">点击发送</button>
        <p v-if="getSuccess">{{ getResponse }}</p>
        <p v-if="getError">{{ getError }}</p>
      </div>
      <div>
        <h2>测试POST请求</h2>
        <input v-model="postData" placeholder="Enter data for POST request" />
        <button @click="postTestData">点击发送</button>
        <p v-if="postSuccess">{{ postResponse }}</p>
        <p v-if="postError">{{ postError }}</p>
      </div>
    </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      // 测试用的数据
      getResponse: "",
      getSuccess: false,
      getError: "",
      postResponse: "",
      postSuccess: false,
      postError: "",
      postData: "",
    };
  },
  methods: {
    handleClick(event) {
      console.log("Button clicked!", event);
    },
    getTestData() {
      axios
        .get("http://localhost:7000/hello")
        .then((response) => {
          this.getSuccess = true;
          this.getResponse = response.data;
        })
        .catch((error) => {
          this.getError = error.message;
        });
    },
    postTestData() {
      console.log("即将发送post的数据是,", this.postData);
      if (!this.postData) {
        return;
      } else {
        axios
          .post("http://localhost:7000/api/submit", { data: this.postData })
          .then((response) => {
            this.postSuccess = true;
            this.postResponse = response.data;
          })
          .catch((error) => {
            this.postError = error.message;
          });
      }
    },
  },
};
</script>

<style>
button {
  margin: 20px;
}
</style>

 页面效果大致如下：

注意：测试的时候，需要启动服务器(服务器项目文件终端执行，node server.js)

后端文件

const express = require('express')
const cors = require('cors')

const app = express() //创建一个express实例
const port = 7000 //这里设置的6000,也就是localhost:60000
//服务启动的端口号（只要符合端口要求，都可以设置，比如常用端口3000,4000,5000这些都可以）

app.use(cors()) // 解决跨域问题，这里是设置所有域名都可以访问
// 使Express能够解析JSON格式的请求体
app.use(express.json())


app.get('/hello', (req, res) => {
  res.send('Hello World!')
})


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

  // 检查text是否存在
  if (!text) {
    return res.status(400).json({ error: 'not exist!' })
  } else {
    // 这里只是简单地返回一个‘true’的字符串。
    let successFlag = 'true'
    res.status(200).json({ successFlag })
    console.log('Received data:', req.body) //post请求发送成功后，在控制台显示的请求体数据
  }
})

// 启动服务器
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`)
})

 测试GET请求

、

打开调试工具-网络-查看发送的请求

测试POST请求

输入文本-点击发送

---

就暂且写到这里，后续有空再完善和补充一些内容细节。

如果你喜欢这篇文章，可以点赞、收藏。

关注我，交流和分享前端知识。-1127