46 修改购物车数据

哆啦A梦15882025-11-17 10:05
首先，修改购物车数据，比如我们将商品数量增多，我们增加到8个，然后我们去刷新一下我们的页面，此时他又回到了一个，这显然是不对的，如果说他是8个，我们的数据库里面就应该存储8个，这样的话，你刷新页面的时候，我们的数据是从数据库中获取的，所以此时他就会显示8个，这就是我们为什么要修改数据的原因，当用户在页面点击了加也好，减也吧，每次数据的修改都要在数据库中进行一个存储，这就是这节课的主要内容，接下来，我们来看具体如何实现？
要修改数量，首先我们要发送请求，要把当前的购物车的id以及修改后的数量=>传递给后端，我们要将当前用户购物车的id以及修改的数量获取到，默认有两个参数，一个是value,一个是detail
template:
复制代码 
<van-stepper @change="changeNum" v-model="item.goods_num" integer />

传递两参数
<van-stepper @change="changeNum($event,item)" v-model="item.goods_num" integer />

item: 当前的每一个商品

script:

复制代码 
methods: {
	// 修改数量
    changeNum(value, detail) {
        // 发送请求，前端将当前用户的购物车的id以及修改后的数量=>传递给后端
        console.log(value, detail);
    }
}

change事件的两个默认参数解释
value: 代表商品数量 number
detail: 代表商品的名称 object
item: 当前用户购物车的每一个商品



methods: {
	// 修改数量
    changeNum(value, item) {
        // 发送请求，前端将当前用户的购物车的id以及修改后的数量=>传递给后端
        console.log(value, item);
    }
}

可以获取到商品的数量以及商品的信息


methods: {
	// 修改数量
    changeNum(value, item) {
        // 发送请求，前端将当前用户的购物车的id以及修改后的数量=>传递给后端
        console.log(value, item.id);
    }
}

value 就是修改后的数量
item.id 就是购物车商品的id
打印结果如下图所示

Stepper 步进器

介绍

步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。

引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

复制代码 
import { createApp } from 'vue';
import { Stepper } from 'vant';

const app = createApp();
app.use(Stepper);

代码演示

基础用法

通过 v-model 绑定输入值，可以通过 change 事件监听到输入值的变化。

template:
复制代码 
<van-stepper v-model="value" />
script:
复制代码 
import { ref } from 'vue';

export default {
  setup() {
    const value = ref(1);
    return { value };
  },
};

步长设置

通过 step 属性设置每次点击增加或减少按钮时变化的值，默认为 1。

复制代码 
<van-stepper v-model="value" step="2" />

限制输入范围

通过 min 和 max 属性限制输入值的范围，默认超出范围后会自动校正最大值或最小值，通过 auto-fixed 可以关闭自动校正。

复制代码 
<van-stepper v-model="value" min="5" max="8" />

限制输入整数

设置 integer 属性后，输入框将限制只能输入整数。

复制代码 
<van-stepper v-model="value" integer />

禁用状态

通过设置 disabled 属性来禁用步进器，禁用状态下无法点击按钮或修改输入框。

复制代码 
<van-stepper v-model="value" disabled />

​

​

禁用输入框

通过设置 disable-input 属性来禁用输入框，此时按钮仍然可以点击。

复制代码 
<van-stepper v-model="value" disable-input />

固定小数位数

通过设置 decimal-length 属性可以保留固定的小数位数。

复制代码 
<van-stepper v-model="value" step="0.2" :decimal-length="1" />

​

​

自定义大小

通过 input-width 属性设置输入框宽度，通过 button-size 属性设置按钮大小和输入框高度。

复制代码 
<van-stepper v-model="value" input-width="40px" button-size="32px" />

异步变更

通过 before-change 属性可以在输入值变化前进行校验和拦截。

复制代码 
<van-stepper v-model="value" :before-change="beforeChange" />
import { ref } from 'vue';
import { closeToast, showLoadingToast } from 'vant';

export default {
  setup() {
    const value = ref(1);

    const beforeChange = (value) => {
      showLoadingToast({ forbidClick: true });

      return new Promise((resolve) => {
        setTimeout(() => {
          closeToast();
          // 在 resolve 函数中返回 true 或 false
          resolve(true);
        }, 500);
      });
    };

    return {
      value,
      beforeChange,
    };
  },
};

圆角风格

将 theme 设置为 round 来展示圆角风格的步进器。

复制代码 
<van-stepper v-model="value" theme="round" button-size="22" disable-input />

Events

事件名 说明 回调参数
change 当绑定值变化时触发的事件 value: string, detail: { name: string }
overlimit 点击不可用的按钮时触发 -
plus 点击增加按钮时触发 -
minus 点击减少按钮时触发 -
focus 输入框聚焦时触发 event: Event
blur 输入框失焦时触发 event: Event

API

Props

