vue2尚品汇学到得新知识

2023-10-27

vue滚动条  写到router路由中,回到最顶部
scrollBehavior(to, from, savedPosition) {
        return { y: 0 };
    }

2.
引入一个模块后,先在路由router中,import然后再在注册路由写信息(path后看看要不要带参数),再写获取数据api,并暴露,然后再注册vuex(state,actions,mutation),最后引入到vuex得index中并且暴露,再派发获取信息得接口mounted(){this.$store.dispatch('')},拿到数据然后再获取...mapgetters\...mapState,获取数据放在页面中
传递数据:
父传子:props,现在父亲页面中得子标签:名字=“值”,再在子组件中props:【‘’】(数组方式)
兄弟之间:全局事件总线$bus
传递的:this.$bus.$emit('函数名',数据)
接收的:this.$bus.$on('函数名,callback)

3.加入购物车后,前台把参数带给服务器,服务器并没有返回其他数据,不需要三连环存储数据(不需要写mutation、getters等
加入购物车成功还是失败,进行响应的操作,promise操作,前台加入购物车要通知服务器,
跳转到购物车页面要传递参数,显示购物车里的东西!!用到了本地存储~(也可以跳转的时候传参,就是页面地址栏不好看),一些简单的数据可以通过query给路由组件传递过去,通过会话存储
html5新增了本地存储和会话存储,localstorage、sessionstorage,产品的信息比较复杂

获取购物车数据:用到sessionstorage,在获取数据的页面写setItem()因为是字符串 用json转换为对象,然后再在购物车页面写getItem,获取数据

给标签单向绑定的时候,一定要有变化的值才绑定

写结算页面的时候要获取服务器的数据,三联,写接口,发请求,获取数据,展示数据


4.uuid生成游客数据,好难好复杂救命,在添加购物车的时候考虑到每个账号的购物车都不一样,所以模拟一下,先随机生成了字符串,引入额uuid.js,暴露了一个函数,获取uuid,先从本地获取看有没有,没有就生成一个,存储localstorage.setItem,最后返回uuid,再在购物车中引入,在state中创建uuid:getUUID(),把uuid'在请求头中传递给用户,在api请求拦截器中,添加一个新的属性为uuid,


5.计算属性就是一个简化数据的地方,可以拿了数据...mapstate然后直接在计算属性创建一个函数,返回简化之后的数据

6.删除购物车

7.改变购物车中选中物品的状态isChecked,接口、仓库、三连环

8.删除选中的产品,派发了一个action(try catch派发),然后在store中action中访问dispatch和getters,为了获取购物车中的产品,遍历然后调用多次删除购物车产品(这里多次删除还是派发以前写的方法!

9.注册业务、登录三连环也是。。。登录这里有一个token(用户的唯一标识)获取用户信息,用token向服务器要用户信息(api),登录是在home中,挂载完毕加载登录,需要携带token所以在请求拦截器中判断token!!axios我不懂(美学啊要学一下啊)vuex存的数据不是持久化的,token是服务器给的,要存储token

注册完成要登录,用户名+密码,向服务器发请求,登陆成功获取token,但是vuex不是持久化的,所以当用户登陆成功获取到token要localstorage一下,可以暴漏一个函数存储token,用的时候再引入,但是再次刷新的时候还是没有,因为没用他,要用的化就是再state中再次getItem,但是发现只有在home组件中才派发这个方法,在search中没有,
问题:多个组件都要用用户信息,需要在每个组件munted时候派发

10.导航守卫,
导航:路由正在发生变化      
守卫: 
全局守卫:只要路由变化,守卫就能监听到。全局守卫分为前置守卫、后置守卫、
路由独享守卫:
组件内守卫:
路由的跳转是由条件的,比如用户已经登陆就不该回到login页面,设置一个全局前置守卫,在router中router.beforeEach((to, from, next) => {
    //next放行函数 next('/home') 放行到指定路由
    //next(false)中断当前的路由
    next()
然后根据路由跳转的情况进行放行。。。


11.交易 提交订单
做完三件套,然后把数据引到页面中,用mapState,然后遍历引入{{}},选择收货人的时候用排他思想
changDefault(address,addressInfo){
        addressInfo.forEach(item=>item.isDefault=0)
        address.isDefault=1
      },有条件的添加类名用:class="{selected:address.isDefault==1}",当默认为1的时候添加这个select类,然后总结收件人的时候先用计算属性
userDefalutAddress(){
        return this.addressInfo.find(item=>item.isDefault==1)
      }
简化一下数据,然后就可以直接渲染页面啦!

12.如果有了接口,不用vuex存储数据,可以再main中统一引入所有的api,然后挂载再vue原型上prototype,像全局总线bus一样使用,就是派发的时候由dispatch变成了this.$API.reqPayInfo(this.orderId)
它的参数调用this.$route.query.orderId


13.弹窗用了elementui,然后微信支付用了qrcode生成二维码


14.个人中心二级路由,就是点击左侧的出现右侧的,所以把右侧拆分二级路由,先拆开 ,然后在center中引入两个子路由,import+component,然后再在router里注册,import+在path中加入
children: [
                {
                    //不用写/,要不然就写全把/center也带上
                    path: 'myorder',
                    component: MyOrder
                },
最后在父路由中<router-link to="/center/myorder">,在应该显示子路由的位置写<router-view>


15.获取个人中心的数据进行分页展示!就是一直发请求


16.个人中心封装组件了:分页器和加日历!!!!


17.路由守卫,登陆了才能交易。。
路由独享守卫:
只有从购物车页面才能跳转到交易页面

18.图片懒加载 引入插件

19.路由懒加载 按需引入
在router配置路由信息的时候,component:()=>import('/...'),把import给删除了

20.打包上限。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue2尚品汇学到得新知识 的相关文章

  • jQuery - 将所有展开的文本包装在 p 标签中

    我遇到以下情况 以下代码被写入我的页面 div Some text here which is not wrapped in tags p Some more text which is fine p p Blah blah another
  • 使用javascript在谷歌地图中绘制多边形

    我想在谷歌地图中绘制多边形 我正在使用示例代码http jsfiddle net rvsMH 1 http jsfiddle net rvsMH 1 但它不起作用并且没有获取数组或纬度 经度值 我不知道出了什么问题
  • 需要禁用引导时间选择器的输入

    我正在使用 Bootstrap 时间选择器 我已经成功实施了 但我需要的是用户只能在 30 分钟间隙内插入 例如 10 00 10 30 11 00 等 为此我尝试过的是minuteStep如下图所示 效果完美 fantasyleague
  • 单击量角器中元素的给定坐标

    我想点击我的特定位置canvas元素 所以我编写了以下量角器代码 var canvas element by id canvas var clickCanvas function toRight toBottom browser actio
  • 解释 javascript 中的奇怪行为

    我在推特上看到了这个 我也无法解释 定义一个onload函数按以下两种方式工作 1 JSFiddle http jsfiddle net 6rq9k 2 JSFiddle http jsfiddle net 6rq9k 1
  • 如何处理 d3 中 Beeswarm 图中的碰撞?

    我一直在玩这个例子here https gf neocities org co2bs co2bee html一会儿 我想做的是突出显示图中的单个节点 圆圈 通过使用边框使其变大 稍后我也想在其中添加文本或字母 目前 我已经圈了Bhutan图
  • 通过搜索查找下一个文本并突出显示不起作用

    当在搜索框中搜索任何文本时 它可以找到并突出显示正确的文本 但是当搜索下一个 新文本时 它无法找到下一个 新文本 再次搜索时它不起作用 我无法找到问题 这JS below JS button search click function va
  • 标点符号加载“动画”,javascript?

    我正在寻找一种好方法来显示一些标点符号加载 动画 我想要的是这样的 This will display at second 1 Waiting for your input This will display at second 2 Wai
  • 如何在 jQuery 中使用 CSS“background-image”属性添加的图像上绑定单击事件

    这是我的小提琴link http jsbin com otisur 1 edit 我想我的问题通过标题本身就很清楚了 尽管如此 我正在寻找一种绑定的方法click使用 css 添加的图像上的事件background image财产 我知道
  • 使用 jQuery 的 javascript 关联数组长度

    我正在使用 javascript 关联数组 例如 var testarray testarray one 1 testarray two 2 testarray three 3 我也在旁边使用jquery 如何使用 jquery 或任何其他
  • 无法读取setInterval(Hooks)中的最新状态变量[重复]

    这个问题在这里已经有答案了 我想这是因为 JS 的工作原理 但我想你不会在类中遇到这个问题 在此代码中 let open setOpen React useState false let counter setCounter React u
  • 从 url 角度加载模板并在 div 内编译

    由于我是 Angular JS 的新手 我想知道如何加载外部模板并将其与一些数据一起编译到目标中div 例如我有这个模板
  • 以编程方式触发 highchart 散点图上某个点的单击事件

    实际上 我有一个小要求 其中有一个带有点列表和下拉列表的散点图 当我从下拉列表中选择一个项目时 应触发其相应的数据点单击 当我在图表上选择一个数据点时 必须执行一些操作 并且下拉列表应根据选择进行更新 我们有什么办法可以做到这一点吗 我尝试
  • 如何按值删除数组中的多个项目?

    我正在尝试做一个removeAll 函数 它将删除具有该特定值 而不是索引 的数组的所有元素 当我们对循环进行任何更改时 棘手的部分就出现了 索引往往会移动 使其很难像我们想要的那样工作 并且每次更改时都重新启动循环 这在大数组上效率非常低
  • Material.Angular.io mat-autocomplete [displayWith] 函数更新范围变量

    我遇到了一个问题 我可以在实例化 mat autocomplete 的组件控制器中访问本地声明的变量 我面临的问题是局部变量被困在这个范围内 我无法更新它们 有关更新 mat autocomplete 范围变量的任何想法或想法 最终我要做的
  • 是否可以让 webpacks System.import 使用 ajax (用于进度事件)?

    所以我刚刚更新到 webpack 2 并进行了第一个工作设置 其中 webpack 通过查看 System import 调用自动创建块 相当甜蜜 但是 我使用 ajax 调用加载初始块 以便我可以加载时显示进度 https stackov
  • 替换打字稿中字符串中字符的所有实例?

    我正在尝试用 x 字符替换电子邮件中的所有句号 例如 电子邮件受保护 cdn cgi l email protection 将变为 myxemail emailxcom 电子邮件设置为字符串 我的问题是它不只是替换句号 而是替换每个字符 所
  • Skrollr 添加空白

    我已经尝试了一切 我在谷歌上阅读了 4 5 页试图找到适合我的修复程序 已经筋疲力尽了 即使我使用 skrollr 示例 我的问题仍然存在 不是说他们做错了什么 我知道我只是没有正确理解它 因此 我上传了一个演示 仅在移动设备上展示这个尴尬
  • 右列固定的 Div 表

    我最近接手了一个非营利网站作为一个项目 我正在使用一个现有的网站 所以我必须使用很多已经编程的东西 所以我所要做的就是创建设计 I made a diagram of basically what I can t figure out ho
  • 将日期参数传递给对 MVC 操作的 ajax 调用的安全方法

    我有一个 MVC 操作 它的参数之一是DateTime如果我通过 17 07 2012 它会抛出一个异常 指出参数为空但不能有空值 但如果我通过01 07 2012它被解析为Jan 07 2012 我将日期传递给 ajax 调用DD MM

随机推荐

  • python爬虫怎么学?浅谈python爬虫学习的10大步骤

    如今 做跨境电商与海外社媒的从业者可谓是越来越多了 若想采集海外的相关数据 基本上是离不开爬虫的 很多小白都是不太了解这一块内容的 并且网络爬虫基本上是要使用python语言的 所以这里我就来讲讲用python爬虫要怎么学 以及分为几个步骤
  • 4.mybatis 高级结果查询

    商品订单模型 一个用户可以下n个订单 一个订单只能属于一个用户 一个订单可以有多个订单详情 订单和订单详情是一对多的关系 一个订单中可以有多个商品 一个商品也可以属于多个订单 订单和商品多对多的关系 关联查询几个需要注意的细节 1 超过三个
  • 计算机管理中的用户和组里的名称和全名有什么不同

    用户名是登录使用的 全名就是一个注释 组决定了用户的权限 计算机上 System 组的权限最高 用户中 Administrators 组的权限最高 Users 组居中 Guests 组最低 根据权限的逐渐降低 用户可访问的文件 可更改的设置
  • JAVA项目:后台管理页面——显示数据库中所有信息+删除和编辑(MySQL)

    此DEMO包含以下功能 后台管理界面 删除 修改 显示数据库里所有数据 修改编辑界面 表格检验 修改数据库里的值 后台管理界面 头像为默认头像 视频暂未上传 backstageUI jsp
  • get传递数组参数

    get请求时传递的参数有一个是数组时 要做序列化处理 下面是不需要用插件就可以解决的方法 axios有一个方法 paramsSerializer 可以处理params的数组 下面举例 vue文件里请求时传的是三个参数 methods 发送请
  • MotionBuilder调整骨骼大小尺寸

    需要先选中骨骼太能调整尺寸大小
  • 交通事故致因分析

    1 挖掘背景 随着时代的发展 我们的出行变的越来越便利的同时 也带来的越发严重的交通安全事故 我国的经济高速发展 全国汽车保有量 交通道路 人口等都在不断的增加 同时道路交通安全事故也进入高发期 分析事故发生的原因 找到事故发生的内在规律
  • 幂等的这几个问题没有考虑到,你恐怕是在写Bug吧!

    免费视频福利推荐 2T免费学习视频 内含精选高频面试题 SSM Spring全家桶 微服务 MySQL MyCat 集群 分布式 高并发 中间件 Linux 网络 多线程 Jenkins Nexus Docker ELK等等免费学习视频 持
  • Python 操作MySql数据库(封装、优雅)

    Python 记录操作MySql数据库 封装 优雅 前言 封装代码 进行测试 结果展示 前言 学了pymysql第三方库 pip install pymysql 来操作MySql数据库后 浅记一下对MySql进行 关于我的MySql之优雅封
  • ValueError: shape mismatch: objects cannot be broadcast to a single shape 画条形图bar报错

    ValueError shape mismatch objects cannot be broadcast to a single shape plt bar x y 可能是条形图的x和y的数组长度不同造成的 需要修改数据 保持一致
  • 前端手机号码校验

    vue前端手机号码校验
  • zxing设置条码两边空白(EncodeHintType.MARGIN)无效的分析

    最新项目需要使用到zxing生成条码 条码格式为CODE128 CODE128的规则可参考 点击打开链接 当调用 MultiFormatWriter encode str BarcodeFormat CODE 128 mwidth mHei
  • 对CocosCreatorr的Draw call的理解

    Draw call比较直观的描述应该是 在CPU不改变渲染数据的情况下 openGL的一次渲染 opengGL的一次渲染 CPU调用图形绘制接口来使GPU执行渲染操作 渲染流程是CPU和GPU并行工作的过程 CPU和GPU之间通过一系列的缓
  • 小米便签开源项目本地环境搭建

    基于Android Studio 和Gradle 的小米便签配置和安装 一 Android Studio的中文社区 官网 下载最新的Android Studio 点击开始传送http www android studio org 可参考下文
  • 让异步的多个ajax顺序执行的方法

    就是说等第一个ajax传回来后再执行第二个ajax跟其他的js代码 ajax type POST url http xxx xxx aspx data success function msg 试了几次 除了在 那里 执行接下来的代码外 要
  • CSDN 编程竞赛第15期题解

    CSDN 编程竞赛第15期题解 1 求并集 由小到大输出两个单向有序链表的并集 如链表 A 1 gt 2 gt 5 gt 7 链表 B 3 gt 5 gt 7 gt 8 输出 1 gt 2 gt 3 gt 5 gt 7 gt 8 inclu
  • day01Git

    1 Git介绍 1 1版本控制 理解 无论是代码编写 还是文档编写 我们都会遇到对文档内容反复修改的情况 1 2开发中存在的问题 理解 程序员小明负责的模块就要完成了 就在即将提交发布之前的一瞬间 电脑突然蓝屏 硬盘光荣下岗 几个月来的努力
  • 【前端】Vue项目:旅游App-(16)home+hooks:窗口滚动到底部动态加载新数据、抽取到hook

    文章目录 目标 过程与代码 监听窗口的滚动 窗口上事件监听的移除 封装到一个hook 回调函数法 不推荐 返回值法 推荐 效果 总代码 修改或添加的文件 hooks的useScroll home content 参考 本项目博客总结 前端
  • C++QT入门

    C QT 文章目录 C QT 1 QT概述 1 1 什么是QT 1 2 QT的发展史 1 3 支持的平台 1 4 QT版本 1 5 Qt 的下载与安装 1 6 QT的优点 1 7 成功案例 2 创建QT项目 2 1 使用向导创建 2 2 手
  • vue2尚品汇学到得新知识

    vue滚动条 写到router路由中 回到最顶部 scrollBehavior to from savedPosition return y 0 2 引入一个模块后 先在路由router中 import然后再在注册路由写信息 path后看看