2024年Web前端最新实战Vue：基于Vue的移动端购物商城(2)，2024年最新算法面试经典100题

2301_82243603

于 2024-05-12 05:08:52 发布

阅读量866

点赞数 17

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2301_82243603/article/details/138739752

版权

程序员专栏收录该内容

212 篇文章 0 订阅

订阅专栏

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它

在界面上进行操作，调用ADD_GOODS添加商品方法

① 向购物车中添加的事件很多地方都要调用，因此借助消息订阅（pubsub-js），在组件中跨级通信。

② 安装pubsub-jsnpm install pubsub-js -S

③ 在Home.vue中，监听添加到购物车消息

在这里插入图片描述

④ 在YourLikeItem.vue中发布消息

在这里插入图片描述

⑤ 其他需要添加到购物车的地方操作相同

（3）借助vant中的反馈组件Toast文字提示，提示用户添加成功

在vant.js中引入

在这里插入图片描述

在需要提示的地方使用

在这里插入图片描述

（4）定义购物车数据本地化的接口

在这里插入图片描述

（5）因为购物车有一个数量标志要试试变化，所以在初始DashBoard的时候，就应该调用INIT_SHOP_CART初始化购物车

在这里插入图片描述

（6）增加计算属性，通过计算shopCart每个shop的num和，利用vant的tabbar的info属性，控制购物车数量商标

在这里插入图片描述

（7）在购物车界面遍历shopCart并在界面上显示

在这里插入图片描述

（8）购物车数量加减操作

首先在mutations.js中定义将商品移出购物车的方法——即商品数量为1仍然减得操作

在这里插入图片描述

在Cart.vue中配置删除商品的方法

在这里插入图片描述

（9）直接将ADD_GOODS引入到Cart.vue中进行商品数量的增加

在这里插入图片描述

（10）商品单选事件处理

首先在mutations中定义单选事件
在Cart.vue中对单选a标签进行事件绑定

（11）商品全选事件处理

首先在mutations中定义全选事件
在cart中使用计算属性selectedAll标识是否全选，并通过改属性控制是否全选点击事件

在这里插入图片描述

（12）总价计算

利用计算属性，通过shopCart中checked为true的数据，计算商品总价在这里插入图片描述

（13）去结算数量

通过计算属性，计算选中的商品数量

在这里插入图片描述

（14）清空购物车

在mutations中定义清空购物车方法

在这里插入图片描述

在Cart.vue中引入并使用清空购物车方法

12. 配置订单界面

（1）配置填写订单路由

填写订单界面应该是和dashboard平行的，所以在views目录下新建order子文件夹，并在order文件夹下新建Order.vue
在router文件夹内的index.js中配置路由
在购物车中点击去结算的时候，转到订单界面

将去结算的a标签改为router-link标签，并用tag标识其原本标签名，并用to表示其跳转路由在这里插入图片描述

在这里插入图片描述

引入NavBar实现导航栏

① 在vant.js中引入NavBar

在这里插入图片描述

② 在Order.vue中进行引入配置在这里插入图片描述

引入ContactCard 实现收货地址

① 在vant.js中引入ContactCard

在这里插入图片描述

② 在Order.vue中进行引入配置在这里插入图片描述

（2）配置我的地址界面

在order文件夹下，新建children文件夹，children文件夹下新建MyAddress.vue

在这里插入图片描述

配置路由

在这里插入图片描述

在我的订单中，实现点击选择收货地址跳转路由

在这里插入图片描述

引入vant组件AddressList实现我的地址

① 在vant.js中引入AddressList

在这里插入图片描述

② 在MyAddress.vue中进行引入配置

在这里插入图片描述

③ MyAddress.vue中，对div进行绝对定位，结合Order.vue中的transition，形成动画效果

在这里插入图片描述

（3）配置地址编辑界面和配置新增地址界面

在MyAddress.vue同级目录下，新建children文件夹，并在children文件夹内新建AddAddress.vue和EditAddress.vue

在这里插入图片描述

在index.js中配置路由

在这里插入图片描述

借助AddressEdit实现编辑地址和新增地址

① 引入AddressEdit

在这里插入图片描述

② 在EditAddress.vue中配置并实现编辑地址（添加地址类似）

在这里插入图片描述

③ 在我的地址中增加路由跳转

在这里插入图片描述

（4）配置下方Cell单元格 —— 借助vant中Cell组件

在vant.js中引入Cell和CellGroup

在这里插入图片描述

在Order.vue中进行定制

① 送达时间

在这里插入图片描述

② 商品展示在这里插入图片描述

③ 支付方式

在这里插入图片描述

④ 备注

在这里插入图片描述

⑤ 商品金额、配送费

在这里插入图片描述

（5）配置下方提交栏——SubmitBar 提交订单栏

引入SubmitBar

在这里插入图片描述

在Order.vue中使用

在这里插入图片描述