参数 说明 类型 默认值
v-model 当前输入的值 number | string -
min 最小值 number | string 1
max 最大值 number | string -
auto-fixed 是否自动校正超出限制范围的数值，设置为 false 后输入超过限制范围的数值将不会自动校正 boolean true
default-value 初始值，当 v-model 为空时生效 number | string 1
step 步长，每次点击时改变的值 number | string 1
name 标识符，通常为一个唯一的字符串或数字，可以在 change 事件回调参数中获取 number | string -
input-width 输入框宽度，默认单位为 px number | string 32px
button-size 按钮大小以及输入框高度，默认单位为 px number | string 28px
decimal-length 固定显示的小数位数 number | string -
theme 样式风格，可选值为 round string -
placeholder 输入框占位提示文字 string -
integer 是否只允许输入整数 boolean false
disabled 是否禁用步进器 boolean false
disable-plus 是否禁用增加按钮 boolean false
disable-minus 是否禁用减少按钮 boolean false
disable-input 是否禁用输入框 boolean false
before-change 输入值变化前的回调函数，返回 false 可阻止输入，支持返回 Promise (value: number | string) => boolean | Promise<boolean> false
show-plus 是否显示增加按钮 boolean true
show-minus 是否显示减少按钮 boolean true
show-input 是否显示输入框 boolean true
long-press 是否开启长按手势，开启后可以长按增加和减少按钮 boolean true
allow-empty 是否允许输入的值为空，设置为 true 后允许传入空字符串 boolean false

类型定义

组件导出以下类型定义：

复制代码 
import type { StepperTheme, StepperProps } from 'vant';

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称 默认值 描述
--van-stepper-background var(--van-active-color) -
--van-stepper-button-icon-color var(--van-text-color) -
--van-stepper-button-disabled-color var(--van-background) -
--van-stepper-button-disabled-icon-color var(--van-gray-5) -
--van-stepper-button-round-theme-color var(--van-primary-color) -
--van-stepper-input-width 32px -
--van-stepper-input-height 28px -
--van-stepper-input-font-size var(--van-font-size-md) -
--van-stepper-input-line-height normal -
--van-stepper-input-text-color var(--van-text-color) -
--van-stepper-input-disabled-text-color var(--van-text-color-3) -
--van-stepper-input-disabled-background var(--van-active-color) -
--van-stepper-radius var(--van-radius-md) -

常见问题

为什么 value 有时候会变成 string 类型？

这是因为用户输入过程中可能出现小数点或空值，比如 1.，这种情况下组件会抛出字符串类型。

如果希望 value 保持 number 类型，可以在 v-model 上添加 number 修饰符：

复制代码 
<van-stepper v-model.number="value" />
修改数量的前端接口代码
复制代码 
template:
<van-stepper @change="changeNum($event,item)" v-model="item.goods_num" integer />
复制代码 
script:
methods: {
    // 修改数量
    changeNum(value, item) {
        // 发送请求，前端将当前用户的购物车的id以及修改后的数量=>传递给后端
        // value 就是修改后的数量   item.id 就是购物车商品的id
        // console.log(value, item.id);
        // 发送请求 前端将 value 和 item.id 传递给后端
        http.$axios({
            // 前端给后端查询购物车数据接口发送请求
            url: '/api/updateNum',
            method: 'POST',
            // 查询当前用户购物车数据，要带上 token
            headers: {
                token: true
            },
            data: {
                id: item.id,
                num: value
            }
        }).then(res => {
            console.log(res);
        });
    }
}

修改数据库字段数量的sql语句

复制代码 
语法： update 要修改数据库表名 set 要修改的字段=replace(字段名，旧数据，新数据) where 条件（比如 id=${id}）;

`update goods_cart set goods_num=replace(goods_num,${num},${changeNum}) where id=${id});`
修改购物车数据 实现代码如下
复制代码 
1, src/views/Cart.vue
<template>
	<div class="cart container">
		<header @click="$router.back()">
			<i class="iconfont icon-a-huaban1fuben44"></i>
			<span>购物车</span>
			<span @click="isNavBar" v-text="isNavStatus ? '完成' : '编辑'"></span>
		</header>
		<section>
			<!-- <section v-if="list.length"> -->
			<div class="cart-title">
				<!-- {{isCheckedAll}} -->
				<van-checkbox @click="checkAllFn" :value="isCheckedAll"></van-checkbox>
				<span>商品</span>
			</div>
			<ul>
				<li v-for="(item,index) in list" :key="index">
					<div class="check">
						<van-checkbox @click="checkItem(index)" v-model="item.checked"></van-checkbox>
					</div>
					<h2>
						<img :src="item.imgUrl" alt="" />
					</h2>
					<div class="goods">
						<div class="goods-title">
							<span>{{item.goods_name}}</span>
							<!-- 单个删除 -->
							<i class="iconfont icon-shanchu1" @click="delGoodsFn(item.id)"></i>
						</div>
						<div class="goods-price">￥{{item.goods_price}}</div>
						<van-stepper @change="changeNum($event,item)" v-model="item.goods_num" integer />
					</div>
				</li>
			</ul>
			<h1>
				没有购物车数据
				<router-link to="/home">去首页逛逛吧</router-link>
			</h1>
			<!-- <section v-else>
				没有购物车数据
				<router-link to="/home">去首页逛逛吧</router-link>
			</section> -->
		</section>
		<footer v-if="list.length">
			<div class="radio">
				<van-checkbox @click="checkAllFn" :value="isCheckedAll"></van-checkbox>
				<!-- <van-checkbox v-model="checked"></van-checkbox> -->
			</div>
			<div class="total" v-show="!isNavStatus">
				<div>共有
					<span class="total-active">{{total.num}}</span>
					件商品
				</div>
				<div>
					<span>总计:</span>
					<span class="total-active">￥{{total.price.toFixed(2)}}+0茶币</span>
				</div>
			</div>
			<!-- <div class="order">{{isNavStatus ? "删除" : "去结算"}}</div> -->
			<div class="order" v-if="isNavStatus" @click="delGoodsFn">删除</div>
			<div class="order" v-else>去结算</div>
		</footer>
		<!-- <Tabbar></Tabbar> -->
	</div>
