Vue day10 完整购物网页(登录页,首页,搜索)

一登录页

静态布局&图形验证码功能

图形验证码功能

api接口模块-封装图片验证码接口

阅读文档,掌握toast轻提示

短信验证功能

封装api登录接口-实现登录

响应拦截器-统一处理错误

将token权证信息存入vuex

storage存储模块-vuex持久化处理

初始化:应用启动时,user 模块的 state 会通过 getInfo() 从 localStorage 读取用户信息(如 token),自动登录。 更新:登录成功后,调用 this.store.commit('user/setUserInfo', userData),Vuex 状态和本地存储会同时更新。 退出:调用 this.store.commit('user/setUserInfo', { token: '', userId: '' }) 或直接调用 removeInfo(),清除状态和本地存储

添加请求loading效果

全局前置导航守卫

二首页-静态结构准备&动态渲染

三搜索

历史管理

搜索列表页-静态布局与渲染

相关推荐
半个落月5 分钟前
用 LangChain.js 手写一个能读写文件和执行命令的 Mini Cursor
javascript·人工智能·后端
天外天-亮20 分钟前
HBuilder X 使用 uview-plus 方式
开发语言·javascript·hbuilder x·uview-plus
huashengzsj26 分钟前
Shopify个人建站如何搭建独立站:从零开始的完整指南
前端·网络·人工智能
程序猿小泓37 分钟前
从 Claude Code 学 Agent Harness:一个前端工程师的 AI Agent 学习笔记
前端·人工智能·学习
柒和远方1 小时前
从审计日志到可下载证据包:事务型 Outbox、租约 fencing 与保留水位
前端·后端·架构
卓怡学长1 小时前
w266基于spring boot + vue 圣地延安美食乐享系统
java·数据库·vue.js·spring boot·spring·intellij-idea
minglie12 小时前
npm ali-oss库依赖冲突
前端·npm
CryptoPP2 小时前
BSE股票K线数据接入实战:从接口调用到前端图表展示
大数据·前端·网络·人工智能·websocket·网络协议
Random_index4 小时前
#Vue3篇: Vue 项目发版后如何提示用户刷新?基于 package.json 版本号的前端更新检测方案
前端·vue.js·json
没落英雄4 小时前
5. 从零开始搭建一个 AI Agent —— 人机协作与中断恢复
前端·人工智能·架构