️ 总览你的技术路线图你可以把整个学习过程看作一次“盖房子”的旅程每一步都有明确的目标打地基 (阶段一 二): 掌握Vue 2Element UI能搭建出管理后台的前端页面。通水电 (阶段三): 学会Axios让前端页面能与后端API进行数据通信。装门禁 (阶段四 五): 攻克微信OAuth鉴权和Cookie Token持久化实现安全的用户登录与状态管理。上AI大脑 (阶段六): 掌握SSE流式AI应答实现类ChatGPT的“打字机”对话效果。做精装 (阶段七 八): 学会响应式布局和Webpack多环境构建让应用在手机、电脑上都能完美运行并适应开发、测试、生产等多种环境。 学习路线图Vue 2 微信 OAuth SSE AI 流式应答本路线图面向有一定编程基础的学习者目标是从零构建一个具备微信登录和AI流式对话能力的Web应用。全篇分为理论基础篇和实战操作篇建议按顺序执行。 第一部分理论基础与知识清单 阶段一基石 - Vue 2 单页应用开发学习目标理解Vue的核心思想能独立搭建并开发一个Vue 2单页应用SPA。学习周期1-2周 核心知识点Vue 核心理解渐进式框架和MVVM模式。掌握data、methods、computed、watch、生命周期钩子created,mounted等。模板语法熟练使用v-if、v-for、v-bind、v-on、v-model等核心指令。组件化掌握单文件组件.vue的开发模式理解props、$emit等组件间通信方式。路由管理学习Vue Router实现SPA中的页面切换、路由传参和导航守卫。状态管理了解Vuex的核心概念state,mutations,actions,getters知道它用于管理全局共享数据。✅ 实操任务使用 Vue CLI 创建一个新的 Vue 2 项目。在项目中创建并使用你自己的第一个 Vue 组件。配置 Vue Router实现“首页”和“关于”两个页面的切换。在“首页”组件中使用v-for渲染一个列表数据使用v-if控制元素的显示与隐藏。实现一个简单的父子组件通信父组件通过props向子组件传递数据子组件通过$emit向父组件发送消息。可选在一个简单的场景中尝试使用 Vuex例如在多个组件间共享用户登录状态。 阶段二UI美化 - Element UI 响应式布局学习目标能使用Element UI组件库快速搭建美观的后台界面并掌握让页面适配手机和电脑的响应式设计。学习周期1周 核心知识点Element UI 核心组件熟练使用el-container布局容器、el-menu导航菜单、el-table表格、el-form表单、el-dialog对话框等。栅格系统理解Element UI基于24栏的栅格布局掌握el-row和el-col的用法。响应式断点学习并使用xs,sm,md,lg,xl属性来实现不同屏幕尺寸下的布局切换。SCSS预处理器了解SCSS的基本语法变量、嵌套、混合等并能够在Vue组件中编写style langscss。✅ 实操任务在项目中引入Element UI并实现一个包含左侧菜单和右侧内容区的经典后台布局。在内容区使用el-table和el-form搭建一个简单的“用户管理”界面。使用Element UI的栅格系统尝试搭建一个在不同屏幕下手机、平板、桌面显示不同列数的卡片列表。学习如何在Vue组件中使用SCSS并定义一个主题色变量然后在多处引用它。 阶段三通信 - Axios REST API 通信学习目标掌握使用Axios库与后端RESTful API进行数据交互的方法。学习周期3-5天 核心知识点Axios基础掌握axios.get()、axios.post()等方法发送GET和POST请求。请求与响应拦截器学习使用拦截器Interceptors在请求发送前或响应返回后执行统一逻辑如添加Token、处理错误。错误处理统一处理请求错误并在UI上给予用户友好提示。API封装将项目中所有的API请求统一封装在src/api/目录下提高代码的可维护性。✅ 实操任务在项目中安装并配置Axios。使用axios.get请求一个公开的API如天气预报、新闻列表并将返回的数据渲染到页面上。封装一个request.js文件创建Axios实例并配置好基础URLbaseURL。在request.js中添加一个请求拦截器在控制台打印出每次请求的配置信息。在src/api/目录下创建一个user.js文件封装一个“获取用户信息”的API方法。 阶段四鉴权 - 微信 OAuth 鉴权学习目标理解OAuth 2.0协议在微信网页授权中的完整流程并能在项目中实现“微信登录”功能。学习周期1周 核心知识点OAuth 2.0 概念理解资源拥有者用户、客户端你的应用、授权服务器微信等核心角色和交互流程。微信网页授权流程重点掌握授权码模式Authorization Code。前端引导用户跳转至微信的授权页面。用户授权后微信重定向回你的页面并携带一个code。前端将code传递给后端。后端使用codeappidsecret去微信服务器换取access_token和用户的openid。前后端协作明确前端负责引导和获取code后端负责用code换取用户信息并生成你自己的会话凭证如JWT。✅ 实操任务在微信公众平台申请一个测试号获取appid和secret。学习如何构造微信OAuth的授权URL并尝试在浏览器中访问观察跳转和回调过程。在你的Vue项目中创建一个“微信登录”按钮点击后跳转到微信授权页面。在回调页面从URL中获取code参数。编写一个API方法将获取到的code发送给你的后端。可选如果你有后端开发能力尝试实现用code换取openid的接口。️ 阶段五安全 - Cookie Token 持久化学习目标理解将Token存储在HttpOnly Cookie中的安全优势并掌握其实现方法。学习周期3-5天 核心知识点存储方式对比对比localStorage和Cookie存储Token的差异理解localStorage容易受到XSS攻击的风险。HttpOnly Cookie理解设置HttpOnly标志的Cookie无法被JavaScript读取从而从根本上防御了XSS窃取Token的风险。安全标志了解Secure仅HTTPS传输和SameSite防CSRF攻击标志的作用。实现方式明确Token应由后端在登录成功后通过Set-Cookie响应头写入而非前端通过JS写入。✅ 实操任务查找资料理解XSS攻击的原理以及它如何能窃取localStorage中的数据。概念性任务画一张流程图对比“Token存在localStorage”和“Token存在HttpOnly Cookie”两种方案的安全性与工作流程。需后端配合与后端同学沟通将登录接口的返回方式改为成功时在响应头中Set-Cookie且Cookie带有HttpOnly和Secure标志。⚡ 阶段六AI交互 - SSE 流式 AI 应答整条路线最核心学习目标掌握使用SSE技术接收服务器流式数据并实现“打字机”效果的AI对话界面。这是整条路线中最核心、最有价值的部分。学习周期1-2周 核心知识点SSE 原理理解SSE是一种基于HTTP的轻量级实时通信技术允许服务器单向向客户端推送数据。EventSource API学习浏览器原生提供的EventSourceAPI用于在前端建立SSE连接。接收与渲染消息掌握通过onmessage事件接收数据并增量式地将文本片段追加到对话区域实现“打字机”效果。生命周期管理了解如何处理连接建立onopen、接收消息onmessage、发生错误onerror等事件。✅ 实操任务找一个支持SSE的公共API或自己用Node.js/Python写一个简单的SSE服务器。在Vue项目中使用new EventSource(/your-sse-endpoint)建立连接。在onmessage回调中将接收到的文本片段实时追加到页面的div中模拟AI逐字输出的效果。实现一个“停止生成”的按钮点击后调用eventSource.close()关闭连接。进阶尝试使用fetchAPI ReadableStream来实现SSE这种方式可以支持POST请求和自定义请求头更加灵活。️ 阶段七工程化 - Webpack 多环境构建学习目标理解前端工程化的概念能够配置Webpack实现开发、测试、生产等多环境的代码构建。学习周期1周 核心知识点环境变量理解development、test、production等环境的概念及其对应的用途。配置文件分离学习使用webpack-merge等工具将公共配置抽离到webpack.base.js并为不同环境创建专属配置文件如webpack.dev.js,webpack.prod.js。环境变量注入掌握使用DefinePlugin或在Vue CLI项目中使用.env文件将环境变量注入到前端代码中。✅ 实操任务在你的Vue CLI项目中创建.env.development和.env.production两个文件。在两个文件中分别定义VUE_APP_API_BASE_URL变量值为不同环境的后端API地址。在Vue组件中通过process.env.VUE_APP_API_BASE_URL获取该变量并输出到控制台。分别执行npm run build对比不同环境下构建出的文件有何不同如API地址是否被替换。 第二部分实战操作手册从零开始敲代码️ 第零步环境与工具准备1天在开始写代码之前先把“枪”擦好。工具具体版本/操作验证方法Node.js下载18.x LTS或20.x LTS版本安装命令行输入node -v显示v18.x.x包管理器使用yarn或npm推荐yarn速度更快npm install -g yarn代码编辑器VS Code装好Vetur或Volar插件打开.vue文件能高亮显示浏览器Google Chrome装好Vue.js devtools插件F12 打开控制台能看到Vue标签微信测试号申请一个微信公众平台测试号不用认证拿到appID和appsecret 阶段一实战从零搭建 Vue 2 项目2天目标在浏览器里看见你自己的 Vue 项目首页。第一步创建项目打开命令行进入你的工作目录比如D:\project执行# 使用 Vue CLI 创建项目如果没装先执行 npm install -g vue/cli vue create my-ai-web # 手动选择配置选 Vue 2, Router, Vuex, CSS Pre-processors # 记住一定要选 Vue 2 版本不要选 Vue 3第二步启动项目cd my-ai-web yarn serve打开浏览器访问http://localhost:8080看到 Vue 的欢迎界面阶段一的前半部分完成。第三步写一个自己的组件加深理解在src/components下新建HelloWorld.vue把默认代码清空自己写一个最简单的template div !-- 1. 使用插值表达式显示数据 -- h1{{ message }}/h1 !-- 2. 使用 v-for 循环渲染列表 -- ul li v-for(item, index) in list :keyindex{{ item }}/li /ul !-- 3. 使用 v-if 控制显示 -- p v-ifshowTip这是一行提示文字/p !-- 4. 使用 v-model 双向绑定 -- input v-modelinputValue placeholder输入文字 / p你输入的是{{ inputValue }}/p /div /template script export default { data() { return { message: 你好我正在学习 Vue 2, list: [苹果, 香蕉, 橘子], showTip: true, inputValue: } } } /script然后去App.vue里引入这个组件看看页面上的变化。 阶段二实战引入 Element UI 响应式布局3天目标让你的页面从“毛坯房”变成“精装房”。第一步安装 Element UIyarn add element-ui在src/main.js中全局引入import Vue from vue import ElementUI from element-ui import element-ui/lib/theme-chalk/index.css Vue.use(ElementUI)第二步搭建后台经典布局在src/App.vue中替换成以下代码实现“左侧菜单 右侧内容”template el-container styleheight: 100vh; !-- 左侧菜单 -- el-aside width200px stylebackground-color: #304156; el-menu background-color#304156 text-color#fff active-text-color#ffd04b el-menu-item index1首页/el-menu-item el-menu-item index2用户管理/el-menu-item /el-menu /el-aside !-- 右侧内容区 -- el-container el-header stylebackground-color: #fff; border-bottom: 1px solid #ddd; span我的AI应用/span /el-header el-main !-- 这里放你的页面内容 -- el-table :datatableData stylewidth: 100% el-table-column propdate label日期/el-table-column el-table-column propname label姓名/el-table-column /el-table /el-main /el-container /el-container /template script export default { data() { return { tableData: [{ date: 2024-01-01, name: 张三 }] } } } /script第三步响应式布局让手机也能看把上面的el-aside width200px改成el-aside :widthisCollapse ? 64px : 200px同时在el-menu上加上:collapseisCollapse并在 data 里定义isCollapse: false。核心响应式知识点使用 Element UI 的栅格系统。el-row :gutter20 el-col :xs24 :sm12 :md8 :lg6 v-foritem in 4 :keyitem div classgrid-content卡片 {{ item }}/div /el-col /el-row解读在手机xs上占满一整行在平板sm上占一半在电脑md上占三分之一。 阶段三实战Axios 前后端通信2天目标让你的前端能向后端“要数据”。第一步安装 Axiosyarn add axios第二步封装 request.js这是核心在src/utils/request.js中写入import axios from axios // 创建一个 Axios 实例 const service axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 从环境变量读取地址 timeout: 30000 // 超时时间 30 秒 }) // 请求拦截器在发请求前自动添加 Token service.interceptors.request.use( config { // 从 Cookie 中读取 Token后面学 const token document.cookie.split(; ).find(row row.startsWith(token)) if (token) { config.headers[Authorization] Bearer token.split()[1] } return config }, error { return Promise.reject(error) } ) // 响应拦截器统一处理返回数据 service.interceptors.response.use( response { const res response.data // 如果返回的 code 不是 200说明接口报错了 if (res.code ! 200) { console.error(接口报错, res.message) return Promise.reject(new Error(res.message || Error)) } return res }, error { console.error(网络错误, error) return Promise.reject(error) } ) export default service第三步写一个 API在src/api/user.js中写入import request from /utils/request // 获取用户信息 export function getUserInfo() { return request({ url: /user/info, method: get }) }第四步在页面中调用在你之前的 Vue 组件中加入import { getUserInfo } from /api/user export default { methods: { async fetchUser() { try { const res await getUserInfo() console.log(用户信息, res.data) } catch (error) { console.error(获取用户失败, error) } } }, mounted() { this.fetchUser() // 页面加载时自动执行 } } 阶段四实战微信 OAuth 登录3天目标让用户能通过微信扫码登录你的网页。第一步配置微信测试号登录 微信公众平台测试号拿到appID和appsecret。在“网页授权域名”中填写你的本地 IP 地址不要写localhost要写192.168.x.x。第二步前端跳转微信授权页在你页面的“登录”按钮上绑定这个方法handleWechatLogin() { // 你的 appID const appId wx1234567890 // 你的回调地址需要 URL 编码 const redirectUri encodeURIComponent(http://你的IP地址:8080/oauth/callback) // 微信官方授权 URL const url https://open.weixin.qq.com/connect/oauth2/authorize?appid${appId}redirect_uri${redirectUri}response_typecodescopesnsapi_userinfostateSTATE#wechat_redirect // 跳转到微信 window.location.href url }第三步写一个回调页面在src/views/OauthCallback.vue中从 URL 中取出codetemplate div正在登录中请稍候.../div /template script import { getQueryParam } from /utils/index export default { mounted() { // 从 URL 中取 code const code getQueryParam(code) if (code) { // 把 code 发送给后端换取登录凭证 this.loginWithCode(code) } }, methods: { async loginWithCode(code) { try { const res await this.$http.post(/auth/wechat/login, { code }) // 登录成功后端会通过 Set-Cookie 写入 Token this.$router.push(/) } catch (error) { console.error(登录失败, error) } } } } /script第四步后端配合理解原理后端需要做两件事用codeappidsecret去微信服务器换取access_token和openid。根据openid生成你自己的jwt token并通过响应头Set-Cookie写入浏览器。️ 阶段五实战Cookie Token 持久化1天目标确保用户刷新页面后登录状态不会丢失。原理后端登录成功后在响应头中加上Set-Cookie: tokenxxxxx; HttpOnly; Secure; SameSiteLax; Max-Age86400加上HttpOnly后前端 JavaScript 无法读取这个 Cookie但浏览器在每次请求时会自动带上它。前端验证方法打开浏览器 F12 - Application - Cookies看看有没有token字段。然后刷新页面观察 Axios 请求中是否自动带上了Authorization头。⚡ 阶段六实战SSE 流式 AI 应答4天这是整条路线最有价值、也是最难的一步目标实现“打字机”效果。第一步了解什么是 SSE传统的 API 是一次性返回完整数据。SSEServer-Sent Events允许服务器像“广播”一样一点点地把数据推送给前端。第二步前端建立 SSE 连接在src/views/Chat.vue中template div !-- 对话显示区 -- div classchat-box div v-for(msg, index) in messages :keyindex span v-ifmsg.role user我/span span v-elseAI/span {{ msg.content }} /div !-- 当前正在生成的流式内容 -- div v-ifstreamingContentAI{{ streamingContent }}/div /div !-- 输入框 -- input v-modelquestion keyup.entersendQuestion placeholder输入你的问题 / button clicksendQuestion发送/button button clickstopStream停止生成/button /div /template script export default { data() { return { question: , messages: [], streamingContent: , eventSource: null } }, methods: { sendQuestion() { if (!this.question) return // 1. 把用户的问题加到对话列表 this.messages.push({ role: user, content: this.question }) // 2. 创建 SSE 连接 this.eventSource new EventSource(/api/ai/stream?question${encodeURIComponent(this.question)}) // 3. 监听服务器发来的消息 this.eventSource.onmessage (event) { // 服务器发来一个数据块 const data JSON.parse(event.data) if (data.type content) { // 追加文字打字机效果 this.streamingContent data.text } else if (data.type end) { // 流结束把完整内容加入对话列表清空临时变量 this.messages.push({ role: ai, content: this.streamingContent }) this.streamingContent this.eventSource.close() } } // 4. 错误处理 this.eventSource.onerror (error) { console.error(SSE 连接错误, error) this.eventSource.close() } // 清空输入框 this.question }, stopStream() { if (this.eventSource) { this.eventSource.close() this.streamingContent } } } } /script第三步后端需要做什么概念理解后端无论是 Java、Python 还是 Node.js需要设置响应头Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive然后每隔几百毫秒往前端推送一行数据data: {type:content,text:你} data: {type:content,text:好} data: {type:end}️ 阶段七实战Webpack 多环境构建1天目标开发环境连测试后端生产环境连正式后端。第一步创建环境变量文件在项目根目录.env.development开发环境NODE_ENVdevelopment VUE_APP_BASE_APIhttp://localhost:8081/api.env.production生产环境NODE_ENVproduction VUE_APP_BASE_APIhttps://api.your-company.com第二步在代码中使用你的request.js中的baseURL会自动读取process.env.VUE_APP_BASE_API。第三步打包验证yarn build:prod # 打包生产环境 yarn build:stage # 打包测试环境打包完成后去dist文件夹里看js文件搜索https://api你会发现地址已经被替换成对应的环境地址了。 项目目录结构供参考my-ai-web/ ├── public/ │ └── index.html ├── src/ │ ├── api/ # 所有 API 接口 │ │ ├── user.js │ │ └── ai.js │ ├── assets/ # 静态资源 │ ├── components/ # 公共组件 │ │ └── HelloWorld.vue │ ├── router/ # 路由配置 │ │ └── index.js │ ├── store/ # Vuex 状态管理 │ │ └── index.js │ ├── utils/ # 工具函数 │ │ └── request.js # Axios 封装 │ ├── views/ # 页面 │ │ ├── Login.vue │ │ ├── Chat.vue # AI 对话页面 │ │ └── OauthCallback.vue # 微信回调页 │ ├── App.vue │ └── main.js ├── .env.development # 开发环境变量 ├── .env.production # 生产环境变量 ├── package.json └── vue.config.js # Webpack 额外配置 最终时间表按天执行天数任务产出物Day 1装环境 创建 Vue 项目看到默认首页Day 2-3学 Vue 核心指令 写第一个组件能自定义组件Day 4-5引入 Element UI 搭建后台布局看到美观的界面Day 6学习响应式栅格系统手机、电脑都能看Day 7-8封装 Axios 调通第一个接口控制台打印出数据Day 9-10微信 OAuth 配置 跳转测试能跳转到微信授权页Day 11Cookie Token 理解 验证F12 能看到 CookieDay 12-14SSE 流式对话实现看到“打字机”效果Day 15Webpack 多环境打包能打出不同的包 资源推荐与学习建议Vue 2: 首选官方文档中文资料丰富非常详尽。之后可以结合一些实战视频教程加深理解。Element UI: 官方文档和示例代码非常完善是学习的最佳资料。Axios: 查阅其NPM页面或GitHub仓库里面有丰富的API文档和示例。微信OAuth: 认真阅读微信官方文档的“网页授权”章节这是最权威的资料。SSE: 学习EventSource的MDN文档并搜索“SSE 聊天室”、“SSE 打字机效果”等关键词参考社区的最佳实践。学习心态这条路线涉及的技术点较多不要试图一次性掌握所有内容。可以按照我提供的阶段分而治之逐个击破。每完成一个阶段的实操任务你都会获得实实在在的成就感。
)
