vue尚品汇商城项目-day02【9.Home组件拆分+10.postman测试接口】

已于 2023-04-01 10:20:35 修改
阅读量365 收藏
点赞数
分类专栏： Vue2专栏 文章标签： vue.js postman 前端 vue尚品汇商城项目 Home组件拆分
于 2023-04-01 09:43:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a924382407/article/details/129893022
版权
文章详细介绍了如何将Home组件拆分为8个子组件，包括TypeNav、ListContainer、Recommend等，以及使用Postman进行接口测试的方法，强调了接口返回数据的成功标志。同时提供了Swagger接口文档链接，包括商品类和用户类接口。此外，提到了项目中Vue插件如Nprogress的使用，Axios的二次封装，接口管理和Vuex状态管理的重要性。
摘要由CSDN通过智能技术生成

在这里插入图片描述

文章目录

9.Home组件拆分

HTML结构+CSS样式+静态资源

Home组件拆分成8个组件：

  • 包括商品分类导航三级菜单联动组件TypeNav
  • 列表组件ListContainer
  • 今日推荐组件Recommend
  • 商品排行组件Rank
  • 猜你喜欢组件Like
  • 两个楼层组件Floor
  • 商标组件Brand。

10.postman测试接口

注意：

  • 整个项目，接口前缀都有/api字样
  • 如果服务器返回的数据code字段200，代表服务器返回数据成功

Swagger-API接口文档：

本人其他相关文章链接

1.vue尚品汇商城项目-day02【9.Home组件拆分+10.postman测试接口】
2.vue尚品汇商城项目-day02【vue插件-13.nprogress进度条的使用】
3.vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
4.vue尚品汇商城项目-day02【14.vuex状态管理库】
5.vue尚品汇商城项目-day02【15.动态展示三级菜单联动】

