23 搜索商品的价格和销量排序

商品排序功能实现解析

最新推荐文章于 2025-11-24 02:17:16 发布

原创最新推荐文章于 2025-11-24 02:17:16 发布 · 202 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #node.js #vue.js

下面我们来做一下升序和降序这一块，首先点击价格这一块，如果是上箭头亮了，则表示商品价格从高到低排序，如果是下箭头亮了，则表示商品价格从低到高排序，这是我们用户所能感受的东西，我们并不是点击箭头而是点击 '价格这一块'，来一个切换(我们点击一下就上箭头亮，再点击一下就下箭头亮)，这些只是用户这一块一些交互的行为，作为我们程序员来说，我们要做是应该考虑哪些东西

第一，是数据方面的事情

后端根本就不知道前端交互，我们作为前端人员来说，一定要知道用户他点击的 '价格' 这个是升序还是降序，如果是升序或者是降序，你需要告诉后端，你是根据升序还是降序查询数据，前端要做的低一件事情

第二，前端要给后端传递数据(是升序还是降序) 上下箭头切换是该如何做？说白了，就是一个状态值，比如我们常用

```
0: 代表都不亮
1: 代表上箭头
2: 代表下箭头
```

我们可以通过 0,1,2进行控制，所以我们价格这一块应该是数据。

html:
<li v-for="(item,index) in searchList.data" :key="index" @click="changeTab(index)">
    <div :class="searchList.currentIndex == index ? 'active' : ''">{{item.name}}</div>
    <div class="search-filter" v-if="index != 3">
        <i class="iconfont icon-arrow_up_fat" :class="item.status == 1 ? 'active' : ''"></i>
        <i class="iconfont icon-arrow_down_fat" :class="item.status == 2 ? 'active' : ''"></i>
    </div>
</li>


script:
data() {
    return {
        goodsList: [],
        searchList: {
            currentIndex: 0,
            // 0：都亮，1：上箭头亮  2：下箭头亮
            data: [{
                    name: '综合',
                    status: 0,
                    key: 'price'
                },
                {
                    name: '价格',
                    status: 0,
                    key: 'price'
                },
                {
                    name: '销量',
                    status: 0,
                    key: 'num'
                },
                {
                    name: '筛选',
                    key: '筛选'
                }
            ]
        }
    }
},
// 计算属性 
computed: {
    orderBy() {
        // 知道当前是哪一个对象 升序: asc   降序：desc
        let obj = this.searchList.data[this.searchList.currentIndex];
        // 针对状态，判断是升序还是降序
        let val = obj.status == '1' ? 'asc' : 'desc';
        // 
        return {
            [obj.key]: val
        }
    }
},

搜索商品的价格和销量排序实现代码

1, server/routes/index.js

var express = require('express');
var router = express.Router();
var connection = require('../db/sql.js');


// const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());

const bodyParser = require('body-parser');
app.use(bodyParser.json()); // 解析请求体 

/* GET home page. */
router.get('/', function(req, res, next) {
	res.render('index', {
		title: 'Express'
	});
});

// 查询商品数据接口 后端写接口
router.get('/api/goods/shopList', function(req, res, next) {
	// 前端给后端的数据 拿到前端发过来的数据
	// let searchName = req.query.searchName;
	let [searchName, orderName] = Object.keys(req.query);
	let [name, order] = Object.values(req.query);
	// console.log(searchName, orderName, name, order);

	// 查询数据库表
	connection.query('select * from space_store where name like "%' + name +
		'%" order by "+orderName+" "+order+" ',
		function(error,
			results) {
			res.send({
				code: 0,
				data: results
			})
		})
})

