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;
前端发给后端的数据
服务端接口代码有问题
修改数量的前端逻辑代码
问题解决
相关推荐
玲小珑2 小时前
LangChain.js 完全开发手册（十九）前端 AI 开发进阶技巧
前端·langchain·ai编程
程序员ys3 小时前
Vue的响应式系统是怎么实现的
前端·javascript·vue.js
Sailing3 小时前
🔥 React 高频 useEffect 导致页面崩溃的真实案例：从根因排查到彻底优化
前端·react.js·面试
aduzhe3 小时前
关于在嵌入式中打印float类型遇到的bug
前端·javascript·bug
Sailing3 小时前
🔥 大模型时代最讽刺的职业出现了：“大模型善后工程师”
前端·openai·ai编程
o***Z4483 小时前
前端组件表单验证，React Hook Form与VeeValidate
前端·react.js·前端框架
xiaoxue..3 小时前
Vibe Coding之道：从Hulk扩展程序看Prompt工程的艺术
前端·人工智能·prompt·aigc
程序猿小蒜3 小时前
基于springboot的汽车资讯网站开发与实现
java·前端·spring boot·后端·spring
q***98523 小时前
前端的dist包放到后端springboot项目下一起打包
前端·spring boot·后端
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03BongoCat - 跨平台键盘猫动画工具04安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）05Linux下V2Ray安装配置指南06《大数据技术原理与应用》实验报告三 熟悉HBase常用操作07综合整理：pdf预览显示：你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源，请打开此文件以看其内容，如何解决以正常预览文件08jdk21下载、安装（Windows、Linux、macOS）092025 最新教程：注册并切换到美区 Apple ID10智能库存管理的需求预测模型：从业务痛点到落地代码的完整实践