13. 配置我的界面

(1) 导航 —— vant的nav-bar

在这里插入图片描述

(2)头像及其他信息 —— vant的cell

在这里插入图片描述

(3)我的订单、查看所有订单 —— vant的cell

在这里插入图片描述

(4)待支付、待收货、待评价、售后/退款 —— vant的Grid, GridItem

引入
使用

在这里插入图片描述

(5) 我的优惠券、我的收货地址、联系客服、意见反馈、下载APP —— vant中的cell

在这里插入图片描述

14. 用户角色配置

（1）建立选择登陆界面、登录界面及配置选择登陆界面、登录界面路由

views新建文件夹login，并在子文件夹login中新建Login.vue和SelectLogin.vue，并将静态界面配置好

在这里插入图片描述

（2）在vuex的state中存储用户数据，并存储在本地

首先在state中，在vuex中声明userInfo数据。通过判断本地userInfo中是否存在token数据，来判断是否需要登录。在这里插入图片描述

（3）在购物车中进行判断是否显示选择登陆方式界面

在这里插入图片描述

（4）在我的中进行判断是否显示选择登陆方式界面

在这里插入图片描述

（5）给Login.vue登录界面配置独立路由

在这里插入图片描述

（6）在选择登陆方式界面，给手机登录配置路由跳转，并设置tag

在这里插入图片描述

（7）通过属性及时间控制登录界面方式及密码显示方式

15. 用户中心接口

（1）短信验证码、手机验证码登录

在service/api/index.js中，实现接口
在Login.vue中调用接口
调用登录接口

在这里插入图片描述

登录成功后，将用户信息保存到本地

① 在vuex中实现将用户信息保存到本地以及获取用户信息的方法在这里插入图片描述

（2）🎡🎡🎡🎡🎡异步操作不可以使用mutations了，需要使用actions是🎡🎡🎡🎡🎡

手机号码验证登录的时候是异步操作了，不能直接通过mutations操作vuex，必须通过actions异步转同步。

在actions中定义同步方法，并调用mutations中的异步方法

在这里插入图片描述

在Login.vue中，使用异步方法

在这里插入图片描述

16. 账号密码登录

页面配置数据与input绑定
点击登录判断有没有值

在这里插入图片描述

service/api/index.js中实现pwdLogin用户名、密码登录方法

在这里插入图片描述

Login中调用方法

在这里插入图片描述

17. 我的界面对本地数据进行渲染

在这里插入图片描述

18. 退出登录实现

新增界面
配置路由
界面中引用，配置转场动画
在service/api/index中实现自动登录/退出登录实现

在这里插入图片描述

在mutations中实现重置用户数据

在这里插入图片描述

在UserCenter中实现退出登录
在dashBoard中对用户数据进行同步

① 在actions中实现获取用户信息自动登录接口在这里插入图片描述

② 在DashBoart.vue中实现自动登录在这里插入图片描述

19. 购物车与用户角色进行绑定

（1）设置登录后才能向购物车中添加数据

在这里插入图片描述

（2）商品添加到购物车后，首先将商品同步到服务器，再存储到本地

定义添加到购物车接口
在添加购物车的时候，将商品存放在本地之前，首先将商品同步到服务器

在这里插入图片描述

（3）退出登录的时候清空购物车

在这里插入图片描述

20. 购物车优化

（1）自动登录

从服务器获取用户购物车数据，进行本地化并在购物车中显示

在这里插入图片描述

（2）商品修改从服务器同步修改

在这里插入图片描述

（3）清空购物车

在这里插入图片描述

21. 用户地址相关

（1）地址相关接口

在这里插入图片描述

（2）选择地址获取账户地址并显示

在这里插入图片描述

（3）新增地址

在这里插入图片描述

（4）编辑地址

在改变路由的时候，通过拼接url传递参数

在这里插入图片描述

获取的时候通过this.$route.query获取参数

在这里插入图片描述

将传递过来的信息在编辑界面显示——通过addressInfo绑定
修改地址
删除地址

（5）选择地址后放到填写订单界面

在这里插入图片描述

22. 我的订单界面完善

（1）商品选中、删除生成订单商品等接口的实现

在这里插入图片描述

（2）购物车中单选、全选等与服务器同步

在这里插入图片描述

23. 去结算完善

（1）根据总额度判断能否点击去支付

在这里插入图片描述

（2）商品清单页面配置

新建OrderDetail.vue组件
配置路由
结合vant——Cart组件实现商品清单展示

（3）其他细节处理

在这里插入图片描述

24. 提交订单完善

（1）订单接口以及支付接口慎用

在这里插入图片描述

（2）提交订单

在这里插入图片描述

（3）生成支付二维码——借助vue-qriously

在这里插入图片描述

（4）验证用户是否支付成功

在这里插入图片描述

（5）后续处理

在这里插入图片描述

25. 待支付、待收货——借助vant的tab、tabs实现