</template>

<script>
	import http from '@/common/api/request.js'
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex';
	export default {
		name: "Cart",
		data() {
			return {
				isNavStatus: false,
				checked: true
			}
		},
		// 调用 获取 list 的值
		computed: {
			...mapState({
				list: state => state.cart.list
			}),
			...mapGetters(['isCheckedAll', 'total'])
		},
		created() {
			// console.log(11);
			this.getData();
		},
		methods: {
			// 使用这个方法
			...mapMutations(['cartList', 'checkItem']),
			...mapActions(['checkAllFn', 'delGoodsFn']),

			// 前端给后端发送请求，查询某个用户
			async getData() {
				// 发送请求
				let res = await http.$axios({
					// 前端给后端查询购物车数据接口发送请求
					url: '/api/selectCart',
					method: 'POST',
					// 查询当前用户购物车数据，要带上 token
					headers: {
						token: true
					}
				});

				// 循环 前端添加一项 'checked' 因为前端给后端打交道 (交互) 
				// 将数据与结构进行了重构，前端添加了一项 'checked' 
				// 每一个购物车数据都有一个 'checked:true',通过他我们就可以知道他是选中的
				res.data.forEach(v => {
					// 每一项加一个 'checked'
					v['checked'] = true;
				})

				// console.log(res.data);
				this.cartList(res.data);
			},
			// 点击编辑||完成
			isNavBar() {
				this.isNavStatus = !this.isNavStatus;
			},
			// 修改数量
			changeNum(value, item) {
				// 发送请求，前端将当前用户的购物车的id以及修改后的数量=>传递给后端
				// value 就是修改后的数量   item.id 就是购物车商品的id
				// console.log(value, item.id);
				// 发送请求 前端将 value 和 item.id 传递给后端
				http.$axios({
					// 前端给后端查询购物车数据接口发送请求
					url: '/api/updateNum',
					method: 'POST',
					// 查询当前用户购物车数据，要带上 token
					headers: {
						token: true
					},
					data: {
						id: item.id,
						num: value
					}
				}).then(res => {
					console.log(res);
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	header {
		display: flex;
		// 左中右结构
		justify-content: space-between;
		// 垂直居中
		align-items: center;
		height: 44px;
		color: #fff;
		background-color: #b0352f;

		i {
			padding: 0 20px;
			font-size: 24px;
		}

		span {
			padding: 0 20px;
			font-size: 16px;
		}
	}

	section {
		background-color: #f5f5f5;

		.cart-title {
			display: flex;
			padding: 20px;

			span {
				padding: 0 15px;
				font-size: 18px;
				font-weight: 500;
			}
		}

		ul {
			display: flex;
			flex-direction: column;

			li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 8px 0;
				padding: 6px 20px;
				background-color: #fff;

				.check {
					padding-right: 10px;
				}

				.goods {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding-left: 15px;
					font-size: 12px;


					.goods-title {
						display: flex;

						i {
							font-size: 24px;
						}
					}

					.goods-price {
						padding: 3px 0;
						color: #b0352f;
					}

					::v-deep .van-stepper {
						text-align: right;
					}
				}

				img {
					width: 74px;
					height: 74px;
				}
			}
		}
	}

	footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 50px;
		border-top: 2px solid #ccc;

		.radio {
			padding: o 15px;
		}

		.total {
			flex: 1;
			font-size: 18px;
			font-weight: 500;

			.total-active {
				color: #b0352f;
			}
		}

		.order {
			width: 120px;
			line-height: 50px;
			font-size: 18px;
			font-weight: 500;
			color: #fff;
			text-align: center;
			background-color: #b0352f;
		}
	}
</style>






2, server/routes/index.js
var express = require('express');
var router = express.Router();
var connection = require('../db/sql.js');
var user = require('../db/userSql.js');
var QcloudSms = require("qcloudsms_js");
let jwt = require('jsonwebtoken');



// const express = require('express');
const cors = require('cors');
const app = express();
app.use(express.json());
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'
	});
});

// 解析json格式的数据,否则 post 请求中 req.body 为 undefined
app.use(express.json())


// 修改购物车数据接口 (后端)
router.post('/api/updateNum', function(req, res, next) {
	// 获取前端传递的 id和num
	let id = req.body.id;
	let changeNum = req.body.num;

	// 查询当前商品的 id 号
	connection.query(`select * from goods_cart where id=${id}`, function(error, results) {
		// 原来数据库中商品的数量
		let num = results[0].goods_num;

		// 修改数据库中商品的数据量
		connection.query(
			`update goods_cart set goods_num=replace(goods_num,${num},${changeNum}) where id=${id});`,
			function(err, result) {
				// 发送数据
				res.send({
					data: {
						code: 200,
						success: true
						// msg: '修改成功'
					}
				})
			})
	})

	// console.log(id, num);
	// res.send({
	// 	data: {
	// 		a: 1
	// 	}
	// })
})


