点此查看 所有教程、项目、源码导航
文章目录
- [0. 作者的话](#0. 作者的话)
- [1. 人物介绍](#1. 人物介绍)
- [2. 为什么调用后端接口，数据可以持久保存？](#2. 为什么调用后端接口，数据可以持久保存？)
- [3. 项目功能说明](#3. 项目功能说明)
-
- [3.1 社团管理员（社团负责人）功能](#3.1 社团管理员（社团负责人）功能)
- [3.2 普通学生功能](#3.2 普通学生功能)
- [4. 页面规划](#4. 页面规划)
- [5. 开发约定](#5. 开发约定)
0. 作者的话
刚刚写完4个系列的教程如下：
尚未稍歇，继续开始第5个系列教程，也就是《HTML+CSS+JS对话式实战》。
本教程我准备创新一下，尝试对话式、引导式的开发模式，我个人感觉对新手学习更加友好，更有沉浸式的感觉。
当然，如果后续反馈比较好的话，会在实战系列教程里面，更多采用这个模式。
继续努力吧！
1. 人物介绍
本篇先和大家介绍咱们教程里的两位主角：毛哥、副队
毛哥：计算机专业大一学生。刚刚系统学完 HTML、CSS、原生 JavaScript，DOM、BOM、AJAX XHR 的语法基础都过了一遍，理论看懂了，但从来没有做过对接后端接口的完整项目。对前后端怎么配合、数据怎么长久保存充满好奇，动手热情很高，也是咱们这个教程里的学习者。
副队：计算机专业大三学长，全栈方向。他是计算机学院篮球队的副队长，大家平时习惯简称叫他副队。他前端基础懂一些，主攻后端，熟练使用 SpringBoot 开发接口。平时喜欢带着学弟做实战项目，善于把复杂的原理讲通俗。本次项目，所有后端接口都由副队负责写好、调试完毕，带着毛哥专注写前端，体验真实前后端联调的开发流程。
两人是同一个学院的，经常在实验室一起捣鼓代码，这一次打算一起开发一个社团活动发布平台。
毛哥：副队，我们前面 JS 基础、DOM、BOM、AJAX XHR 都学完了，今天咱们要干啥？
副队：今天咱们就正式上手实战，做一个完整的网页项目------社团活动发布平台。后端接口我已经用Java全部写好了，你不用写后端代码，只写前端 HTML、CSS、原生 JS，通过 AJAX 调用我给你的接口就行。在开始写代码之前，先聊一个你大概率会好奇的问题。
2. 为什么调用后端接口，数据可以持久保存？
毛哥：对了副队，我之前自己写 JS，在变量里存的数据，只要页面一刷新就没了。为什么调用后端接口提交数据，数据就能一直保留，刷新页面还在？
副队：这个问题问到点子上了，咱们把这个底层逻辑先讲明白。
咱们之前写代码的时候，所有定义的变量、页面上临时生成的数据，都是放在浏览器内存里。内存是临时空间，只要页面刷新、标签页关闭、浏览器关掉，内存就会清空，数据直接消失，没办法长期保存。
后端服务跑在服务器上，配套还有数据库。当我们前端通过 XHR 发送 POST 请求，把活动信息传给后端，整个流程是这样：
- 前端收集表单里填写的活动名称、时间、地点等信息，通过网络传给后端；
- 后端收到数据，做基础校验；
- 校验通过之后，后端把这条数据写入数据库；
- 数据库的数据保存在服务器的硬盘上。硬盘属于持久化存储，就算后端程序重启、服务器短暂关机，硬盘里的数据也不会丢失。
后面刷新页面，前端发起查询接口请求，就是向后端索要数据：后端去数据库读取保存好的记录，再返回给前端，我们再用 JS 把数据渲染到页面上。所以刷新之后，活动信息还在。
毛哥：我大概懂了！也就是说，浏览器内存只是临时放数据，一关页面就清空；真正要长期存，就得交给服务器的数据库，对吧？
副队：没错，理解很到位。那你再想想，咱们之前学过 localStorage，它也能存东西，它和数据库存储有啥区别？
毛哥：localStorage 是存在我这台电脑浏览器里的对吧？换别的电脑打开网页，就看不到了？
副队：对，区别就在这里。localStorage 是存在你当前这台电脑的浏览器里面，换一台电脑、换一个浏览器打开页面，就看不到之前存的数据了，只适合单人本地使用。
而存在服务器数据库里的数据，任何一台设备访问网页、调用同一个接口，都能拿到相同的数据，所有学生、社团负责人看到的活动列表是统一共享的，这正是社团平台需要的效果。
✅ 小结
- 浏览器内存：临时存储，页面刷新数据丢失；
- localStorage：存在本机浏览器，换设备失效，适合单人本地小数据；
- 后端+数据库：数据存服务器硬盘，多用户共享、持久保存；
- 接口：就是前端和后端提前约定好的通信通道，用来互相传递数据。
毛哥：这么一说我理清了！前端负责展示页面、收集用户输入，然后通过接口把数据发给后端；后端负责把数据存数据库，前端想看数据的时候，再发请求拿回来渲染。是这个流程吧？
副队：完全正确，这就是前后端配合最核心的逻辑。
3. 项目功能说明
毛哥：懂啦！那咱们这个项目具体要实现哪些功能？
副队：咱们这个平台有两类角色：社团管理员、普通学生。
开发顺序约定：先做管理员端，再做学生端。管理员负责录入维护数据，先把活动增删改查做好，有了活动数据之后，再开发学生浏览、报名的功能。
3.1 社团管理员（社团负责人）功能
- 发布新的社团活动，填写活动名称、分类、时间、地点、报名截止时间、招募上限、活动简介；
- 查看自己发布的所有活动列表；
- 在报名截止之前，可以编辑修改活动信息；报名截止后，不允许修改；
- 可以删除、下架活动；
- 点击活动，可以查看该活动所有报名学生的名单。
毛哥：我注意到有个限制，报名截止之后不能修改活动，这个是后端帮我们控制吗？
副队：是的，校验逻辑放在后端。前端只是做页面展示，就算前端偷偷改代码绕过限制，后端也会判断时间，拒绝修改请求，保证数据安全。
3.2 普通学生功能
- 浏览全部公开的社团活动，支持按活动分类筛选；
- 点开卡片，查看活动详细信息；
- 提交活动报名，同一个活动只能报名一次，后端会做重复报名拦截；
- 在报名截止时间之前，可以取消自己的报名；
- 查看【我的报名】，看到自己所有已经报名的活动。
毛哥：明白了，报名不能重复也是后端做校验，防止我反复提交多条报名记录。
4. 页面规划
一共三个核心页面，通过导航栏切换：
- 活动管理页：管理员使用，表格展示自己发布的活动，包含新增、编辑、删除、查看报名名单按钮；
- 活动广场页：学生使用，卡片形式展示全部活动，支持筛选；
- 我的报名页：学生使用，展示自己提交过的报名记录，支持取消报名。
毛哥：三个页面分开，导航切换，一个给管理员管理数据，另外两个给学生看活动和管理自己的报名，分工很清楚。
5. 开发约定
- 后端接口文档由我提供，包含接口地址、请求方式、请求参数、返回数据格式；
- 全程使用原生 XHR 实现 AJAX 请求，复用之前学过的知识；
- 先搭建静态页面，再逐步对接接口实现动态功能。
毛哥：太好了，那我们下一节要讲什么？
副队：下一节咱们先大家活动管理页面的静态骨架，先看到整体效果。