【HTML】实现一个AI角色切换网页页面
技术复盘报告：AI角色切换网页的关键实现路径
一、项目目标
构建静态单页，完成角色数据可视化、用户交互、本地大模型对话三项任务，过程中验证以下技术点：
- DOM数据渲染
- XMLHttpRequest请求
- 函数封装
- Live Server绕过同源限制
- Ollama本地后端接口调用
二、环境参数
- 前端：单HTML文件，ES5/6混编，无框架依赖
- 后端：Ollama服务，监听11434端口，提供/chat接口
- 通信协议：HTTP/1.1，POST，Content-Type: application/json
- 浏览器：Chromium内核，版本≥88
- 开发服务器：VS Code Live Server，端口5500
三、核心流程拆解
- 数据层：rolesData对象，三级结构，类别→角色→详情
- 视图层：grid布局卡片，事件绑定onclick→showRoleDetail
- 网络层：封装request函数，返回Promise，内部使用XMLHttpRequest
- 会话层：点击"开始聊天"后，注入system prompt，向Ollama发送payload，持续追加messages数组
- 跨域层：Live Server启动localhost:5500，与localhost:11434同源域，浏览器不触发CORS预检
四、关键函数签名
request(url, payload, method): Promise<Object>
gotoChatBtn(): void
chat_btn(): void
职责边界：
- request仅处理序列化、请求、反序列化、错误统一封装
- gotoChatBtn负责初始system prompt拼装与首次渲染
- chat_btn负责后续用户输入追加与界面更新
五、输入输出格式
- 请求payload
{"model": "qwen3-coder","messages": [{"role": "system", "content": "<一次性系统设定>"},{"role": "user", "content": "<用户输入>"}],"stream": false
}
- 响应格式
{"message": {"role": "assistant","content": "<模型返回文本>"}
}
六、潜在异常与对策
- 11434端口未就绪：网络层reject，前端捕获并提示"服务未启动"
- 消息发送过快：使用isSend标志位，加锁0.3s
- JSON解析失败：reject Error，前端统一catch并打印xhr.responseText
七、验证清单
- 角色卡片按类别切换，无回流重排异常
- 详情区域三字段正确回显
- 首次问候自动生成，无"好的"等冗余前缀
- 多轮对话messages长度递增，content正确累积
- 关闭聊天窗口后，再次进入可重新初始化，无旧数据残留
八、结论
技术点全部验证通过，单文件方案满足本地离线演示需求；如迁移至生产环境，仅需替换请求路径为反向代理地址，无需改动业务逻辑。
九、文件地址
AI角色切换网页页面