// 删除购物车数据接口(后端)
router.post('/api/deleteCart', function(req, res, next) {
	// 接收前端给后端传递的id
	let arrId = req.body.arrId;

	for (let i = 0; i < arrId.length; i++) {
		// 进入到sql语句，执行数据删除命令
		connection.query(`delete from goods_cart where id=${arrId[i]}`, function(error, results) {
			res.send({
				data: {
					code: 200,
					success: true,
					msg: '删除成功'
				}
			})
		})
	}
})

// 查询购物车数据接口(后端)
router.post('/api/selectCart', function(req, res, next) {
	// 拿到 token ,并且去解析
	let token = req.headers.token;
	let tokenObj = jwt.decode(token); // 解析

	// 查询用户
	connection.query(`select * from users where tel=${tokenObj.tel}`, function(error, results) {
		// 用户id
		let uId = results[0].id;

		// 查询购物车
		connection.query(`select * from goods_cart where uId = ${uId}`, function(err, result) {
			res.send({
				data: {
					code: 200,
					success: true,
					data: result
				}
			})
		})
	})
})

// 添加购物车数据接口
router.post('/api/addCart', function(req, res, next) {
	// 后端接收前端的参数
	let goodsId = req.body.goodsId;


	// token
	let token = req.headers.token;
	let tokenObj = jwt.decode(token);
	// let tel = jwt.decode(token);

	// 查询用户
	connection.query(`select * from users where tel=${tokenObj.tel}`, function(error, results) {
		// console.log(results[0]);

		// 用户id
		let uId = results[0].id;

		// 查询商品
		connection.query(`select * from space_store where id=${goodsId}`, function(err, result) {
			// console.log(result[0]);
			let goodsName = result[0].name;
			let goodsPrice = result[0].price;
			let goodsNum = result[0].num;
			let goodsImgUrl = result[0].imgUrl;

			// 添加购物车数据
			connection.query(
				`insert into goods_cart(uid,goods_id,goods_name,goods_price,goods_num,goods_imgUrl) values ("${uId}","${goodsId}","${goodsName}","${goodsPrice}","${goodsNum}","${goodsImgUrl}")`,
				function(e, r) {
					res.send({
						data: {
							code: 200,
							success: true,
							msg: '添加成功'
						}
					})
				})
		})
	})
})

// 修改密码接口
router.post('/api/recovery', function(req, res, next) {
	// 先接收前端传递给后端的数据
	let params = {
		userTel: req.body.phone,
		userPwd: req.body.phone
	}

	// 查询用户是否存在
	connect.query(user.queryUserTel(params), function(error, results) {
		// 先查询某一条数据在不在，在拿到该记录数的id,然后修改该条记录的密码
		// 数据库的数据id 拿到用户id 某一条记录数id
		let id = results[0].id;
		let pwd = results[0].pwd;

		connection.query(
			`uplate user set pwd=replace(pwd, "${pwd}","${params.userPwd}") where id = ${id}`,
			function(err, results) {
				res.send({
					code: 200,
					data: {
						success: true,
						msg: '修改成功'
					}
				})
			})
	})
})

// 查询用户是否存在
router.post('/api/selectUser', function(req, res, next) {

	// 拿到前端传递的数据
	let params = {
		userTel: req.body.phone
	}

	// 查询用户是否存在
	connect.query(user.queryUserTel(params), function(error, results) {
		if (results.length > 0) {
			res.send({
				code: 200,
				data: {
					success: true
				}
			})
		} else {
			res.send({
				code: 0,
				data: {
					success: false,
					msg: '此用户不存在'
				}
			})
		}
	})
})



// 注册
router.post('/api/register', function(req, res, next) {
	// 拿到前端传递的数据
	let params = {
		userTel: req.body.phone,
		userPwd: req.body.pwd
	}

	// 查询用户是否存在
	connect.query(user.queryUserTel(params), function(error, results) {
		// 如果有错误就抛出错误
		if (error) throw error;

		// 判断用户是否存在
		if (results.length > 0) {
			// 用户存在,直接返回
			res.send({
				code: 200,
				data: {
					success: true,
					msg: '登录成功',
					data: results[0]
				}
			})
		} else {
			// 用户不存在，新增一条数据
			connection.query(user.insertData(params), function(err, result) {
				// 新增数据后，再把新增数据查询一下，看看有没有添加成功
				connection.query(user.queryUserTel(params), function(e, r) {
					// 用户存在,直接返回
					res.send({
						code: 200,
						data: {
							success: true,
							msg: '登录成功',
							data: r[0]
						}
					})
				})
			})
		}
	})
})


// 增加一个用户
router.post('/api/addUser', function(req, res, next) {
	let params = {
		userTel: req.body.phone
	}

	// let tel = {
	// 	userTel: req.body.phone
	// }

	// 查询用户是否存在
	connect.query(user.queryUserTel(params), function(error, results) {
		// 如果有错误就抛出错误
		if (error) throw error;

		// 判断用户是否存在
		if (results.length > 0) {
			// 用户存在,直接返回
			res.send({
				code: 200,
				data: {
					success: true,
					msg: '登录成功',
					data: results[0]
				}
			})
		} else {
			// 用户不存在，新增一条数据
			connection.query(user.insertData(params), function(err, result) {
				// 新增数据后，再把新增数据查询一下，看看有没有添加成功
				connection.query(user.queryUserTel(params), function(e, r) {
					// 用户存在,直接返回
					res.send({
						code: 200,
						data: {
							success: true,
							msg: '登录成功',
							data: r[0]
						}
					})
				})
			})
		}
	})
})


