位置: IT常识 - 正文

vue大型电商项目尚品汇(前台篇)day05(用vue做的企业项目)

编辑:rootadmin
紧急更新第二弹,然后就剩下最后一弹,也就是整个前台的项目 一.购物车 1.加入购物车(新知识点) 加入到购物车是需要接口操作的,因为我们需要将用户的加入到购物车的保存到服务器数据库,你的账号后面才会在你自己的购物车看到,所以这里要先写接口 然后vuex三部曲, 返回来的数据没有data,就是告诉你成 ...

推荐整理分享vue大型电商项目尚品汇(前台篇)day05(用vue做的企业项目),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:用vue做的企业项目,vue电商项目完整版,vue电商项目完整版,vue电商app的项目难点,vue适合做电商网站么,vue电商app的项目难点,vue 大型项目,vue电商项目完整版,内容如对您有帮助,希望把文章链接给更多的朋友!

紧急更新第二弹,然后就剩下最后一弹,也就是整个前台的项目

一.购物车1.加入购物车(新知识点)

加入到购物车是需要接口操作的,因为我们需要将用户的加入到购物车的保存到服务器数据库,你的账号后面才会在你自己的购物车看到,所以这里要先写接口

然后vuex三部曲,

返回来的数据没有data,就是告诉你成功了,存近数据库了所以确实也不需要什么data,所以这里vuex三部曲,只需要到actions这一步就可以了

成功与失败的判定:

之前在actions里面的操作都是async加await的操作,他们的原理是这样的,是必须配合一起使用,但是各负责各的事,async是负责这个函数的返回值只一个promise对象,而await是能拿到promise的成功返回对象,但是拿到了也只能在函数里面操作

所以这里的解决方法就是,让actions里面的函数awiat接收成功回调数据,然后判断成功返回一个信息,else就是失败,失败就用promise.reject这个方法来返回捕捉一个promise失败的信息返回出来,最后由于async的修饰,都是返回的promise对象,然后在这边dispatch是调用的actions这里面的函数相当于,所以会接受到一个promise对象,也可以用await来接受成功的回调,但是这里如果是失败的话由于前面抛出的是一个Error错误信息,所以可能会导致程序崩溃,这里可以用try catch来让程序正常走下去

2.路由跳转

接着上面的逻辑,当我们成功执行就是接着执行,catch里面是出现了错误才执行

3.传递参数之会话存储

接下来可以进行传递参数过去,在我们的购物车界面显示了,我们这里需要的参数有四个,其中有三个都是在详情组件当中的计算属性之中,另外一个是单独的一个数据

路由传参时,一些简单的数据可以通过query或者params传递过去,但是一些复杂的数据比如数组、对象等这些用url传过去就不太好了,可以通过sessionStorage或者localStorage来传递

有了这些参数,就可以动态展示数据了。当然要先转回对象

4.获取购物车列表

编写接口并放到vuex查看,注意购物车的数据是进入到这个页面后开始获取

数据返回成功,但是data为空

其原因是因为在这类功能的实现上,需要你的一个个人信息,不然逻辑实现不了,上面加入了购物车都不知道为了谁去存储,但是我们上面加入购物车的接口确实也只有两个参数,那么怎么让我们服务器知道这是谁的数据呢,这里需要一个uuid

下一个问题:既然接口都不让带,那我们从哪里向服务器发我们的uuid游客身份,请求头,也就是我们封装的请求拦截器那里,后端比如node就可以通过req来拿到你这个身份信息然后将你的购物车信息一起存到数据库

但是给的这个id还需要一些逻辑处理,最重要的就是我们每次点进来都是相同的不能再去创造一个,可以把这个id定义在detail的state里面,然后他的值为调用一个函数,可以保证每个id都是独立的,那么这个函数就要分为一个模块单独拎出来做处理

首先创建一个utils的文件夹,这个文件件一般是拿来放一些常用的功能模块,比如正则、临时身份等,在这里面要思考的是怎么让我们每次进来都是得到的那一个临时身份,不会再变,可以把我们获取到的id存放在localstorage,每次进来先检查有没有

