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效果

全局前置导航守卫

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

三搜索

历史管理

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

相关推荐
扶苏10023 小时前
深入理解 Vue 3 的 watchEffect
前端·javascript·vue.js
未来龙皇小蓝5 小时前
RBAC前端架构-05:引入Element-UI及相关逻辑
前端·ui
yanlele5 小时前
AI Coding 时代下, 关于你会写代码这件事儿, 还重要吗?
前端·javascript·ai编程
打瞌睡的朱尤6 小时前
Vue day9 购物车,项目,vant组件库,vw,路由
前端·javascript·vue.js
星火开发设计8 小时前
模板参数:类型参数与非类型参数的区别
java·开发语言·前端·数据库·c++·算法
cc.ChenLy10 小时前
【CSS进阶】毛玻璃效果与代码解析
前端·javascript·css
何中应10 小时前
使用Jenkins部署前端项目(Vue)
前端·vue.js·jenkins
西门吹-禅10 小时前
node js 性能处理
开发语言·javascript·ecmascript
3秒一个大10 小时前
JWT 登录:原理剖析与实战应用
前端·http·代码规范