UNIAPP实战项目笔记60 前端使用token来验证是否已经登录

news2024/10/7 6:40:00

UNIAPP实战项目笔记60 前端使用token来验证是否已经登录

获取数据库中用户是否有token值,并存入 store.user.token中,有值代表已经登录
detail页面 通过验证token拦截未登录用户bin跳转到登录页面

实际案例图片

youtoken不拦截,若没有则跳转到登录页面

后端接口文件 index.js

var express = require('express');
var router = express.Router();
var connection = require('../db/sql.js');
var user = require('../db/UserSql.js');
// 验证码
let code = '';
// 接入短信的sdk
// var QcloudSms = require('qcloudsms_js');

//设置跨域访问（设置在所有的请求前面即可）
router.all("*", function (req, res, next) {
	//设置允许跨域的域名，*代表允许任意域名跨域
	res.header("Access-Control-Allow-Origin", "*");
	//允许的header类型
	res.header("Access-Control-Allow-Headers", "content-type");
	//跨域允许的请求方式 
	// res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
	res.header("Access-Control-Allow-Methods", "*");
	res.header("Content-Type", "application/json;chartset=utf-8");
	// if (req.method == 'OPTIONS')
	// 	res.sendStatus(200); //让options尝试请求快速结束
	// else
		next();
});



/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});




/* 测试token数据. */
router.post('/api/ceshi', function(req, res, next) {
    console.log(111);
    res.send({
        data:{
            aaa:'1111'
        }
    });
});



/* 注册->增加一条数据. */
router.post('/api/addUser', function(req, res, next) {
    // 前端给后端的数据
    let params = {
        userName:req.body.userName,
        userCode:req.body.code
    };
    if( params.userCode == code ){
        connection.query( user.insertData( params ),function(error,results, fields){
            res.send({
                data:{
                    success:true,
                    msg:'注册成功'
                }
            });
        });
    }
});


/* 发送验证码 */
router.post('/api/code', function(req, res, next) {
    // 前端给后端的数据
    let params = {
        userName : req.body.userName
    }
    // 短信SDK 可以使用阿里云或腾讯云的,具体接入方式以官方NodeJS代码案例
    // ....
    // 阿里云 官方代码 https://help.aliyun.com/document_detail/112185.html
    // 腾讯云 官方代码 https://cloud.tencent.com/developer/article/1987501
    // ....
    // ....
    var paramss = [ Math.floor( Math.random()*(9999-1000)+1000 ) ] // 要发送的验证码
    // 模拟以获取到验证码
    code = paramss[0];
    console.log(code);
    
    // 模拟成功返回验证码
    res.send({
        data:{
            success:true,
            code : paramss[0]
        }
    })
})


/* 注册验证手机号是否存在 */
router.post('/api/registered', function(req, res, next) {
    // 前端给后端的数据
    let params = {
        userName : req.body.phone
    }
    // 查询手机号是否存在
    connection.query(user.queryUserName(params),function(error,results,fields){
        if(results.length > 0){
            res.send({
                data:{
                    success:false,
                    msg:"手机号已经存在!"
                }
            });
        }else{
            res.send({
                data:{
                    success:true
                }
            });
        }
    })
  
});


/* 用户登录 */
router.post('/api/login', function(req, res, next) {
    // 前端给后端的数据
    let params = {
        userName : req.body.userName,
        userPwd : req.body.userPwd
    }
    // 查询用户名或手机号是否存在
    connection.query(user.queryUserName(params),function(error,results,fields){
        if(results.length > 0){
            connection.query(user.queryUserPwd(params),function(erro,result){
                if(result.length > 0){
                    res.send({
                        data:{
                            success:true,
                            msg:"登录成功!",
                            data:result[0]
                        }
                    });
                    
                }else{
                    res.send({
                        data:{
                            success:false,
                            msg:"密码不正确!"
                        }
                    });
                }
            })
            
        }else{
            res.send({
                data:{
                    success:false,
                    msg:"用户名或手机号不存在!"
                }
            });
        }
    })
  
});


