第一次前后端联调，我领悟了工程化真谛，这句话说起来容易，但真正理解起来却不容易。

以前我认为前端就是写写页面、改改样式，至于数据咋来的，那不dou是后端的事吗？前端只需要渲染数据不就行了？你懂的，其实不是这样的。

React页面 ↓axios/fetch ↓HTTP请求 ↓Node/FastAPI ↓MySQL ↓JSON返回 ↓前端渲染

我之前写的项目dou是静态页面从来没有真正接入真实数据，当我开始Zuo大项目时就发现问题了。

那问题一定在后端，这些dou是工程化开发里的基础，因为，工程化=统一。

接下来通过Postman来测试后端接口是否正常，PostmanKe以模拟前端请求，kan到后端的返回信息，常用于测试接口是否正确。

在于它Neng帮我们快速定位问题，Ru果 Postman dou请求失败，那问题就在后端；Ru果 Postman 成功，但前端失败，那问题就在前端请求逻辑。

下面我用一个小demo简单说明前后端联调的过程。

然而大错特错，恰恰是这个数据，就是前后端联调的关键。

点击获取用户信息

所以 就要去翻接口文档，kankan后端传过来的数据是什么格式如何，类型如何，才Neng正确渲染数据。

因为：

工程化不是突然出现的高级概念，它背后其实涉及hen多基础的东西，比如axios封装、鉴权中间件等。

现在初始化前端项目，新建utils文件夹，写入request.js文件，使用axios 全局封装，专门用来解决前后端分离项目中重复的请求配置和统一的认证 / 错误处理问题。

import axios from "axios";const request = axios.create;//请求拦截器request.interceptors.request.use => { const token = localStorage.getItem; if { config.headers.Authorization = `Bearer ${token}`; } return config;});//响应拦截器request.interceptors.response.use => response, // 2xx 成功，直接把数据给你 => { if { const requestUrl = error.config?.url || ""; if { alert; localStorage.removeItem; } } return Promise.reject; },);export default request; 为什么百度不收录我的网站？

害，这个问题问得好，其实百度不收录网站有hen多原因，比如网站内容质量不高、网站结构不友好、缺乏外链等，你得好好检查一下你的网站了。

const express = require;const cors = require;const jwt = require;const app = express;const SECRET_KEY = "your_secret_key";const user = { id: , username: "admin", password: "qwiqdqd90090",};app.post => { const { username, password } = req.body; if { //登录成功，生成token const token = jwt.sign; return res.json; } else { return res.status.json; }});app.get => { return res.json;});app.listen => { console.log;});

再加入鉴权中间件，这个是jwt用来进行身份认证的内容。token用来维持用户状态。

这样一个前后端分离的小demo就完成啦，不过这里没有写数据库的内容，直接在后端定义了user列表。

// 鉴权中间件function authMiddleware { const authHeader = req.headers.authorization; if return res.status.json; const token = authHeader.split; try { const decoded = jwt.verify; req.user = decoded; next; } catch { return res.status.json; }}

第一次前后端联调后,我终于理解了什么是工程化.本文通过一个 React + Node.js + JWT 的前后端分离小 demo,梳理了前后端联调的完整流程,包括接口设计、Postman 测试、JWT 鉴权、axios....在前端技术发展日新月异的今天,前端工程化Yi经成了每个前端工作/学习者的必备知识,一文带你吃透webpack....咱就是说这是一个hen重要的技Neng，你一定要掌握。

import { useState, useEffect } from "react";import request from "./utils/request";import "./App.css";function App { const = useState; const = useState; const = useState; const = useState;...}

,不对不对，我省略了一些代码，不过大致就是这样子的，你Ke以自己补全试试kan，说实话，这个过程还是挺有意思的。你会发现，原来前后端联调并没有想象中那么难，只要你一步一步来总Neng成功！哈哈！加油吧！