// 首页推荐的数据  0==> 推荐  1==> 第一塀数据
router.get('/api/index_list/0/data/1', function(req, res, next) {
	res.send({
		code: 0,
		data: {
			topBar: [{
				id: 0,
				label: '推荐'
			}, {
				id: 1,
				label: '大红袍'
			}, {
				id: 2,
				label: '铁观音'
			}, {
				id: 3,
				label: '绿茶'
			}, {
				id: 4,
				label: '普洱'
			}, {
				id: 5,
				label: '茶具'
			}, {
				id: 6,
				label: '花茶'
			}, {
				id: 7,
				label: '红茶'
			}, {
				id: 8,
				label: '设计'
			}, ],
			// 这是我们的swiper
			data: [{ // 这是swiper数据
				id: 0,
				type: 'swiperList',
				data: [{
					id: 1,
					imgUrl: './images/swiper4.png'
				}, {
					id: 2,
					imgUrl: './images/swiper5.png'
				}, {
					id: 3,
					imgUrl: './images/swiper6.png'
				}],
			}, { // 这是Icons数据
				id: 1,
				type: 'iconsList',
				data: [{
					id: 1,
					title: '自饮茶',
					imgUrl: './images/icons1.png'
				}, {
					id: 2,
					title: '茶具',
					imgUrl: './images/icons2.png'
				}, {
					id: 3,
					title: '茶礼盒',
					imgUrl: './images/icons3.png'
				}, {
					id: 4,
					title: '领取福利',
					imgUrl: './images/icons4.png'
				}, {
					id: 5,
					title: '官方验证',
					imgUrl: './images/icons5.png'
				}],
			}, { // 爆款推荐
				id: 2,
				type: 'recommendList',
				data: [{
					id: 1,
					name: '龙井1号铁观音250g',
					content: '鲜爽甘醇 口粮首先',
					price: '68',
					imgUrl: './images/recommend2.png'
				}, {
					id: 2,
					name: '龙井2号铁观音250g',
					content: '鲜爽甘醇 口粮首先',
					price: '58',
					imgUrl: './images/recommend2.png'
				}]
			}, {
				// 猜你喜欢
				id: 3,
				type: 'likeList',
				data: [{
					id: 1,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}, {
					id: 2,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}, {
					id: 3,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}]
			}]
		}
	})
});

// 首页大红袍的数据  1==> 大红袍  1==> 第一塀数据
router.get('/api/index_list/1/data/1', function(req, res, next) {
	res.send({
		code: 0,
		data: {
			data: [{
				id: 1,
				type: 'adList',
				data: [{
					id: 1,
					imgUrl: './images/dhp.png'
				}]
			}, {
				// 猜你喜欢
				id: 2,
				type: 'likeList',
				data: [{
					id: 1,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}, {
					id: 2,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}, {
					id: 3,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}]
			}]
		}
	})
});

// 首页铁观音的数据  2==> 铁观音  1==> 第一塀数据
router.get('/api/index_list/2/data/1', function(req, res, next) {
	res.send({
		code: 0,
		data: {
			data: [{
				id: 1,
				type: 'adList',
				data: [{
					id: 1,
					imgUrl: './images/tieguanyin1.png'
				}]
			}, { // 这是Icons数据
				id: 3,
				type: 'iconsList',
				data: [{
					id: 1,
					title: '自饮茶',
					imgUrl: './images/icons1.png'
				}, {
					id: 2,
					title: '茶具',
					imgUrl: './images/icons2.png'
				}, {
					id: 3,
					title: '茶礼盒',
					imgUrl: './images/icons3.png'
				}, {
					id: 4,
					title: '领取福利',
					imgUrl: './images/icons4.png'
				}, {
					id: 5,
					title: '官方验证',
					imgUrl: './images/icons5.png'
				}]
			}, {
				// 猜你喜欢
				id: 2,
				type: 'likeList',
				data: [{
					id: 1,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}, {
					id: 2,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}, {
					id: 3,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}]
			}]
		}
	})
});

