第 3 课：前后端全栈联动核心 —— 接口规范 + AJAX + 跨域解决（打通前后端壁垒）

✅ 今日学习目标

✅ 掌握RESTful 接口规范 （企业级标准），统一前后端数据交互格式；✅ 吃透前端 AJAX 核心用法（原生 JS+Axios），实现前端主动请求后端接口；✅ 解决前后端联调最大痛点 ------跨域问题（CORS），掌握 2 种企业级解决方案；✅ 完成「前端登录页面 ↔ 后端登录接口」全链路联动，实现数据互通，看到完整全栈效果。

✅ 一、核心知识点精讲（全栈联动的核心，打通前后端的关键）

模块 1：RESTful 接口规范（前后端共识，必须遵守）

RESTful 是目前最主流的接口设计规范，定义了「请求方法、URL 路径、返回格式」的统一标准，让前后端开发无歧义，是团队协作的基础。

✅ 核心规范（项目必用，牢记）

URL 路径规范 ：用名词表示资源，不用动词，比如 /api/user（用户资源）、/api/goods（商品资源）；
请求方法对应操作：GET（查询）、POST（新增）、PUT（修改）、DELETE（删除）；
返回格式统一 ：所有接口返回 JSON，包含code（状态码）、msg（提示信息）、data（数据）；✅ 成功格式：{"code":200, "msg":"success", "data":{...}}✅ 失败格式：{"code":400, "msg":"参数错误", "data":null}
状态码规范：200（成功）、400（参数错误）、401（未登录）、403（无权限）、500（服务器错误）。

模块 2：前端请求后端 ------AJAX 核心用法（2 种方式，项目全覆盖）

AJAX：异步 JavaScript 和 XML，实现前端页面不刷新，就能向后端发送请求、获取数据，是前后端联动的核心技术。

✅ 方式 1：原生 JS 实现 AJAX（理解底层原理）

javascript

运行

复制代码

// 前端登录请求示例（POST请求，对接后端/api/login接口）
const login = () => {
    const xhr = new XMLHttpRequest();
    // 1. 配置请求方式、URL
    xhr.open("POST", "http://127.0.0.1:5000/api/login", true);
    // 2. 设置请求头（JSON格式必须加）
    xhr.setRequestHeader("Content-Type", "application/json");
    // 3. 发送请求（传递JSON数据）
    xhr.send(JSON.stringify({username: "admin", password: "123456"}));
    // 4. 接收响应
    xhr.onreadystatechange = () => {
        if (xhr.readyState === 4 && xhr.status === 200) {
            const res = JSON.parse(xhr.responseText);
            if (res.code === 200) {
                alert("登录成功！");
                console.log(res.data); // 打印后端返回的用户数据
            } else {
                alert(res.msg);
            }
        }
    }
}

✅ 方式 2：Axios 实现 AJAX（企业级首选，简洁高效）

Axios 是前端最主流的请求库，封装了原生 AJAX，支持 Promise、拦截器，代码更简洁，必学！

html

预览

复制代码

<!-- 1. 引入Axios（CDN方式，无需安装） -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    // 配置请求基准地址（统一前缀，简化URL）
    axios.defaults.baseURL = "http://127.0.0.1:5000";
    
    // 登录请求（POST）
    const login = async () => {
        try {
            const res = await axios.post("/api/login", {
                username: "admin",
                password: "123456"
            });
            if (res.data.code === 200) {
                alert("登录成功！");
                localStorage.setItem("user", JSON.stringify(res.data.data)); // 前端保存用户信息
            }
        } catch (err) {
            alert("请求失败：" + err.message);
        }
    }

    // 查询用户信息（GET）
    const getUserInfo = async () => {
        const res = await axios.get("/api/user/info");
        console.log(res.data.data);
    }
</script>

模块 3：跨域问题 ------ 前后端联调最大痛点（企业级解决方案）

❌ 跨域现象：前端运行在http://127.0.0.1:8080，后端运行在http://127.0.0.1:5000，前端请求后端时，浏览器报错「No Access-Control-Allow-Origin」；✅ 跨域本质：浏览器的「同源策略」限制 ------ 协议、域名、端口三者必须一致，否则拒绝请求。

✅ 解决方案 1：后端配置 CORS（最常用，推荐）

python

运行

复制代码

# Flask项目配置CORS（一行代码解决，安装flask-cors库）
from flask import Flask
from flask_cors import CORS  # 导入CORS库

app = Flask(__name__)
CORS(app)  # 全局允许跨域，所有前端域名均可请求

# 精准配置：仅允许指定前端域名跨域
# CORS(app, origins=["http://127.0.0.1:8080", "http://localhost:8080"])

✅ 解决方案 2：前端代理（Vue/React 项目常用）

在前端项目中配置代理，将后端请求转发到后端地址，避开浏览器同源策略限制（后续框架课重点讲解）。

✅ 二、今日核心实战（全栈联动里程碑，必做）

✅ 实战需求：完成「前端登录页面 ↔ 后端 Flask 接口」全链路联动

前端：用 HTML+CSS+JS+Axios 编写登录页面，包含用户名、密码输入框、登录按钮；
后端：用 Flask 实现登录接口，配置 CORS 允许跨域；
联动效果：前端输入账号密码，点击登录→请求后端接口→验证成功后，前端显示用户信息，失败则提示错误。

✅ 实战效果

✅ 前端页面不刷新，异步请求后端接口；✅ 跨域问题完美解决，请求正常响应；✅ 实现「输入→请求→验证→反馈」完整流程，打通前后端壁垒。

✅ 三、课后作业

📌 基础作业（必做）

基于 Axios 实现「用户注册、退出登录」前端请求，对接后端接口；
编写前端「用户信息展示页面」，请求后端 /api/user/info 接口，展示用户昵称、创建时间；
总结 RESTful 接口规范的 5 条核心规则，手写笔记。

📌 进阶作业（选做）

用 Vue 基础语法（插值表达式、事件绑定）重构前端页面，实现更优雅的前后端联动，提升页面交互体验。

✅ 明日预告

第 4 课：前端工程化进阶 ------Vue 核心入门 + 组件化开发，实现前端页面模块化、组件化，提升前端开发效率。