/* GET databases goods Detail. */
router.get('/api/goods/id', function(req, res, next) {
    let id = req.query.id;
    connection.query("select * from goods_search where id='"+id+"'",function(error,result,fields){
        if(error) throw error;
        res.send({
            code:"0",
            data:result
        })
    })
});

/* GET List Page */
router.get('/api/goods/list', function(req, res, next) {
  res.send({
      code:0,
      name:"家居家纺",
      data:[
          {
              id:1,
              name:"家纺",
              data:[
                {
                  name:"家纺",
                  list:[
                      {
                          id:1,
                          name:"毛巾/浴巾",
                          imgUrl:"/static/logo.png"
                      },
                      {
                          id:2,
                          name:"枕头",
                          imgUrl:"/static/logo.png"
                      }
                  ]
                },
                {
                  name:"生活用品",
                  list:[
                      {
                          id:1,
                          name:"浴室用品",
                          imgUrl:"/static/logo.png"
                      },
                      {
                          id:2,
                          name:"洗晒",
                          imgUrl:"/static/logo.png"
                      }
                  ]
              }
            ]

          },
          {
              id:2,
              name:"女装",
              data:[
                {
                  name:"裙装",
                  list:[
                      {
                          id:1,
                          name:"连衣裙",
                          imgUrl:"/static/logo.png"
                      },
                      {
                          id:2,
                          name:"半身裙",
                          imgUrl:"/static/logo.png"
                      }
                  ]
                },
                {
                  name:"上衣",
                  list:[
                      {
                          id:1,
                          name:"T恤",
                          imgUrl:"/static/logo.png"
                      },
                      {
                          id:2,
                          name:"衬衫",
                          imgUrl:"/static/logo.png"
                      }
                  ]
              }
            ]
          
          }
          
      ]
  });
});

/* GET databases goods. */
router.get('/api/goods/search', function(req, res, next) {
    /* 
        desc 降序 asc 升序    
    */
    // 获取对象的key
    let [goodsName,orderName] = Object.keys(req.query);
    // name参数的值
    let name = req.query.name;
    // orderName的key值
    let order = req.query[orderName];
    
    let sql = "select * from goods_search";
    if(!(name == undefined || orderName == undefined || order == undefined)){
        sql = "select * from goods_search where name like '%"+name+"%' order by "+orderName+" "+order;
    }
    
    connection.query(sql,function(error,results,fields){
        res.send({
            code:"0",
            data:results
        });
    })
});