刘大猫.
关注
专栏目录
【Vue项目笔记心得】postman接口测试、axios二次封装、api接口统一管理
qiaoyangla的博客
04-13 1235
1、postman接口测试 2、axios二次封装 （1）为什么进行二次封装axios？ 请求拦截器、响应拦截器： 请求拦截器：可以在发请求之前可以处理一些业务 响应拦截器：当服务器数据返回以后，可以处理一些事情 安装axios： npminstallaxios （2）在项目当中经常要建API文件夹【axios】 接口当中：路径都带有api baseURL:"/api" //对于axios进行二次封装 import axios from "axios" //1、利用axio..
Spring Boot + vue-element 开发个人博客项目开发（七、Postman测试接口）
z972065491的博客
10-31 924
Postman是一个接口测试工具，在进行接口测试时，Postman相当于一个客户端，它可以模拟用户发起的各种HTTP请求，将请求的数据发送到服务端，获取对应的响应结果，从而验证响应的结果数据是否与预期结果相匹配，并确保开发人员能够及时处理接口中的bug,进而保证产品的安全性和稳定性，它主要是用来模拟各种HTTP请求Postman与浏览器的区别是有些浏览器不能输出json格式，而Postman更直观返回结果2. 下载并安装PostmanPostman在官网上下载安装包，
从Vue到Postman全面验证API接口跨域问题
最新发布
niaonao
08-08 1403
通过Vue项目和Postman来验证跨域问题
Vue前端+Vue后端(postman测试)+mysql数据库
weixin_58853115的博客
03-08 1345
参考大神生成shopping项目。安装后：2.Vue3前端Toast主要的原因是vant从3版本更新到4版本。调用代码差异导致。博文所以把更改引用1： import { showToast,closeToast } from 'vant';2 把引用方法给成 showToast，closeToast 成功！
vue postman使用方法
qq_42949209的博客
01-04 2203
postman可以在线使用或者下载下来使用都可以 官网：postman下载官网 本来想找官网的链接挂上的，但是一直在转圈圈就等会儿吧~ 目前使用postman调用接口的方式主要是POST请求和GET请求，put和delete已经很少用了 就只举例POST和GET请求吧 GET请求一般是带参或者不带参 不带参数： 带参数： POST请求一般是带参 写的有点繁琐，但是能看懂就好啦~ 下次再来分享呀 ...
vue3实现类postman 接口测试功能
weixin_52725484的博客
03-29 1020
主要实现form-data、x-www-form-urlencoded、raw以及单独上传文件功能、可单独配置请求头。获取测试结果并下载为json格式文件。raw代码编辑器：选择monaco。
vue大型电商项目尚品汇（前台篇）day02.doc
07-09
Vue 大型电商项目尚品汇（前台篇）day02 ...本文总结了 Vue 大型电商项目尚品汇（前台篇）day02 中的技术要点，涵盖了重写 push/replace 方法、Home 模块组件拆分和 axios 相关配置等方面的内容。
vue实战项目-电商商城前台-（学习尚硅谷的）尚品汇
drhrht的博客
07-31 6412
但是会出现卡顿现象。当微信支付弹窗弹出，就要持续发获取订单支付状态的请求（持续是因为并不知道用户什么时候支付，所以需要持续发请求，直到能获取到支付状态），若接收到支付成功，则路由跳转至支付成功页面。项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错，有了map文件就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。例如，为防止，不经过某路由就直接在地址栏输入本路由地址而跳转至本路由，导致本路由获取不到前面路由的某些数据，所以给本路由加路由独享守卫。...
Vue3.0+vue-router-next+vuex4.0+typescript项目搭建
happy任的博客
04-29 1万+
Vue3.0 Vue3.0是2020年4月刚刚发布了beta版本的全新Vue版本 项目地址: https://github.com/kaiqiangren/vue-next-ts-preview 一、Vue3.0与Vue2.0的对比: 优点： 将Vue内部的绝大部分api对外暴露，使Vue具备开发大型项目的能力，例如compile编译api等 webpack的treeshaking支持度友好...
vue2后台管理系统（ vue2 + vue-router + Vuex + axios + elementui + echarts，nodejs后台）
切图仔
06-18 5020
vue2 + vue-router + Vuex + axios + elementui + echarts后台管理系统，包括国际化配置，富文本编译器，mockjs，上传图片，pdf打印，导出Excel表，购物车案例
尚硅谷 VUE 尚品汇项目实战问题解决方式整理
weixin_57132938的博客
05-21 3868
最近在自学大型vue项目，选中了尚硅谷的尚品汇，之前也学习过黑马程序员的一个电商后台管理项目，因为项目打包优化时候出了Bug，就闲置了，但是代码是一行一行敲完啦，也放到了码云上！
Vue(第十六课)JSON-SERVE和POSTMAN技术中对数据的增删改查
qq_56248592的博客
12-04 910
重在实操
vue 常用的插件（自整理）
热门推荐
Turbo的博客
07-16 1万+
vue-resourcevue-resource 作为vue插件的形式存在，通过XMLHttpRequest或JSONP发起请求并处理响应。开发中常用。 用法：npm install vue-resource --save如果你的项目遵守commonJS规范 var Vue = require('vue'); Vue.use(require('vue-resource')); get方式的套路：n
vue2.x：三、vue页面开发进阶版-组件开发
a519242749的博客
06-26 424
三、vue页面开发进阶版-组件开发vue页面开发进阶版-组件开发1、vue组件开发 vue页面开发进阶版-组件开发 Vue 是一套用于构建用户界面的渐进式框架。 本教程均基于vue2.x的版本进行编写，搭建的脚手架是使用的@vue/cli 4，编译工具使用的是webStorm 1、vue组件开发 vue的组件开发其实就是将一个或多个大页面拆分出可以复用的部分，独立写成一个多适用性的vue页面，他和普通vue页面在项目中看起来基本一样，但是他有以下优点： 会使项目代码简洁性提高； 提高代码复用率避免大量的
（练习）vue2 + element ui + postman模拟数据 登陆页面 （1）
weixin_68266812的博客
08-29 434
跨域问题Access to XMLHttpRequest at ‘https:/ost?nam‘ from originNo ‘Access-Control-Allow-Origin‘ header_阿金要当大魔王~~的博客-CSDN博客。
Spring Boot + vue-element 开发个人博客项目实战教程（九、Postman测试接口）
码上言
11-09 6406
前言 前面的功能模块写完了，项目也能跑起来了，但是功能到底有没有用，有没有bug，数据能不能保存到数据库中等都需要我们去验证，总不能写了就不管了，能跑就行，然后扔给前端，这样会挨骂的哈哈，我们要确保自己写的代码能调试通，才能交付给前端开发。我们大多数开发都是使用的Postman进行测试接口的，非常的方便，接下来我们就一起学习Postman，加油猿人！ 一、Postman介绍 1、什么是Postman？ Postman是一个接口测试工具，在做接口测试的时候，Postman相当于一个客户端，它可以模拟用户发起的
antd仿postman(10)
qq_41969287的博客
05-05 881
tag标签页一、demo代码二、完整代码三、效果四、遗留问题 一、demo代码 body tab页下，选择不同的radio展示不同的页面： <a-radio-group defaultValue="none" :select="body_type" name="radioGroup" @change="onChange" style="width: 100%" > <a-radio value="none">none</a-radio> <a-radio v
vue-antd-admin测试平台开发(二)
qq_41969287的博客
04-16 1808
src/components/Postman
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

刘大猫.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值