// 请求短信验证码接口
router.post('/api/code', function(req, res, next) {

	// 后端接收前端发送的手机号	 
	let tel = req.body.phone;

	// 短信应用SDK AppID
	// var appid = 1400187558; // 老师的
	var appid = 1400979236; // 自己的 SDK AppID是1400开头  1400979236	   1400009099

	// 短信应用SDK AppKey
	// var appkey = "9ff91d87c2cd7cd0ea762f141975d1df37481d48700d70ac37470aefc60f9bad";
	var appkey = "10fd4851f4228eb21e670ee72fe932f2"; // 自己的
	// var appkey = "dc9dc3391896235ddc2325685047edc7"; // 老师的

	// 需要发送短信的手机号码
	// var phoneNumbers = ["18017927192", "15300935233"];
	var phoneNumbers = [tel]

	// 短信模板ID，需要在短信应用中申请
	var templateId = 285590; // 老师的 NOTE: 这里的模板ID`7839`只是一个示例，真实的模板ID需要在短信控制台中申请

	// 签名
	var smsSign = "三人行慕课"; // NOTE: 这里的签名只是示例，请使用真实的已申请的签名, 签名参数使用的是`签名内容`，而不是`签名ID`

	// 实例化QcloudSms
	var qcloudsms = QcloudSms(appid, appkey);

	// 设置请求回调处理, 这里只是演示，用户需要自定义相应处理回调
	function callback(err, ress, resData) {
		if (err) {
			console.log("err: ", err);
		} else {
			res.send({
				code: 200,
				data: {
					success: true,
					data: ress.req.body.params[0]
				}
			})
			// console.log("request data: ", ress.req);
			// console.log("response data: ", resData);
		}
	}

	// 指定模板ID单发短信
	var ssender = qcloudsms.SmsSingleSender();
	// 这个变量 params 就是往手机上发送的短信
	var params = [Math.floor(Math.random() * (9999 - 1000)) + 1000];
	ssender.sendWithParam(86, phoneNumbers[0], templateId,
		params, smsSign, "", "", callback); // 签名参数不能为空串
})


// 登录接口 /api/login
router.post('/api/login', function(req, res, next) {
	// 后端要接收前端传递过来的值(数据)
	let params = {
		userTel: req.body.userTel,
		userPwd: req.body.userPwd
	};

	// 查询数据库中用户手机号是否存在
	connection.query(user.queryUserTel(params), function(error, results) {
		// 判断手机号存在是否存在
		if (results.length > 0) {
			//手机号存在
			connection.query(user.queryUserPwd(params), function(err, result) {
				//判断手机号和密码
				if (result.length > 0) {
					// 手机号和密码都对
					res.send({
						code: 200,
						data: {
							success: true,
							msg: '登录成功',
							data: result[0]
						}
					})
				} else {
					// 密码不对
					res.send({
						code: 302,
						data: {
							success: false,
							msg: '密码不正确'
						}
					})
				}
			})
		} else {
			// 手机号不存在
			res.send({
				code: 301,
				data: {
					success: false,
					msg: '手机号不存在'
				}
			})
		}
	})
})


// // 密码登录接口 /api/userlogin
// router.post('/api/userlogin', function(req, res, next)) {
// 	//
// }


// 查询商品id的数据接口
router.get('/api/goods/id', function(req, res, next) {
	// 获取 前端给后端传递的 id 号
	let id = req.query.id;

	// 查询数据库
	connection.query("select * from space_store where id= '+id+'", function(error, results) {
		if (error) throw error;
		res.json({
			code: 0,
			// data: results // 后端给前端返回的数据为数组，需要解析
			data: results[0] // 后端给前端返回的数据为对象
		})
	})
})


