![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
尚品汇
文章平均质量分 59
Revin050
这个作者很懒,什么都没留下…
展开
-
项目笔记33(尚品汇)完结
文章目录图片懒加载安装插件使用方法引入插件以及注册插件表单验证安装插件引入插件以及使用插件路由懒加载打包上线图片懒加载安装插件安装vue-lazyloadnpm install vue-lazyload安装完成后查看package.json文件成功安装。使用方法引入插件以及注册插件引入以及注册的方法通过查阅文档可知,首先找到main.js文件,然后利用如下代码引入以及注册实际使用如下所示表单验证安装插件npm install vee-validate@2引入插件以及原创 2022-03-27 21:02:38 · 1702 阅读 · 0 评论 -
项目笔记32(尚品汇)
文章目录未登录的守卫判断路由独享与组件内守卫路由独享组件内守卫未登录的守卫判断之前的全局前置路由守卫没有书写未登录时的守卫判断,再此补充一下。路由独享与组件内守卫路由独享当用户登陆后,用户也不能直接进入trade界面,为了避免用户直接进入trade界面,需要给trade设置一个路由独享守卫,此时trade只允许从购物车页面跳转过来。具体代码如下所示。同样,按照逻辑如果想进入支付页面,必须先进入trade界面,因此需要给pay设置路由独享守卫组件内守卫按照逻辑如果想进入支付成功界面,只能原创 2022-03-27 16:54:41 · 707 阅读 · 0 评论 -
项目笔记31(尚品汇)
文章目录个人中心个人中心静态组件拆分组件我的订单组件修改个人中心个人中心静态组件首先将之前准备好的个人中心组件放到项目中。接下来注册路由如下所示页面效果如下所示拆分组件当用户点击我的订单与团购订单,右侧应该显示不同的内容,这就涉及到了二级路由。首先拆分组件。拆分出我的订单内容,与团购订单内容。拆分完成后注册二级路由信息接下来绑定路由跳转展示二级路由组件此时用户点击我的订单与团购订单时,会展示不同界面。我的订单组件修改当前我的订单组件展示的数据都是死数据,我们应该动态原创 2022-03-27 16:02:51 · 497 阅读 · 0 评论 -
项目笔记30(尚品汇)
文章目录支付界面静态组件提交订单的数据书写提交订单的接口数据存储(不用vuex的写法)展示支付信息使用ElementUI安装element UI安装 babel-plugin-component修改babel.config文件修改弹窗为二维码安装qrcode组件中引入qrcode使用qrcode支付逻辑支付界面静态组件首先和之前的静态组件一样,首先将之前写好的静态组件导入到项目中。存好之后配置pay的路由。由于配置的太多次,在此直接展示代码。页面成功导入,效果如下所示由于静态页面已经搭建完原创 2022-03-26 19:54:31 · 3243 阅读 · 0 评论 -
项目笔记29(尚品汇)
文章目录trade界面trade静态组件获取交易页数据获取用户地址信息获取订单交易页信息动态展示数据地址动态展示订单动态展示其他内容动态展示trade界面trade静态组件首先和之前的静态组件一样,首先将之前写好的静态组件导入到项目中。存好之后配置trade的路由。由于配置的太多次,在此直接展示代码。此时手动切换到/trade页面效果如下由于静态页面已经搭建完成,接下来设置路由跳转。根据尝试可知,当用户在购物车界面点击“结算”按钮时,页面应该跳转到trade。所以找到购物车的结算按钮,给原创 2022-03-26 16:10:36 · 560 阅读 · 0 评论 -
项目笔记28(尚品汇)
文章目录退出登录的制作导航守卫解决其他模块不加载用户信息的问题解决方法(二)退出登录的制作退出登录需要清除token以及本地存储的内容。首先找到退出登录,绑定一个点击事件,名为logout在logout中需要完成两件事1.发请求,通知服务器退出登录2.清除项目中的数据首先还是书写接口接下来三连环退出登录写完之后,回到Header组件发送action,同时注意,一旦退出登录成功,则系统应该返回首页。导航守卫当用户登录了,按理说用户不可以回到登录页面为了解决这个问题,首先设置全局原创 2022-03-25 17:47:58 · 282 阅读 · 0 评论 -
项目笔记27(尚品汇)
文章目录登录注册(二)用户登录携带token获取用户信息解决上述刷新的问题解决其他模块不加载用户信息的问题解决方法一(不完美)登录注册(二)用户登录携带token获取用户信息书写获取用户信息的接口接下来书写vuex考虑应该在什么时候发送请求,按照正常的逻辑,用户输入完账号密码点击登录后,页面应该跳转到home中,此时header不应该是“请登录|免费注册”而是应该展示用户的信息。因此这个请求应该在home挂载完成的时候发起。此时当用户输入完信息登录之后,页面效果如下。出现这个问题的原因是,原创 2022-03-25 14:44:22 · 899 阅读 · 0 评论 -
项目笔记26(尚品汇)
文章目录登录注册(一)登录注册静态组件注册业务获取验证码用户注册登录业务登录注册(一)登录注册静态组件首先引入登录注册静态组件。效果如下所示注册业务获取验证码表单验证先不处理首先完成验证码的功能,先收集数据,然后利用接口获取验证码书写接口接下来给登录注册新建一个仓库user,并注册接下来书写vuex三连环以及在注册页面发送action此时可以获取验证码用户注册当点击完成注册后,页面应该跳转到登录页面,并且还需要将注册内容存到后台中。为了完成这个功能首先还是先书原创 2022-03-24 19:22:01 · 563 阅读 · 0 评论 -
项目笔记25(尚品汇)
文章目录删除全部选中商品全部商品的勾选状态修改删除全部选中商品首先给‘删除选择的商品’绑定一个点击事件接下来书写点击事件的逻辑这个功能没有后台接口,因此我们可以换一种思路,就是遍历检查商品有没有被选中,如果被选中,我们就调用之前写好的删除自身产品的接口。具体代码如下所示此时删除选中的商品功能完成。全部商品的勾选状态修改首先给全选按钮绑定一个点击事件或者change事件接下来和上一个删除选择的商品一样。首先对仓库发起一个action,发起action的同时,记得传输按钮状态。在仓原创 2022-03-24 17:40:57 · 390 阅读 · 0 评论 -
项目笔记24(尚品汇)
文章目录完善购物车修改数量购物车删除产品改变产品状态完善购物车修改数量根据之前的思想,通过不同的type来判断用户进行了什么操作。具体代码如下所示此时功能基本完成,但是存在一个BUG,就是当用户点击‘-’过快的时候,会导致购买件数出现负数,如下所示。针对这个问题,可以用节流解决具体步骤如下所示引入lodash接下来限制handler一秒钟只可以发起一次。具体代码如下所示此时该功能完善成功。接下来开始制作购物车删除产品的操作。购物车删除产品首先查阅文档找到删除产品的请求查阅完原创 2022-03-24 15:45:37 · 481 阅读 · 0 评论 -
项目笔记23(尚品汇)
文章目录购物车操作发送请求根据请求成功与否决定是否进行路由跳转注册添加到购物车页面的路由判断是否跳转将详情页的信息带给添加到购物车路由并替换数据购物车静态组件与添加到购物车组件修改uuid游客身份获取购物车数据购物车动态展示数据动态展示数据![在这里插入图片描述](https://img-blog.csdnimg.cn/078efc98ccb84fb4b199ec4945d49e20.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_5原创 2022-03-23 21:29:33 · 1748 阅读 · 1 评论 -
项目笔记22(尚品汇)
文章目录购买产品个数的操作购买产品个数的操作接下来处理用户购买产品个数的操作。首先找到该功能是在详情页中,因此在详情页组件设置一个data值,用来记录用户购买件数,在此设置名称为’skuNum’。默认为1。接下来给‘+’和‘-’绑定事件,如下所示。在此注意考虑输入小于1的情况接下来处理用户自己输入数据的问题。当用户输入内容时,很有可能输入非法字符,比如‘12a’,’-12’,'1.5’等,针对这些输入,还需要给输入框绑定一个change事件,检测输入框的变化,同时纠正用户输入。如下所示。这里原创 2022-03-23 14:50:25 · 426 阅读 · 0 评论 -
项目笔记21(尚品汇)
文章目录商品详情页放大镜功能与商品售卖属性展示放大镜功能数据获取动态替换图片放大镜实现商品售卖属性展示动态展示售卖属性售卖属性排他操作简单复习下轮播图的使用商品详情页放大镜功能与商品售卖属性展示放大镜功能数据获取动态替换图片在上一篇我们已经拿到了服务器的数据,但是并没有针对放大镜模块进行书写,在这里记录一下详情页放大镜模块的内容。首先放大镜是详情页一个子模块,同时放大镜需要详情页请求到的服务器的数据(比如图片地址),因此这里又涉及到了父给子组件传递数据。通过props。具体如下所示放大镜实原创 2022-03-22 19:57:35 · 816 阅读 · 0 评论 -
项目笔记20(尚品汇)
文章目录开发详情页面静态组件发请求Vuex动态展示组件开发详情页面静态组件将之前准备好的静态组件复制到项目之中。具体位置为src/pages/Detail。接下来给Detail组件注册路由。接下来完成点击Search中的图片,进行路由跳转的功能。由于routes的数据过于多了,因此多写个文件来存储routes,这样使代码更清晰。首先在router文件夹下新建routes.js文件,然后将routes内容复制进去,如下所示,最后在router下的index.js中调用刚才写好的文件。如下所示。原创 2022-03-22 16:29:57 · 508 阅读 · 1 评论 -
项目笔记19(尚品汇)
文章目录分页器定义全局组件静态组件分页器起始与结束数字计算分页器动态展示完成分页器分页器定义全局组件分页器在很多地方都用的到,因此制定一个分页器的全局组件。名为Pagination。创建完成之后在该文件夹下创建index.vue文件 设置name为Pagination。然后回到main.js中注册全局组件。最后回到Search中进行使用,具体步骤及代码如下所示。页面效果如下所示静态组件将设置好的Pagination全局组件进行内容修改,依据文档给出的内容进行修改具体代码如下所示。&l原创 2022-03-21 21:24:53 · 921 阅读 · 0 评论 -
项目笔记18(尚品汇)
文章目录排序操作样式处理排序箭头绑定点击事件排序操作在这里完善项目排序相关的操作,首先查看目前的项目可以发现,有两种排序方法,分别为综合和排序,我们要实现的功能为,根据用户的点击不同,排序方式不同。通过查阅文档,可以发现共有四种排序方式,分别为综合升序、综合降序、价格升序、价格降序。分别对应的order为1:asc、1:desc、2:asc、2:desc。用户一打开界面肯定会有一个默认排序,因此我们先修改data中的order,使其默认为1:desc。样式处理接下来处理排序模块的样式问题,根据实原创 2022-03-21 14:44:31 · 365 阅读 · 0 评论 -
项目笔记17(尚品汇)
文章目录平台售卖属性的操作平台售卖属性的操作上一节我们做好了面包屑处理分类、面包屑处理关键字、面包屑处理品牌信息,这次我们完成面包屑处理平台售卖属性的操作。步骤如下,由于平台售卖属性在search组件的子组件中,因此涉及到了子给父传数据的问题。首先给子组件的平台售卖属性绑定点击事件,当用户点击了平台售卖属性,将子组件中的数据通过自定义事件传递给父组件,父组件接收数据并渲染到页面中,同时设定好删除面包屑的操作。具体代码如下所示......原创 2022-03-21 13:03:49 · 351 阅读 · 0 评论 -
项目笔记16(尚品汇)
文章目录面包屑的处理面包屑处理分类的操作面包屑处理关键字的操作面包屑处理品牌信息的操作面包屑的处理面包屑输出的结果应该和之前的搜索数据一致,而不是死数据。接下来分三个步骤处理面包屑1.面包屑处理分类的操作2.面包屑处理关键字3.面包屑处理品牌信息面包屑处理分类的操作首先根据用户是否点击了分类来决定是否存在分类的面包屑,然后设置用户点击面包屑上的叉号时,删除掉面包屑并且重新更改数据,具体如下所示此时项目效果如下面包屑处理关键字的操作处理关键字的方法与处理分类基本一致,较为特别的原创 2022-03-21 11:12:45 · 415 阅读 · 0 评论 -
项目笔记15(尚品汇)
文章目录Search模块根据不同参数获取数据展示封装数据请求根据参数获取数据监听路由的变化再次发起请求获取数据Search模块根据不同参数获取数据展示封装数据请求由于Search模块搜索通常是多次,因此发送数据请求页会是多次,而在上一节中,我们把发送数据请求放在了mounted中,这意味这只会在挂载完成发送一次数据请求,这与我们想要的效果不同,因此我们首先应该先调整发送数据请求代码的位置,不应该将它放在mounted中。当前的思路是将发送请求的代码单独拿出来封装成一个方法,以后发请求的时候直接调用即可原创 2022-03-20 20:21:20 · 333 阅读 · 0 评论 -
项目笔记14(尚品汇)
文章目录search页面静态页面搭建search模块vuex操作动态展示产品列表search页面静态页面搭建首先书写静态页面,如下图所示。(代码过长就不直接粘贴了)。书写完静态页面的效果如下图。search模块vuex操作1.获取接口数据2.vuex三连环以及在search模块中发送dispatch与获取vuex数据动态展示产品列表动态展示页面,用请求到的数据替换原来写死的数据。最终效果如下所示。......原创 2022-03-20 16:40:04 · 655 阅读 · 0 评论 -
项目笔记13(尚品汇)
文章目录mockjs模拟数据mockjs模拟数据由于服务器没有提供首页中的ListContainer组件与Floor组件的数据,因此为了展示,采用mock数据。mock数据不会和服务器进行任何通信。首先安装mockjs插件。然后在src文件夹下创建mock文件夹,用来提供假数据。接下来准备json数据。将准备好的banner.json与floor.json填入mock文件夹如下图所示。npm install mockjs接下来把mock数据需要的图片放置到public文件夹中(public文件原创 2022-03-19 19:36:10 · 934 阅读 · 0 评论 -
项目笔记12(尚品汇)
文章目录typeNav商品分类列表的优化合并参数(params与query)typeNav商品分类列表的优化当前项目存在着如下问题:当 typeNav组件调用的时候,页面就会发送一个请求,如果反复切换home和search页,就会反复发请求,影响性能。如图所示为了解决这个问题,我们可以把原来在typeNav挂载完成后发送请求的代码移到app.vue文件的挂载完成生命钩子中,因为app.vue只会调用一次(注意别放在入口文件main.js中,因为里面没有$route)。这就解决了多次发送的影响具体步骤原创 2022-03-18 20:09:27 · 452 阅读 · 0 评论 -
项目笔记11(尚品汇)
文章目录Search组件中的商品分类与过渡动画三级联动组件的选择性展示home首页效果图search页面效果图实现步骤三级联动组件的过渡动画效果实现过程Search组件中的商品分类与过渡动画三级联动组件的选择性展示首先提出一个需求,就是当页面是首页时,三级联动组件一直展示,当页面为非首页时(以search页面为例)三级联动组件只有鼠标放上去才展示,鼠标离开就消失。具体效果图如下所示。home首页效果图search页面效果图实现步骤首先分析,根据页面的不同三级联动组件的展示也不同,因此可原创 2022-03-18 16:27:49 · 481 阅读 · 0 评论 -
项目笔记10(尚品汇)
文章目录三级联动路由跳转未完成功能时,项目效果完成功能时,项目效果实现步骤三级联动路由跳转首先展示一下完成功能与未完成功能的区别。未完成功能时,项目效果未完成功能时,项目效果完成功能时,项目效果实现步骤实现路由跳转有两种方法,一种是声明式导航,一种是编程式导航。在这个案例中选择编程式导航,原因如下:声明式导航router-link是一个组件,在运行时,如果标签过多,就会产生大量router-link组件,会严重影响项目性能。确定好跳转的方法后,具体步骤如下,首先为三级联动所在的div绑原创 2022-03-18 11:22:51 · 405 阅读 · 0 评论 -
项目笔记9(尚品汇)
文章目录卡顿现象函数防抖函数节流卡顿现象在上一节实现了三级联动动态添加背景。但是当用户快速从上往下划的时候,会出现卡顿现象。如图所示,用户滑动速度很快,然而却发现输出的只有几个数据,而不是全部数据,这就是卡顿现象。函数防抖前面的所有的触发都被取消,最后一次执行在规定的时间之后才会触发,也就是说如果连续快速的触发,只会执行最后一次函数节流在规定的间隔时间范围内不会重复触发回调,只有大于这个时间间隔才会触发回调,把频繁触发变为少量触发......原创 2022-03-17 17:11:59 · 321 阅读 · 0 评论 -
项目笔记8(尚品汇)
文章目录三级联动动态添加背景颜色。修改css样式实现通过JS实现功能实现思路鼠标移入步骤图鼠标移出步骤图二三级分类显示与隐藏实现方法CSS实现JS实现三级联动动态添加背景颜色。本次实现的是给三级联动添加背景颜色。即如下图般的效果。修改css样式实现首先查阅代码,发现类名为item的div标签控制三级标签的展示。如下图所示。因此如果通过css实现上述功能只需要给item设置hover即可。如下图所示。通过JS实现功能实现思路通过js实现功能的思路如下,给每个一级标签绑定一个鼠标进入的事件,原创 2022-03-16 16:28:53 · 846 阅读 · 0 评论 -
项目笔记7(尚品汇)
文章目录动态展示三级联动数据文件位置调整一下,之前文件位置不太合理发送请求以及页面渲染动态展示三级联动数据文件位置调整一下,之前文件位置不太合理之前的首页里的三级联动里面的数据都是写死的,并不是请求后台的数据。为了使三级联动内的数据为后台请求过来的数据,就需要发送数据请求。实现这个功能的步骤如下。首先由于三级联动这个组件是个全局组件,因此应该将三级联动组件由src/pages/Home拿出来放置在components文件夹内,同时修改main.js中的路径引入。文件结构与main.js的路径引入修改原创 2022-03-14 21:05:31 · 604 阅读 · 1 评论 -
项目笔记6(尚品汇)
文章目录VuexVuex的安装配置VuexVuex的使用Vuex模块化管理VuexVuex的安装在制作大型项目时,会存在很多组件通用的数据。为了更好的管理这些数据,就用到了Vuex。首先在终端安装Vuex。因为这个项目时Vue2开发的,因此选用Vuex3版本即可。如果用Vue3开发,选用Vuex4版本即可安装代码如下所示npm i vuex@3配置Vuex在src文件夹下创建store文件夹用来存放vuex相关的文件。建立index.js文件,对vuex进行配置。由于Vuex是Vue的一原创 2022-03-14 20:07:03 · 1694 阅读 · 1 评论 -
项目笔记5(尚品汇)
文章目录axios二次封装axios安装基本配置请求拦截器响应拦截器axios二次封装axios安装 npm install --save axios 基本配置首先在src文件夹下创建api文件夹,同时在api文件夹内建立request.js文件。import引入axios。然后对axios进行简单配置配置如下所示。基本路径配置好之后,以后就无需自己输入/api、当请求超过5秒,代表请求失败。请求拦截器请求拦截器:再发请求前,请求拦截器可以检测到。可以实现一些功能具体代码如下所示原创 2022-03-13 19:13:01 · 1997 阅读 · 0 评论 -
项目笔记4(尚品汇)
文章目录Home首页组件的拆分7个组件的拆分全局组件的定义(组件一)一般组件的定义(组件二-组件七)Home首页组件的拆分7个组件的拆分分析Home首页,将Home首页拆分为7个部分,分别为如下7个部分。其中第一个组件(三级联动)在多个页面都进行了使用,因此需要将第一个组件(三级联动)定义为全局组件。全局组件的定义(组件一)注册全局组件(所有组件都可以使用的组件)的步骤如下。首先找到main.js文件。import导入刚才写好的组件。随后利用Vue.component()具体代码如原创 2022-03-13 18:22:12 · 1451 阅读 · 0 评论 -
项目笔记3(尚品汇)
编程式导航报错的解决当没有输入新数据并且连续点击Header组件中的Search按钮时会产生如下报错。编程式导航(push|replace)才会有这种情况的异常,声明式导航是没有这种问题,因为声明式导航内部已经解决这种问题。这种异常,对于程序没有任何影响的。该错误出现的原因为:由于vue-router最新版本3.5.2,引入了promise,当传递参数多次且重复,会抛出异常,因此出现上面现象。这种报错不会影响项目的使用,但是会影响程序员的心态,为了一劳永逸的解决这种报错,首先找到配置路由的index原创 2022-03-13 16:26:40 · 304 阅读 · 0 评论 -
项目笔记2(尚品汇)
路由跳转的两种方式在非路由组件中存在登录以及注册两个链接,为了实现点击链接实现页面跳转,需要用到路由跳转。路由跳转分为声明式导航和编程式导航。编程式导航可以实现声明式导航的全部功能。并且编程式导航可以书写自己的业务逻辑。声明式导航(务必有to)为了实现点击登录链接跳转到登录组件,点击注册链接跳转到注册组件。此处采用声明式导航,因为此处没有其他业务逻辑。因此采用声明式导航。首先找到非路由组件Header,找到登录链接的位置。如下所示。将a标签换为router-link。同时声明跳转的路由地址。如下图所原创 2022-03-12 19:17:07 · 291 阅读 · 0 评论 -
项目笔记1(尚品汇)
项目创建与配置以及非路由组件与路由组件项目创建与配置首先利用脚手架创建项目,具体步骤如下。在桌面新建一个名为SPH的文件夹。进入后打开命令行,如下图所示。输入vue create app。之后选择vue2,生成项目。项目生成之后进行配置。配置三个地方。1浏览器自动打开在package.json文件中找到"scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-servi原创 2022-03-12 16:37:45 · 1062 阅读 · 0 评论