// 首页绿茶的数据  3==> 绿茶  1==> 第一塀数据
router.get('/api/index_list/3/data/1', function(req, res, next) {
	res.send({
		code: 0,
		data: {
			data: [{
				id: 1,
				type: 'adList',
				data: [{
					id: 1,
					imgUrl: './images/green_tea.png'
				}]
			}, { // 这是Icons数据
				id: 3,
				type: 'iconsList',
				data: [{
					id: 1,
					title: '自饮茶',
					imgUrl: './images/icons1.png'
				}, {
					id: 2,
					title: '茶具',
					imgUrl: './images/icons2.png'
				}, {
					id: 3,
					title: '茶礼盒',
					imgUrl: './images/icons3.png'
				}, {
					id: 4,
					title: '领取福利',
					imgUrl: './images/icons4.png'
				}, {
					id: 5,
					title: '官方验证',
					imgUrl: './images/icons5.png'
				}]
			}, {
				// 猜你喜欢
				id: 2,
				type: 'likeList',
				data: [{
					id: 1,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}, {
					id: 2,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}, {
					id: 3,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}]
			}]
		}
	})
});

// 首页普洱的数据  4==> 普洱  1==> 第一塀数据
router.get('/api/index_list/4/data/1', function(req, res, next) {
	res.send({
		code: 0,
		data: {
			data: [{
				id: 1,
				type: 'adList',
				data: [{
					id: 1,
					imgUrl: './images/puer.png'
				}]
			}, { // 这是Icons数据
				id: 3,
				type: 'iconsList',
				data: [{
					id: 1,
					title: '自饮茶',
					imgUrl: './images/icons1.png'
				}, {
					id: 2,
					title: '茶具',
					imgUrl: './images/icons2.png'
				}, {
					id: 3,
					title: '茶礼盒',
					imgUrl: './images/icons3.png'
				}, {
					id: 4,
					title: '领取福利',
					imgUrl: './images/icons4.png'
				}, {
					id: 5,
					title: '官方验证',
					imgUrl: './images/icons5.png'
				}]
			}, {
				// 猜你喜欢
				id: 2,
				type: 'likeList',
				data: [{
					id: 1,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}, {
					id: 2,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}, {
					id: 3,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}]
			}]
		}
	})
});

// 首页茶具的数据  5==> 茶具  1==> 第一塀数据
router.get('/api/index_list/5/data/1', function(req, res, next) {
	res.send({
		code: 0,
		data: {
			data: [{
				id: 1,
				type: 'adList',
				data: [{
					id: 1,
					imgUrl: './images/tea_sets.png'
				}]
			}, { // 这是Icons数据
				id: 3,
				type: 'iconsList',
				data: [{
					id: 1,
					title: '自饮茶',
					imgUrl: './images/icons1.png'
				}, {
					id: 2,
					title: '茶具',
					imgUrl: './images/icons2.png'
				}, {
					id: 3,
					title: '茶礼盒',
					imgUrl: './images/icons3.png'
				}, {
					id: 4,
					title: '领取福利',
					imgUrl: './images/icons4.png'
				}, {
					id: 5,
					title: '官方验证',
					imgUrl: './images/icons5.png'
				}]
			}, {
				// 猜你喜欢
				id: 2,
				type: 'likeList',
				data: [{
					id: 1,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}, {
					id: 2,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}, {
					id: 3,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}]
			}]
		}
	})
});

// 首页花茶的数据  6==> 花茶  1==> 第一塀数据
router.get('/api/index_list/6/data/1', function(req, res, next) {
	res.send({
		code: 0,
		data: {
			data: [{
				id: 1,
				type: 'adList',
				data: [{
					id: 1,
					imgUrl: './images/scented.png'
				}]
			}, { // 这是Icons数据
				id: 3,
				type: 'iconsList',
				data: [{
					id: 1,
					title: '自饮茶',
					imgUrl: './images/icons1.png'
				}, {
					id: 2,
					title: '茶具',
					imgUrl: './images/icons2.png'
				}, {
					id: 3,
					title: '茶礼盒',
					imgUrl: './images/icons3.png'
				}, {
					id: 4,
					title: '领取福利',
					imgUrl: './images/icons4.png'
				}, {
					id: 5,
					title: '官方验证',
					imgUrl: './images/icons5.png'
				}]
			}, {
				// 猜你喜欢
				id: 2,
				type: 'likeList',
				data: [{
					id: 1,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}, {
					id: 2,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}, {
					id: 3,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}]
			}]
		}
	})
});

