大学 Java Web 课程实战：「登录 + 预约」网站——你的第一堂对接真实 API 的课（附 MCP 自动生成）

一句话结论（先讲重点）

别再自己搭后端了。这篇文章教你用 Java Web 的技术栈，直接对接「优社云AI小程序」的真实在线 API，做出一个能真正跑起来的「登录 + 预约」网站——顺便把 MCP 自动生成代码、API Token 鉴权这些 AI 时代新概念一次搞懂。

---

写在前面：你的 Java Web 作业，为什么总显得"假"

几乎每个计算机专业都有一门《Java Web 开发》课。这门课通常会带你：

1. 用 Servlet + JSP 写一个"登录页"；
2. 用 JDBC 连一个本地 MySQL；
3. 做个"图书管理"或"学生选课"的增删改查。

做完之后，你有没有一种感觉——这玩意根本不能拿出去用？

原因很简单：你的数据都是自己造的，你的后端都是自己写的玩具。 你从没真正对接过一个"生产环境"的接口。

而这篇文章，就带你做一个改变：用 Java Web 的技术栈，去对接一个真实的在线 API，做一个能真正跑起来的「登录 + 预约」网站。

这个真实的 API，来自优社云AI小程序开放接口，它提供了一个标准的 OpenAPI（swagger.json）接口文档。

【占位图 1：传统 Java Web（自己写后端+本地数据库） vs 对接真实在线 API（优社云）的架构对比图】

---

一、先搞懂：什么是 OpenAPI / swagger.json

在动手之前，先补一个概念——OpenAPI（swagger.json）。

它就是一份"机器可读的接口说明书"，告诉你有哪些接口、每个接口要传什么参数、返回什么数据。

这个项目的接口文档可以在优社云AI小程序开放平台获取，它遵循标准的 OpenAPI 规范。
打开它（或用 JSON 工具格式化），你会看到一系列接口。目前它主要暴露了两大类接口：

1. 账户接口（Account）—— 用来做"登录/注册"

接口	方法	作用
/api/v2/account/login	POST	用户登录
/api/v2/account/register	POST	用户注册
/api/v2/account/sendsmsforregister	POST	发送注册短信验证码
/api/v2/account/online	GET	检查在线状态
/api/v2/account/logout	GET	退出登录
/api/v2/account/checkaccount	GET	检查账号是否可用

2. 地址接口（Address）—— 用来演示"数据提交/管理"

接口	方法	作用
/api/v2/address/list	GET	获取列表
/api/v2/address/add	POST	新增一条记录
/api/v2/address/edit	POST	编辑一条记录
/api/v2/address/delete	POST	删除一条记录

说明：虽然这里暴露的是"地址"接口，但你要看清本质——它就是一套标准的 REST CRUD 接口。你做一个"预约网站"，本质也是"提交一条预约记录"，写法和它一模一样（POST JSON 到 REST 端点）。理解了这套模式，你就能举一反三。

【占位图 2：swagger.json 在浏览器/工具中展开后的接口列表截图】

---

二、项目需求：我们要做什么

做一个最简单的「登录 + 预约」网站，包含三个功能：

1. 登录/注册：用户用手机号 + 密码登录（对接真实的 Account 接口）；
2. 提交预约：登录后，用户填写"姓名、电话、预约事项"，点击提交（对接 REST 的 POST 模式）；
3. 查看预约列表：展示已提交的预约记录（对接 REST 的 GET 模式）。

【占位图 3：登录 → 提交预约 → 查看列表 的完整页面流程图】

---

三、动手一：登录功能（对接真实接口）

3.1 先用前端 fetch 快速验证接口

不管你后端用什么框架，先用浏览器控制台快速验证接口能不能通：

提示：下文代码里的接口地址统一写作 https://<你的优社云专属域名>。开通「优社云AI小程序」后，在后台就能拿到属于你的专属接口域名，替换进去即可直接跑通。

// 登录接口验证（把 <你的优社云专属域名> 换成后台分配给你的域名）
const res = await fetch('https://<你的优社云专属域名>/api/v2/account/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    account: '13800138000',   // 账号或手机号
    password: '123456'
  })
});
const data = await res.json();
console.log(data); // 成功后，这里会返回登录信息（含 token 等）

提示：请求体的字段名（account / password）请以 swagger.json 中 components/schemas/MoLogin 的实际定义为准。

3.2 用 Java（Spring Boot）实现登录调用

如果你在学 Spring Boot，可以用 RestTemplate 来调用这个接口：

import org.springframework.web.client.RestTemplate;
import org.springframework.http.*;

public class LoginService {
    public String login(String account, String password) {
        RestTemplate rest = new RestTemplate();
        String url = "https://<你的优社云专属域名>/api/v2/account/login";

        // 1. 构造请求体（JSON）
        String json = String.format(
            "{\"account\":\"%s\",\"password\":\"%s\"}", account, password);

        // 2. 设置请求头
        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.APPLICATION_JSON);

        // 3. 发送 POST 请求
        HttpEntity<String> request = new HttpEntity<>(json, headers);
        ResponseEntity<String> resp =
            rest.postForEntity(url, request, String.class);