state引入并调用函数

最后在请求拦截器用请求头发送我们的临时身份,注意可以在这里直接引入store,然后就拿到所有的仓库信息,然后就是注意,请求头后面的属性是跟后端程序员商量好的也就是他那边定义的变量不能乱写

5.购物车数据动态展示

继续完成vuex剩下的工作

以后注意一下凡是跟ajax和vuex过来的数据然后出现undefined的错误,一般优先考虑是不是没有用异或语法考虑到请求还没到的时候会出现的这些错误

全选按钮用计算属性来做,一个新的数组方法 every,也是对数组进行遍历,里面可以去判断数组的元素是否全满足,如果全满足返回true,否则返回false

有些时候逻辑是对的,但是效果不能效可以试试简写形式

6.处理产品数量

首先要明白这个操作是要请求数据的,因为你每点一次都会存储进服务器,然后你刷新就不会丢了,而且他用的接口跟我们的添加进服务器是同一个接口

既然改动他需要存储到服务器,那么这里就是三个事件,用同一个处理函数,那就只有靠传进来的参数来区别了

然后我们查看参考文档,这个接口要传进来两个参数,一个是你点击这个物品的id

第三个参数有点不一样,我们要加要减是直接传这个差值进来

整体函数如图

7.删除指定产品

配置接口并放入vuex由于,删除不需要数据返回,所以直接做一个primise的成功失败返回结果

注意就是这边接受也是用一个try catch来做

8.修改产品状态

接口+vuex

为单选框增加点击事件

9.删除选中的全部产品

由于我们没有全部删除的接口,所以只能一个一个来删除,可以派发到actons里面,在这里面来调用单删除的接口

在这里面做一个循环判断,有多少选择的就调用几次单删除

现在可以实现批量删除,但是要返回浏览器端结果,所以这里又是返回的promise,但是这里有多个,用到一个promise.all方法跟数组的every类似,所有的promise为成功就返回成功,否则返回失败

这边照样用try catch来捕获错误

这里有一个注意点,因为我们返回的是promise对象,而且最主要的是有多个,本身就是异步,所以这边在等待结果的时候用一个await,等待所有结束,再去执行刷新数据,不然就会出现删除了一部分,另一部分还会在页面上的结果

10.全选

因为又要循环调用接口所以派发actions,在这里面做逻辑

二.登录注册1.静态组件

要注意一下@符要在css中用的话,需要在前面加入~

2.注册(不考虑表单验证)

先暂时不考虑表单验证,首先我们的所有表单数据肯定都是双向绑定的,我要收集,也可以改你的值

vue大型电商项目尚品汇(前台篇)day05(用vue做的企业项目)

先完成验证码这一块,这一块真实的需求是,发送手机号到后端,后端给用户发送短信,这里就直接发送手机号到后面,默你会来一条短信即可

我们的注册接口只需要手机号、验证码、密码三个参数,做一个简单的验证传进去即可

3.登录

再开始登录之前,先说一下token,之前node就创建过token,也理解过,现在印象更深刻了,当你登录过后,服务器会给你返回一个token,你保存起来,其作用就是为了你去访问一些要权限的地址,比如你的个人信息,你的购物车等等,有这个token就相当于有了通行证,可以畅通无阻

创建接口函数,放进vuex

登录成功会返回token,先放进vuex保管,但是要注意vuex不适合持久性保管,一刷新数据就会丢,同时登陆成功还应该跳转到首页,所以需要判定 try catch

4.token获取用户信息

跳到首页我们应该展示登陆的用户名,利用token来获取接口

先理通一个逻辑,我们发起获取用户名的请求应该在home的mounted,然后登陆之后才会有token,我们需要在请求拦截器发起一个带有token的请求,所以登录之后才会登录成功显示用户名,所以每次进来都会重新登录,因为vuex保管的数据并收不持久性的,而我们请求头发起的token也是靠vuex获得的。