// 分类的接口
router.get('/api/goods/list', function(req, res, next) {
	res.send({
		code: 0,
		data: [{
			// 一级
			id: 0,
			name: '推荐',
			data: [{
				// 二级
				id: 0,
				name: '推荐',
				list: [{
					// 三级
					id: 0,
					name: '紫砂壶',
					imgUrl: '/images/teapot.png'
				}, {
					// 三级
					id: 1,
					name: '铁观音',
					imgUrl: '/images/tieguanyin.png'
				}, {
					// 三级
					id: 2,
					name: '金骏眉',
					imgUrl: '/images/jinjunmei.png'
				}, {
					// 三级
					id: 3,
					name: '武夷岩茶',
					imgUrl: '/images/wuyiyancha.png'
				}, {
					// 三级
					id: 4,
					name: '龙井',
					imgUrl: '/images/longjing.png'
				}, {
					// 三级
					id: 5,
					name: '云南滇红',
					imgUrl: '/images/yunnandianhong.png'
				}, {
					// 三级
					id: 6,
					name: '建盏',
					imgUrl: '/images/jianzhan.png'
				}, {
					// 三级
					id: 7,
					name: '功夫茶具',
					imgUrl: '/images/gonghuchaju.png'
				}, {
					// 三级
					id: 8,
					name: '紫砂壶',
					imgUrl: '/images/teapot.png'
				}]
			}]
		}, {
			// 一级
			id: 1,
			name: '新品',
			data: [{
				// 二级
				id: 1,
				name: '新品',
				list: [{
					// 三级
					id: 0,
					name: '紫砂壶',
					imgUrl: '/images/teapot.png'
				}, {
					// 三级
					id: 1,
					name: '铁观音',
					imgUrl: '/images/tieguanyin.png'
				}, {
					// 三级
					id: 2,
					name: '金骏眉',
					imgUrl: '/images/jinjunmei.png'
				}, {
					// 三级
					id: 3,
					name: '武夷岩茶',
					imgUrl: '/images/wuyiyancha.png'
				}, {
					// 三级
					id: 4,
					name: '龙井',
					imgUrl: '/images/longjing.png'
				}, {
					// 三级
					id: 5,
					name: '云南滇红',
					imgUrl: '/images/yunnandianhong.png'
				}, {
					// 三级
					id: 6,
					name: '建盏',
					imgUrl: '/images/jianzhan.png'
				}, {
					// 三级
					id: 7,
					name: '功夫茶具',
					imgUrl: '/images/gonghuchaju.png'
				}, {
					// 三级
					id: 8,
					name: '紫砂壶',
					imgUrl: '/images/teapot.png'
				}]
			}]
		}, {
			// 一级
			id: 2,
			name: '习茶',
			data: [{
				// 二级
				id: 2,
				name: '习茶',
				list: [{
					// 三级
					id: 0,
					name: '紫砂壶',
					imgUrl: '/images/teapot.png'
				}, {
					// 三级
					id: 1,
					name: '铁观音',
					imgUrl: '/images/tieguanyin.png'
				}, {
					// 三级
					id: 2,
					name: '金骏眉',
					imgUrl: '/images/jinjunmei.png'
				}, {
					// 三级
					id: 3,
					name: '武夷岩茶',
					imgUrl: '/images/wuyiyancha.png'
				}, {
					// 三级
					id: 4,
					name: '龙井',
					imgUrl: '/images/longjing.png'
				}, {
					// 三级
					id: 5,
					name: '云南滇红',
					imgUrl: '/images/yunnandianhong.png'
				}, {
					// 三级
					id: 6,
					name: '建盏',
					imgUrl: '/images/jianzhan.png'
				}, {
					// 三级
					id: 7,
					name: '功夫茶具',
					imgUrl: '/images/gonghuchaju.png'
				}, {
					// 三级
					id: 8,
					name: '紫砂壶',
					imgUrl: '/images/teapot.png'
				}]
			}]
		}, {
			// 一级
			id: 3,
			name: '绿茶',
			data: [{
				// 二级
				id: 3,
				name: '绿茶',
				list: [{
					// 三级
					id: 0,
					name: '紫砂壶',
					imgUrl: '/images/teapot.png'
				}, {
					// 三级
					id: 1,
					name: '铁观音',
					imgUrl: '/images/tieguanyin.png'
				}, {
					// 三级
					id: 2,
					name: '金骏眉',
					imgUrl: '/images/jinjunmei.png'
				}, {
					// 三级
					id: 3,
					name: '武夷岩茶',
					imgUrl: '/images/wuyiyancha.png'
				}, {
					// 三级
					id: 4,
					name: '龙井',
					imgUrl: '/images/longjing.png'
				}, {
					// 三级
					id: 5,
					name: '云南滇红',
					imgUrl: '/images/yunnandianhong.png'
				}, {
					// 三级
					id: 6,
					name: '建盏',
					imgUrl: '/images/jianzhan.png'
				}, {
					// 三级
					id: 7,
					name: '功夫茶具',
					imgUrl: '/images/gonghuchaju.png'
				}, {
					// 三级
					id: 8,
					name: '紫砂壶',
					imgUrl: '/images/teapot.png'
				}]
			}]
		}, {
			// 一级
			id: 4,
			name: '乌龙茶',
			data: [{
				// 二级
				id: 4,
				name: '乌龙茶',
				list: [{
					// 三级
					id: 0,
					name: '紫砂壶',
					imgUrl: '/images/teapot.png'
				}, {
					// 三级
					id: 1,
					name: '铁观音',
					imgUrl: '/images/tieguanyin.png'
				}, {
					// 三级
					id: 2,
					name: '金骏眉',
					imgUrl: '/images/jinjunmei.png'
				}, {
					// 三级
					id: 3,
					name: '武夷岩茶',
					imgUrl: '/images/wuyiyancha.png'
				}, {
					// 三级
					id: 4,
					name: '龙井',
					imgUrl: '/images/longjing.png'
				}, {
					// 三级
					id: 5,
					name: '云南滇红',
					imgUrl: '/images/yunnandianhong.png'
				}, {
					// 三级
					id: 6,
					name: '建盏',
					imgUrl: '/images/jianzhan.png'
				}, {
					// 三级
					id: 7,
					name: '功夫茶具',
					imgUrl: '/images/gonghuchaju.png'
				}, {
					// 三级
					id: 8,
					name: '紫砂壶',
					imgUrl: '/images/teapot.png'
				}]
			}]
		}, {
			// 一级
			id: 5,
			name: '红茶',
			data: [{
				// 二级
				id: 5,
				name: '红茶',
				list: [{
					// 三级
					id: 0,
					name: '紫砂壶',
					imgUrl: '/images/teapot.png'
				}, {
					// 三级
					id: 1,
					name: '铁观音',
					imgUrl: '/images/tieguanyin.png'
				}, {
					// 三级
					id: 2,
					name: '金骏眉',
					imgUrl: '/images/jinjunmei.png'
				}, {
					// 三级
					id: 3,
					name: '武夷岩茶',
					imgUrl: '/images/wuyiyancha.png'
				}, {
					// 三级
					id: 4,
					name: '龙井',
					imgUrl: '/images/longjing.png'
				}, {
					// 三级
					id: 5,
					name: '云南滇红',
					imgUrl: '/images/yunnandianhong.png'
				}, {
					// 三级
					id: 6,
					name: '建盏',
					imgUrl: '/images/jianzhan.png'
				}, {
					// 三级
					id: 7,
					name: '功夫茶具',
					imgUrl: '/images/gonghuchaju.png'
				}, {
					// 三级
					id: 8,
					name: '紫砂壶',
					imgUrl: '/images/teapot.png'
				}]
			}]
		}, {
			// 一级
			id: 6,
			name: '白茶',
			data: [{
				// 二级
				id: 6,
				name: '白茶',
				list: [{
					// 三级
					id: 0,
					name: '紫砂壶',
					imgUrl: '/images/teapot.png'
				}, {
					// 三级
					id: 1,
					name: '铁观音',
					imgUrl: '/images/tieguanyin.png'
				}, {
					// 三级
					id: 2,
					name: '金骏眉',
					imgUrl: '/images/jinjunmei.png'
				}, {
					// 三级
					id: 3,
					name: '武夷岩茶',
					imgUrl: '/images/wuyiyancha.png'
				}, {
					// 三级
					id: 4,
					name: '龙井',
					imgUrl: '/images/longjing.png'
				}, {
					// 三级
					id: 5,
					name: '云南滇红',
					imgUrl: '/images/yunnandianhong.png'
				}, {
					// 三级
					id: 6,
					name: '建盏',
					imgUrl: '/images/jianzhan.png'
				}, {
					// 三级
					id: 7,
					name: '功夫茶具',
					imgUrl: '/images/gonghuchaju.png'
				}, {
					// 三级
					id: 8,
					name: '紫砂壶',
					imgUrl: '/images/teapot.png'
				}]
			}]
		}, {
			// 一级
			id: 7,
			name: '普洱茶',
			data: [{
				// 二级
				id: 7,
				name: '普洱茶',
				list: [{
					// 三级
					id: 0,
					name: '紫砂壶',
					imgUrl: '/images/teapot.png'
				}, {
					// 三级
					id: 1,
					name: '铁观音',
					imgUrl: '/images/tieguanyin.png'
				}, {
					// 三级
					id: 2,
					name: '金骏眉',
					imgUrl: '/images/jinjunmei.png'
				}, {
					// 三级
					id: 3,
					name: '武夷岩茶',
					imgUrl: '/images/wuyiyancha.png'
				}, {
					// 三级
					id: 4,
					name: '龙井',
					imgUrl: '/images/longjing.png'
				}, {
					// 三级
					id: 5,
					name: '云南滇红',
					imgUrl: '/images/yunnandianhong.png'
				}, {
					// 三级
					id: 6,
					name: '建盏',
					imgUrl: '/images/jianzhan.png'
				}, {
					// 三级
					id: 7,
					name: '功夫茶具',
					imgUrl: '/images/gonghuchaju.png'
				}, {
					// 三级
					id: 8,
					name: '紫砂壶',
					imgUrl: '/images/teapot.png'
				}]
			}]
		}, {
			// 一级
			id: 8,
			name: '花茶',
			data: [{
				// 二级
				id: 8,
				name: '花茶',
				list: [{
					// 三级
					id: 0,
					name: '紫砂壶',
					imgUrl: '/images/teapot.png'
				}, {
					// 三级
					id: 1,
					name: '铁观音',
					imgUrl: '/images/tieguanyin.png'
				}, {
					// 三级
					id: 2,
					name: '金骏眉',
					imgUrl: '/images/jinjunmei.png'
				}, {
					// 三级
					id: 3,
					name: '武夷岩茶',
					imgUrl: '/images/wuyiyancha.png'
				}, {
					// 三级
					id: 4,
					name: '龙井',
					imgUrl: '/images/longjing.png'
				}, {
					// 三级
					id: 5,
					name: '云南滇红',
					imgUrl: '/images/yunnandianhong.png'
				}, {
					// 三级
					id: 6,
					name: '建盏',
					imgUrl: '/images/jianzhan.png'
				}, {
					// 三级
					id: 7,
					name: '功夫茶具',
					imgUrl: '/images/gonghuchaju.png'
				}, {
					// 三级
					id: 8,
					name: '紫砂壶',
					imgUrl: '/images/teapot.png'
				}]
			}]
		}, {
			// 一级
			id: 9,
			name: '茶具',
			data: [{
				// 二级
				id: 9,
				name: '茶具',
				list: [{
					// 三级
					id: 0,
					name: '紫砂壶',
					imgUrl: '/images/teapot.png'
				}, {
					// 三级
					id: 1,
					name: '铁观音',
					imgUrl: '/images/tieguanyin.png'
				}, {
					// 三级
					id: 2,
					name: '金骏眉',
					imgUrl: '/images/jinjunmei.png'
				}, {
					// 三级
					id: 3,
					name: '武夷岩茶',
					imgUrl: '/images/wuyiyancha.png'
				}, {
					// 三级
					id: 4,
					name: '龙井',
					imgUrl: '/images/longjing.png'
				}, {
					// 三级
					id: 5,
					name: '云南滇红',
					imgUrl: '/images/yunnandianhong.png'
				}, {
					// 三级
					id: 6,
					name: '建盏',
					imgUrl: '/images/jianzhan.png'
				}, {
					// 三级
					id: 7,
					name: '功夫茶具',
					imgUrl: '/images/gonghuchaju.png'
				}, {
					// 三级
					id: 8,
					name: '紫砂壶',
					imgUrl: '/images/teapot.png'
				}]
			}]
		}, {
			// 一级
			id: 10,
			name: '手艺',
			data: [{
				// 二级
				id: 10,
				name: '手艺',
				list: [{
					// 三级
					id: 0,
					name: '紫砂壶',
					imgUrl: '/images/teapot.png'
				}, {
					// 三级
					id: 1,
					name: '铁观音',
					imgUrl: '/images/tieguanyin.png'
				}, {
					// 三级
					id: 2,
					name: '金骏眉',
					imgUrl: '/images/jinjunmei.png'
				}, {
					// 三级
					id: 3,
					name: '武夷岩茶',
					imgUrl: '/images/wuyiyancha.png'
				}, {
					// 三级
					id: 4,
					name: '龙井',
					imgUrl: '/images/longjing.png'
				}, {
					// 三级
					id: 5,
					name: '云南滇红',
					imgUrl: '/images/yunnandianhong.png'
				}, {
					// 三级
					id: 6,
					name: '建盏',
					imgUrl: '/images/jianzhan.png'
				}, {
					// 三级
					id: 7,
					name: '功夫茶具',
					imgUrl: '/images/gonghuchaju.png'
				}, {
					// 三级
					id: 8,
					name: '紫砂壶',
					imgUrl: '/images/teapot.png'
				}]
			}]
		}]
	})
})

