使用cdn引入vue+ajax实现简单的商城页面

最新推荐文章于 2024-09-05 15:44:16 发布

linda`li

最新推荐文章于 2024-09-05 15:44:16 发布

阅读量1.1k

点赞数

分类专栏：前端VUE 文章标签： vue+ajax

本文链接：https://blog.csdn.net/lindali1115/article/details/90513679

版权

前端VUE 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

页面呈现效果：

index.html页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品页面</title>
		<link rel="stylesheet" href="../css/index.css">
		<!-- <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">--> 
	</head>
	<body>
		<div id="itemWrap" class="itemwrap">
			<!-- 人气主动打榜 -->
			<div class="mainWrap">
				<p class="mainTitle mainTitlePadding">人气主打榜</p>
				<div class="mainContent mainBorder">
					<div class="icon">
						<img src="../img/icon.png" alt="">
						<span class="mainHotText">TOP1</span>
					</div>
					<div class="contextWrap">
						<span class="ageText">0-7岁</span>
						<p class="mainItemstitle">{{mainItems.name}} {{mainItems.style}}</p>
						<p><span class="monIcon">￥</span><span class="mainItemsSale">{{mainItems.sales}}</span><span class="mainItemPrice">{{mainItems.price}}</span></p>
					</div>
					<img class="mainItemsPic" src="../img/showstop.jpg" alt="">
				</div>
			</div>
			<!-- 新品上市 -->
			<div class="mainWrap">
				<p class="mainTitle newsTitlePadding">新品上市</p>
				<div class="clearUl newsContent">
					<div class="Item" v-for="item in newItems">
						<div class="showsWrap">
							<div class="box"><span class="SaveTitle">立省</span><span class="SavePirce">60</span><span class="Unit">元</span></div>
							<div class="HotIcon">
								<span class="hotText">HOT</span>
							</div>
						</div>
						<p class="showTitle"><span>{{item.series}}</span> <span>{{item.name}}</span> <span>{{item.style}}</span></p>
						<div class="priceWrap"><span class="priceTitle">吊牌价</span><span class="monIcon MonCol">￥</span><span class="price">{{item.price}}</span><span class="saleTitle">活动价</span><span class="monIcon SMonCol">￥</span><span class="salePrice">{{item.sales}}</span></div>
						<div class="itemNoWrap"><span>货号:</span><span>{{item.itemNo}}</span></div>
					</div>
				</div>
			</div>
			<!-- TOP推荐 -->
			<div class="mainWrap">
				<p class="mainTitle newsTitlePadding">TOP推荐</p>
				<div class="clearUl topContent">
					<div class="Item" v-for="item in topItems">
						<div class="showsW">
							<div class="showsWrap">
								<div class="box"><span class="SaveTitle">立省</span><span class="SavePirce">60</span><span class="Unit">元</span></div>
								<div class="HotIcon">
									<span class="hotText">HOT</span>
								</div>
							</div>
						</div>
						
						<p class="showTitle"><span>{{item.series}}</span> <span>{{item.name}}</span> <span>{{item.style}}</span></p>
						<div class="priceWrap"><span class="priceTitle">吊牌价</span><span class="monIcon MonCol">￥</span><span class="price">{{item.price}}</span><span class="saleTitle">活动价</span><span class="monIcon SMonCol">￥</span><span class="salePrice">{{item.sales}}</span></div>
						<div class="itemNoWrap"><span>货号:</span><span>{{item.itemNo}}</span></div>
					</div>
				</div>
			</div>
			<!-- 经典必备 -->
			<div class="mainWrap">
				<p class="mainTitle newsTitlePadding">经典必备</p>
				<div class="clearUl classContent">
					<div class="Item" v-for="item in classicItems">
						<div class="showsW">
							<div class="showsWrap">
								<div class="box"><span class="SaveTitle">立省</span><span class="SavePirce">60</span><span class="Unit">元</span></div>
								<div class="HotIcon">
									<span class="hotText">HOT</span>
								</div>
							</div>
						</div>
						
						<p class="showTitle"><span>{{item.series}}</span> <span>{{item.name}}</span> <span>{{item.style}}</span></p>
						<div class="priceWrap"><span class="priceTitle">吊牌价</span><span class="monIcon MonCol">￥</span><span class="price">{{item.price}}</span><span class="saleTitle">活动价</span><span class="monIcon SMonCol">￥</span><span class="salePrice">{{item.sales}}</span></div>
						<div class="itemNoWrap"><span>货号:</span><span>{{item.itemNo}}</span></div>
					</div>
				</div>
			</div>
		</div>
		<script src="../js/jquery3.4.1.js"></script>
		<script src="../js/vue.js"></script>
		<script src="../js/index.js"></script>
	</body>
</html>

json页面

{
	"mainItems":[
		{"name":"包头凉鞋","style":"抽绳设计","price":"￥329","sales":"189-239"}
	],
	"newItems":[
		{"name":"凉鞋","series":"750系列","style":"中性款","price":339,"sales":339,"itemNo":"SDL750pK"},
		{"name":"凉鞋","series":"750系列","style":"中性款","price":339,"sales":339,"itemNo":"SDL750pK"}
	],
	"topItems":[
		{"name":"凉鞋","series":"750系列","style":"中性款","price":339,"sales":339,"itemNo":"SDL750pK"},
		{"name":"凉鞋","series":"750系列","style":"中性款","price":339,"sales":339,"itemNo":"SDL750pK"},
		{"name":"凉鞋","series":"750系列","style":"中性款","price":339,"sales":339,"itemNo":"SDL750pK"}
	],
	"classicItems":[
		{"name":"凉鞋","series":"750系列","style":"中性款","price":339,"sales":339,"itemNo":"SDL750pK"},
		{"name":"凉鞋","series":"750系列","style":"中性款","price":339,"sales":339,"itemNo":"SDL750pK"},
		{"name":"凉鞋","series":"750系列","style":"中性款","price":339,"sales":339,"itemNo":"SDL750pK"},
		{"name":"凉鞋","series":"750系列","style":"中性款","price":339,"sales":339,"itemNo":"SDL750pK"}
	]
}

css页面

*{
	margin: 0;
	padding: 0;
}
.itemwrap{
	width:750px;
	height: 2000px;
	margin: 0 auto;
	background: #fff;
}
.mainWrap{
	width: 100%;
}
.mainTitle{
	width: 100%;
	height: 32px;
	font-family: SourceHanSansCN-Bold;
	font-size: 34px;
	line-height: 21px;
	letter-spacing: 0px;
	color: #000000;
	text-align: center;
}
.mainHotText{
	font-family: Gotham-Bold;
	font-size: 18px;
	line-height: 22px;
	letter-spacing: 0px;
	color: #dc2121;
	font-weight: 600;
}
.mainTitlePadding{
	padding-top: 70px;
	padding-bottom: 39px;
}
.mainContent{
	width: 698px;
	height:268px ;
	margin: 0 auto;
}
.mainContent:not(:last-child){
	margin-bottom: 20px;
}
.mainBorder{
	border: 1px solid #dcdcdc;
}
.icon{
	width: 82px;
	border-right: 1px solid #dcdcdc;
	border-bottom:1px solid #dcdcdc;
	padding:7px 8px;
}
.contextWrap{
	margin-top: 72px;
	margin-left: 83px;
	width: auto;
	float: left;
}
.ageText{
	padding:3px 19px ;
	border: solid 1px #282828;
	font-family: Gotham-Medium;
	font-size: 18px;
	letter-spacing: 0px;
	color: #1c1615;
}
.mainItemstitle{
	font-family: SourceHanSansCN-Medium;
	font-size: 30px;
	letter-spacing: 0px;
	color: #000000;
	margin-top: 23px;
	margin-bottom: 17px;
}
.monIcon{
	font-size: 17px;
	line-height: 8px;
	letter-spacing: -1px;
	color: #000000;
}
.mainItemsSale{
	font-family: Gotham-Bold;
	font-size: 36px;
	letter-spacing: -1px;
	color: #000000;
}
.mainItemPrice{
	font-family: SourceHanSansCN-Medium;
	font-size: 17px;
	line-height: 8px;
	letter-spacing: -1px;
	color: #000000;
	opacity: 0.4;
	margin-left: 14px;
	text-decoration:line-through
}
.mainItemsPic{
	margin-right: 40px;
    display: inline-block;
    float: right;
}
/* news页面 */
.newsContent{
	width: 700px;
	margin: 0 auto;
	overflow: hidden;
}
.newsTitlePadding{
	padding-top: 57px;
	padding-bottom:42px ;
}
.clearUl{
	list-style: none;
	overflow: hidden
}
.newsContent .Item{
	width:339px;
	height:425px;
	border: 1px solid #dcdcdc;
	float: left;
}
.newsContent .hotText{
	display: inline-block;
	font-family: Gotham-Bold;
	font-size: 18px;
	font-style: italic;
	line-height: 18px;
	letter-spacing: -1px;
	color: #1c1615;
    margin-top: 23px;
    margin-left: 10px;
	font-weight: 600;
	
}
.newsContent .Item:nth-child(odd) {
	margin-right: 18px;
	margin-bottom: 20px;
}
.newsContent .showsWrap{
	background:url(../img/show2.jpg) center no-repeat;
	background-size: cover;
	height:339px;
	width: 339px;
}

.newsContent .SaveTitle{
	font-family: SourceHanSansCN-Medium;
	font-size: 24px;
	font-style: italic;
	letter-spacing: 0px;
	color: #212121;
}
.newsContent .SavePirce{
	font-family: Gotham-Bold;
	font-size: 38px;
	font-style: italic;
	letter-spacing: -1px;
	color: #cf0a2c;
	padding: 0 1px;
	margin-top: 17px;
	display: inline-block;
	padding: 0 2px;
}
.newsContent .Unit{
	font-family: SourceHanSansCN-Medium;
	font-size: 12px;
	font-style: italic;
	letter-spacing: 0px;
	color: #212121;
}
.newsContent .box{
	padding-bottom: 0;
	display: inline-block;
	margin-left: 20px;
}
.newsContent .HotIcon{
	margin-top: 25px;
    float: right;
    margin-right: 22px;
	background: url(../img/hot2.png) no-repeat center;
	background-size: cover;
	width: 63px;
	height: 63px;
}
.newsContent .showTitle{
	margin-top: -59px;
	font-family: SourceHanSansCN-Medium;
	font-size: 24px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 18px;
	letter-spacing: 1px;
	color: #1c1615;
	text-align: center;
}
.newsContent .priceTitle{
	width: 58px;
	height: 20px;
	font-family: SourceHanSansCN-Bold;
	font-size: 21px;
	line-height: 18px;
	letter-spacing: 0px;
	color: #666666;
}
.newsContent .price{
	width: 71px;
	height: 23px;
	font-family: MyriadPro-Regular;
	font-size: 21px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 18px;
	letter-spacing: 0px;
	color: #666666;
	font-size: 31px;
}
.newsContent .MonCol{
	color: #666666;
	font-size: 14px;
}
.newsContent .saleTitle{
	width: 60px;
	height: 21px;
	font-family: SourceHanSansCN-Bold;
	font-size: 21px;
	line-height: 18px;
	letter-spacing: 0px;
	color: #282828;
	margin-left: 16px;
}
.newsContent .salePrice{
	width: 73px;
	height: 25px;
	font-family: MyriadPro-Regular;
	font-size: 21px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 18px;
	letter-spacing: 0px;
	color: #cf0a2c;
	font-size: 31px;
}
.newsContent .SMonCol{
	color: #cf0a2c;
    font-size: 14px;
}
.newsContent .priceWrap{
	margin-top: 22px;
    text-align: center;
	margin-top: 22px;
	padding-bottom: 25px;
	border-bottom: 1px solid #dcdcdc;
}
.newsContent .itemNoWrap{
	font-family: SourceHanSansCN-Regular;
	font-size: 24px;
	letter-spacing: -1px;
	color: #666666;
	text-align: center;
	margin-top: 12px;
}
.topContent{
	width: 700px;
	margin: 0 auto;
}
.topContent .Item{
	width: 225px;
	border: 1px solid #dcdcdc;
	float: left;
}
.topContent .Item:nth-child(3n-1) {
	margin:0 9.5px;
}
.topContent .Item:nth-child(3n) {
	margin-bottom: 15px;
}
.topContent .showsW{
	width: 225px;
	height: 225px;
}
.topContent .showsWrap{
	 background: url(../img/show2.jpg) center no-repeat;
	background-size: cover;
	height: 100%;
	width:100%;
}

.topContent .SaveTitle{
	font-family: SourceHanSansCN-Medium;
	font-size: 16px;
	font-style: italic;
	letter-spacing: 0px;
	color: #212121;
}
.topContent .SavePirce{
	font-family: Gotham-Bold;
	font-size: 25px;
	font-style: italic;
	letter-spacing: -1px;
	color: #cf0a2c;
	padding: 0 1px;
	margin-top: 17px;
	display: inline-block;
}
.topContent .Unit{
	font-family: SourceHanSansCN-Medium;
	font-size: 12px;
	font-style: italic;
	letter-spacing: 0px;
	color: #212121;
}
.topContent .box{
	padding-bottom: 0;
	display: inline-block;
	margin-left: 20px;
}
.topContent .HotIcon{
	margin-top: 25px;
	float: right;
	margin-right: 22px;
	background: url(../img/hot2.png) no-repeat center;
	background-size: cover;
	width: 41px;
	height: 41px;
	
}
.topContent .hotText{
	display: inline-block;
	font-family: Gotham-Bold;
	font-size: 12px;
	font-style: italic;
	line-height: 18px;
	letter-spacing: -1px;
	color: #1c1615;
    margin-top: 12px;
    margin-left: 6px;
	font-weight: 600;
	
}
.topContent .showTitle{
	margin-top: -47px;
	font-family: SourceHanSansCN-Medium;
	font-size: 18px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 18px;
	letter-spacing: 1px;
	color: #1c1615;
	text-align: center;
}
.topContent .priceTitle{
	width: 58px;
	height: 20px;
	font-family: SourceHanSansCN-Bold;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0px;
	color: #666666;
}
.topContent .price{
	width: 71px;
	height: 23px;
	font-family: MyriadPro-Regular;
	font-size: 21px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 18px;
	letter-spacing: 0px;
	color: #666666;
}
.topContent .MonCol{
	color: #666666;
	font-size: 14px;
}
.topContent .saleTitle{
	width: 60px;
	height: 14px;
	font-family: SourceHanSansCN-Bold;
	line-height: 18px;
	letter-spacing: 0px;
	color: #282828;
	margin-left: 16px;
}
.topContent .salePrice{
	width: 73px;
	height: 25px;
	font-family: MyriadPro-Regular;
	font-size: 21px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 18px;
	letter-spacing: 0px;
	color: #cf0a2c;
}
.topContent .SMonCol{
	color: #cf0a2c;
    font-size: 14px;
}
.topContent .priceWrap{
    text-align: center;
	margin-top: 10px;
	padding-bottom: 14px;
	border-bottom: 1px solid #dcdcdc;
}
.topContent .itemNoWrap{
	font-family: SourceHanSansCN-Regular;
	font-size: 16px;
	letter-spacing: -1px;
	color: #666666;
	text-align: center;
	margin: 8px 0;
}
.topTitlePadding{
	margin: 20px;
}
.classContent{
	width: 700px;
	margin: 0 auto;
}
.classContent .Item{
	width: 168px;
	border: 1px solid #dcdcdc;
	float: left;
}

.classContent .Item:not(:nth-child(4n+1)) {
	margin-left:6.33px;
}
.classContent .Item:nth-child(4n){
	margin-bottom: 10px;
}
.classContent .showsW{
	width: 168px;
	height: 168px;
}
.classContent .showsWrap{
	 background: url(../img/show2.jpg) center no-repeat;
	background-size: cover;
	height: 100%;
	width:100%;
}

.classContent .SaveTitle{
	font-family: SourceHanSansCN-Medium;
	font-size: 12px;
	font-style: italic;
	letter-spacing: 0px;
	color: #212121;
}
.classContent .SavePirce{
	font-family: Gotham-Bold;
	font-size: 19px;
	font-style: italic;
	letter-spacing: -1px;
	color: #cf0a2c;
	padding: 0 1px;
	margin-top: 13px;
	display: inline-block;
}
.classContent .Unit{
	font-family: SourceHanSansCN-Medium;
	font-size: 9px;
	font-style: italic;
	letter-spacing: 0px;
	color: #212121;
}
.classContent .box{
	padding-bottom: 0;
	display: inline-block;
	margin-left: 20px;
}
.classContent .HotIcon{
	margin-top: 12px;
	float: right;
	margin-right: 11px;
	background: url(../img/hot2.png) no-repeat center;
	background-size: cover;
	width: 35px;
	height: 35px;
}
.classContent .hotText{
	display: inline-block;
    font-family: Gotham-Bold;
    font-size: 1px;
    font-style: italic;
    line-height: 18px;
    letter-spacing: -1px;
    color: #1c1615;
    margin-top: 8px;
    margin-left: 3px;
    font-weight: 600;
	
}
.classContent .showTitle{
	margin-top: -39px;
	font-family: SourceHanSansCN-Medium;
	font-size: 12px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 18px;
	letter-spacing: 1px;
	color: #1c1615;
	text-align: center;
}
.classContent .priceTitle{
	width: 58px;
	height: 20px;
	font-family: SourceHanSansCN-Bold;
	font-size: 10px;
	line-height: 18px;
	letter-spacing: 0px;
	color: #666666;
}
.classContent .price{
	width: 71px;
	height: 23px;
	font-family: MyriadPro-Regular;
	font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 18px;
	letter-spacing: 0px;
	color: #666666;
}
.classContent .MonCol{
	color: #666666;
	font-size: 14px;
}
.classContent .saleTitle{
	width: 60px;
	height: 14px;
	font-family: SourceHanSansCN-Bold;
	line-height: 18px;
	letter-spacing: 0px;
	color: #282828;
	margin-left: 7px;
	font-size: 10px;
}
.classContent .salePrice{
	width: 73px;
	height: 25px;
	font-family: MyriadPro-Regular;
	font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 18px;
	letter-spacing: 0px;
	color: #cf0a2c;
}
.classContent .SMonCol{
	color: #cf0a2c;
    font-size: 14px;
}
.classContent .priceWrap{
    text-align: center;
	padding-bottom: 11px;
	border-bottom: 1px solid #dcdcdc;
}
.classContent .itemNoWrap{
	font-family: SourceHanSansCN-Regular;
	font-size: 12px;
	letter-spacing: -1px;
	color: #666666;
	text-align: center;
	margin: 6px 0;
}
.classTitlePadding{
	margin: 20px;
}

js页面

var vm =new Vue({
	el:'#itemWrap',
	data(){
		return{
			mainItems:{},
			newItems:[],
			topItems:[],
			classicItems:[]
		}
	},
	created() {
		this.getItem();
	},
	methods:{
		getItem:function () {
			$.ajax({
				type:'get',
				url:"../js/cargos.json",
				dataType:"json",
				success:(data)=>{
					this.mainItems = data.mainItems[0];
					this.newItems =data.newItems;
					this.topItems=data.topItems;
					this.classicItems=data.classicItems;
				},
			}) 
		}
	}
})