注意,因为我们跳转的事home组件,所以应该定义在home组件去派发获取用户信息的actions,并非header组件

扥路成功拿到数据,将header进行一个v-if判断

5.存在问题

问题一

虽然登陆成功,但是一刷新就没有了,原因是vuex不是持久化存储

可以在获取到token的时候,将token保存进localstorage,同时state获取的是localstorage里面的token

但是这样有个问题就是只能保证home组件可以刷新继续显示,其他组件由于没有派发actons虽然有token但是没有用户名拿来展示

问题二

用户已经登录就不应该再可以进入login组件

6.退出登录

点击派发请求,但是这个请求只是服务器的token清空,我们自己也需要将用户信息清掉,同时token清掉

不管在任何界面退出应该都返回home组件,所以要判断成功与失败的返回结果

7.路由守卫权限(重点)

首先路由守卫就不用多说了,全局是每个路由切换都要触发的,独享是进入你这一个要触发,组件内是进入这个组件和离开这个组件,主要是有一点我们的守卫放行next()括号里面有四个参数,详情参考vue-router官网,一种是无参数就是放行到任意组件你去的那个,也可以('/home')就是跳转到你指定的组件,还有两个这里用不到

来解决我们之前的问题,首先我们登陆就不能进入login了,全局前置路由守卫,拿到我们的token,有token就说明肯定是登陆过的

在已登录状态下先判断是否会进入login,如果进入了就跳转到home

否则就是进入的除login外的任意组件,但是在这里面还要进行判断,目的是来解决我们任意组件任意刷新只要登录了都会显示用户名,可以先判断是否有loginName这个属性,注意这里不能判断有没有这个userInfo这个对象,因为空对象默认是为true

如果有就正常放行,如果没有那么就派发一下,再放行,这样一来就不用所有组件都去mounted派发,让他有userInfo了

还需要完善最后一步,就是我们有没有派发失败的情况,那就是我们的token到期的时候就会派发失败,一般体现在一直是自动登录,长时间不登录就会让你重新登录一下,所以这里还要用try catch来做,vuex处理成功就跳转,处理失败,执行一下退出登录那个操作可以清空服务器和本地的token,再让你跳转到login组件,因为你到这个组件后在登录,又会获得新的token

三.交易1.静态组件搭建2.获取交易页数据

这个页面需要两个信息获取接口一个是,地址信息

接口管理+vuex走起

应该在交易页的mounted触发

3.页面展示数据

商品详情展示

地址信息展示

主要是点击的时候有一个排他操作

事件委派,传进来两个值一个你点的这个对象,一个整个数组

然后就是点击的这个地址信息下面结算的口子要显示,可以用一个计算属性先把当前这个default这个算出来,这里用到一个数组的find方法返回第一个满足条件的值

4.提交订单(不再使用vuex)

先完成静态页面

然后就应该是看怎么来使用接口,从现在开始后面的接口就不再使用仓库来做了,以防应对某些情况下没有vuex的时候

首先我们还是可以使用接口统一管理进行管理我们的接口

当我们不再使用vuex了,调用接口应该在组件内去调用,但是我们这里也有简便方法,可以把这整个接口文件引入到入口文件,需要注意的是以别名的方式来引入,然后跟全局事件总线一样,在beforeCreated钩子里面让他等于一个$API,那么我们以后要调用接口直接用这个api即可

再点击提交订单的时候发起请求

5.获取订单号展示支付信息

试想以前用vuex这个时候得到数据了,应该去判断是否成功,然后将我们的数据存储起来,这里没有vuex就保存在这个组件

跳转到支付界面之后首先把订单号换了,然后需要获取接口,将我们的支付金额换了

注意,生命周期函数不能被async修饰

6.ElementUI按需导入

组件库:基于vue pc端:ElementUI 移动端:vant

ElementUI快速语法提示插件vue-helper

注意除了以前所熟知的按需导入,还可以将其注册成为api这样形式的按需导入

7.qrcode生成二维码

下载qrcode这个包,他可以将我们的一些信息处理成二维码