// 查询商品数据接口 后端写接口
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);

	// console.log('results');
	// 查询数据库表
	connection.query('select * from space_store where name like "%' + name +
		'%" order by "+orderName+" "+order+" ',
		function(error,
			results) {
			console.log('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: 199,
				}, {
					id: 2,
					imgUrl: './images/like9.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 299,
				}, {
					id: 3,
					imgUrl: './images/like10.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 399,
				}, {
					id: 4,
					imgUrl: './images/like11.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 499,
				}, {
					id: 5,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 599,
				}, {
					id: 6,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 699,
				}, {
					id: 7,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 799,
				}, {
					id: 8,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 899,
				}, {
					id: 9,
					imgUrl: './images/like8.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 999,
				}, {
					id: 10,
					imgUrl: './images/like10.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 1099,
				}, {
					id: 11,
					imgUrl: './images/like11.png',
					name: '建盏茶具套装 红色芝麻毫 12件套',
					price: 1199,
				}]
			}]
		}
	})
});

// 首页大红袍的数据  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,
				}]
			}]
		}
	})
});

// // 监听端口
// app.listen(3000, () => {
// 	console.log('服务启动成功,端口为3000')
// })

module.exports = router;
前端发给后端的数据
服务端接口代码有问题
修改数量的前端逻辑代码
问题解决
相关推荐
代码匠心1 天前
AI 自动编程：一句话设计高颜值博客
前端·ai·ai编程·claude
_AaronWong1 天前
Electron 实现仿豆包划词取词功能：从 AI 生成到落地踩坑记
前端·javascript·vue.js
cxxcode1 天前
I/O 多路复用：从浏览器到 Linux 内核
前端
用户5433081441941 天前
AI 时代，前端逆向的门槛已经低到离谱 — 以 Upwork 为例
前端
JarvanMo1 天前
Flutter 版本的 material_ui 已经上架 pub.dev 啦！快来抢先体验吧。
前端
恋猫de小郭1 天前
AI 可以让 WIFI 实现监控室内人体位置和姿态，无需摄像头？
前端·人工智能·ai编程
哀木1 天前
给自己整一个 claude code，解锁编程新姿势
前端
程序员鱼皮1 天前
GitHub 关注突破 2w，我总结了 10 个涨星涨粉技巧！
前端·后端·github
UrbanJazzerati1 天前
Vue3 父子组件通信完全指南
前端·面试
是一碗螺丝粉1 天前
5分钟上手LangChain.js：用DeepSeek给你的App加上AI能力
前端·人工智能·langchain
热门推荐
01GitHub 镜像站点02【OpenClaw 本地实战 Ep.3】突破瓶颈：强制修改 openclaw.json 解锁 32k 上下文记忆03OpenClaw 使用和管理 MCP 完全指南04OpenClaw + 飞书（Feishu）环境搭建指南05Clawdbot部署教程：解决‘gateway token missing’授权问题的完整步骤06Window 10部署openclaw报错node.exe : npm error code 12807OpenClaw优化飞书API 额度已耗尽问题08Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services09AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南10AI Agent 平台横评：ZeroClaw vs OpenClaw vs Nanobot