本文详细介绍如何使用Vue.js结合HTML、CSS及JavaScript等前端技术搭建并完善一个优惠券展示平台，包括开发环境配置、静态页面准备、Vue实例创建、数据接口请求及页面渲染等关键步骤。
本章开始进入正题，假设你已经看过上一篇开发环境的搭建，严格来说，是服务器的搭建。而关于html，div,css, vue等前端代码的编写，都使用sublime作文编辑器，同时也假设你已经学会了html,div,css，javascript,对vue也有了解。
在此之前，需要鸣谢一下公司前端大神的提点，这是他的博客http://www.zfowed.com
一、准备静态页面
在之前的nginx的html目录下面建立了一个叫study的目录，并且，在study目录里面建立index.html文件。无论之前文件里面的内容是怎么样的，现在需要把它用以下的内容覆盖它。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta content="telephone=no" name="format-detection">
<title>淘优惠券-首页</title>
<link href="css/Cbase.css" type="text/css" rel="stylesheet">
<link href="css/index.css" type="text/css" rel="stylesheet">
<link href="css/swiper.min.css" type="text/css" rel="stylesheet">
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/base.js" type="text/javascript"></script>
<script src="js/swiper.min.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
</head>
<body>
<!--ftop开始-->
<div class="ftop">
<div class="index_search index_search01">
<a class="back" onClick="javascript:history.back(-1);"><img src="images/icon_03.png"></a>
<div>
<input type="text" placeholder="请输入您要搜索的产品">
<input class="dw" onclick="document.location='search_list.html'" type="button" value=" "></div>
</div>
<div style="clear: both;"></div>
</div>
<!--ftop开始-->
<div class="search_list">
<p><a class="on"><span>综合</span></a><a><span>高销量</span></a><a><span>最新</span></a><a><span>优惠</span></a></p>
<ul>
<li><a href="product_xq.html"><img src="http://img.alicdn.com/bao/uploaded/i2/3107636833/O1CN01tFBVpM20LYqzTlKQV_!!0-item_pic.jpg">
<div class="search_item">
<p>夏季冰丝阔腿裤女宽松显瘦高腰垂感拖地长裤坠感直筒九分休闲裤子</p>
<h2><i>￥</i><b>185.00</b><span>满9元减1元</span></h2>
</div>
</a></li>
</ul>
</div>
</body>
<script>
</script>
</html>
覆盖完成之后，当你再次访问http://127.0.0.1/study/index.html的时候发现，页面很丑陋，这是因为没有js和相关样式。
可以通过访问这个链接，下载样式和图片，跟index.html同一级存放。
资源放在百度网盘里面
链接：https://pan.baidu.com/s/10I1d2J1pmo-HNkHYAhcU6Q
提取码：6g87
复制这段内容后打开百度网盘手机App，操作更方便哦
二、引入vue
这里是通过CDN的方式引入vue，引入vue的方式还有npm。
在head标签里面加入
//vue cdn
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
//配合使用的网络访问工具axios
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
//网络请求防抖动
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
//图片懒加载
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
//自定义配置 ，
<script src="js/config.js"></script>
//用到的组件
<script src="js/component.js"></script>
三、js内容解释
js/config.js里面的内容
配置文件里面仅有这行代码，是访问接口的域名，给axios配置这个变量值之后，后面使用axios去访问接口的时候，就不需要再拼接它，省些代码。
axios.defaults.baseURL = 'https://www.junjiex.cn';
js/component.js后面用到再解释。
四、修改html
在请求接口数据之前，需要创建一个vue对象，让vue对象接管指定了id的标签范围。
在body标签里面新增一个div标签，标签的id叫app。
<body>
<div id="app">
....
</div>
</body>
index.html文件里面，body标签的完整代码如下：
<body>
<div id="app">
<!--ftop开始-->
<div class="ftop">
<div class="index_search index_search01">
<a class="back" onClick="javascript:history.back(-1);"><img src="images/icon_03.png"></a>
<div>
<input type="text" placeholder="请输入您要搜索的产品">
<input class="dw" onclick="document.location='search_list.html'" type="button" value=" "></div>
</div>
<div style="clear: both;"></div>
</div>
<!--ftop开始-->
<div class="search_list">
<p><a class="on"><span>综合</span></a><a><span>高销量</span></a><a><span>最新</span></a><a><span>优惠</span></a></p>
<ul>
<li><a href="product_xq.html"><img src="http://img.alicdn.com/bao/uploaded/i2/3107636833/O1CN01tFBVpM20LYqzTlKQV_!!0-item_pic.jpg">
<div class="search_item">
<p>夏季冰丝阔腿裤女宽松显瘦高腰垂感拖地长裤坠感直筒九分休闲裤子</p>
<h2><i>￥</i><b>185.00</b><span>满9元减1元</span></h2>
</div>
</a></li>
</ul>
</div>
</div>
</body>
可以看到，在原来的基础之上，新增了一个div, 它的id是app，在script标签里面编写如下代码
<script>
let vm = new Vue({
el: "#app",
data: {}
});
</script>
五、请求接口
请求数据接口，返回优惠券数据列表，接口里面的数据目前是可以真实交易的商品数据，接口完整地址：
https://www.junjiex.cn/coupon/list?start=1&size=10&tab=0&orderBy=
接口参数解析
start:开始页
size:每页获取数量
tab：0-综合，1-高销量，2-最新，3-优惠
orderBy：排序，当tab=3时有用，值是DESC(倒序)，ASC(正序）
修改script，完整代码为：
<script>
let vm = new Vue({
el: "#app",
data: {
start: 1,
size: 10,
tab: 0,
orderBy: "",
goodsList: [],
},
created: function () {
this.listCouponGoods();
},
methods:{
listCouponGoods: function () {
axios.get("/coupon/list?start=" + this.start + "&size=" + this.size + "&tab=" + this.tab + "&orderBy=" + this.orderBy)
.then(function (response) {
vm.goodsList = vm.goodsList.concat(response.data);
})
.catch(function (error) {
console.info(error);
})
}
}
});
</script>
数据回来之后，存放到了goodsList里面去，将会用来渲染到界面上，所以界面上也要进行改进，在界面上找到下面这个标签，并修改里面的内容
<div class="search_list">
<p><a><span>综合</span></a><a><span>高销量</span></a><a><span>最新</span></a><a><span>优惠</span></a></p>
<ul>
<li v-for="item in goodsList">
<a :href="'product_xq.html?id='+item.id">
<img v-lazy="item.goodsPic">
<div class="search_item">
<p>{{item.goodsName}}</p>
<h2><i>￥</i><b>{{item.goodsPrice}}</b><span>{{item.couponValue}}</span></h2>
</div>
</a>
</li>
</ul>
</div>
修改完成之后，保存，刷新，界面就出来了。
扫一扫
1058
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
