【练习】基于Vue全家桶的仿小米商城系统

网友投稿 282 2022-09-22

吸顶的实现：

data(){ return { isFixed: false } }, mounted(){ // 监听页面的滚动事件 window.addEventListener('scroll', this.initHeight) }, destroyed(){ // 销毁页面的滚动事件 window.removeEventListener('scroll', this.initHeight) }, methods: { initHeight(){ // 定义事件的监听的内容 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; this.isFixed = scrollTop > 152; } }

其中， pageYOffset 属性返回文档在窗口垂直方向滚动的像素。如果找不到就找滚动的距离，chrome中使用​​document.documentElement.scrollTop​​​，IE浏览器使用​​document.body.scrollTop​​来定义。由于上面Header组件的高度为152px，所以只要滚动距离大于152，就给组件添加定位属性。

定位实现：

.nav-bar{ &.is_fixed{ position: fixed; top: 0; width: 100%; } }

（2）视频动画实现

视频内容的基本结构：

.video-box{ // 定义进入的动画 @keyframes{ from{ top:-50%; opacity:0; } to{ top:50%; opacity:1; } } // 定义出去的动画 @keyframes{ from{ top:50%; opacity:1; } to{ top:-50%; opacity:0; } } .video{ position:fixed; top:-50%; left:50%; transform:translate(-50%,-50%); z-index:10; width:1000px; height:536px; opacity:1; // 执行完动画之后， top还会变回-50%，所以需要我们手动设置为50% &.slideDown{ animation:slideDown .6s linear; top:50%; } &.slideUp{ animation:slideUp .6s linear; } }

​​animation​​三个参数分别是：动画的名称、动画的执行时间、进入的形式（这里是匀速进入）

有一个小问题就是，当关闭视频之后，视频整个盒子还在，所以要对其进行设置：

还有一个小问题尚未解决，没有找到合适的方法，就是关闭视频实际上是将视频放在了我们看不到的地方，实际上视频依旧在播放着，没有暂停，需要手动设置进行暂停。之后看看有没有什么比较好的解决方案…

7. 退出功能的实现

退出功能的实现，需要考虑以下因素：

退出后要清空顶部的用户名称退出后要清空购物车内商品的数量退出后要清空cookie值接口优化

（1）首显示定义退出功能的结构：

退出

（2）逻辑实现

logout(){ this.axios.post('/user/logout').then(() => { // 清空cookie，将cookie过期时间设置为-1，就是立刻失效 this.$cookie.set('userId', '', {expires: '-1'}) // 将Vuex中的用户名称和购物车商品数量进行初始化（清空） this.$store.dispatch('saveUserName', '') this.$store.dispatch('saveCartCount', '0') Message.success('退出成功') })}

但是这样的话，每次进入主页面都会记进行购物车数量请求，会影响性能，而我们只是想在登录之后才进行请求，所以可以在登录时设置一个参数，若主页面接收到这个参数，说明是从登录页面过来的，就进行数据请求:

getCartCount(){ this.axios.get('/carts/products/sum').then((res=0) => { this.$store.dispatch('saveCartCount', res); }) }// 在 login中设置一个from参数吗，这里使用params传参，这样的话，跳转路径必须使用名称的形式 this.$router.push({ name: 'index', params: { from: 'login' } })// 接收参数，如果参数是login，就进行数据的请求 mounted(){ let params = this.$route.params if(params && params.from == 'login'){ this.getCartCount() } },

（4）优化

在​​APP.vue​​中，我们默认每次打开页面时就进行数据请求，如果没有登录，就会报错，这样实际上也会造成资源的浪费，我们可以判断是否登录，只有登录状态下才进行请求：

mounted(){ if(this.$cookie.get('userId')){ this.getUser() this.getCartCount() } }

在登陆之后，会储存一个后台的会话ID，它的持续时间为Session（也就是当浏览器关闭之后，就自动清空，结束会话），所以我们的cookie过期时间和它的会话持续时间保持一致就可以了：

this.$cookie.set('userId', res.id, { expires: 'Session' })

8. Element UI的使用

在使用Element UI的时候，按照官网的导入方式，遇到报错 ​​Error: Cannot find module 'babel-preset-es2015'​​​问题，需要在 ​​.babelrc​​ 文件中，进行如下修改：

{ "presets": [["@babel/preset-env", { "modules": false}]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ]}

这样问题就解决了。

9. 订单确认页面的实现

submitAddress(){ // 使用解构赋值来来获取data中的数据 let {checkedItem,userAction} = this; let method,url,params={}; if(userAction == 0){ method = 'post',url = '/shippings'; }else if(userAction == 1){ method = 'put',url = `/shippings/${checkedItem.id}`; }else { method = 'delete',url = `/shippings/${checkedItem.id}`; } //表单验证略过... // params中的参数是在表单中解构赋值出来的 params = {receiverName,receiverMobile,receiverProvince,receiverCity,receiverDistrict,receiverAddress,receiverZip} this.axios[method](url,params).then(()=>{ this.closeModal(); // 关闭弹窗 this.getAddressList(); // 重新刷新地址列表 Message.success('操作成功'); }); }

10. 订单支付功能的实现

10.1 支付宝支付

window.open('/#/order/alipay?orderId='+this.orderId,'_blank')

进入该页面后之后，触发提交的请求，后台会返回一个content，这是包含支付的一个表单代码，触发这段代码就会跳转到支付宝的支付页面。这里我们使用​​document.forms[0].submit()​​来触发这个表单的提交：

// 获取订单的IdorderId:this.$route.query.orderId,// 支付请求paySubmit(){ this.axios.post('/pay', { orderId: this.orderId, orderName: '小米商城', amount: 0.01, payType: 1 }).then((res) => { this.content = res.content setTimeout(() =>{ document.forms[0].submit() }, 100) }) }

这里还使用了一个loading组件来作为从支付页面到支付宝的页面的过渡。

这两步完成之后，就可以跳到了支付宝支付页面，然后就可以进行支付操作了。

我们需要将返回的结果显示页面上，所以创建于了一个ScanPayCode的组件，用来显示二维码。

而想要将链接转化为二维码，需要使用一个插件：​​qrcode​​，

安装：​​npm install --save qrcode​​引入：​​import QRCode from 'qrcode'​​使用：

最后就是轮询订单支付的状态，如果支付完成，就清除定时器，跳到订单列表页面：

loopOrderState(){ // 设置定时器 this.T = setInterval(() => { this.axios.get(`/orders/${this.orderId}`).then((res) => { if(res.status == 20) { clearInterval(this.T) // 清除定时器 this.goOrderList() // 跳转到订单列表 } }) }, 1000); }

之前已经做了异常的拦截，但是那个咋请求成功的基础上，对业务请求进行拦截，而没有对状态码进行拦截，所以要对除200以外的状态码进行拦截：

axios.interceptors.response.use((response) => { let res = response.data let path = location.hash if(res.status == 0){ return res.data }else if(res.status == 10){ if(path !== '#/index'){ window.location.href = '/#/login' } return Promise.reject(res) }else{ Message.warning(res.msg) return Promise.reject(res) }}, (error) => { let res = error.response Message.error(res.data.message) return Promise.reject(error)})

实际上，拦截器的第一个参数方法是对业务请求的拦截，第二个参数方法是对状态信息的拦截，只要获取到错误信息，提示用户，并将错误抛出，避免记性res的状态里，就可以了。

11. 订单列表的实现

订单列表页面主要就是订单的加载，这里记录一下订单加载更多的三种方式。

11.1 分页器

这里使用的是element ui的分页器，在页面按需引入，并注册：

import {Pagination} from 'element-ui' // 由于我们引入的是Pagination，而使用时前面有一个el-，所以使用这种方式加载 components:{ [Pagination.name]: Pagination, }

定义结构

数据交互

handleChange(pageNum){ this.pageNum = pageNum // 更改页面 this.getOrderList() // 刷新列表 }

之前也用过​​element ui​​ 的分页器了，还是比较简单的。来看一下之前没有用到过的方法。

11.2 按钮加载

在最底部放一个“加载更多”的按钮，这里也使用element uI的button：

import { Button } from 'element-ui' components:{ [Button.name]: Button, }

定义结构

这里定义一个数据​​showNextPage​​​，默认为​​true​​，就是可以显示下一页

数据交互

这里需要注意，我们想要的是加载更多之后与前面加载的数据进行拼接，所以需要对订单的List进行改造：

getOrderList(){ this.loading = true this.axios.get('orders', { params:{ pageNum: this.pageNum } }).then((res) => { this.loading = false; // 将数据与前一页进行拼接 this.list = this.list.concat(res.list) this.total = res.total // 判断是否还有下一页，如果没有就会隐藏加载按钮 this.showNextPage = res.hasNextPage this.busy = false }).catch(() => { this.loading = false }) }loadMore(){ // 页数加一 this.pageNum++ // 重新刷新订单列表 this.getOrderList() }

11.3 滚动加载

滚动加载需要使用到一个插件：​​vue-infinite-scroll​​，首先要安装并引入、注册插件：

// 安装npm install vue-infinite-scroll --save// 引入import infiniteScroll from 'vue-infinite-scroll'// 注册（与data同级）directives:{ infiniteScroll}

定义结构

// 距离底部多少像素的时候，进行加载

数据交互

getList(){ this.loading = true; this.axios.get('/orders',{ params:{ pageSize:10, pageNum:this.pageNum } }).then((res)=>{ this.list = this.list.concat(res.list); this.loading = false; if(res.hasNextPage){ this.busy=false; }else{ this.busy=true; } }); } scrollMore(){ this.busy = true; setTimeout(()=>{ this.pageNum++; this.getList(); },500); },

其中，​​busy​​​代表是否触发加载，如果是​​true​​就加载，反之就不加载。

总之，这三种方法都能对列表加载更多数据，只是方式不同，还要根据需求去使用。

12. 项目优化

懒加载使用import的方式，由于import方式是ES7的语法，所以我们需要引入一个插件，来解析ES7的语法：​​@babel/plugin-syntax-dynamic-import​​

安装：​​npm install --save-dev @babel/plugin-syntax-dynamic-import​​

然后将路由改成按需加载的形式：

{ path: 'confirm', name: 'order-confirm', component: () => import('./pages/orderConfirm.vue') }

这样就实现了路由的懒加载，但是在首页刷新的时候，还是会在空闲时间把所有的​​js​​​代码都加载下来，在network中的​​js​​看不到，只能在other看到。只有在需要加载时，js内容才会出现在script中，js文件中华也就出现了相应的文件内容。

这时，所有的​​js​​​文件都被放在​​​​​中，它告诉浏览器，这段资源将会在未来某个导航或者功能要用到，但是本资源的下载顺序权重比较低。也就是说​​prefetch​​​通常用于加速下一次导航，而不是本次的。被标记为​​prefetch​​的资源，将会被浏览器在空闲时间加载。

所以，如果想要真正的做到按需按需加载，就要清除​​prefetch​​​。在​​vue.config.js​​文件中加入以下代码：

chainWebpack:(config)=>{ config.plugins.delete('prefetch'); }

13. 总结

（1）做了什么？

（2）难的是什么？

个人觉得比较难的地方是以下几点：

Vuex状态管理，过程不是很熟悉插件的使用，不是很熟练Bug的解决，有时不知道问题出在哪业务逻辑的实现，有时缺少条件，致使不能实现想要的功能页面布局（个人不是很擅长）项目优化不知从哪里入手项目部署

（3）收获是什么？

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。