在前后端分离的项目中用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，初始化页面参数
4 显示商品信息
-
![]()
- {{v.goods_name}}
- ￥{{v.price}}
- 已有{{v.comment_count}}人评价
运行效果图
5,分页
【第一步】引入js库文件
ElementUI是vue的UI库，必须依赖Vue，所以使用ElementUI必须先导入Vue，然后导入ElementUI资源文件
http://element.eleme.io/#/zh-CN(这是学习网站)
5.1 根据官方网址先引入两个样式
5.2 在分页的位置导入分页代码
page-size 每页显示条目个数，支持 .sync 修饰符
page-sizes 每页显示个数选择器的选项设置
current-page 当前页数，支持 .sync 修饰符
layout 组件布局，子组件名用逗号分隔
total 总条目数
5.3 根据分析：需要的操作如下
1 实现handleSizeChange函数-每页显示条数修改触发的函数
handleSizeChange(val) {
this.search.per_page = val
this.updataGoods()
},
handleCurrentChange(val) {
this.search.page = val
this.updataGoods()
}
6，商品排序–点击选中
【实现思路】将按钮数据与sort_by 和sort_way进行绑定，当点击按钮更换的时候，更换sort_by 和sort_way的值
6.2.
setSort(sortBy) {
//设置排序数据
this.search.sort_by = sortBy
// 如果点击的是价格就修改排序方式，否则就设置为降序
if (sortBy == 'jg') {
// 修改排序方式
this.search.sort_way = this.search.sort_way == "desc" ? "asc" : "desc"
} else {
// 只要不是价格就设置成降序
this.search.sort_way = "desc"
}
// 更新数据
this.updataGoods()
},
7， 搜索商品-从服务器获取品牌
分析：品牌和分类是相关的，所以需要根据分类id查找出品牌
7.2
//获得品牌
Mock.mock(/\/brands\/\d+/, "get", {
"data|5-15": [{
"id": "@id",
"brand_name": "@ctitle(2,6)",
"logo": "@dataImage(98x35)"
}]
})
7.3
//获得品牌
function getBrand(catid) {
return axios.get("/web-service/brands/" + catid)
}
7.4
created() {
this.updataGoods()
//获得品牌信息
getBrand(this.search.catid).then(res => {
this.brands = res.data.data
}),
//获取规格数据
getSpecifications(this.search.catid).then(res => {
this.specs = res.data.data
})
}
})
8，在页面中显示数据
重置筛选条件 商品筛选
- 品牌：
- 不限
- {{v.brand_name}}
8.1 品牌的选中状态
在这里遇到一个 You may have an infinite update loop in a component render function.无限循环，原因在写少写一个等号
鉴于vue非常的灵活，
- 品牌：
- 不限
- {{v.brand_name}}
8.2
setBrand(id){
this.search.brand_id = id
this.updataGoods()
},
9，搜索商品-获取规格
准备数据
//规格数据
Mock.mock(/\/specifications\/\d+/, "get", {
"data|2-5": [{
"id": "@id",
"spec_name": "@ctitle(2,6)",
"selectd": "", //当前勾选的规格的值
"options|5-15":[{
"id":"@id",
"option_name":"@ctitle"
}]
}]
})
//规格数据
function getSpecifications(catid){
return axios.get("/web-service/specifications/" + catid)
}
- {{v.spec_name}}：
- 不限
-
{{v1.option_name}}
9.2
//设置规格
setSpec(k,value) {
// 设置当前点击规格的值
this.specs[k].selected = value
// 调用updataGoods前，先将specs给spec_list
this.search.spec_list = this.specs
this.updataGoods()
},
