Token是计算机术语，令牌，令牌是一种能够控制站点占有某体的特殊帧，以区别数据帧及其控制帧。
token其实说的更通俗点可以叫暗号，在一些数据传输之前，要先进行暗号的核对，不同的暗号被授权不同的数据操作。基于Token的身份验证方法
使用基于Token的身份验证方法，在服务端不需要存储用户的登录记录，大概的流程是这样的：
1，客户端使用用户名跟密码请求登录
2，服务端收到请求，去验证用户名与密码
3，验证成功后，服务端会签发一个Token，再把这个Token发送给客户端
4，客户端收到 Token 以后可以把他存储起来，比如放在Cookie里或者Local Storage里
5，客户端每次向服务端请求资源的时候需要带着服务端签发的Token
6，服务端收到请求，然后去验证客户端请求里面带着的Token,如果验证成功，就向客户端返回请求的数据
node.js生成Token官网地址
https://www.npmjs.com/package/jsonwebtoken
1, 下载 jsonwebtoken 注意这是在后端安装jwt
$ npm install jsonwebtoken
2，引入
require('jsonwebtoken');
3, 生成Token语法
jwt.sign(用户信息，口令，过期时间)// 引入 jsonwebtoken(token包)
let jwt = require('jsonwebtoken');// 用户信息
let payload = {tel: userTel
}// 口令
let secret = 'longchi.xyz';// 生成 Token 注意每一个用户的token都是不同的 且token是不能重复的
let token = jwt.sign(payload, secret);
4， 解析Token
jwt.decode(token)
实操
1, 安装
space-tea\server>npm install jsonwebtokenadded 14 packages, and audited 126 packages in 6s13 packages are looking for fundingrun `npm fund` for details10 vulnerabilities (5 low, 4 high, 1 critical)To address issues that do not require attention, run:npm audit fixTo address all issues (including breaking changes), run:npm audit fix --forceRun `npm audit` for details.2， 查看
space-tea\server>npm list jsonwebtoken
server@0.0.0 D:\workspace_uniapp\space-tea\server
`-- jsonwebtoken@9.0.2
token 实现代码如下
1, 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><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>export default {name: "Cart",data() {return {checked: true,value: 1 // 默认为1}}}
</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, 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'export default {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 != id) {this.getData();this.id = this.$route.query.id; // 重新赋值}// console.log(this.$route.query);},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);});},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/common/api/request.js
import {Indicator
} from 'mint-ui'
import axios from 'axios'
import store from '@/store'
import router from '@/router'export default {common: {method: 'GET',data: {},params: {},headers: {}},$axios(options = {}) {options.method = options.method || this.common.method;options.data = options.data || this.common.data;options.params = options.params || this.common.params;options.headers = options.headers || this.common.headers;// 请求前==>显示加载中...Indicator.open('加载中...');// console.log(store.state.user.token);// 是否为登录状态if (options.headers.token) {options.headers.token = store.state.user.token;if (!options.headers.token) {router.push('/login');}}return axios(options).then(v => {let data = v.data.data;return new Promise((res, rej) => {if (!v) return rej();// 结束===>关闭加载setTimeout(() => {Indicator.close();}, 500)res(data);})})}
}4, 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 + ' ","/images/avatar.png","1","' + token + '")';}
}
exports = module.exports = User;5, 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/addCart', function(req, res, next) {let token = req.headers.token;let tel = jwt.decode(token);console.log(tel);res.send({code: 200,data: {a: 1}})
})// 修改密码接口
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: '手机号不存在'}})}})
})// 查询商品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;
以上就是实现token 的代码和图片
