使用vue做一个“淘宝“项目——2

已于 2022-05-10 12:02:20 修改
阅读量1.8k 收藏 7
点赞数 1
分类专栏： vue 文章标签： vue.js vue
于 2022-04-19 15:05:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48462447/article/details/124274270
版权

做出首页

前言：做出底部导航栏与显示页面

目录：

创建项目文件
删除原有文件
引用资源文件
实现底部导航栏
显示页面
做出首页
显示商品栏
做出分类

一、将导航栏修改颜色

首先打开vant 2文档中的tabbar组件

打开 src->components->Tabbar.vue 文件中有一个active它的默认值为0是干什么用的
在这里插入图片描述
没错，就是默认的状态栏，若为0，默认就是Home，若为1，默认就是分类，以此类推
在这里插入图片描述
默认的导航栏是蓝色在vant 2文档中写到可以自定义颜色
代码为

<van-tabbar v-model="active" active-color="red">

在文件目录 src->components->Tabbar.vue 下的 template->div->van-tabbar 标签下设置
在这里插入图片描述
若设置未选中时的颜色为白色，就会出现后面三个状态栏“隐藏”，所以不写，但是如果想设置为别的颜色可自行修改，这里不再赘述

二、做出搜索框(Home.vue)
打开文件目录 src->views 下的 Home.vue 组件

做搜索框之前还是要打开vant 2文档中的搜索页，在这里我们用vant 2文档中最基础的搜索框即可，代码如下

<!--搜索栏-->
<van-search  v-model="value" placeholder="点击前往搜索"></van-search>

在这里插入图片描述
三、设置轮播图(Home.vue)
打开文件目录 src->views 下的 Home.vue 组件
做轮播图之前还是要打开vant 2文档中的轮播图页面，在这里我们用vant 2文档中最基础的轮播图即可，代码如下:

<!--轮播-->
<van-swipe class="swipe" :autoplay="3000" indicator-color="#fff">
    <van-swipe-item v-for="(bn,index) in homeinfos.banner" :key="index">
        <!--v-bing指令 :属性名-->
        <img :src="bn.url" alt="" style="height: 230px;"><!--设置图片连接，设置图片高度-->
    </van-swipe-item>
</van-swipe>

不懂v-bing的点这里
在这里插入图片描述
做轮播图是需要数据的，数据代码如下
在这里插入图片描述

	data(){
            return{
                homeinfos:{
                banner:[
                    {
                        "id": 1,
                        "name": "合作 谁是你的菜",
                        "link": "",
                        "url": "http://yanxuan.nosdn.127.net/65091eebc48899298171c2eb6696fe27.jpg",
                        "position": 1,
                        "content": "合作 谁是你的菜",
                        "enabled": true,
                        "addTime": "2018-02-01 00:00:00",
                        "updateTime": "2018-02-01 00:00:00",
                        "deleted": false
                    },
                    {
                        "id": 2,
                        "name": "活动 美食节",
                        "link": "",
                        "url": "http://yanxuan.nosdn.127.net/bff2e49136fcef1fd829f5036e07f116.jpg",
                        "position": 1,
                        "content": "活动 美食节",
                        "enabled": true,
                        "addTime": "2018-02-01 00:00:00",
                        "updateTime": "2018-02-01 00:00:00",
                        "deleted": false
                    },
                    {
                        "id": 3,
                        "name": "活动 母亲节",
                        "link": "",
                        "url": "http://yanxuan.nosdn.127.net/8e50c65fda145e6dd1bf4fb7ee0fcecc.jpg",
                        "position": 1,
                        "content": "活动 母亲节5",
                        "enabled": true,
                        "addTime": "2018-02-01 00:00:00",
                        "updateTime": "2018-02-01 00:00:00",
                        "deleted": false
                    }
                ]
                }
            }
        },

加完数据之后是这样的
在这里插入图片描述
因为我们做的是移动端的项目，所以做成这样已经ok了

如果想为了在网页中也显示居中的话就为轮播图加个居中的样式就OK了，代码如下

<style>
    .swipe{
        line-height: 149px;
        text-align: center;
    }
</style>

在这里插入图片描述
加完样式之后就是这样了
在这里插入图片描述
四、调用服务器中的数据

首先要说的是，网站获取的数据是通过服务器调用数据库中的数据得到的，而我们又不想做服务器，所以我们现在只要有服务器的API接口即可（api不能直接调用，最后调用解析的都是json串的数据）现在我们要通过网络请求从服务器中取出数据，说到网络请求又不得说一下前端中的异步请求ajax（注意：同步请求是服务器端的请求）那我们现在如果写原生的ajax的话就会很麻烦，还有jquery ajax同样也会很麻烦，而我们现在在写的是vue项目，那我们就用vue中的方式来写，那就是axios（axios是在vue中的网络请求方式），那现在我们知道了要用axios那就要进行安装axios，而axios又要安装在生产环境(dependencies)中，故安装命令为：
npm install axios -S

安装成功之后在你的package.json中查看，如下图即为安装成功
在这里插入图片描述
安装成功之后在src中创建api与utils两个文件夹，创建完之后在
utils文件夹下创建request.js
api文件夹下创建api.js用来调用基本请求（用来访问哪个网站）
后面在request.js下导入 axios，代码如下：

import axios from 'axios'

导入完成之后要创建实例化对象，具体怎么创建请看axios中文文档-实例，代码如下：

const service=axios.create({
    baseURL:'http://localhost:8088/',
    timeout:5000
});

创建完实例化对象之后，导出对象，代码如下：

export default service;

到此request.js告一段落
在这里插入图片描述
request.js我们实例化了一个对象，现在api.js要调用这个对象
要想调用就先导入request.js,导入的代码如下

import request from '@/utils/request.js'
/*在这里request与前面的service是一个对象完全可以将request换成service,这里只不过是为了与文件名对
照,所以写的request*/

现在我们要访问首页的API，代码如下：

function getHome() {
    return request(
        {
            url:"home/index", 
/*前面baseURL给另一个根地址，而现在写它下面的地址，这里就相当于给你一个HarmonyOS充电器(baseURL)
你的任何HarmonyOS手机(url)都可以调用这个充电器(baseURL)，想给谁充都能用*/
            method:"get",
        }
    );
}

写完首页的API之后我们即接收到了接口中的文件，接收到之后跟上面request.js中的对象一样，还是要继续导出，这里导出的是导出方法而上面时导出对象，这里与上面不一样，对于方法的导出就写export即可，代码截图如下：
在这里插入图片描述
这样既完成了对方法的导出，导出完之后Home.vue页面该调用数据了

五、开始首页(Home.vue)的编写

在之前插入的data数据之后创建生命周期钩子，具体什么是生命周期钩子请点击链接——
1.生命周期钩子
2. Vue生命周期11个钩子
简单来说可以理解成方法、或者函数，我这里借鉴的第二个，在这里有创建钩子的代码等 这里用
创建created–数据初始化之后 (在data后创建)

在这里插入图片描述
代码如下：

    created() {
        console.info("数据初始化之后-异步请求")
    }

创建完之后就要调用了，但是在调用之前要先导入api文件
在这里插入图片描述
代码如下：

import {getHome} from "../api/api";

导入getHome之后再在钩子下面调用getHome，然后运行就会出现经典的报红
在这里插入图片描述
第一个报错其实不影响，因为在我们的搜索框代码中定义了一个value
解决办法如下：删除这段代码，我这里为了整洁还是去掉，然后就只剩下两个报错了
在这里插入图片描述
第二、三个错是因为没有服务器（点击网络查看却有报错是因为异步请求失败）
在这里插入图片描述
六、解决服务器端没有写好，数据访问不到的问题（Mock）

找到Mock.js，他的作用是生成随机数据，拦截 Ajax
请求，想要了解Mock的也是去Mock.js官网查看，然后找到Mock.js的文档中的安装，命令如下：
npm install mockjs -D

安装完成之后就会在 package.json->dependencies 下出现mock.js，如下图：
在这里插入图片描述
安装完成之后准备文件，在api.js下创建mock.js文件的作用是：在刚才去访问数据了，但是并没有访问到，确实也是没有，而mock就是来模拟一下将要访问的过程，在每次创建完 .js 文件之后都需要去导入,代码如下：

//导入mock.js
import Mock from 'mockjs'
Mock.mock('http://localhost:8088/home/index',{code:0,msg:'成功'});
//其中有两个参数		参数1：要拦截的完整的api地址    参数2：返回的数据

导入完成了，下面本该导出了，但是在这里不是，在这里应该是将拦截到的地址去Main.js中去导入，代码截图如下：
在这里插入图片描述
代码如下：

import '@/api/mock'

然后就成功的解决了刚才的报错，再有就是注意我红框中的数据，如果没有数据就是前面的代码有错，注意查看mock.js中的代码
在这里插入图片描述
现在我们拿到的还是假数据，但是我们现在看不见是因为我们用mock拦截了数据
在这里插入图片描述
注意看这里

七、做出页面（加入真正的数据）
将下面的代码复制到mock.js的 import Mock from 'mockjs' 下面（一定注意位置）
代码截图如下：
在这里插入图片描述

代码如下:

let home={
	"errno": 0,
	"data": {
		"newGoodsList": [
			{
				"id": 1181000,
				"name": "母亲节礼物-舒适安睡组合",
				"brief": "安心舒适是最好的礼物",
				"picUrl": "http://yanxuan.nosdn.127.net/1f67b1970ee20fd572b7202da0ff705d.png",
				"isNew": true,
				"isHot": false,
				"counterPrice": 2618,
				"retailPrice": 2598
			},
			{
				"id": 1116011,
				"name": "蔓越莓曲奇 200克",
				"brief": "酥脆奶香，甜酸回味",
				"picUrl": "http://yanxuan.nosdn.127.net/767b370d07f3973500db54900bcbd2a7.png",
				"isNew": true,
				"isHot": true,
				"counterPrice": 56,
				"retailPrice": 36
			},
			{
				"id": 1127047,
				"name": "趣味粉彩系列笔记本",
				"brief": "粉彩色泽，记录生活",
				"picUrl": "http://yanxuan.nosdn.127.net/6c03ca93d8fe404faa266ea86f3f1e43.png",
				"isNew": true,
				"isHot": false,
				"counterPrice": 49,
				"retailPrice": 29
			},
			{
				"id": 1135002,
				"name": "宫廷奢华真丝四件套",
				"brief": "100%桑蚕丝，丝滑润肤",
				"picUrl": "http://yanxuan.nosdn.127.net/45548f26cfd0c7c41e0afc3709d48286.png",
				"isNew": true,
				"isHot": false,
				"counterPrice": 2619,
				"retailPrice": 2599
			},
			{
				"id": 1152161,
				"name": "竹语丝麻印花四件套",
				"brief": "3重透气，清爽柔滑",
				"picUrl": "http://yanxuan.nosdn.127.net/977401e75113f7c8334c4fb5b4bf6215.png",
				"isNew": true,
				"isHot": false,
				"counterPrice": 479,
				"retailPrice": 459
			},
			{
				"id": 1166008,
				"name": "Carat钻石 不粘厨具组合",
				"brief": "钻石涂层，不粘锅锅具组",
				"picUrl": "http://yanxuan.nosdn.127.net/615a16e899e01efb780c488df4233f48.png",
				"isNew": true,
				"isHot": false,
				"counterPrice": 479,
				"retailPrice": 459
			}
		],
		"couponList": [
			{
				"id": 1,
				"name": "限时满减券",
				"desc": "全场通用",
				"tag": "无限制",
				"discount": 5,
				"min": 99,
				"days": 10
			},
			{
				"id": 2,
				"name": "限时满减券",
				"desc": "全场通用",
				"tag": "无限制",
				"discount": 10,
				"min": 99,
				"days": 10
			}
		],
		"channel": [
			{
				"id": 1005000,
				"name": "居家",
				"iconUrl": "http://yanxuan.nosdn.127.net/a45c2c262a476fea0b9fc684fed91ef5.png"
			},
			{
				"id": 1005001,
				"name": "餐厨",
				"iconUrl": "http://yanxuan.nosdn.127.net/ad8b00d084cb7d0958998edb5fee9c0a.png"
			},
			{
				"id": 1005002,
				"name": "饮食",
				"iconUrl": "http://yanxuan.nosdn.127.net/c9280327a3fd2374c000f6bf52dff6eb.png"
			},
			{
				"id": 1008000,
				"name": "配件",
				"iconUrl": "http://yanxuan.nosdn.127.net/11abb11c4cfdee59abfb6d16caca4c6a.png"
			},
			{
				"id": 1010000,
				"name": "服装",
				"iconUrl": "http://yanxuan.nosdn.127.net/28a685c96f91584e7e4876f1397767db.png"
			},
			{
				"id": 1011000,
				"name": "婴童",
				"iconUrl": "http://yanxuan.nosdn.127.net/1ba9967b8de1ac50fad21774a4494f5d.png"
			},
			{
				"id": 1012000,
				"name": "杂货",
				"iconUrl": "http://yanxuan.nosdn.127.net/c2a3d6349e72c35931fe3b5bcd0966be.png"
			},
			{
				"id": 1013001,
				"name": "洗护",
				"iconUrl": "http://yanxuan.nosdn.127.net/9fe068776b6b1fca13053d68e9c0a83f.png"
			},
			{
				"id": 1019000,
				"name": "志趣",
				"iconUrl": "http://yanxuan.nosdn.127.net/7093cfecb9dde1dd3eaf459623df4071.png"
			}
		],
		"grouponList": [
			{
				"id": 1109008,
				"name": "云端沙发组合",
				"brief": "MUJI供应商携手打造",
				"picUrl": "http://yanxuan.nosdn.127.net/c5be2604c0e4186a4e7079feeb742cee.png",
				"counterPrice": 4019,
				"retailPrice": 3999,
				"grouponPrice": 3199,
				"grouponDiscount": 800,
				"grouponMember": 15,
				"expireTime": "2022-01-31 00:00:00"
			},
			,
			  {
			    "id": 1110016,
			    "name": "天然硅胶宠物除毛按摩刷",
			    "brief": "顺滑平面，猫狗通用，去除死毛",
			    "picUrl": "http://yanxuan.nosdn.127.net/3bd73b7279a83d1cbb50c0e45778e6d6.png",
			    "counterPrice": 59,
			    "retailPrice": 39,
			    "grouponPrice": 29,
			    "grouponDiscount": 10,
			    "grouponMember": 12,
			    "expireTime": "2022-01-31 00:00:00"
			  }
		],
		"banner": [
			{
				"id": 1,
				"name": "合作 谁是你的菜",
				"link": "",
				"url": "http://yanxuan.nosdn.127.net/65091eebc48899298171c2eb6696fe27.jpg",
				"position": 1,
				"content": "合作 谁是你的菜",
				"enabled": true,
				"addTime": "2018-02-01 00:00:00",
				"updateTime": "2018-02-01 00:00:00",
				"deleted": false
			},
			{
				"id": 2,
				"name": "活动 美食节",
				"link": "",
				"url": "http://yanxuan.nosdn.127.net/bff2e49136fcef1fd829f5036e07f116.jpg",
				"position": 1,
				"content": "活动 美食节",
				"enabled": true,
				"addTime": "2018-02-01 00:00:00",
				"updateTime": "2018-02-01 00:00:00",
				"deleted": false
			},
			{
				"id": 3,
				"name": "活动 母亲节",
				"link": "",
				"url": "http://yanxuan.nosdn.127.net/8e50c65fda145e6dd1bf4fb7ee0fcecc.jpg",
				"position": 1,
				"content": "活动 母亲节5",
				"enabled": true,
				"addTime": "2018-02-01 00:00:00",
				"updateTime": "2018-02-01 00:00:00",
				"deleted": false
			}
		],
		"brandList": [
			{
				"id": 1001000,
				"name": "MUJI制造商",
				"desc": "严选精选了MUJI制造商和生产原料，\n用几乎零利润的价格，剔除品牌溢价，\n让用户享受原品牌的品质生活。",
				"picUrl": "http://yanxuan.nosdn.127.net/1541445967645114dd75f6b0edc4762d.png",
				"floorPrice": 12.9
			},
			{
				"id": 1001002,
				"name": "内野制造商",
				"desc": "严选从世界各地挑选毛巾，最终选择了为日本内野代工的工厂，追求毛巾的柔软度与功能性。品质比肩商场几百元的毛巾。",
				"picUrl": "http://yanxuan.nosdn.127.net/8ca3ce091504f8aa1fba3fdbb7a6e351.png",
				"floorPrice": 29
			},
			{
				"id": 1001003,
				"name": "Adidas制造商",
				"desc": "严选找到为Adidas等品牌制造商，\n选取优质原材料，与厂方一起设计，\n为你提供好的理想的运动装备。",
				"picUrl": "http://yanxuan.nosdn.127.net/335334d0deaff6dc3376334822ab3a2f.png",
				"floorPrice": 49
			},
			{
				"id": 1001007,
				"name": "优衣库制造商",
				"desc": "严选找到日本知名服装UNIQLO的制造商，\n选取优质长绒棉和精梳工艺，\n与厂方一起设计，为你提供理想的棉袜。",
				"picUrl": "http://yanxuan.nosdn.127.net/0d72832e37e7e3ea391b519abbbc95a3.png",
				"floorPrice": 29
			}
		],
		"hotGoodsList": [
			{
				"id": 1152008,
				"name": "魔兽世界 部落 护腕 一只",
				"brief": "吸汗、舒适、弹性、防护、耐用",
				"picUrl": "http://yanxuan.nosdn.127.net/203cb83d93606865e3ddde57b69b9e9a.png",
				"isNew": false,
				"isHot": true,
				"counterPrice": 49,
				"retailPrice": 29
			},
			{
				"id": 1152009,
				"name": "魔兽世界 联盟 护腕 一只",
				"brief": "吸汗、舒适、弹性、防护、耐用",
				"picUrl": "http://yanxuan.nosdn.127.net/ae6d41117717387b82dcaf1dfce0cd97.png",
				"isNew": false,
				"isHot": true,
				"counterPrice": 49,
				"retailPrice": 29
			},
			{
				"id": 1152031,
				"name": "魔兽世界-伊利丹颈枕眼罩套装",
				"brief": "差旅好伴侣",
				"picUrl": "http://yanxuan.nosdn.127.net/fd6e78a397bd9e9804116a36f0270b0a.png",
				"isNew": false,
				"isHot": true,
				"counterPrice": 119,
				"retailPrice": 99
			},
			{
				"id": 1022000,
				"name": "意式毛线绣球四件套",
				"brief": "浪漫毛线绣球，简约而不简单",
				"picUrl": "http://yanxuan.nosdn.127.net/5350e35e6f22165f38928f3c2c52ac57.png",
				"isNew": false,
				"isHot": true,
				"counterPrice": 319,
				"retailPrice": 299
			},
			{
				"id": 1011004,
				"name": "色织精梳AB纱格纹空调被",
				"brief": "加大加厚，双色精彩",
				"picUrl": "http://yanxuan.nosdn.127.net/0984c9388a2c3fd2335779da904be393.png",
				"isNew": false,
				"isHot": true,
				"counterPrice": 219,
				"retailPrice": 199
			},
			{
				"id": 1084003,
				"name": "纯棉美式绞花针织盖毯",
				"brief": "美式提花，温暖舒适",
				"picUrl": "http://yanxuan.nosdn.127.net/cf40c167e7054fe184d49f19121f63c7.png",
				"isNew": false,
				"isHot": true,
				"counterPrice": 219,
				"retailPrice": 199
			}
		],
		"topicList": [
			{
				"id": 264,
				"title": "设计师们推荐的应季好物",
				"subtitle": "原创设计春款系列上新",
				"price": 29.9,
				"readCount": "77.7k",
				"picUrl": "https://yanxuan.nosdn.127.net/14918201901050274.jpg"
			},
			{
				"id": 266,
				"title": "一条丝巾就能提升时髦度",
				"subtitle": "不知道大家对去年G20时，严选与国礼制造商一起推出的《凤凰于飞》等几款丝巾是否还...",
				"price": 0,
				"readCount": "35.0k",
				"picUrl": "https://yanxuan.nosdn.127.net/14919007135160213.jpg"
			},
			{
				"id": 268,
				"title": "米饭好吃的秘诀：会呼吸的锅",
				"subtitle": "今年1月份，我们联系到了日本伊贺地区的长谷园，那里有着180年伊贺烧历史的窑厂。...",
				"price": 0,
				"readCount": "33.3k",
				"picUrl": "https://yanxuan.nosdn.127.net/14920623353130483.jpg"
			},
			{
				"id": 271,
				"title": "选式新懒人",
				"subtitle": "懒出格调，懒出好生活。",
				"price": 15,
				"readCount": "57.7k",
				"picUrl": "https://yanxuan.nosdn.127.net/14924199099661697.jpg"
			}
		],
		"floorGoodsList": [
			{
				"name": "居家",
				"goodsList": [
					{
						"id": 1110018,
						"name": "耐用狗狗清洁美容护理套装",
						"brief": "精致钢材，耐咬美容",
						"picUrl": "http://yanxuan.nosdn.127.net/d93aa5d6e7a296101cf4cb72613aeda6.png",
						"isNew": false,
						"isHot": false,
						"counterPrice": 99,
						"retailPrice": 79
					},
					{
						"id": 1110019,
						"name": "宠物合金钢安全除菌指甲护理组合",
						"brief": "猫狗皆可用，保护家具",
						"picUrl": "http://yanxuan.nosdn.127.net/1e7e392b6fc9da99dc112197b7444eec.png",
						"isNew": false,
						"isHot": false,
						"counterPrice": 89,
						"retailPrice": 69
					},
					{
						"id": 1131017,
						"name": "平滑细篾头层青碳化竹凉席",
						"brief": "细篾整密，凉滑不夹肉",
						"picUrl": "http://yanxuan.nosdn.127.net/2b6e2268ed712f1a336283f013abb7a1.png",
						"isNew": false,
						"isHot": false,
						"counterPrice": 279,
						"retailPrice": 259
					},
					{
						"id": 1057036,
						"name": "日式纯色水洗亚麻抱枕",
						"brief": "水洗亚麻，透气亲肤",
						"picUrl": "http://yanxuan.nosdn.127.net/8a9ee5ba08929cc9e40b973607d2f633.png",
						"isNew": false,
						"isHot": false,
						"counterPrice": 99,
						"retailPrice": 79
					}
				],
				"id": 1005000
			},
			{
				"name": "餐厨",
				"goodsList": [
					{
						"id": 1023003,
						"name": "100年传世珐琅锅 全家系列",
						"brief": "特质铸铁，大容量全家共享",
						"picUrl": "http://yanxuan.nosdn.127.net/c39d54c06a71b4b61b6092a0d31f2335.png",
						"isNew": false,
						"isHot": false,
						"counterPrice": 418,
						"retailPrice": 398
					},
					{
						"id": 1073008,
						"name": "铸铁珐琅牛排煎锅",
						"brief": "沥油隔水，煎出外焦里嫩",
						"picUrl": "http://yanxuan.nosdn.127.net/619e46411ccd62e5c0f16692ee1a85a0.png",
						"isNew": false,
						"isHot": false,
						"counterPrice": 169,
						"retailPrice": 149
					},
					{
						"id": 1051000,
						"name": "Carat钻石炒锅30cm",
						"brief": "安全涂层，轻便无烟",
						"picUrl": "http://yanxuan.nosdn.127.net/e564410546a11ddceb5a82bfce8da43d.png",
						"isNew": false,
						"isHot": false,
						"counterPrice": 200,
						"retailPrice": 180
					},
					{
						"id": 1051001,
						"name": "Carat钻石煎锅28cm",
						"brief": "耐磨涂层，导热迅速",
						"picUrl": "http://yanxuan.nosdn.127.net/f53ed57d9e23fda7e24dfd0e0a50c5d1.png",
						"isNew": false,
						"isHot": false,
						"counterPrice": 179,
						"retailPrice": 159
					}
				],
				"id": 1005001
			},
			{
				"name": "饮食",
				"goodsList": [
					{
						"id": 1045000,
						"name": "绿茶蛋黄酥 200克/4枚入",
						"brief": "香甜茶食，果腹优选",
						"picUrl": "http://yanxuan.nosdn.127.net/b2adc3fd9b84a289a1be03e8ee400e61.png",
						"isNew": false,
						"isHot": false,
						"counterPrice": 48,
						"retailPrice": 28
					},
					{
						"id": 1116011,
						"name": "蔓越莓曲奇 200克",
						"brief": "酥脆奶香，甜酸回味",
						"picUrl": "http://yanxuan.nosdn.127.net/767b370d07f3973500db54900bcbd2a7.png",
						"isNew": true,
						"isHot": true,
						"counterPrice": 56,
						"retailPrice": 36
					},
					{
						"id": 1070000,
						"name": "星云酥 180克/3颗",
						"brief": "酥饼界的小仙女",
						"picUrl": "http://yanxuan.nosdn.127.net/8392725765cdd57fdae3f173877f4bda.png",
						"isNew": false,
						"isHot": false,
						"counterPrice": 46,
						"retailPrice": 26
					},
					{
						"id": 1155015,
						"name": "绿豆糕 80克（4枚入）",
						"brief": "细腻松软，入口绵柔",
						"picUrl": "http://yanxuan.nosdn.127.net/66b9f1638c0517d179262f14ed1345f9.png",
						"isNew": true,
						"isHot": false,
						"counterPrice": 32.9,
						"retailPrice": 12.9
					}
				],
				"id": 1005002
			},
			{
				"name": "配件",
				"goodsList": [
					{
						"id": 1085019,
						"name": "20寸 纯PC“铝框”（非全铝）登机箱",
						"brief": "铝质包角，牢固抗摔",
						"picUrl": "http://yanxuan.nosdn.127.net/65c955a7a98e84d44ca30bb88a591eac.png",
						"isNew": false,
						"isHot": false,
						"counterPrice": 369,
						"retailPrice": 349
					},
					{
						"id": 1086052,
						"name": "20寸 铝镁合金登机箱",
						"brief": "时尚金属箱，奢品质感",
						"picUrl": "http://yanxuan.nosdn.127.net/93171a281c4ed272c007a050816e6f6c.png",
						"isNew": false,
						"isHot": false,
						"counterPrice": 879,
						"retailPrice": 859
					},
					{
						"id": 1152101,
						"name": "魔兽世界 部落 奥格瑞玛 拉杆箱 可登机",
						"brief": "18寸，可携带登机",
						"picUrl": "http://yanxuan.nosdn.127.net/c1c62211a17b71a634fa0c705d11fb42.png",
						"isNew": false,
						"isHot": true,
						"counterPrice": 908,
						"retailPrice": 888
					},
					{
						"id": 1114011,
						"name": "104升 纯PC拉链斜纹拉杆箱",
						"brief": "104升的体积，90升的价格",
						"picUrl": "http://yanxuan.nosdn.127.net/196b5ce11930b4eadaec563cb0406634.png",
						"isNew": false,
						"isHot": false,
						"counterPrice": 319,
						"retailPrice": 299
					}
				],
				"id": 1008000
			}
		]
	},
	"errmsg": "成功"
}

加入真值后，将原先的信息换成现在的变量home，如下图所示:
在这里插入图片描述
然后再运行就能看到我真正想要的数据
在这里插入图片描述
然后在Home.vue文件中的data中创建homeinfos变量，那这个变量拿到的就是所有首页的数据

代码截图如下：
在这里插入图片描述

然后到钩子中去调用homeinfos这个变量
代码截图如下：
在这里插入图片描述

代码如下：

    //1.声明周期钩子（方法，函数）
    created() {
        console.info("数据初始化之后-异步请求");
        //3.调用首页api ES6中的保护机制Promise
        getHome().then(resp=>{              //resp是返回的参数
            console.log(resp);              //将返回对象输出
            //获得homeinfos数据
            this.homeinfos=resp.data.data;
            //输出homeinfos数据
            console.info(this.homeinfos);
        });
    }

获取并输出homeinfos数据之后，查看控制台，如下图，这里就是我们获取到的首页的数据
在这里插入图片描述
上一篇:显示页面
下一篇:做出商品栏

推荐BGM: Magic(Acoustic)

曼陀罗.feng
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue+element仿淘宝项目
06-17
期中作业 下载解压运行npm run serve
使用vue做一个“淘宝“项目——3
weixin_48462447的博客
05-10 2392
做出分类页面 ———————————————————————————————————————————— 前言：实现首页做完，详细请看前两篇文章 1.使用vue做一个“淘宝“项目(做出首页) 2.使用vue做一个“淘宝“项目(显示商品栏) ———————————————————————————————————————————— 目录： 创建项目文件 删除原有文件 引用资源文件 实现底部导航栏 显示页面 做出首页 显示商品栏 做出分类页面 ————————————————————————————————————
Web 攻防第一阶段 I-08：shodan 搜索技巧
maergaiyun的博客
10-16 298
I. shodan 搜索 webcam II. shodan 搜索指定端口 III. shodan 搜索指定 IP 地址 IV. shodan 搜索具体城市
使用vue做一个“淘宝“项目(引用资源文件)
weixin_48462447的博客
03-30 1545
前言：1.创建好文件2.删除原有的vue文件与代码 目录： 创建项目文件 删除原有文件 做出底部导航栏 一、在做导航栏之前要先引用两个文件**—>** 底部导航栏所需文件 将引用的文件放在src->assets下 然后打开main.js 在main.js下添加外部资源引用代码 import '@/assets/reset.css' 二、下面我们导入依赖，安装vant-ui组件库 还记得我们之前在创建文件的时候有一项选的是2.x吗，这里有 Vant 2组件开发指南 点击打开 在快速上手中找到安
使用vue做一个“淘宝“项目——0
weixin_48462447的博客
03-23 2085
前言：1.搭建好vue环境 2.设置好镜像 一、设置好环境之后呢，要用cmd来创建项目 我这里是在c盘下创建的项目文件，这里的项目名是mall-mobile（可根据自己的需求改变盘符） vue create mall-mobile 创建完之后选中最后一个文件（上下选择，空格确认） 选中（*）用" √ "代替了，记住将 Linter/Formatter 取消勾选 (√)Choose Vue version(如果没有这个选项则光选下面三个就可以了) (√)Babel (√)Router (√)Vuex
使用vue做一个“淘宝“项目——1
weixin_48462447的博客
03-30 2004
实现底部导航栏 前言：将需要的文件做好引用 目录： 创建项目文件 删除原有文件 引用资源文件 实现底部导航栏 一、实现静态版底部导航栏 先进行引用组件，在 src->components 下新建vue组件 将组件取名为Tabbar (底部导航栏) 创建完Tabbar之后在 Tabbar.vue 下的 template 标签中创建一个跟标记 div 标签，然后引用 vant的Tabbar 组件 （自定义组件再引用文档vant中的组件），然后找到文档中的Tabbar创建 van-tabbar 标签，代
开源vue淘宝客项目可直接使用！
08-26
对接好单库淘宝API,实现领取优惠券，包含主页，我的，9.9包邮、天猫、全网超级搜、商品列表、热门抖货、天猫商品、品牌爆款、商品详情、立即领券、分享、一键复制，足迹，收藏、精选好货、为你推荐、30元封顶等功能
自学vue的第一个项目——-vue商城
01-20
ui中的Header组件2、tabbar区域引用的是ui组件mui中的案例tabbar.html，拷贝到App.vue二、在中间区域放置一个router-view来展示路由匹配的组件1、轮播图区域2、六宫格区域三、新闻资讯1、改造新闻资讯的路由链接2、...
一个使用vue做的门户网站模板.zip
05-14
一个使用vue做的门户网站模板 一个使用vue做的门户网站模板 一个使用vue做的门户网站模板 一个使用vue做的门户网站模板 一个使用vue做的门户网站模板 一个使用...
使用 Vue制作一个 Disnep 项目论坛网站
12-19
利用现有的开源 API 结合 Vue、element-ui、axios、mavon-editor 制作的一个 Vue 论坛项目，利用浏览器的本地存储来制作登录页面的效果。 主要的功能有：登录/退出、添加评论、论坛首页、内容详情页、发布文章、评论...
vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示）
10-15
主要介绍了vue搜索页开发实例（热门搜索，历史搜索，淘宝接口演示）,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vscode新建一个最简单的vue项目
09-27
vscode新建一个最简单的vue项目
vue开发一个做企业服务的h5公众号项目
03-18
基本接口自己出，这里只提供前端程序 微信授权，微信分享 底部ico点击切换图片
Vue 电商项目学习
鑫的博客
04-22 832
Vue电商项目初学习，使用Vue CLI。Vue CLI 是 Vue 官方基于 webpack 的构建工具。
前端淘宝适配方案(vue)
L_3995的博客
08-17 994
1.安装插件 npm i lib-flexible --save-dev 2.在main.js引入 import ‘lib-flexible/flexible.js’ 3.在plugins下建立文件夹lib-flexible里面加入flexible.js 代码如下： ;(function(win, lib) { var doc = win.document var docEl = doc.documentElement var metaEl = doc.querySelector(‘meta[name=“v
用 Vue 做一个简单的购物app
weixin_34416754的博客
04-07 1069
前言 最近在学习Vue的使用。看了官方文档之后，感觉挺有意思的。于是着手做了一个简单的购物app。这是我第一次在这个网站上写分享，如有不当之处，请多多指教。 一整个项目写下来，最大的感觉就是组件式开发，管理起来实在是太舒服了。而且vue中写scss还可以指定局部有效。这样写起scss感觉安全多了。用 vuex 进行全局数据管理也挺舒心的。...
使用vue做一个“淘宝“项目(显示页面)
weixin_48462447的博客
03-31 3930
显示页面 前言：做出底部导航栏 目录： 创建项目文件 删除原有文件 引用资源文件 实现底部导航栏 显示页面 一、若想每个导航栏都能显示页面，那必先创建组件 在 src->views 文件夹下创建四个组件 现在我想用这四个界面，那就必须找到 src->router->index.js 文件来调用这四个组件，下面在 index.js 中写这四行代码 ，若写完是灰色的不需要担心，因为你后面还没有引用，继续往下看 然后下面写成这样，代码如下 import Vue from 'vue' imp
三、VUE数据代理
D_A_I_H_A_O的博客
04-29 568
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
前端Vue 后端FastApi 跨域 CORS
最新发布
weixin_44656422的博客
05-06 147
前端是localhost:3000,后端是localhost:8000 ，就是跨域了。
vue3登录界面美化
03-28
Vue3是一种流行的JavaScript框架，用于构建用户界面。要美化Vue3登录界面，可以使用以下方法： 1. 使用CSS样式：通过编写自定义的CSS样式来美化登录界面。可以设置背景颜色、字体样式、按钮样式等，以使界面更加吸引人。 2. 使用第三方UI库：Vue3有许多优秀的第三方UI库可供选择，如Element Plus、Vuetify等。这些UI库提供了丰富的组件和样式，可以轻松地创建漂亮的登录界面。 3. 添加动画效果：通过使用Vue3的过渡和动画功能，可以为登录界面添加一些动态效果，如淡入淡出、滑动等，以增加用户体验。 4. 响应式设计：确保登录界面在不同设备上都能良好地显示和适应。使用Vue3的响应式布局和媒体查询等技术，可以使登录界面在手机、平板和桌面等不同屏幕尺寸上都有良好的表现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

曼陀罗.feng

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

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

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

打赏作者

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

抵扣说明：

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

余额充值