在前后端分离的项目中用vue写电商的搜索功能和分页

1，在mock.js中模拟数据

//搜索商品初始化数据
Mock.mock("/search-service/goods", "get", {
    "count": "@integer(100,200)",
    "data|5-15": [{
        "id|+1": 1,
        "goods_name": "@ctitle(2,6)",
        "price": "@float(0.01,9999)",
        "midlogo": "@dataImage(130x130)",
        "comment_count": "@integer(0,9999)"
    }]
})

2，api.js中发送ajax请求

//搜索商品初始化数据
function searchGoods(search){
    return axios.get("/search-service/goods",{
        params:search
    })
}

3，初始化页面参数

<script>
var vm = new Vue({
		el: "#app",
		data: {
			goods: [],	//页面所有商品信息
			totalCount: 0,//总记录数
			totalPage: 0, //总页数
			brands: [], //品牌
			specs: [],//规格数据
			search: { //搜索的数据
				catid: parseInt(location.search.match(/id=\d+/)[0].split("=")[1]),
				brand_id: "",
				spec_list: [],
				min_price: "",
				max_price: "",
				per_page: 10,
				page: 1,
				sort_by: "xl",
				sort_way: "desc"
			}
		},
			methods: {
			updataGoods(){
				searchGoods(this.search).then(res => {
				//商品信息
				this.goods = res.data.data
				//设置总的记录数
				this.totalCount = res.data.count
				//计算页数
				this.totalPage = Math.ceil(this.totalCount / this.search.per_page)

			})
			},
			}，
      created() {
			//搜索商品
		this.updataGoods()
})
</script>

4 显示商品信息

<!-- 商品列表 start-->
				<div class="goodslist mt10">
					<ul>
						<li v-for="(v,k) in goods">
							<dl>
								<dt><a :href="'goods.html?id='+ v.id"><img :src="v.midlogo" alt="" /></a></dt>
								<dd><a href="">{
  {v.goods_name}}</a></dt>
								<dd><strong>￥{
  {v.price}}</strong></dt>
								<dd><a href=""><em>已有{
  {v.comment_count}}人评价</em></a></dt>
							</dl>
						</li>

					</ul>
				</div>
				<!-- 商品列表 end-->

运行效果图