// 首页红茶的数据  7==> 红茶  1==> 第一塀数据
router.get('/api/index_list/7/data/1', function(req, res, next) {
	res.send({
		code: 0,
		data: {
			data: [{
				id: 1,
				type: 'adList',
				data: [{
					id: 1,
					imgUrl: './images/jinjunmei.png'
				}]
			}, { // 这是Icons数据
				id: 3,
				type: 'iconsList',
				data: [{
					id: 1,
					title: '自饮茶',
					imgUrl: './images/icons1.png'
				}, {
					id: 2,
					title: '茶具',
					imgUrl: './images/icons2.png'
				}, {
					id: 3,
					title: '茶礼盒',
					imgUrl: './images/icons3.png'
				}, {
					id: 4,
					title: '领取福利',
					imgUrl: './images/icons4.png'
				}, {
					id: 5,
					title: '官方验证',
					imgUrl: './images/icons5.png'
				}]
			}, {
				// 猜你喜欢
				id: 2,
				type: 'likeList',
				data: [{
					id: 1,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}, {
					id: 2,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}, {
					id: 3,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}]
			}]
		}
	})
});

// 首页设计的数据  8==> 设计   1==> 第一塀数据
router.get('/api/index_list/8/data/1', function(req, res, next) {
	res.send({
		code: 0,
		data: {
			data: [{
				id: 1,
				type: 'adList',
				data: [{
					id: 1,
					imgUrl: './images/design.png'
				}]
			}, { // 这是Icons数据
				id: 3,
				type: 'iconsList',
				data: [{
					id: 1,
					title: '自饮茶',
					imgUrl: './images/icons1.png'
				}, {
					id: 2,
					title: '茶具',
					imgUrl: './images/icons2.png'
				}, {
					id: 3,
					title: '茶礼盒',
					imgUrl: './images/icons3.png'
				}, {
					id: 4,
					title: '领取福利',
					imgUrl: './images/icons4.png'
				}, {
					id: 5,
					title: '官方验证',
					imgUrl: './images/icons5.png'
				}]
			}, {
				// 猜你喜欢
				id: 2,
				type: 'likeList',
				data: [{
					id: 1,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}, {
					id: 2,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}, {
					id: 3,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}]
			}]
		}
	})
});


module.exports = router;






2, views/search/Search.vue

<template>
	<div class="search-list">
		<div class="headers">
			<Header></Header>
			<ul>
				<li v-for="(item,index) in searchList.data" :key="index" @click="changeTab(index)">
					<div :class="searchList.currentIndex == index ? 'active' : ''">{{item.name}}</div>
					<div class="search-filter" v-if="index != 3">
						<i class="iconfont icon-arrow_up_fat" :class="item.status == 1 ? 'active' : ''"></i>
						<i class="iconfont icon-arrow_down_fat" :class="item.status == 2 ? 'active' : ''"></i>
					</div>
				</li>
				<!-- <li>
					<div>综合</div>
					<div class="search-filter">
						<i class="iconfont icon-arrow_down_fat"></i>
					</div>
				</li>
				<li>
					<div>价格</div>
					<div class="search-filter">
						<i class="iconfont icon-arrow_up_fat"></i>
						<i class="iconfont icon-arrow_down_fat"></i>
					</div>
				</li>
				<li>
					<div>销量</div>
					<div class="search-filter">
						<i class="iconfont icon-arrow_up_fat"></i>
						<i class="iconfont icon-arrow_down_fat"></i>
					</div>
				</li>
				<li>
					<div>筛选</div>
				</li> -->
			</ul>
		</div>
		<section>
			<ul>
				<li v-for="(item,index) in goodsList" :key="index">
					<img :src="item.imgUrl" alt="" />
					<h3>{{item.name}}</h3>
					<div class="price">
						<div>
							<span>￥</span>
							<b>{{item.price}}</b>
						</div>
						<div>立即购买</div>
					</div>
				</li>
			</ul>
		</section>
		<Tabbar></Tabbar>
	</div>
