使用vue做一个“淘宝“项目——3
2024-06-02 08:34:54
做出分类页面
前言：做出首页，详细请看前两篇文章
1.使用vue做一个“淘宝“项目(做出首页)
2.使用vue做一个“淘宝“项目(显示商品栏)
目录：
创建项目文件
删除原有文件
引用资源文件
实现底部导航栏
显示页面
做出首页
显示商品栏
做出分类
一、调用数据(写API)
在调用数据之前先自行做一个搜索栏，代码截图如下：
现在正式开始调用数据，因为之前做过首页的API导入，所以现在与上回一样做分类页面的api导入
代码位置: src->api->api.js
代码如下：
//分类API catalog/inndex
export function getcatalog(){return request({url:"catalog/index",method:"get",});
}
写完api之后要往 src->api->mock.js 下导入数据
数据代码如下：
let catalog={"errno":0,"data":{"currentCategory":{"id":1005000,"name":"居家","keywords":"","desc":"回家，放松身心","pid":0,"iconUrl":"http://yanxuan.nosdn.127.net/a45c2c262a476fea0b9fc684fed91ef5.png","picUrl":"http://yanxuan.nosdn.127.net/e8bf0cf08cf7eda21606ab191762e35c.png","level":"L1","sortOrder":2,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},"categoryList":[{"id":1005000,"name":"居家","keywords":"","desc":"回家，放松身心","pid":0,"iconUrl":"http://yanxuan.nosdn.127.net/a45c2c262a476fea0b9fc684fed91ef5.png","picUrl":"http://yanxuan.nosdn.127.net/e8bf0cf08cf7eda21606ab191762e35c.png","level":"L1","sortOrder":2,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1005001,"name":"餐厨","keywords":"","desc":"爱，囿于厨房","pid":0,"iconUrl":"http://yanxuan.nosdn.127.net/ad8b00d084cb7d0958998edb5fee9c0a.png","picUrl":"http://yanxuan.nosdn.127.net/3708dbcb35ad5abf9e001500f73db615.png","level":"L1","sortOrder":3,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1005002,"name":"饮食","keywords":"","desc":"好吃，高颜值美食","pid":0,"iconUrl":"http://yanxuan.nosdn.127.net/c9280327a3fd2374c000f6bf52dff6eb.png","picUrl":"http://yanxuan.nosdn.127.net/fb670ff3511182833e5b035275e4ac09.png","level":"L1","sortOrder":9,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1008000,"name":"配件","keywords":"","desc":"配角，亦是主角","pid":0,"iconUrl":"http://yanxuan.nosdn.127.net/11abb11c4cfdee59abfb6d16caca4c6a.png","picUrl":"http://yanxuan.nosdn.127.net/02f9a44d05c05c0dd439a5eb674570a2.png","level":"L1","sortOrder":4,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1010000,"name":"服装","keywords":"","desc":"贴身的，要亲肤","pid":0,"iconUrl":"http://yanxuan.nosdn.127.net/28a685c96f91584e7e4876f1397767db.png","picUrl":"http://yanxuan.nosdn.127.net/622c8d79292154017b0cbda97588a0d7.png","level":"L1","sortOrder":5,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1011000,"name":"婴童","keywords":"","desc":"爱，从心开始","pid":0,"iconUrl":"http://yanxuan.nosdn.127.net/1ba9967b8de1ac50fad21774a4494f5d.png","picUrl":"http://yanxuan.nosdn.127.net/9cc0b3e0d5a4f4a22134c170f10b70f2.png","level":"L1","sortOrder":7,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1012000,"name":"杂货","keywords":"","desc":"解忧，每个烦恼","pid":0,"iconUrl":"http://yanxuan.nosdn.127.net/c2a3d6349e72c35931fe3b5bcd0966be.png","picUrl":"http://yanxuan.nosdn.127.net/547853361d29a37282f377b9a755dd37.png","level":"L1","sortOrder":8,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1013001,"name":"洗护","keywords":"","desc":"亲肤之物，严选天然","pid":0,"iconUrl":"http://yanxuan.nosdn.127.net/9fe068776b6b1fca13053d68e9c0a83f.png","picUrl":"http://yanxuan.nosdn.127.net/1526ab0f5982722adbc8726f9f2a338c.png","level":"L1","sortOrder":6,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1019000,"name":"志趣","keywords":"","desc":"周边精品，共享热爱","pid":0,"iconUrl":"http://yanxuan.nosdn.127.net/7093cfecb9dde1dd3eaf459623df4071.png","picUrl":"http://yanxuan.nosdn.127.net/1706e24a5e605870ba3b37ff5f49aa18.png","level":"L1","sortOrder":10,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false}],"currentSubCategory":[{"id":1008002,"name":"布艺软装","keywords":"","desc":"各种风格软装装点你的家","pid":1005000,"iconUrl":"http://yanxuan.nosdn.127.net/8bbcd7de60a678846664af998f57e71c.png","picUrl":"http://yanxuan.nosdn.127.net/2e2fb4f2856a021bbcd1b4c8400f2b06.png","level":"L2","sortOrder":6,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1008008,"name":"被枕","keywords":"","desc":"守护你的睡眠时光","pid":1005000,"iconUrl":"http://yanxuan.nosdn.127.net/927bc33f7ae2895dd6c11cf91f5e3228.png","picUrl":"http://yanxuan.nosdn.127.net/b43ef7cececebe6292d2f7f590522e05.png","level":"L2","sortOrder":2,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1008009,"name":"床品件套","keywords":"","desc":"MUJI等品牌制造商出品","pid":1005000,"iconUrl":"http://yanxuan.nosdn.127.net/243e5bf327a87217ad1f54592f0176ec.png","picUrl":"http://yanxuan.nosdn.127.net/81f671bd36bce05d5f57827e5c88dd1b.png","level":"L2","sortOrder":4,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1008016,"name":"灯具","keywords":"","desc":"一盏灯，温暖一个家","pid":1005000,"iconUrl":"http://yanxuan.nosdn.127.net/c48e0d9dcfac01499a437774a915842b.png","picUrl":"http://yanxuan.nosdn.127.net/f702dc399d14d4e1509d5ed6e57acd19.png","level":"L2","sortOrder":8,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1010003,"name":"地垫","keywords":"","desc":"家里的第“五”面墙","pid":1005000,"iconUrl":"http://yanxuan.nosdn.127.net/83d4c87f28c993af1aa8d3e4d30a2fa2.png","picUrl":"http://yanxuan.nosdn.127.net/1611ef6458e244d1909218becfe87c4d.png","level":"L2","sortOrder":5,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1011003,"name":"床垫","keywords":"","desc":"承托你的好时光","pid":1005000,"iconUrl":"http://yanxuan.nosdn.127.net/316afeb3948b295dfe073e4c51f77a42.png","picUrl":"http://yanxuan.nosdn.127.net/d6e0e84961032fc70fd52a8d4d0fb514.png","level":"L2","sortOrder":3,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1011004,"name":"家饰","keywords":"","desc":"装饰你的家","pid":1005000,"iconUrl":"http://yanxuan.nosdn.127.net/ab0df9445d985bf6719ac415313a8e88.png","picUrl":"http://yanxuan.nosdn.127.net/79275db76b5865e6167b0fbd141f2d7e.png","level":"L2","sortOrder":9,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1015000,"name":"家具","keywords":"","desc":"大师级工艺","pid":1005000,"iconUrl":"http://yanxuan.nosdn.127.net/4f00675caefd0d4177892ad18bfc2df6.png","picUrl":"http://yanxuan.nosdn.127.net/d5d41841136182bf49c1f99f5c452dd6.png","level":"L2","sortOrder":7,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1017000,"name":"宠物","keywords":"","desc":"抑菌除味，打造宠物舒适空间","pid":1005000,"iconUrl":"http://yanxuan.nosdn.127.net/a0352c57c60ce4f68370ecdab6a30857.png","picUrl":"http://yanxuan.nosdn.127.net/dae4d6e89ab8a0cd3e8da026e4660137.png","level":"L2","sortOrder":10,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1036000,"name":"夏凉","keywords":"","desc":"夏凉床品，舒适一夏","pid":1005000,"iconUrl":"http://yanxuan.nosdn.127.net/13ff4decdf38fe1a5bde34f0e0cc635a.png","picUrl":"http://yanxuan.nosdn.127.net/bd17c985bacb9b9ab1ab6e9d66ee343c.png","level":"L2","sortOrder":1,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false}]},"errmsg":"成功"}
Mock.mock('http://localhost:8088/catalog/index',catalog);
上面这些全是数据不需要理解复制粘贴即可
二、分类页面显示
数据以及api全部完成，下面就是把数据输出到页面上去
首先，先在分类Category.vue页面拿到数据
代码位置： src->views->Category.vue
代码如下:
<script>// 1.导入apiimport {getcatalog} from '@/api/api.js'export default {name: "Category",// 做出data数据data(){return{cateloginfos:{}}},// 生命周期createdcreated(){console.info("数据初始化之后-异步请求");getcatalog().then(resp=>{console.log(resp);})}}
</script>
然后在页面中看到这些数据就说明你的数据拿到了
现在我要再单独拿出来某一部分数据，代码截图如下：
三、做出侧边栏
现在已经做出来数据了，那就开始通过
vant 2文档 Sidebar 侧边导航——监听切换事件 作为参照来做出侧边导航栏，首先找到 Category.vue 下的搜索栏，开始编写导航，代码如下：
运行结果如下：
调节侧边栏样式，代码如下：
下面进行二级分类区，代码如下：
运行结果如下（有报错，但无所谓）：
四、做出侧边栏按钮交互
首先参考Sidebar 侧边导航——监听切换事件
代码如下：
现在侧边栏就能进行交互了
下面导入通知栏Notify与Toast（看哪个好用用哪个）
import { Notify,Toast} from 'vant';
现在能交互了，但是还没有数据
先做出api，代码如下：
然后在Mock.js中写入数据，代码如下:
let getCurrentCatelog={"errno": 0,"data": {"currentCategory": {"id": 1005001,"name": "餐厨","keywords": "","desc": "爱，囿于厨房","pid": 0,"iconUrl": "http://yanxuan.nosdn.127.net/ad8b00d084cb7d0958998edb5fee9c0a.png","picUrl": "http://yanxuan.nosdn.127.net/3708dbcb35ad5abf9e001500f73db615.png","level": "L1","sortOrder": 3,"addTime": "2018-02-01 00:00:00","updateTime": "2018-02-01 00:00:00","deleted": false},"currentSubCategory": [{"id": 1005007,"name": "锅具","keywords": "","desc": "一口好锅，炖煮生活一日三餐","pid": 1005001,"iconUrl": "http://yanxuan.nosdn.127.net/4aab4598017b5749e3b63309d25e9f6b.png","picUrl": "http://yanxuan.nosdn.127.net/d2db0d1d0622c621a8aa5a7c06b0fc6d.png","level": "L2","sortOrder": 1,"addTime": "2018-02-01 00:00:00","updateTime": "2018-02-01 00:00:00","deleted": false},{"id": 1005008,"name": "餐具","keywords": "","desc": "餐桌上的舞蹈","pid": 1005001,"iconUrl": "http://yanxuan.nosdn.127.net/f109afbb7e7a00c243c1da29991a5aa3.png","picUrl": "http://yanxuan.nosdn.127.net/695ed861a63d8c0fc51a51f42a5a993b.png","level": "L2","sortOrder": 4,"addTime": "2018-02-01 00:00:00","updateTime": "2018-02-01 00:00:00","deleted": false},{"id": 1005009,"name": "清洁","keywords": "","desc": "环保便利，聪明之选","pid": 1005001,"iconUrl": "http://yanxuan.nosdn.127.net/e8b67fe8b8db2ecc2e126a0aa631def0.png","picUrl": "http://yanxuan.nosdn.127.net/3a40faaef0a52627357d98ceed7a3c45.png","level": "L2","sortOrder": 9,"addTime": "2018-02-01 00:00:00","updateTime": "2018-02-01 00:00:00","deleted": false},{"id": 1007000,"name": "杯壶","keywords": "","desc": "精工生产制作，匠人手艺","pid": 1005001,"iconUrl": "http://yanxuan.nosdn.127.net/0b244d3575b737c8f0ed7e84c5c4abd2.png","picUrl": "http://yanxuan.nosdn.127.net/ec53828a3814171079178a59fb2593da.png","level": "L2","sortOrder": 2,"addTime": "2018-02-01 00:00:00","updateTime": "2018-02-01 00:00:00","deleted": false},{"id": 1008011,"name": "清洁保鲜","keywords": "","desc": "真空保鲜，美味不限时","pid": 1005001,"iconUrl": "http://yanxuan.nosdn.127.net/dc4d6c35b9f4abb42d2eeaf345710589.png","picUrl": "http://yanxuan.nosdn.127.net/04cd632e1589adcc4345e40e8ad75d2b.png","level": "L2","sortOrder": 6,"addTime": "2018-02-01 00:00:00","updateTime": "2018-02-01 00:00:00","deleted": false},{"id": 1008012,"name": "功能厨具","keywords": "","desc": "下厨省力小帮手","pid": 1005001,"iconUrl": "http://yanxuan.nosdn.127.net/22db4ccbf52dc62c723ac83aa587812a.png","picUrl": "http://yanxuan.nosdn.127.net/5b94463017437467a93ae4af17c2ba4f.png","level": "L2","sortOrder": 3,"addTime": "2018-02-01 00:00:00","updateTime": "2018-02-01 00:00:00","deleted": false},{"id": 1008013,"name": "茶具咖啡具","keywords": "","desc": "先进工艺制造，功夫体验","pid": 1005001,"iconUrl": "http://yanxuan.nosdn.127.net/9ea192cd2719c8348f42ec17842ba763.png","picUrl": "http://yanxuan.nosdn.127.net/be3ba4056e274e311d1c23bd2931018d.png","level": "L2","sortOrder": 5,"addTime": "2018-02-01 00:00:00","updateTime": "2018-02-01 00:00:00","deleted": false},{"id": 1013005,"name": "刀剪砧板","keywords": "","desc": "传统工艺 源自中国刀城","pid": 1005001,"iconUrl": "http://yanxuan.nosdn.127.net/9d481ea4c2e9e6eda35aa720d407332e.png","picUrl": "http://yanxuan.nosdn.127.net/555afbfe05dab48c1a3b90dcaf89b4f2.png","level": "L2","sortOrder": 7,"addTime": "2018-02-01 00:00:00","updateTime": "2018-02-01 00:00:00","deleted": false},{"id": 1023000,"name": "厨房小电","keywords": "","desc": "厨房里的省心小电器","pid": 1005001,"iconUrl": "http://yanxuan.nosdn.127.net/521bd0c02d283b80ba49e73ca84df250.png","picUrl": "http://yanxuan.nosdn.127.net/c09d784ba592e4fadabbaef6b2e95a95.png","level": "L2","sortOrder": 8,"addTime": "2018-02-01 00:00:00","updateTime": "2018-02-01 00:00:00","deleted": false}]},"errmsg": "成功"
}
Mock.mock('http://localhost:8088/catalog/current',getCurrentCatelog)
在数据中创建分类变量
先导入
最后调用当前所选分类的最新数据，就完成了分类页面
分类页面全部代码
上一篇:显示商品栏
推荐BGM:Shape of You
使用vue做一个“淘宝“项目——3相关推荐
- 使用vue做一个“淘宝“项目(显示商品栏)
显示商品栏 前言:完成上一篇文章--做出首页 点击跳转 目录: 创建项目文件 删除原有文件 引用资源文件 实现底部导航栏 显示页面 做出首页 显示商品栏 做出分类 一.做出宫格 每次做一个新东西的时候 ...
- 使用vue做一个“淘宝“项目——2
做出首页 前言:做出底部导航栏与显示页面 目录: 创建项目文件 删除原有文件 引用资源文件 实现底部导航栏 显示页面 做出首页 显示商品栏 做出分类 一.将导航栏修改颜色 首先打开vant 2文档中的 ...
- 使用vue做一个“淘宝“项目(删除原有代码)
删除原有代码 前言:创建完项目,运行出vue界面 目录: 创建项目文件 删除原有文件 引用资源文件 实现底部导航栏 显示页面 做出首页 显示商品栏 做出分类 一."清空"现在的文件 ...
- 使用vue做一个“淘宝“项目(显示页面)
显示页面 前言:做出底部导航栏 目录: 创建项目文件 删除原有文件 引用资源文件 实现底部导航栏 显示页面 做出首页 显示商品栏 做出分类 一.若想每个导航栏都能显示页面,那必先创建组件 在 src- ...
- 使用Idea做一个淘宝的登录页面和手机页面
一.使用Idea做一个淘宝的登录页面 代码如下 <!DOCTYPE html> <html lang="en"> <head><meta ...
- Python脚本做一个淘宝秒杀程序!
Python脚本做一个淘宝秒杀程序! 先上代码 from selenium import webdriver import datetime import time import os import ...
- 如何使用字体图标做一个淘宝购物车案例
一:如何使用字体图标 代码如下 运行效果: 二:字体图标的线上用法 首先在阿里图标库:https://www.iconfont.cn/ 中找到自己想要的图形添加入库,在购物车中把素材添加到项目,然后在 ...
- 如何做一个淘宝商品的预览效果图
1.效果展示 鼠标移到这时会这块区域会出现圆角矩形边框,背景色也会发生变化 2.代码展示 <!DOCTYPE html> <html lang="en">& ...
- 淘宝无货源开店怎么做？淘宝无货源开店裂变教程
又是一年毕业季,回想起我的毕业季,不觉中已过去了十个年头. 回忆起我的大学时代,互联网信息技术还没有如此发达,信息传播渠道.速度都还很局限,我们没有微信,更别谈微商了.我们用的是"大屁股&q ...
最新文章
- 【USACO training】Chapter 1 入门
- linux VM映像chroot注入修改root密码
- 36篇博文带你学完opencv :python+opencv进阶版学习笔记目录
- 滚动文字Marquee属性及参数设置
- Face alignment at 3000 FPS via Regressing Local Binary Features
- Oracle10怎样调出左侧的表,excel2010菜单栏不见了!怎样在excel左侧显示导航
- Linux C基础笔记（3）
- python输出杨辉三角啊二维数组_用Python输出一个杨辉三角的例子
- 远程协同网络架构photon cloud
- centos中，tomcat项目创建文件的权限研究
- Oracle数据库的安装及使用教程
- 使用instsrv.exe和srvany.exe创建windows服务
- 基于眼电信号（EOG）的眨眼检测算法
- jQuery 仿问卷星 自定义修改问卷调查表单代码
- Python基础学习第八天
- 你对未来计算机的展望,未来计算机发展的展望
- 广告拦截—Adblocks Plus (F*cking shit Ads!
- [Windows] win10工具： 一键关闭 Win10系统更新工具！
- jsp小区物业管理系统
- 【解决】NotImplementedException: The method or operation is not implemented.