要注意qrcode返回的是一个promise对象,要拿到结果要加上await

8.微信支付

当你点开支付界面,就可以开启一个定时器,每一秒就去接口查询一下你有没有支付成功,支付成功就自动跳转

需要将我们的code存储下来,因为后面还会点击我已支付进行验证一次

参考饿了么文档,这个组件有一个关闭前的回调,接受三个参数,第一个是你点击的是什么按钮,第二个是vc实例,第三个是关闭这个弹窗

本文链接地址:https://www.jiuchutong.com/zhishi/312949.html 转载请保留说明!

上一篇:python中Plotly Express是什么?

下一篇:对c++的一些思考(一)(对c++的认识与体会)

  • 购买二手车是否适用消费者权益保护法
  • 土地使用税返还是否征税
  • 房租雇东不开发票只有收据怎么处理?
  • 转账支票的密码盘
  • 小规模按季申报 月销售收入不超过
  • 残保金申报在哪申报
  • 企业清算需要什么
  • 预算外资金收入政府会计
  • 固定资产成本包括包装费吗
  • 发票没认证可以作废吗?
  • 出差住宿普通发票进项税可以抵扣吗
  • 网银费用及回单箱费用账务处理?
  • 法的分级
  • 增值税专票电话号码错了有关系吗
  • 税收滞纳金算不算所得税
  • 核定征收的小微企业企业所得税计算
  • 酱菜税率是多少
  • 税率简并的影响因素
  • 利润表申报本年怎么填
  • 什么是劳动保护费支出
  • 过路费可以抵税吗
  • 投标费用属于什么会计科目
  • 公司个人所得税怎么申报
  • 退休人员返聘工资怎么发放
  • 收到汇算清缴后怎么处理
  • php基于反射机制实验报告
  • 公司自有房屋出租 没有从租计征房产税
  • 如何修复面部毛孔粗大
  • PHP:session_get_cookie_params()的用法_Session函数
  • 转销坏账准备会影响账面余额吗
  • PHP:pcntl_wexitstatus()的用法_PCNTL函数
  • 注销库存股的会计分录怎么理解
  • 找潜水员
  • 银行手续费发票未到怎样做账
  • 帝国cms使用手册
  • 帝国cms移动端
  • 免税产品出口是否可以退税
  • 商品流通企业存货计价方法
  • 城建税的减免规定有哪些
  • 购销合同谁来做
  • 个税代扣代缴需要什么
  • 采用公允价值模式计量的投资性房地产处置
  • 汽车租赁行业税负是多少
  • 善意取得增值税专用发票所得税
  • 工人晚上加班的说说心情
  • 润滑油消费税征收环节税屋
  • 对公帐户资金转入个人帐户规定
  • 微信提现手续费多少?
  • 税控盘年费每年都可以抵扣吗
  • 银行电子汇票到期后多久到账
  • 合资公司股东如何退股
  • 免税企业开了含税吗
  • 关于外贸企业出口的规定
  • 现金流量表和利润表的勾稽关系
  • 金蝶多核算项目怎么查一个项目下的其他项目
  • 错账的更正方法有哪些
  • sql server中查看创建的数据库命令
  • Windows Vista下IIS使用常见问题
  • ubuntu18.04单网卡多ip
  • 恢复双系统启动菜单
  • Ubuntu安装VMware tools
  • ubuntu安装多个cuda
  • win7系统的分区类型怎么选
  • win7禁用了管理员,怎么取消呢
  • android 滚动选择器
  • jquery实战
  • linux中makefile怎么写
  • shell脚本 教程
  • cmd网络管理命令的功能和用法
  • 执行批处理命令
  • 一个页面
  • android基础知识点
  • unity中ngui
  • 人工智能在税务领域应用中的风险与规制
  • 江西省税务总局官网
  • 非房地产企业土地增值税
  • 理财持有时间
  • 资源税是什么?
  • 福建电子税务局社保缴费操作
  • 发票验旧后还能开票吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设