后端与前端进阶笔记（课次32-34）

课次32：CORS跨域配置

一、教学目标

  • 完成后端CORS跨域配置，专门放行前端 http://localhost:5173 域名的跨域请求

  • 确认前端代理配置有效性（前端代理已在第二阶段完成，本课次仅做核验）

二、核心知识点

CORS（跨域资源共享）：是浏览器的跨域安全解决方案，后端通过返回 Access-Control-Allow-Origin 响应头，告知浏览器允许指定的前端域名跨域访问后端接口，从而突破浏览器同源策略限制。

跨域核心原因：浏览器同源策略限制，协议、域名、端口任意一个不同，即判定为跨域请求。

三、实操步骤

在后端工程的InterceptorConfig（拦截器配置类） 中，添加全局CORS跨域配置，核心配置逻辑如下：

  • 指定允许跨域的前端源：http://localhost:5173

  • 放行所有请求方法（GET、POST、PUT、DELETE等）

  • 放行所有请求头，允许携带Cookie、Token等请求参数

  • 设置跨域预检请求有效期，减少重复预检请求开销

配置作用：全局生效，后端所有接口均可被前端5173端口项目正常跨域调用，无需单独为单个接口配置跨域。

课次33：用户注册与登录认证

一、核心任务清单

  1. 后端实现用户注册接口/user/register（课程阶段密码暂不做加密处理，明文存储）

  2. 前端注册页面对接后端注册接口，完成用户注册功能

  3. 前端登录页面对接后端登录接口，实现账号密码登录功能

  4. 实现前端权限管控：Token存储、Axios请求拦截器、路由守卫配置

二、核心知识点

1. 登录认证核心流程

用户提交登录账号密码 → 后端校验账号密码合法性 → 校验成功生成Token返回前端 → 前端存储Token → 后续请求携带Token完成身份认证。

2. 前端核心配置作用

  • Token存储：登录成功后，将后端返回的Token存储在本地存储中（localStorage/sessionStorage），作为用户登录凭证。

  • Axios拦截器：每次发送后端请求时，自动在请求头中携带Token，实现接口身份鉴权；同时统一处理Token过期、请求失败等异常。

  • 路由守卫：全局监控页面跳转，未登录用户无法访问需要权限的页面，强制拦截跳转至登录页，实现页面权限控制。

三、功能逻辑说明

  • 注册功能：前端录入用户账号、密码等信息，通过接口提交至后端，后端完成数据校验后存入数据库。

  • 登录功能：前端提交账号密码，后端比对数据库数据，验证通过返回有效Token。

  • 权限控制：通过拦截器+路由守卫组合，实现“未登录禁止访问权限页面、请求自动携带登录凭证”的完整认证体系。

课次34：新闻发布与列表

一、核心任务清单

  1. 前端开发新闻发布页面，对接后端 /news/add 接口，实现新闻新增发布功能

  2. 前端首页对接后端 /news/page 分页接口，实现新闻数据分页展示

二、核心知识点

1. 新闻发布功能

属于数据新增业务，前端通过表单录入新闻标题、内容、封面、发布时间等信息，封装参数后调用新增接口，提交数据至后端完成持久化存储。

2. 分页查询功能

后端 /news/page 为通用分页接口，接收前端传递的当前页码、每页条数参数，后端查询数据库并返回对应分页数据、总条数、总页数，前端基于数据渲染新闻列表表格。

三、业务实现逻辑

  • 新闻发布：前端表单校验 → 组装新闻参数 → 调用新增接口 → 提示发布成功 → 可跳转至新闻列表页。

  • 新闻列表展示：页面加载自动触发请求 → 传递分页参数 → 接收后端分页数据 → 循环渲染表格、分页组件 → 支持页码切换查询不同数据。