您现在的位置是:首页 >学无止境 >Vue的学习6网站首页学无止境

Vue的学习6

iiiwjl 2025-08-15 00:01:05
简介Vue的学习6

109集:路由设计配置-一级路由配置

一级路由的代码如下:

先完成文件夹和页面的准备:

里面的其中一个内容展示:

所有的一级路由就完成了:

                                                               二级路由的思路及代码如下:

去官网找到Tabbar标签栏直接复制即可:                                                                                       

去官网找到icon去寻找自己想要的图标:

在Tabbar中找到自定义颜色(active-color:激活的颜色  inactive-color:未激活的颜色):

同样的先完成四个文件以里面的代码(只展示了一个里面的代码)的:

实现切换:

加一点优化(redirect):

110集:登录页静态布局&图形验证码功能

新建:

导入:

按需导入:

NavBar:

通用样式:

静态布局的编写:

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

代码如下:

          

112集:pi接口模块-封装图片验证码接口

      

       

                                                                        第一种:

                

第二种:

                           

其他文案的例子:

代码:

效果图:

113集:短信验证功能

步骤一:

            

离开页面发现还在倒计时,所以要停掉:

步骤一总结一下:

                    

                                                                步骤二:

效果图展示:

步骤二总结一下:

步骤三:

短信验证的接口:

效果图:

                                                                       步骤三总结一下:

114集:封装api登录接口-实现登录

封装登录接口:

登录前的校验及成功跳转:

总结一下:

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

效果图:

总结一下:

116集:将token权证信息存入vuex

第一步:

第二步:

第三步:

第四步:

效果图:

总结一下:

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

118集:添加请求loading效果

总结:

119集:全局前置导航守卫

120集:首页-静态结构准备&动态渲染

121集:搜索历史管理

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

123集:商品详情页-静态结构和动态渲染

124集:加入购物车-弹层显示

125集:加入购物车-数字框基本封装

126集:加入购物车-判断token登录提示

127集:购物车-基本静态布局

128集:购物车-构建vuex模块,获取数据存

总结:

129集:购物车-mapState渲染购物车列表

130集:购物车-封装getters动态计算展示

131集:购物车-全选反

132集:购物车数字框修改数量

133集:购物车-编辑、删除、空购物车处理

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。