/* 首页第一次触底的数据 */
router.get('/api/index_list/1/data/2', function(req, res, next) {
  res.send({
      code:"0",
      data:[          
          {
              type:"commodityList",
              data:[
                  {
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:2,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },{
                      id:3,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:4,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
              ]
          },
          
      ]
  });
});

/* 运动户外第二次触底的数据 */
router.get('/api/index_list/2/data/3', function(req, res, next) {
  res.send({
      code:"0",
      data:[          
          {
              type:"commodityList",
              data:[
                  {
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:2,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },{
                      id:3,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:4,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
              ]
          },
          
      ]
  });
});

/* 运动户外第一次触底的数据 */
router.get('/api/index_list/2/data/2', function(req, res, next) {
  res.send({
      code:"0",
      data:[          
          {
              type:"commodityList",
              data:[
                  {
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:2,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },{
                      id:3,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:4,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
              ]
          },
          
      ]
  });
});


/* 运动户外第一次加载的数据 */
router.get('/api/index_list/2/data/1', function(req, res, next) {
  res.send({
      code:"0",
      data:[          
          {
            type:"bannerList",
            imgUrl:"../../static/img/b3.jpg",
          },
          {
              type:"iconsList",
              data:[
                  {imgUrl:"../../static/logo.png",name:"运动户外"},
                  {imgUrl:"../../static/logo.png",name:"运动户外"},
                  {imgUrl:"../../static/logo.png",name:"运动户外"},
                  {imgUrl:"../../static/logo.png",name:"运动户外"},
                  {imgUrl:"../../static/logo.png",name:"运动户外"},
                  {imgUrl:"../../static/logo.png",name:"运动户外"},
                  {imgUrl:"../../static/logo.png",name:"运动户外"},
                  {imgUrl:"../../static/logo.png",name:"运动户外"}
              ]
          },
          {
              type:"hotList",
              data:[
                  {
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:2,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },{
                      id:3,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  }
              ]
          },
          {
              type:"shopList",
              data:[
                  {
                      bigUrl:"../../static/img/b3.jpg",
                      data:[
                          {
                              id:1,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          },
                          {
                              id:2,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          },{
                              id:3,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          },
                          {
                              id:4,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          }
                      ]
                  }
              ],
          },
          {
              type:"commodityList",
              data:[
                  {
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:2,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },{
                      id:3,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:4,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
              ]
          },
          
      ]
  });
});

/* 服饰内衣第一次加载的数据 */
router.get('/api/index_list/3/data/1', function(req, res, next) {
  res.send({
      code:"0",
      data:[          
          {
            type:"bannerList",
            imgUrl:"../../static/img/b3.jpg",
          },
          {
              type:"iconsList",
              data:[
                  {imgUrl:"../../static/logo.png",name:"服饰内衣"},
                  {imgUrl:"../../static/logo.png",name:"服饰内衣"},
                  {imgUrl:"../../static/logo.png",name:"服饰内衣"},
                  {imgUrl:"../../static/logo.png",name:"服饰内衣"},
                  {imgUrl:"../../static/logo.png",name:"服饰内衣"},
                  {imgUrl:"../../static/logo.png",name:"服饰内衣"},
                  {imgUrl:"../../static/logo.png",name:"服饰内衣"},
                  {imgUrl:"../../static/logo.png",name:"服饰内衣"}
              ]
          },
          {
              type:"hotList",
              data:[
                  {
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:2,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },{
                      id:3,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  }
              ]
          },
          {
              type:"shopList",
              data:[
                  {
                      bigUrl:"../../static/img/b3.jpg",
                      data:[
                          {
                              id:1,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          },
                          {
                              id:2,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          },{
                              id:3,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          },
                          {
                              id:4,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          }
                      ]
                  }
              ],
          },
          {
              type:"commodityList",
              data:[
                  {
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:2,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },{
                      id:3,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:4,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
              ]
          },
          
      ]
  });
});

/* 首页推荐数据 */
router.get('/api/index_list/data', function(req, res, next) {
  res.send({
	  "code":0,
	  "data":{
		  topBar:[
			  {id:1,name:'推荐'},
			  {id:2,name:'运动户外'},
			  {id:3,name:'服饰内衣'},
			  {id:4,name:'鞋靴箱包'},
			  {id:5,name:'美妆个护'},
			  {id:6,name:'家居数码'},
			  {id:7,name:'食品母婴'}
		  ],
		  data:[
			  {
				  type:"swiperList",
				  data:[
					  {imgUrl:'/static/img/b3.jpg'},
					  {imgUrl:'/static/img/b3.jpg'},
					  {imgUrl:'/static/img/b3.jpg'}
				  ]
			  },{
				  type:"recommendList",
				  data:[
					  {
						  bigUrl:"../../static/img/b3.jpg",
						  data:[
							  {imgUrl:'../../static/logo.png'},
							  {imgUrl:'../../static/logo.png'},
							  {imgUrl:'../../static/logo.png'}
						  ]
					  },{
						  bigUrl:"../../static/img/b3.jpg",
						  data:[
							  {imgUrl:'../../static/logo.png'},
							  {imgUrl:'../../static/logo.png'},
							  {imgUrl:'../../static/logo.png'}
						  ]
					  }
				  ]
			  },{
				  type:"commodityList",
				  data:[
					  {
					      id:1,
					      imgUrl:"../../static/logo.png",
					      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
					      pprice:"299",
					      oprice:"659",
					      discount:"5.2"
					  },
					  {
					      id:2,
					      imgUrl:"../../static/logo.png",
					      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
					      pprice:"299",
					      oprice:"659",
					      discount:"5.2"
					  },{
					      id:3,
					      imgUrl:"../../static/logo.png",
					      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
					      pprice:"299",
					      oprice:"659",
					      discount:"5.2"
					  },
					  {
					      id:4,
					      imgUrl:"../../static/logo.png",
					      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
					      pprice:"299",
					      oprice:"659",
					      discount:"5.2"
					  },
				  ]
			  },
		  ]
	  }
  })
});



module.exports = router;

商品详情页面 details.vue

    <template>
        <view class="details">
            <!-- 商品图 -->
            <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
                <swiper-item>
                    <view class="swiper-item">
                        <image class="swiper-img" :src="goodsContent.imgUrl" mode=""></image>
                    </view>
                </swiper-item>
            </swiper>
            <!-- 价格和名称 -->
            <view class="details-goods">
                <view class="goods-pprice">¥{{goodsContent.pprice}} </view>
                <view class="goods-oprice">¥{{goodsContent.oprice}} </view>
                <view class="goods-name">{{goodsContent.name}} </view>
            </view>
            <!-- 商品详情图 -->
            <view class="">
                <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
                <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
                <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
                <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
                <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
                <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
            </view>
            
            <!-- 商品列表 -->
            <Card cardTitle="看了又看"></Card>
            <CommodityList :dataList="dataList"></CommodityList>
            
            <!-- 底部 -->
            <view class="details-foot">
                <view class="iconfont icon-xiaoxi"></view>
                <view class="iconfont icon-31gouwuche" @tap="goShopCart"></view>
                <view class="add-shopcart" @tap="showPop">加入购物车</view>
                <view class="purchase" @tap="showPop">立刻购买</view>
            </view>
            
            <!-- 底部弹出层 -->
            <view class="pop" v-show="isShow" @touchmove.stop.prevent="">
                <!-- 蒙层 -->
                <view class="pop-mask" @tap="hidePop"> </view>
                <!-- 内容块 -->
                <view class="pop-box" :animation="animationData">
                    <view class="">
                        <image class="pop-img" :src="goodsContent.imgUrl" mode=""></image>
                    </view>
                    <view class="pop-num">
                        <view class="">购买数量</view>
                        <UniNumberBox
                            :min=1 
                            :value="num"
                            @change="changeNumber"
                        ></UniNumberBox>
                    </view>
                    <view class="pop-sub" @tap="addCart">确定</view>
                </view>
            </view>
        </view>
    </template>

    <script>
        import $http from '@/common/api/request.js'
        import Card from '@/components/common/Card.vue';
        import CommodityList from '@/components/common/CommodityList.vue';
        import UniNumberBox from '@/components/uni/uni-number-box/uni-number-box.vue';
        import {mapMutations} from 'vuex'
        export default {
            data() {
                return {
                    isShow:false,
                    goodsContent:{},
                    animationData:{},
                    num:1,
                    swiperList:[
                        {imgUrl:"../../static/img/b3.jpg"},
                        {imgUrl:"../../static/img/b3.jpg"},
                        {imgUrl:"../../static/img/b3.jpg"}
                    ],
                    dataList:[{
                          id:1,
                          imgUrl:"../../static/logo.png",
                          name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                          pprice:"299",
                          oprice:"659",
                          discount:"5.2"
                      },
                      {
                          id:2,
                          imgUrl:"../../static/logo.png",
                          name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                          pprice:"299",
                          oprice:"659",
                          discount:"5.2"
                      },{
                          id:3,
                          imgUrl:"../../static/logo.png",
                          name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                          pprice:"299",
                          oprice:"659",
                          discount:"5.2"
                      }]
                };
            },
            components:{
                Card,
                CommodityList,
                UniNumberBox
            },
            onLoad(e) {
                // console.log(e.id);
                // 设置默认id=1
                if(!e.id)
                    e.id = 1;
                this.getData(e.id);
            },
            // 修改返回默认行为
            onBackPress(){
                if (this.isShow) {
                    this.hidePop();
                    return true;  
                }
                
            },
            // 点击分享
            onNavigationBarButtonTap(e) {
                if(e.type==='share'){
                    uni.share({
                        provider:"weixin",
                        type:0,
                        scene:"WXSceneSession",
                        title:this.goodsContent.name,
                        href:"http://127.0.0.1:8080/#/pages/details/details?id="+this.goodsContent.id,
                        imageUrl:this.goodsContent.imageUrl,
                        success:function(res){
                            uni.showTabBar({
                                title:"分享成功"
                            })
                        },
                        fail: (err) => {
                            console.log("fail:"+ JSON.stringify(err));
                        }
                    })
                }
            },
            methods:{
                ...mapMutations(['addShopCart']),
                // 改变商品数量
                changeNumber(index,value){
                    this.num[index] = value;
                },
                // 请求商品
                getData(id){
                    $http.request({
                        url:"/goods/id",
                        data:{
                            id:id
                        }
                    }).then((res)=>{
                        this.goodsContent = res[0];
                    }).catch(()=>{
                        uni.showToast({
                            title:'请求失败',
                            icon:'none'
                        })
                    })
                },
                showPop(){
                    // 初始化一个动画
                    var animation = uni.createAnimation({
                        duration:200 // 动画时间
                    });
                    // 定义动画内容
                    animation.translateY(600).step();
                    // 导出动画数据传递给data层
                    this.animationData = animation.export();
                    setTimeout(()=>{
                        this.isShow = true;
                        animation.translateY(0).step();
                        this.animationData = animation.export();
                    },200)
                },
                hidePop(){
                    var animation = uni.createAnimation({
                        duration:200
                    });
                    animation.translateY(600).step();
                    this.animationData = animation.export();
                    this.isShow = true;
                    setTimeout(()=>{
                        animation.translateY(0).step();
                        this.animationData = animation.export();
                        this.isShow = false;
                    },200)
                },
                // 跳转到购物车页面
                goShopCart(){
                    uni.navigateTo({
                        url:'../shopcart/shopcart'
                    })
                },
                // 加入购物车
                addCart(){
                    let goods = this.goodsContent;
                    this.goodsContent['checked'] = false;
                    this.goodsContent['num'] = this.num;
                    // 加入购物车
                    this.addShopCart(goods);
                    // 隐藏弹出框
                    this.hidePop();
                    // 提示信息
                    uni.showToast({
                        title:"成功加入购物车",
                        icon:"none"
                    }) 
                    
                    /* $http.request({
                        url:"/ceshi",
                        method:"POST",
                        header:{
                            // "Content-Type":"application/json",
                            // "Content-Type":"application/x-www-form-urlencoded",
                            token:true //需要验证token
                        }
                    }).then((res)=>{
                        console.log(res);
                    }).catch(()=>{
                        uni.showToast({
                            title:'请求失败',
                            icon:'none'
                        })
                    }) */
                },
            }
        }
    </script>

    <style lang="scss">
    swiper{
        width: 100%;
        height: 700rpx;
    }
    .swiper-img{
        width: 100%;
        height: 700rpx;
    }
    .details{
        padding-bottom: 90rpx;
    }
    .details-goods{
        text-align: center;
        font-weight: bold;
        font-size: 36rpx;
        padding: 10rpx 0;
    }
    .details-img{
        width: 100%;
    }
    .details-foot{
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 90rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #FFFFFF;
    }
    .details-foot .iconfont{
        width: 60rpx;
        height: 60rpx;
        border-radius: 100%;
        background-color: #000000;
        color: #FFFFFF;
        text-align: center;
        margin: 0 10rpx;
        line-height: 60rpx;
    }
    .add-shopcart{
        margin: 0 40rpx;
        padding: 6rpx 30rpx;
        background-color: #000000;
        color: #FFFFFF;
        border-radius: 40rpx;
        
    }
    .purchase{
        margin: 0 40rpx;
        padding: 6rpx 30rpx;
        background-color: #49BDFB;
        color: #FFFFFF;
        border-radius: 40rpx;
    }
    .pop{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
    }
    .pop-mask{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
    }
    .pop-box{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: #FFFFFF;
    }
    .pop-img{
        width: 260rpx;
        height: 260rpx;
        top:-130rpx;
        border-radius:20rpx 20rpx 0 0;
        margin: 30rpx;
    }
    .pop-sub{
        line-height: 80rpx;
        background-color: #49BDFB;
        color: #FFFFFF;
        text-align: center;
    }
    .pop-num{
        padding: 20rpx;
        display: flex;
        justify-content: space-between;
    }

    </style>

request.js 请求模块增加token验证

import store from '@/store/index.js';
export default{
    common:{
        baseUrl:"http://127.0.0.1:3000/api",
        data:{},
        header:{
            "Content-Type":"application/json",
            "Content-Type":"application/x-www-form-urlencoded"
        },
        method:"GET",
        dataType:"json"
    },
    request( options={} ){
        
        uni.showLoading({
            title:"加载中"
        })
        
        options.url = this.common.baseUrl + options.url;
        options.data = options.data || this.common.data;
        options.header = options.header || this.common.header;
        options.method = options.method || this.common.method;
        options.dataType = options.dataType || this.common.dataType;
        
        // 判断是否传入 header头的token, 进行用户是否登录验证
        if(options.header.token){
            options.header.token = store.state.user.token;
            if(!options.header.token){
                uni.showToast({
                    title:"请先登录",
                    icon:'none'
                })
                setTimeout(()=>{
                    uni.navigateTo({
                        url:"/pages/login/login"
                    })
                },1000)
                return;
            }
        }
        
        
        
        
        
        return new Promise((res,rej)=>{
            uni.request({
                ...options,
                success: (result) => {
                    if(result.statusCode != 200){
                        return rej();
                    }
                    setTimeout(function(){
                        uni.hideLoading();
                    },500)
                    let data = result.data.data;
                    res(data);
                }
            })
    
        }) 
    }
    
}

目录结构

前端目录结构

  • manifest.json 配置文件： appid、logo…

  • pages.json 配置文件： 导航、 tabbar、 路由

  • main.js vue初始化入口文件

  • App.vue 全局配置：样式、全局监视

  • static 静态资源：图片、字体图标

  • page 页面

    • index
      • index.vue
    • list
      • list.vue
    • my
      • my.vue
    • my-config
      • my-config.vue
    • my-config
      • my-config.vue
    • my-add-path
      • my-add-path.vue
    • my-path-list
      • my-path-list.vue
    • search
      • search.vue
    • search-list
      • search-list.vue
    • shopcart
      • shopcart.vue
    • details
      • details.vue
    • my-order
      • my-order.vue
    • confirm-order
      • confirm-order.vue
    • payment
      • payment.vue
    • payment-success
      • payment-success.vue
    • login
      • login.vue
    • login-tel
      • login-tel.vue
    • login-code
      • login-code.vue

  • components 组件

    • index
      • Banner.vue
      • Hot.vue
      • Icons.vue
      • indexSwiper.vue
      • Recommend.vue
      • Shop.vue
      • Tabbar.vue
    • common
      • Card.vue
      • Commondity.vue
      • CommondityList.vue
      • Line.vue
      • ShopList.vue
    • order
      • order-list.vue
    • uni
      • uni-number-box
        • uni-number-box.vue
      • uni-icons
        • uni-icons.vue
      • uni-nav-bar
        • uni-nav-bar.vue
      • mpvue-citypicker
        • mpvueCityPicker.vue

  • common 公共文件：全局css文件 || 全局js文件

    • api
      • request.js
    • common.css
    • uni.css

  • store vuex状态机文件

    • modules
      • cart.js
      • path.js
      • user.js
    • index.js

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/418702.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Python-入门基础篇（1）

Python-入门基础篇（1）

这里使用的编译器是pycharm 打开pycharm 新建项目 选择一个文件路径&#xff08;文件名字不要带中文&#xff09; 新建一个.py 文件 这里就要编写代码啦 Python入门最基础的一些函数 print() 该函数可以输出内容到控制台。在括号中输入要输出的内容&#xff0c;用逗号隔开…
阅读更多...
RocketMQ延迟消息源码分析

RocketMQ延迟消息源码分析

写作目的 第一个原因&#xff1a;最近玩哔哩哔哩遇到一个RocketMQ的Contributor&#xff0c;一开始不知道他是Contributor&#xff0c;后来问到延迟消息的时候这块还不是很了解&#xff0c;他告诉我学习要系统&#xff0c;你既然了解事务消息那我理解应该也了解延迟消息&#…
阅读更多...
BGP路由实验

BGP路由实验

要求1 使用 Preval 策略 [r4]ip ip-prefix PV permit 192.168.10.0 24 [r4]route-policy PV permit node 10 [r4-route-policy]if-match ip-prefix PV [r4-route-policy]apply preferred-value 100 [r4]route-policy PV permit node 20 [r4-bgp]peer 24.0.0.2 route-policy…
阅读更多...
redis网络模型

redis网络模型

用户空间和内核空间IO五种IO模型阻塞IO非阻塞IOIO多路复用selectpollepollweb服务流程信号驱动IO异步IOIO模型比较redis网络模型redis为什么是单线程redis单线程网络模型流程用户空间和内核空间 为安全&#xff0c;将用户应用和系统应用分隔开&#xff0c;产生用户空间和内核空…
阅读更多...
thanos prometheus 的高可用、长期存储二进制部署

thanos prometheus 的高可用、长期存储二进制部署

1.简介 http://thanos.io/ thanos 是具有长期存储功能的开源、高可用性 Prometheus的集群组件。 全局查询视图 跨多个 Prometheus 服务器和集群查询指标 无限保留 使用对象存储扩展系统&#xff0c;不限时间保留指标。 Prometheus兼容 兼容 Prometheus api&#xff0c;用于…
阅读更多...
我在windows10下，使用msys64 mingw64终端

我在windows10下，使用msys64 mingw64终端

系列文章目录 文章目录系列文章目录前言一、MSYS2是什么&#xff1f;前言 msys2官网 MSYS2 &#xff08;Minimal SYStem 2&#xff09; 是一个MSYS的独立改写版本&#xff0c;主要用于 shell 命令行开发环境。 同时它也是一个在Cygwin &#xff08;POSIX 兼容性层&#xff09…
阅读更多...
软件测试简历如何编写？还在乱写？精细优化让自己脱颖而出......

软件测试简历如何编写？还在乱写？精细优化让自己脱颖而出......

目录&#xff1a;导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09;前言 简历是我们向面试官…
阅读更多...
教育大数据总体解决方案（6）

教育大数据总体解决方案（6）

触控录播主机集成视频编码、实时导播、音频处理、图像跟踪、电子云台等功能&#xff0c;无需额外的辅助跟踪设备。支持5路视频信号的采集录制、画面自动跟踪及全自动/半自动导播切换&#xff0c;让教师免于分心调控&#xff0c;专注于课堂教学。 整机采取一体化设计及三合一按键…
阅读更多...
【数据结构与算法】栈和队列(StackQueue)

【数据结构与算法】栈和队列(StackQueue)

TOC 数据结构—栈 栈的概念 要想学习一个东西&#xff0c;概念是一定要看并且理解的&#xff0c;那么栈是个什么玩意呢&#xff1f; 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#x…
阅读更多...
v851s g2d 模块 sample 深究

v851s g2d 模块 sample 深究

1. g2d 模块概述 g2d 主要功能： 1）旋转：支持90、180、270旋转； 2）镜像反转：H / V; 3) scale：放缩 4）格式转换：yuv 转 rgb 等，多种格式相互间转换； 5）透明叠加功能：实现两个rgb图片叠加； 6）矩形填充，等诸多功能； 2. g2d 配置 1）源码目录：tina-v853-docker/…
阅读更多...
Zabbix自定义监控mysql数据库、自动注册服务器及部署代理服务器

Zabbix自定义监控mysql数据库、自动注册服务器及部署代理服务器

目录 一、zabbix自定义监控数据库 1、编写监控脚本 2、服务端测试 3、web页面配置 ①创建自定义监控项 ②创建触发器 ③创建图形 ④测试自定义监控是否成功 二、zabbix自动注册 1、什么是自动注册 2、环境准备 3、 zabbix客户端配置 4、web页面配置自动注册 5、…
阅读更多...
Windows系统生产力工具介绍

Windows系统生产力工具介绍

介绍 本文主要介绍在windows系统上如何安装一些常用的生产力软件&#xff0c;这些软件大多数都是开源免费使用的&#xff0c;包括markdown编辑器、知识管理软件、图片和视频工具、系统工具等&#xff0c;以及程序员专用的开发工具。根据本人的使用经验&#xff0c;将会不定期更…
阅读更多...
OpenGL之深入解析屏幕成像和渲染原理

OpenGL之深入解析屏幕成像和渲染原理

一、CPU 与 GPU CPU 内部组成：GPU 内部组成（ALU：算术逻辑单元，是能实现多组算术运算和逻辑运算的组合逻辑电路）：CPU 和 GPU 因为设计之初需求就不一样，所以它们的组成不同，在计算机中的分工也不同。可以看到，GPU 有更多的 ALU，而 CPU 有 Control 单元和 Cache 单元，…
阅读更多...
TensorFlow 深度学习第二版：6~10

TensorFlow 深度学习第二版：6~10

原文&#xff1a;Deep Learning with TensorFlow Second Edition 协议&#xff1a;CC BY-NC-SA 4.0 译者&#xff1a;飞龙 本文来自【ApacheCN 深度学习 译文集】&#xff0c;采用译后编辑&#xff08;MTPE&#xff09;流程来尽可能提升效率。 不要担心自己的形象&#xff0c;只…
阅读更多...
金融风险计量：数据平滑方法及逆平滑分析

金融风险计量：数据平滑方法及逆平滑分析

摘要及声明 1&#xff1a;本文从风险分析的角度简单介绍数据平滑方式&#xff0c;重点介绍低频数据的逆平滑分析&#xff1b; 2&#xff1a;本文主要数据通过爬虫获取&#xff1b; 3&#xff1a;模型实现基于python3.8&#xff1b; 处理金融数据时我们经常会遇到有噪音的数…
阅读更多...
规模化敏捷框架：Spotify

规模化敏捷框架：Spotify

Spotify 是全球最大、最受欢迎的流媒体音乐服务平台&#xff0c;预估用户总量已达2.86亿。Spotify 取得成功的一个关键因素就在于公司采用了一个独特方法: 围绕工作任务进行组织构建以提高团队敏捷性。Spotify 工程团队把提高团队敏捷性的经验记录了下来&#xff0c;并把经验分…
阅读更多...
Java web学习记录（二）数据库的使用

Java web学习记录（二）数据库的使用

学习Java web的前置条件就是数据库&#xff0c;只有学了数据库才能更好的处理网站应用产生的数据。 初识数据库 数据库&#xff08;Database&#xff09;顾名思义就是一个存储数据的仓库&#xff0c;通过它就可以直接查找到你想要的数据&#xff0c;举个简单的例子&#xff0…
阅读更多...
IPSEC实验（IPSECVPN点到点，DSVPN,IPSECVPN旁挂）

IPSEC实验（IPSECVPN点到点，DSVPN,IPSECVPN旁挂）

目录一、复现实验1、防火墙的IPSECVPN点到点实验-1,拓扑图的搭建-2&#xff0c;配置IP,开通ping,并且设置策略-3&#xff0c;在网络中的IPSEC进行配置第一阶段&#xff1a;发出的UDP500流量第二阶段 发出的ESP流量二台防火墙建立策略禁用其它策略&#xff0c;在IPSEC上配置策略…
阅读更多...
系统应满足的性能指标计算及系统性能衡量

系统应满足的性能指标计算及系统性能衡量

根据运营数据计算系统应该满足的性能指标 计算正常业务操作&#xff08;稳定性测试&#xff09;的并发量 计算峰值业务操作&#xff08;压力测试&#xff09;的并发量 如何进行并发数计算&#xff08;稳定性测试和压力测试&#xff09; 使用阶梯线程组自定义模拟用户数量。 …
阅读更多...
前端开发工具-Visual Studio Code-插件下载-迁移到新电脑

前端开发工具-Visual Studio Code-插件下载-迁移到新电脑

背景 前端使用的开发工具一般是Visual Studio Code&#xff0c;很多辅助功能&#xff0c;比如字体高亮、单词拼写检查、预览图片等需要安装插件。但是插件在原来的电脑&#xff0c;不想下载或者自己是新人&#xff0c;想迁移同事的插件&#xff0c;或者新电脑没有外网。 以下…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023