做出分类页面

前言：做出首页，详细请看前两篇文章
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.导入api
    import {getcatalog} from '@/api/api.js'
    export default {
        name: "Category",
        // 做出data数据
        data(){
            return{
                cateloginfos:{}
            }
        },
        // 生命周期created
        created(){
            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.js # 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue