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

已于 2022-05-10 12:02:20 修改
阅读量2.2k 收藏 9
点赞数 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
关注
专栏目录
Vue--》超详细教程——vue-cli脚手架的搭建与使用
ztK63LrD的博客
11-14 4738
它简化了程序员基于webpack创建工程化的Vue项目的工程。其好处就是简省了程序员花费时间去配置webpack，从而目标只需专注在撰写项目应用上。，基于vue-cli这个系统，我们就可以快速搭建好“（英文名：Singleagepplication）简称SPA，顾名思义指的是，所有的功能与交互都在这唯一的一个页面内完成。
云E办Springboot+vue——前端项目完整版（含源码）
热门推荐
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
08-10 5万+
本项目基于Vue+Spring Boot构架一个前后端分离项目。前端使用社区非常活跃的开源框架vue进行构建。受疫情的影响，许多企业由线上办公转为线下办公。随着线上办公的人数的增多，线上办公的优点逐步凸显：通过实现工作流程的自动化、节省企业办公费用、实现绿色办公，同时提升办公效率。前端使用的技术有： Vue、Vue-cli、Vuex、VueRouter、ElementUI、Axios、ES6、Webpack、WebSocket、font-awesome、js-file-download、vue-chat 项
Vue仿淘宝购物车网页
weixin_46077567的博客
01-15 3720
用vue实现淘宝网页购物车页面，自己练习，有什么不足请多多指教 功能主要包括： 全选； 店铺全选； 商品的选中和删除 结算 效果图如下： 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准...
vue+element仿淘宝项目
06-17
期中作业 下载解压运行npm run serve
基于vue全家桶的pc端仿淘宝系统(11200)
m0_72438098的博客
09-03 130
完整源代码（前后端源代码+SQL脚本）配套文档（LW+PPT+开题报告）远程调试控屏包运行Java语言SSM框架SpringBoot框架Vue框架JSP页面Mysql数据库IDEA/Eclipse开发。
使用vue做一个“淘宝“项目——3
weixin_48462447的博客
05-10 2676
做出分类页面 ———————————————————————————————————————————— 前言：实现首页做完，详细请看前两篇文章 1.使用vue做一个“淘宝“项目(做出首页) 2.使用vue做一个“淘宝“项目(显示商品栏) ———————————————————————————————————————————— 目录： 创建项目文件 删除原有文件 引用资源文件 实现底部导航栏 显示页面 做出首页 显示商品栏 做出分类页面 ————————————————————————————————————
使用vue做一个“淘宝“项目——0
weixin_48462447的博客
03-23 2249
前言：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 2288
实现底部导航栏 前言：将需要的文件做好引用 目录： 创建项目文件 删除原有文件 引用资源文件 实现底部导航栏 一、实现静态版底部导航栏 先进行引用组件，在 src->components 下新建vue组件 将组件取名为Tabbar (底部导航栏) 创建完Tabbar之后在 Tabbar.vue 下的 template 标签中创建一个跟标记 div 标签，然后引用 vant的Tabbar 组件 （自定义组件再引用文档vant中的组件），然后找到文档中的Tabbar创建 van-tabbar 标签，代
使用vue做一个“淘宝“项目(引用资源文件)
weixin_48462447的博客
03-30 1674
前言：1.创建好文件2.删除原有的vue文件与代码 目录： 创建项目文件 删除原有文件 做出底部导航栏 一、在做导航栏之前要先引用两个文件**—>** 底部导航栏所需文件 将引用的文件放在src->assets下 然后打开main.js 在main.js下添加外部资源引用代码 import '@/assets/reset.css' 二、下面我们导入依赖，安装vant-ui组件库 还记得我们之前在创建文件的时候有一项选的是2.x吗，这里有 Vant 2组件开发指南 点击打开 在快速上手中找到安
Mac系统下使用vue做一个购物页面项目——0
weixin_64101764的博客
03-26 1354
前提：1.搭建好vue开发环境 2.设置好淘宝镜像 一、设置好环境之后，要在终端完成创建项目的操作 我这里是在/library/中先创建一个文件夹命名为vue2022，然后在终端中打开这个文件夹，创建一个命名为mall- mobile的项目（命名随意、盘符位置可根据自己的需求） vue create mall- mobile 创建完之后控制上下选择最后一个文件（空格确认） 取消Linter / Formatter的选项 选中 Babel Router Vuex 如果有Choo.
vue2.x+webpack快速搭建前端项目框架详解
08-28
然后，在components目录下新建一个header的目录，新建两个文件header.vue和header.scss，引入到app.vue中使用。 另外，需要引入axios接口请求框架，使用命令npm install axios --save-dev和npm install qs来安装...
开源vue淘宝客项目可直接使用！
08-26
对接好单库淘宝API,实现领取优惠券，包含主页，我的，9.9包邮、天猫、全网超级搜、商品列表、热门抖货、天猫商品、品牌爆款、商品详情、立即领券、分享、一键复制，足迹，收藏、精选好货、为你推荐、30元封顶等功能
vue实现仿淘宝结账页面实例代码
01-21
虽然Vue最强大的是组件化开发，但是其实多页面开发也蛮适合的。下面小编给大家分享vue实现仿淘宝结账页面实例代码，具体内容大家参考下本文。 这个demo，是小编基于之前的 vue2.0在table中实现全选和反选  文章进行更新后的demo，主要功能呢，是仿照淘宝页面的结算购物车商品时自动算出合计价格的页面，具体页面效果请看下面的动图：（如果大家发现有什么问题请及时提出帮小颖改正错误呦，谢谢啦嘻嘻） 效果图： 更新后的home.vue <template> <div class=container> <div class=checkout-title> <span>购物车
vue仿淘宝商品详情demo
11-09
使用vue2仿照了淘宝商品详情以及加入购物车。包含的页面有首页、分类更多、商品详情，其中商品详情的加入购物车利用了vue的组件功能
vue模仿taobao,属于多模块项目,包括api、管理后台、vue前台..zip
10-21
vue模仿taobao,属于多模块项目,包括api、管理后台、vue前台..zip
vue 仿移动web商城
06-29
基于Vue2.0+Vuex+Axios+NodeJs+Express+MySQL实现京东移动web商城
Vue系列——在vue项目中使用echarts
qq_57558631的博客
05-27 310
该示例使用vue-cli脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像： 安装 npm install -g cnpm --registry=https://registry.npm.taobao.org 1 使用 cnpm install echarts -S 创建图表 全局引入 main.js // 引入echarts import echarts from 'echarts' ..
Vue 电商项目学习
鑫的博客
04-22 1220
Vue电商项目初学习，使用Vue CLI。Vue CLI 是 Vue 官方基于 webpack 的构建工具。
vue淘宝镜像
qq_43272035的博客
03-12 2263
记录一下 安装 npm install -g cnpm --registry=https://registry.npm.taobao.org 验证 npm config get registry 应用 cnpm install vue-amap --save 结果
如何使用SpringBoot和Vue.js实现前后端分离的众筹平台开发？请结合《SpringBoot+Vue开发的毕业设计项目——善筹网前后端实现》一书给出指导。
最新发布
10-29
参考资源链接：[SpringBoot+Vue开发的毕业设计项目——善筹网前后端实现](https://wenku.csdn.net/doc/1e6dzw1rw6?utm_source=wenku_answer2doc_content) 在现代Web开发中，前后端分离已成为一种主流架构模式，尤其是在构建复杂的Web应用如众筹平台时。《SpringBoot+Vue开发的毕业设计项目——善筹网前后端实现》这本书详细介绍了如何利用SpringBoot作为后端框架，Vue.js作为前端框架来实现这种架构模式。在开始之前，你需要对SpringBoot和Vue.js有基本的理解，同时熟悉MySQL数据库的基本操作以及前后端交互原理。 首先，SpringBoot负责后端服务的搭建，它能够快速搭建和运行Web应用，并且通过Spring Data JPA与MySQL数据库进行高效的数据交互。你需要了解如何使用SpringBoot创建RESTful API，这些API将作为前后端分离架构中前端和后端交互的桥梁。 其次，Vue.js将负责前端界面的设计和实现。你可以使用Vue CLI来快速搭建项目的基础结构，并利用Vue Router来管理前端页面的导航。Vuex可以用来管理前端的状态，这对于大型单页应用尤其重要。对于前端界面的交互，Element UI这样的组件库提供了丰富的界面元素，能够帮助你快速搭建出美观且功能完备的用户界面。 在开发过程中，你需要使用Ajax或Fetch API来实现前后端的数据交互。此时，后端的SpringBoot应用需要暴露REST API接口，而前端的Vue.js应用则负责调用这些接口，并处理数据的显示和用户的交互操作。 安全性也是开发中不可忽视的一个方面。你应当在SpringBoot中配置安全框架，比如Spring Security，来保护你的应用免受恶意攻击。同样，前端也需要考虑防御常见的网络攻击，比如XSS和CSRF。 整个开发过程中，单元测试和集成测试是确保代码质量的关键步骤。你可以使用JUnit来编写后端测试用例，而前端的Vue.js应用则可以利用Karma和Jasmine进行测试。 最后，系统测试阶段，你需要对整个应用进行全方位的测试，包括功能测试、性能测试和安全测试。确保众筹平台能够在多种环境下稳定运行，并且能够处理高并发的用户访问。 通过结合《SpringBoot+Vue开发的毕业设计项目——善筹网前后端实现》一书，你可以学习到如何将这些概念和工具应用到实际的项目中，从而构建出一个功能完善、性能稳定的众筹平台。这本书不仅提供了系统的知识架构，还提供了实践中的源码和数据库脚本，是学习SpringBoot、Vue.js和MySQL等技术的理想资料。 参考资源链接：[SpringBoot+Vue开发的毕业设计项目——善筹网前后端实现](https://wenku.csdn.net/doc/1e6dzw1rw6?utm_source=wenku_answer2doc_content)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

曼陀罗.feng

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

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

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

打赏作者

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

抵扣说明：

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

余额充值