配置路由

在这里插入图片描述

界面实现

在这里插入图片描述

26. rem配置

在config文件夹下新建rem.js

在这里插入图片描述

// 设置基准

const BASE = 15;

(function (doc, win) {

let docEl = doc.documentElement,

resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’,

recall = function () {

let clientWidth = docEl.clientWidth;

if (!clientWidth) return;

docEl.style.fontSize = BASE * (clientWidth / 320) + ‘px’;

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recall, false);

doc.addEventListener(‘DOMContentLoaded’, recall, false);

})(document, window);

在main.js中引入

在这里插入图片描述

27. 样式穿透

在配置swiper轮播图选中样式的时候，始终不生效。

在样式上，加上/deep/或者>>>即可

在这里插入图片描述

28. 加载中

在请求数据的时候，可能组件已经加载完成，此时可能就会导致一些BUG（比如轮播图跳转到最后一页后不再继续跳转、轮播图刚开始在最后一页）。这时候可以加上一个正在加载功能，当数据全部请求完成后再加载组件。

在vant.js中引入vant的Loading组件

在这里插入图片描述

在需要显示加载中的界面（Home.vue）中进行配置

在这里插入图片描述

29. 图片懒加载—借助vant的image组件实现

vant.js中引入Image组件

在这里插入图片描述

配置图片

在这里插入图片描述

30. 全局过滤器

在config文件夹下新建文件夹filters，配置全局过滤器

在这里插入图片描述

在main.js中引入全局过滤器

在这里插入图片描述

在全局中使用| moneyFormat即可使用过滤器

31. 页面缓存 keep-alive

有些页面不需要每次进入的都是都重新加载，可以keep-alive，当下拉的时候进行刷新重新加载即可。

针对首页和分类进行页面缓存

在router中的index.js配置路由的时候，给需要添加缓存的界面增加一个meta属性，并在其中配置keepAlive:true

在这里插入图片描述

这这两个路由的出口——DashBoard.vue中增加一个keep-alive标签，里面存放需要进行缓存的路由，外面放不需要进行缓存的路由。是否需要缓存根据meta中的keepAlive属性进行判断。

在这里插入图片描述

32. 借助better-scroll实现滚动

安装集成npm install better-scroll -S
滚动原理：外层嵌套div，上下预留空间，监听点击滚动等事件
使用方法：

① 在需要使用的地方引入组件

在这里插入图片描述

② 初始化better-scroll（等到数据完全请求完成后，再初始化better-scroll）。一般初始化滚动框架的时候，是在下一个周期执行（使用this.$nextTick(()=>{})）确保在下一个执行周期前初始化。

在这里插入图片描述

③ 在父组件上进行初始化

在这里插入图片描述

33. Tabbar索引缓存

在刷新界面的时候，不应该每次都回到首页

解决方法：进行本地缓存

在这里插入图片描述

34. 将本地化存储、获取、删除抽成全局方法

在config文件夹下的global.js中，写三个方法

在这里插入图片描述

35. 代理解决跨域

在项目根目录新建文件vue.config.js
在vue.config.js中写入以下代码

其中’/api’路由中被匹配到的路径，target是存在跨域的目标路径，changeOrigin为设置允许跨域，pathRewrite是重写路径，因为目标路径中原本就存在/api，所以将路径中第一个/api重写为空

vue中axios通过代理解决跨域问题

36. 点击验证码图片，重新请求图片并赋值

加时间戳确保请求不同

在这里插入图片描述

37. 借助pubsub.js实现消息的发布订阅的时候，一定要注意发布、订阅信息的销毁

在这里插入图片描述

一定要及时销毁，不然在调用发布订阅的时候，消息队列中所有的消息都会被执行

38. 集成底部弹出日期组件

结合Popup弹出层和DatetimePicker时间选择集成底部弹出日期组件

引入Popup弹出层和DatetimePicker时间选择

在这里插入图片描述

配置组件

39. 借助vue-qriously生成二维码

引入npm install vue-qriously -S
在main.js中配置

// 6. 配置二维码插件

import VueQriously from “vue-qriously/dist/vue-qriously”;

Vue.use(VueQriously)

使用

在这里插入图片描述

qrcode：生成二维码的URL地址

40. 定位

借助腾讯地图实现定位

首页引入定位js
Header.vue使用

后话

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。

2301_82243603

关注

17
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
2024年Web前端最新实战Vue：基于Vue的移动端购物商城(2)，2024年最新算法面试经典100题

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它在界面上进行操作，调用ADD_GOODS添加商品方法① 向购物车中添加的事件很多地方都要调用，因此借助消息订阅（pubsub-js），在组件中跨级通信。② 安装pubsub-js③ 在Home.vue中，监听添加到购物车消息④ 在YourLikeItem.vue中发布消息⑤ 其他需要添加到购物车的地方操作相同。
复制链接

扫一扫