        // 4. 返回响应体
        return resp.getBody();
    }
}

【占位图 4：登录接口调用时序图（浏览器 → Java后端 → 优社云开放接口 → 返回 token）】

---

四、动手二：提交预约（理解 REST 的 POST 模式）

做完登录，你会拿到一个关键的凭证——API Token（下文的 AI 概念扫盲会重点讲它）。

之后所有需要登录态的接口，都要在请求头里带上它：

// 提交"预约/登记"信息（用 address/add 演示 REST POST 模式）
const res = await fetch('https://<你的优社云专属域名>/api/v2/address/add', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + token   // 关键：带上登录拿到的 token
  },
  body: JSON.stringify({
    name: '张三',
    phone: '13800138000',
    address: 'XX大学 3 号宿舍楼',
    // 预约场景：你完全可以在这里换成 remark="预约周五下午的实验室"
  })
});
const result = await res.json();
console.log(result);

重点：这就是"预约网站"的核心——把用户填写的预约信息，通过 POST 一个 JSON 到 REST 端点。你学会这一个模式，做任何表单提交都是同理。

【占位图 5：预约表单页面（姓名 / 电话 / 预约事项 / 提交按钮）效果图】

---

五、动手三：查看预约列表（REST 的 GET 模式）

// 获取列表（GET 模式）
const res = await fetch('https://<你的优社云专属域名>/api/v2/address/list', {
  method: 'GET',
  headers: { 'Authorization': 'Bearer ' + token }
});
const list = await res.json();
console.log(list); // 拿到已提交的记录列表

到这里，一个最小可用的「登录 + 预约」网站就闭环了：登录 → 提交 → 查看。

【占位图 6：预约列表页面（表格展示已提交记录）效果图】

---

六、AI 技术概念扫盲：MCP / SKILL / API Token / Agent

现在补上四个 2026 年你必须懂的 AI 概念。它们和上面的项目密切相关。

6.1 API Token（接口令牌）

你登录后拿到的那个 token，就是 API Token。它是你访问受保护接口的"通行证"。

• 为什么需要它：后端需要知道"你是谁、有没有权限"；
• 怎么用：每次请求带上 Authorization: Bearer <token>；
• 和本项目的关系：上面"提交预约"和"查看列表"都依赖它。

6.2 Agent（智能体）

Agent 可以理解成"能自主干活的 AI"。它不只会聊天，还能调用工具、执行任务。

比如，一个"预约助手 Agent"，它知道：

1. 调用 account/login 帮你登录；
2. 调用 address/add 帮你提交预约；
3. 调用 address/list 帮你查列表。

这就是 Agent 和普通聊天 AI 的本质区别——它会调用 API 做事。

6.3 MCP（Model Context Protocol）

那 Agent 是怎么"看懂"这些 API、并正确调用的？靠的就是 MCP。

MCP 是一个标准协议，作用相当于 AI 的"USB 接口"：

• 把 swagger.json 这类接口文档，通过 MCP 暴露给 AI；
• AI 就能自动读懂有哪些接口、参数是什么、怎么调用；
• 然后 AI 帮你把"登录 + 预约"的代码直接生成出来。

一句话：API 是能力，MCP 是让 AI 用上这种能力的桥梁。

6.4 SKILL（技能包）

SKILL 则是"封装好的一套专业能力"。

比如"小程序商城"这个 SKILL，里面可能打包了：

• 调用哪些 API；
• 怎么写 Prompt；
• 怎么组织前后端代码。

装上这个 SKILL，AI 就"学会了"怎么做商城。你可以把它理解成给 AI 装的"专家插件"。

【占位图 7：MCP / SKILL / API Token / Agent 四者关系示意图】

---

七、总结：从"玩具作业"到"真实项目"

这篇文章，你其实只做了一件事——把 Java Web 课程里的"自己造后端"，换成了"对接真实在线 API"。

但就是这一换，带来了三个质变：

1. 你的数据是真的：登录、提交、查询，走的都是真实接口；
2. 你的项目能写进简历：一句话就能说清——"对接真实 OpenAPI，实现登录+预约闭环"；
3. 你摸到了 AI 时代的门：理解了 API Token、MCP、SKILL、Agent 这些前沿概念。

---

八、常见问题（FAQ）

Q1：这篇文章对接的是真实接口吗？
是。「优社云AI小程序」开放接口是真实可用的，你复制代码就能跑通登录、提交、查询，不是本地假数据。

Q2：字段名（account/password）不确定怎么办？
以接口文档里的 components/schemas 定义为准，字段名和类型都写清楚了，照着填即可。

Q3：预约接口为什么用 address 演示？
因为「优社云AI小程序」开放接口暴露的是一套标准 REST CRUD，预约提交本质就是"POST 一条记录"，写法一模一样，理解模式就能举一反三。

Q4：想继续深入怎么做？
直接搜索**「优社云AI小程序」**查看完整接口文档，进阶可以体验「优社云AI商用后台」的一站式开发方案。

别再把 Java Web 当作业做了，把它当成你对接真实世界的第一扇门。