使用Vue项目，选择 axios 来完成 ajax 请求实现淘宝商品展示

GaHoOo

于 2018-11-06 11:28:52 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/GaHoOo/article/details/83783906

本文介绍如何在Vue项目中使用axios进行ajax请求，以实现从淘宝获取商品数据并展示。通过Promise和JSON数据，结合Bootstrap和Vue框架，实现页面动态加载和布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，目前的主流 Vue 项目，都选择 axios 来完成 ajax 请求。

完成的效果图：

数据都是从JSON追加进入页面的，此代码中直接使用了淘宝源，Bootstrap还有Vue。

<script type="text/javascript" src="js/vue.js" ></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>	
<link rel="stylesheet" href="css/bootstrap.css" />

紧接的是简单的代码样式：

<style>
	.desc_title{
		display: inline-block;
		height: 20px;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		width: 100%;
	}
	.price{
		font-size: 20px;
		font-weight: bold;
		color: crimson;
	}
	.discount{
		text-decoration: line-through;
	}
</style>

最后是布局和方法：