46 修改购物车数据
首先，修改购物车数据，比如我们将商品数量增多，我们增加到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 或 falseresolve(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',// 查询当前用户购物车数据，要带上 tokenheaders: {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',// 查询当前用户购物车数据，要带上 tokenheaders: {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',// 查询当前用户购物车数据，要带上 tokenheaders: {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和numlet 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) {// 接收前端给后端传递的idlet 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) {// 用户idlet 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;// tokenlet 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]);// 用户idlet 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 某一条记录数idlet 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`// 实例化QcloudSmsvar 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: '设计'}, ],// 这是我们的swiperdata: [{ // 这是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;
前端发给后端的数据
服务端接口代码有问题
修改数量的前端逻辑代码
问题解决