</template>

<script>
	import Header from '@/components/search/Header.vue';
	import Tabbar from '@/components/common/Tabbar.vue';
	import http from '@/common/api/request.js';
	export default {
		data() {
			return {
				goodsList: [],
				searchList: {
					currentIndex: 0,
					// 0：都亮，1：上箭头亮  2：下箭头亮
					data: [{
							name: '综合',
							status: 0,
							key: 'price'
						},
						{
							name: '价格',
							status: 0,
							key: 'price'
						},
						{
							name: '销量',
							status: 0,
							key: 'num'
						},
						{
							name: '筛选',
							key: '筛选'
						}
					]
				}
			}
		},
		// 计算属性 
		computed: {
			orderBy() {
				// 知道当前是哪一个对象 升序: asc   降序：desc
				let obj = this.searchList.data[this.searchList.currentIndex];
				// 针对状态，判断是升序还是降序
				let val = obj.status == '1' ? 'asc' : 'desc';
				// 
				return {
					[obj.key]: val
				}
			}
		},
		components: {
			Header,
			Tabbar
		},
		created() {
			this.getData();
		},
		methods: {
			getData() {

				http.$axios({
					// 请求接口
					url: '/api/goods/shopList',
					// 前端给后端传递的数据
					params: {
						searchName: this.$route.query.key,
						...this.orderBy
					}
				}).then(res => {
					// 后端给前端返回的数据 (错误：undefined)
					this.goodsList = res;
					// console.log(res);
				})
			},
			changeTab(index) {
				this.searchList.currentIndex = index;
				// 点击的下标对应数据的拿一个
				let item = this.searchList.data[index];
				// console.log(item);
				// 取消所有的状态值=>都变成0				
				this.searchList.data.forEach((v, i) => {
					// console.log(v, i);
					if (i != index) {
						v.status = 0;
					}
				})
				// 当前点击的改变状态
				if (index == this.searchList.currentIndex) {
					item.status = item.status == 1 ? 2 : 1;
				}
				// 发送请求进行数据排序 或者渲染数据
				this.getData();
			}
		},
		watch: {
			$route() {
				this.getData();
			}
		}
	}
</script>

<style scoped>
	.search-list {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}

	.headers ul {
		/* 在一行 */
		display: flex;
		/* 均分 首尾距离一半 */
		justify-content: space-around;
		padding: 20px 0;
		font-size: 16px;
		font-weight: 600;
	}

	.headers ul li {
		display: flex;
		align-items: center;
	}

	.headers ul li>div {
		padding: 0 4px;
	}

	.headers ul li .search-filter {
		display: flex;
		flex-direction: column;
		font-size: 12px;
		color: gray;
	}

	section {
		flex: 1;
		overflow: hidden;
		background-color: #f5f5f5;
	}

	section ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	section ul li {
		display: flex;
		flex-direction: column;
		/* 水平方向居中 */
		justify-content: center;
		/* 垂直方向居中 */
		align-items: center;
		/* 盒子模型 */
		box-sizing: border-box;
		width: 50%;
		padding: 10px;
	}

	section ul li h3 {
		width: 100%;
		font-size: 14px;
		font-weight: 400;
		color: #222;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	section ul li img {
		width: 168px;
		height: 168px;
	}

	section ul li .price {
		display: flex;
		justify-content: space-between;
		padding: 10px 0;
		width: 100%;
		font-size: 16px;
	}

	section ul li .price div:first-child span {
		color: #b0352f;
	}

	section ul li .price div:first-child b {
		color: #b0352f;
		font-size: 18px;
	}

	section ul li .price div:last-child {
		padding: 3px 6px;
		color: #f5f5f5;
		background-color: #b0352f;
		/* 加圆角 */
		border-radius: 10px;
	}

	.active {
		color: red;
	}
</style>