41 当前用户购物车数据

当前用户购物车数据 实现代码如下

1, src/views/Cart.vue
<template><div class="cart container"><header><i class="iconfont icon-a-huaban1fuben44"></i><span>购物车</span><span>编辑</span></header><section><div class="cart-title"><van-checkbox v-model="checked"></van-checkbox><span>商品</span></div><ul><li v-for="(item,index) in list" :key="index"><!-- {{item}} --><div class="check"><van-checkbox v-model="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"></i></div><div class="goods-price">￥{{item.goods_price}}</div><van-stepper v-model="item.goods_num" integer /></div></li><!-- <li><div class="check"><van-checkbox v-model="checked"></van-checkbox></div><h2><img src="../../public/images/like.png" alt="" /></h2><div class="goods"><div class="goods-title"><span>金骏眉金骏眉金骏眉金骏眉金骏眉</span><i class="iconfont icon-shanchu1"></i></div><div class="goods-price">￥128.00</div><van-stepper v-model="value" integer /></div></li> --></ul></section><footer><div class="radio"><van-checkbox v-model="checked"></van-checkbox></div><div class="total"><div>共有<span class="total-active">1</span>件商品</div><div><span>总计:</span><span class="total-active">￥128.00+0茶币</span></div></div><div class="order">去结算</div></footer><!-- <Tabbar></Tabbar> --></div>
</template><script>import http from '@/common/api/request.js'import {mapState,mapMutations} from 'vuex';export default {name: "Cart",data() {return {checked: true}},// 调用 获取 list 的值computed: {...mapState({list: state => state.cart.list})},created() {this.getData();},methods: {// 使用这个方法...mapMutations(['cartList']),// 前端给后端发送请求，查询某个用户async getData() {// 发送请求let res = await http.$axios({// 前端给后端查询购物车数据接口发送请求url: '/api/selectCart',method: 'POST',// 查询当前用户购物车数据，要带上 tokenheaders: {token: true}});// console.log(res.data);this.cartList(res.data);}}}
</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, src/views/Detail.vue
<template><div class="detail"><header><div class="header-returns" v-show="isShow"><div @click="goBack"><i class="iconfont icon-a-huaban1fuben44"></i></div><div><i class="iconfont icon-kefu"></i></div></div><div class="header-bar" v-show="!isShow" :style="styleOption"><div @click="goBack"><i class="iconfont icon-a-huaban1fuben44"></i></div><div><span>商品详情</span><span>商品评价</span></div><div><i class="iconfont icon-kefu"></i></div></div></header><section ref="wrapper"><div><div class="swiper-main"><swiper :options="swiperOption"><!-- slides --><swiper-slide v-for="(item,index) in goods" :key="index"><img :src="item.imgUrl" alt="" /></swiper-slide><!-- Optional controls --><div class="swiper-pagination" slot="pagination"></div></swiper></div><div class="goods-name"><h1>{{goods.name}}</h1><!-- <h1>雨前珍稀白茶1号</h1><div>性价首先，茶感十足，鲜醇耐泡的大众口粮茶</div> --></div><div class="goods-price"><div class="oprice"><span>￥</span><b>{{goods.price}}</b><!-- <b>88</b> --></div><div class="pprice"><span>价格:</span><b>{{goods.price}}</b><!-- <del>￥139</del> --></div></div><div><div><img style="width: 100%;height: 500px;" :src="goods.imgUrl" alt="" /><!-- <img style="width: 100%;height: 500px;" src="/images/goods-list1.png" alt="" /><img style="width: 100%;height: 500px;" src="/images/goods-list2.png" alt="" /><img style="width: 100%;height: 500px;" src="/images/goods-list3.png" alt="" /><img style="width: 100%;height: 500px;" src="/images/goods-list4.png" alt="" /> --></div></div></div></section><footer><div class="add-cart" @click="addCart">加入购物车</div><div>立即购买</div></footer></div>
</template><script>import 'swiper/dist/css/swiper.css'import {swiper,swiperSlide} from 'vue-awesome-swiper'import BetterScroll from 'better-scroll'import http from '@/common/api/request.js'import {Toast} from 'mint-ui';export default {name: "Detail",data() {return { // 赋值id: 0,goods: {},styleOption: {},BetterScroll: '',isShow: true,swiperOption: {autoplay: {delay: 3000},loop: true,speed: 1000,pagination: {el: '.swiper-pagination',type: 'fraction'}}// swiperList: [{// 	imgUrl: './images/goods-list1.png'// }, {// 	imgUrl: './images/goods-list2.png'// }, {// 	imgUrl: './images/goods-list3.png'// }, {// 	imgUrl: './images/goods-list4.png'// }]}},components: {swiper,swiperSlide},// 接收首页传递的数据created() {this.id = this.$route.query.id;// console.log(111);// let id = this.$route.query.idthis.getData();// console.log(this.$route); // 隐式// console.log(this.$route.query.id); // 显式  {id: '4'}},mounted() {this.BetterScroll = new BetterScroll(this.$refs.wrapper, {movable: true,zoom: true,click: true,probeType: 3,bounce: false})// 滑动事件this.BetterScroll.on('scroll', (pos) => {// console.log(pos);let posY = Math.abs(pos.y);let opacity = posY / 180;// 如果 opacity 的值大于1，就让opacity的值等于1，否则就一直动态改变opacity = opacity > 1 ? 1 : opacity;// console.log(posY / 180);// 将opacity动态值赋值给opacitythis.styleOption = {opacity: opacity}// 去判断if (posY >= 50) {this.isShow = false;} else {this.isShow = true;}})},activated() {// let id = this.$route.query.id;// console.log(this.id, this.$route.query.id);// 用动态ID和存储ID做比较 如果相等就不发送请求，如果不等就再次发送请求// 判断当前Url的id和之前的id是否一致if (this.$route.query.id != this.id) {this.getData();this.id = this.$route.query.id; // 重新赋值}},methods: {async getData() {// 接收到的路径传值参数let id = this.$route.query.id;let res = await http.$axios({url: '/api/goods/id',params: { // 前端给后端传递数据id}});// 直接返回对象，然后将对象直接渲染到页面上this.goods = res;// console.log(res);// this.items = Object.freeze(res.topBar);// this.newData = Object.freeze(res.data);},// 发送一个请求->加入购物车addCart() {let id = this.$route.query.id;http.$axios({url: '/api/addCart',method: 'post',data: {goodsId: id},headers: {token: true}}).then(res => {// 后端返回的数据// console.log(res);if (res.success) {// 提示信息 Toast('添加购物车成功');}});},goBack() {// 返回上一页this.$router.back();}}}
</script><style scoped lang="scss">.detail {display: flex;flex-direction: column;width: 100vw;height: 100vh;overflow: hidden;}header {position: fixed;left: 0;top: 0;z-index: 999;width: 100%;height: 44px;.header-returns {display: flex;justify-content: space-between;align-items: center;width: 100%;height: 44px;div {margin: 0 10px;width: 35px;line-height: 34px;text-align: center;border-radius: 50%;background-color: rgba(0, 0, 0, 0.3);}i {color: #fff;font-size: 24px;}}.header-bar {display: flex;justify-content: space-between;align-items: center;width: 100%;height: 44px;background-color: #fff;font-size: 16px;font-weight: 400;span {padding: 0 10px;}i {padding: 0 10px;font-size: 26px;}}}section {flex: 1;overflow: hidden;}.swiper-main {position: relative;width: 100%;height: 375px;overflow: hidden;/* margin-top: 120px; */}.swiper-container {width: 100%;height: 375px;}.swiper-main img {width: 100%;height: 375px;}.swiper-pagination {bottom: 10px;width: 100%;/* 轮播图的小圆点放右边 */text-align: right;color: #FFFFFF;font-size: 18PX;}::v-deep.swiper-pagination-fraction,.swiper-pagination-custom,.swiper-container-horizontal>.swiper-pagination-bullets {left: -20px}::v-deep .swiper-pagination-bullet-active {background-color: #b0352f;}::v-deep .swiper-pagination-bullet {margin: 3px;}.goods-name {padding: 20px 10px;border-bottom: 1px solid #cccccc;h1 {font-size: 24px;font-weight: 500;}div {padding: 3px 0;font-size: 18px;color: #999999;}}.goods-price {padding: 20px 10px;.oprice {color: red;span {font-size: 12px;}}.pprice {color: #999999;font-size: 16px;}}footer {display: flex;justify-content: center;align-items: center;position: fixed;bottom: 0;left: 0;width: 100%;height: 49px;border-top: 1px solid #cccccc;background-color: #fff;div {width: 50%;line-height: 49px;font-size: 16px;text-align: center;color: #fff;background-color: #b0352f;&.add-cart {background-color: #FF9500;}}}
</style>3, src/store/modules/cart.js
import {CART_LIST
} from "./mutations-types"export default {state: {list: []},getters: {},mutations: {[CART_LIST](state, cartArr) {state.list = cartArr;}},actions: {}
}4, src/store/modules/mutations-types.js
export const USER_LOGIN = 'userLogin';
export const INIT_USER = 'initUser';
export const LOGIN_OUT = 'loginOut';
export const CART_LIST = 'cartList';// export const USER_LOGIN = 'USER_LOGIN';
// export const INIT_USER = 'INIT_USER';
// export const LOGIN_OUT = 'LOGIN_OUT';5, src/store/modules/user.js
import {USER_LOGIN,INIT_USER,LOGIN_OUT
} from '@/store/modules/mutations-types.js'export default {state: {// list: 123,// 登录状态loginStatus: false, // 默认状态是不登录// token token: null,// 用户信息：用户头像/用户昵称userInfo: {}},getters: { // 读取//},mutations: { // 存储// 设置[USER_LOGIN](state, user) {// alert(222);// console.log(111);// console.log(state, user);// 已经登录state.loginStatus = true;// 记录tokenstate.token = user.token;// 用户所有信息state.userInfo = user;// 持久化存储=>本地存储localStorage.setItem('teaUserInfo', JSON.stringify(user));},// 读取[INIT_USER](state) {let userInfo = JSON.parse(localStorage.getItem('teaUserInfo'));if (userInfo) {// 已经登录state.loginStatus = true;// 记录tokenstate.token = userInfo.token;// 用户所有信息state.userInfo = userInfo;}},// 退出登录[LOGIN_OUT](state) {// 已经退出登录state.loginStatus = false;// 清空记录tokenstate.token = null;// 清空用户所有信息state.userInfo = {};// 删除本地存储localStorage.removeItem('teaUserInfo');}},actions: {//}
}6, src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);import user from './modules/user.js';
import cart from './modules/cart.js';export default new Vuex.Store({// 挂载 user cartmodules: {user,cart}
});7, server/db/userSql.js
// 验证数据库中的用户相关内容
const User = {// 查询用户手机号  老师： 18511773322    17511557182queryUserTel(option) {return 'select * from users where tel = ' + option.userTel + '';},// 查询用户密码queryUserPwd(option) {return 'select * from users where (tel = ' + option.userTel + ') and pwd = ' + option.userPwd + '';},// 新增用户数据insertData(option) {// 接收到的数据  前端传递给后端的数据let userTel = option.userTel;let userPwd = option.userPwd || '666666';// 引入 jsonwebtoken(token包)let jwt = require('jsonwebtoken');// 用户信息let payload = {tel: userTel};// 口令let secret = 'longchi.xyz';// 生成 Token 注意每一个用户的token都是不同的 且token是不能重复的let token = jwt.sign(payload, secret);return 'insert into users (tel,pwd,imgurl,nickName,token) values(" ' + userTel + ' "," ' + userPwd +' "," ' + imgurl + ' "," ' + nickName + ' "," ' + token + ' ")';// return 'insert into users (tel,pwd,imgurl,nickName,token) values (" ' + userTel +// 	' "," ' + userPwd + ' ","/images/avatar.png","1","' + token + '")';}
}
exports = module.exports = User;8, server/routes/index.jsvar 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/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;