UNIAPP实战项目笔记70 购物车删除商品的前后端交互

news2024/11/25 3:46:49

UNIAPP实战项目笔记70 购物车删除商品的前后端交互

思路

需要用到vuex
传id值到后端,删除指定id购物车数据

案例截图

购物车商品编辑页面

在这里插入图片描述

代码

后端代码 index.js

var express = require('express');
var router = express.Router();
var connection = require('../db/sql.js');
var user = require('../db/UserSql.js');
const jwt = require('jsonwebtoken');// 生成token秘钥

// 验证码
let code = '';
// 接入短信的sdk
// var QcloudSms = require('qcloudsms_js');

//设置跨域访问（设置在所有的请求前面即可）
router.all("*", function (req, res, next) {
	//设置允许跨域的域名，*代表允许任意域名跨域
	res.header("Access-Control-Allow-Origin", "*");
	//允许的header类型,X-Requested-With
	res.header("Access-Control-Allow-Headers", "Appid,Secret,Access-Token,token,Content-Type,Origin,User-Agent,DNT,Cache-Control,X-Requested-With");
    //跨域允许的请求方式 
	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.send({
        data:{
            aaa:'1111'
        }
    });
  // 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/deleteCart', function(req, res, next) {
    let goodsId = req.body.goods_id;//商品id
    // console.log(`delete from goods_cart where id in (${goodsId.join(',')})`);
    connection.query( `delete from goods_cart where id in (${goodsId.join(',')})`,function(error,results, fields){
        res.json({
            data:{
                success:true
            }
        })
    })
})

/* 修改当前用户购物车商品数量 */
router.post('/api/addCart', function(req, res, next) {
    let token = req.headers.token;
    let phone = jwt.decode(token);
    let goodsId = req.body.goods_id;//商品id
    let num = req.body.num;//前端传过来用户输入的产品数量
    connection.query( `select * from user where phone = ${phone.name}`,function(error,results, fields){
        let userId = results[0].id;
        connection.query( `select * from goods_search where id = ${goodsId}`,function(error1,results1, fields1){
            console.log(error1,results1);
            let name = results1[0].name;
            let imgUrl = results1[0].imgUrl;
            let pprice = results1[0].pprice;
            // 查询当前用户之前是否添加过这个商品
            connection.query( `select * from goods_cart where uid = ${userId} and goods_id = ${goodsId}`,function(error2,results2, fields12){
                console.log(error2,results2);
                if(results2.length > 0){
                    // 如果当前用户之前加入过本商品,就直接增加数量
                    connection.query(`update goods_cart set num = replace(num,${results2[0].num},${ parseInt(num) + parseInt(results2[0].num)}) where id = ${results2[0].id}`,function(error4,results4){
                        console.log(error4,results4);
                        res.json({
                            data:{
                                success:"加入成功"
                            }
                        })
                    })
                }else{
                    // 如果当前用户之前没有加入过本商品需要添加进入
                    connection.query(
                    `insert into goods_cart (uid,goods_id,name,imgUrl,pprice,num) values ("${userId}","${goodsId}","${name}","${imgUrl}","${pprice}","${num}")`,
                    function(error3,results3){
                        res.json({
                            data:{
                                success:"加入成功"
                            }
                        })
                    });
                }
            });
        });
    });
});

/* 修改当前用户购物车商品数量 */
router.post('/api/updateCart', function(req, res, next) {
    let token = req.headers.token;
    let phone = jwt.decode(token);
    let goodsId = req.body.goodsId;//商品id
    let num = req.body.num;//前端传过来用户输入的产品数量
    connection.query( `select * from user where phone = ${phone.name}`,function(error,results, fields){
        let userId = results[0].id;
        connection.query( `select * from goods_cart where uid = ${userId} and goods_id = ${goodsId}`,function(error1,results1, fields1){
            // console.log(results1);
            let goods_num = results1[0].num;//数据库中当前的数量
            let id = results1[0].id;//当前id号
            // 修改替换
            connection.query(`update goods_cart set num = replace(num,${goods_num},${num}) where id = ${id}`,function(error2,results2){
                res.json({
                    data:{
                        success:true
                    }
                })
            })
        });
    });
});

/* 获取当前用户购物车列表 */
router.post('/api/selectCart', function(req, res, next) {
    let token = req.headers.token;
    let phone = jwt.decode(token);
    connection.query( `select * from user where phone = ${phone.name}`,function(error,results, fields){
        let userId = results[0].id;
        connection.query( `select * from goods_cart where uid = ${userId}`,function(error1,results1, fields1){
            res.json({
                data:results1
            });
        });
    });
});


/* 当前用户修改收货地址 */
router.post('/api/updateAddress', function(req, res, next) {
    let token = req.headers.token;
    let phone = jwt.decode(token);
    let name = req.body.name;
    let tel = req.body.tel;
    let province = req.body.province;
    let city = req.body.city;
    let district = req.body.district;
    let address = req.body.address;
    let isDefault = req.body.isDefault;
    let id = req.body.id;
    connection.query( `select * from user where phone = ${phone.name}`,function(error,results, fields){
        let userId = results[0].id;
        // 默认地址处理,当前用户只能有一个默认地址
        connection.query(`select * from address where userid=${userId} and isDefault = ${isDefault}`,function(err2,res2,fields2){
            let childId = results[0].id;
            connection.query(`update address set isDefault = replace(isDefault,"1","0") where userid=${childId}`,function(err3,res3){
                // console.log(err3,res3);
                // 
                let sqlupdate = "update address set name=?,tel=?,province=?,city=?,district=?,address=?,isDefault=?,userid=? where id = '"+id+"'";
                connection.query(sqlupdate,[name,tel,province,city,district,address,isDefault,userId],function(err1,res1,field1){
                    // console.log(err1,res1,field1);
                    res.send({
                        data:{
                            success:"成功"
                        }
                    })
                });
            });
        });
        
    });
    
});

/* 当前用户新增收货地址 */
router.post('/api/addAddress', function(req, res, next) {
    let token = req.headers.token;
    let phone = jwt.decode(token);
    let name = req.body.name;
    let tel = req.body.tel;
    let province = req.body.province;
    let city = req.body.city;
    let district = req.body.district;
    let address = req.body.address;
    let isDefault = req.body.isDefault;
    connection.query( `select * from user where phone = ${phone.name}`,function(error,results, fields){
        let id = results[0].id;
        let sqlInsert = "insert into address (name,tel,province,city,district,address,isDefault,userId) values ('"+name+"','"+tel+"','"+province+"','"+city+"','"+district+"','"+address+"','"+isDefault+"','"+id+"')";
        connection.query(sqlInsert,function(err1,res1,field1){
            res.send({
                data:{
                    success:"成功"
                }
            })
        });
    });
});

/* 当前用户查询收货地址 */
router.post('/api/selectAddress', function(req, res, next) {
    let token = req.headers.token;
    let phone = jwt.decode(token);
    console.log( token );
    console.log( phone );
    connection.query( `select * from user where phone = ${phone.name}`,function(error,results, fields){
        let id = results[0].id;
        connection.query( `select * from address where userId = ${id}`,function(error2,results2, fields2){
            // console.log( results2 );
            res.send({
                data:results2
            })
        });
    });
});


/* 第三方登录 */
router.post('/api/loginother', function(req, res, next) {
    // 前端给后端的数据
    let params = {
        provider:req.body.provider,//登录方式
        openid:req.body.openid,//用户身份id
        nickName:req.body.nickName,//用户昵称
        avataUrl:req.body.avataUrl//用户头像
    };
    console.log(params);
    // 查询数据库中用户是否存在
    connection.query(user.queryUserName(params),function(error,results,fields){
        if(results.length > 0){
            // 数据库中存在 直接读取
            connection.query( user.queryUserName( params ), function(err2, res2) {
                res.send({
                    data:res2[0]
                });
            });
        }else{
            // 数据库中不存在  存储 -> 读取
            connection.query( user.insertData( params ), function(err1,res1) {
                connection.query( user.queryUserName( params ), function(err2, res2) {
                    res.send({
                        data:res2[0]
                    });
                });
            });
        }
    })
});

/* 注册->增加一条数据. */
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){
            // 再去查询手机号是否存在,用于注册成功后直接登录
            connection.query(user.queryUserName(params),function(er,result){
                if(results.length > 0){
                    res.send({
                        data:{
                            success:true,
                            msg:'注册成功',
                            data:result[0]
                        }
                    });
                    
                }
            });
            
            // 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;

前端代码 cart.js

import $http from '@/common/api/request.js'
export default{
    state:{
        list:[
                /* {
                    id:1,
                    name:"332经济法能聚聚会技能大赛 经济法能聚聚会技能大赛",
                    color:"颜色：嘿嘿嘿激活",
                    imgUrl:"../../static/logo.png",
                    pprice:"27",
                    num:1,
                    checked:false
                },{
                    id:2,
                    name:"032经济法能聚聚会技能大赛 经济法能聚聚会技能大赛",
                    color:"颜色：嘿嘿嘿激活",
                    imgUrl:"../../static/logo.png",
                    pprice:"48",
                    num:6,
                    checked:false
                } */
            ],
        selectedList:[]
        
    },
    getters:{
        // 判断是否 全选
        checkedAll(state){
            return state.list.length === state.selectedList.length;
        },
        // 合计 结算数量
        totalCount(state){
            let total = {
                pprice:0,
                num:0
            }
            state.list.forEach(v=>{
                // 是否选中
                if(state.selectedList.indexOf(v.id) > -1){
                    // 合计
                    total.pprice += v.pprice*v.num;
                    // 结算数量
                    total.num = state.selectedList.length;
                }
            })            
            
            return total;
        }
    },
    mutations:{
        // 请求到数据赋值操作
        initGetData(state,list){
            state.list = list;
        },
        // 全选
        checkAll(state){
            state.selectedList = state.list.map(v=>{
                v.checked = true;
                return v.id;
            })
        },
        // 全不选
        unCheckAll(state){
            state.list.forEach(v=>{
                v.checked = false;
            })
            state.selectedList = [];
        },
        // 单选
        selectedItem(state,index){
            let id = state.list[index].id;
            let i = state.selectedList.indexOf(id);
            // 如果selectList已经存在就代表他之前的选中状态,checked=false,并且在selectedList删除
            if (i>-1) {
                state.list[index].checked = false;
                return state.selectedList.splice(i,1);
            }
            // 如果之前没有选中,checked=true,把当前的id添加到selectedList
            state.list[index].checked = true;
            state.selectedList.push(id);
        },
        // 
        delGoods(state){
            state.list = state.list.filter(v=>{
                return state.selectedList.indexOf(v.id) === -1;
            })
        },
        // 加入购物车
        addShopCart(state, goods){
            state.list.push(goods);
        }
    },
    actions:{
        checkedAllFn({commit,getters}){
            getters.checkedAll ? commit("unCheckAll") : commit("checkAll")
        },
        delGoodsFn({commit,state}){
            
            uni.showModal({
                content:'确认删除吗?',
                success: () => {
                    $http.request({
                        url:'/deleteCart',
                        method:"POST",
                        header:{
                            token:true
                        },
                        data:{
                            goods_id:state.selectedList
                        }
                    }).then((res)=>{
                        
                        commit('delGoods');
                        commit("unCheckAll");
                        uni.showToast({
                            title:'删除成功',
                            icon:"none"
                        })
                    }).catch(()=>{
                        uni.showToast({
                        title:'请求失败',
                        icon:'none'
                        })
                    })
                }
            })
            
        }
    }
}

目录结构

前端目录结构

  • 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/519918.html

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

相关文章

6.Go语言学习笔记-结合chatGPT辅助学习Go语言底层原理

6.Go语言学习笔记-结合chatGPT辅助学习Go语言底层原理

1、Go版本 go1.14.15 2、汇编基础 推荐阅读:GO汇编语言简介 推荐阅读:A Quick Guide to Gos Assembler - The Go Programming Language 精简指令集 数据传输: MOV/LEA 跳转指令: CMP/TEST/JMP/JCC 栈指令: PUSH/POP 函数调用指令: CALL/RET 算术指令: ADD/SUB/MUL/DIV …
阅读更多...
PFCdocumentation_FISH Rules and Usage

PFCdocumentation_FISH Rules and Usage

目录 FISH Scripting FISH Rules and Usage Lines Data Types Reserved Names for Functions and Variables Scope of Variables Functions: Structure, Evaluation, and Calling Scheme Arithmetic: Expressions and Type Conversions Redefining FISH Functions Ex…
阅读更多...
hadoop03

hadoop03

MapReduce是Hadoop系统核心组件之一，它是一种可用于大数据并行处理的计算模型、框架和平台，主要解决海量数据的计算，是目前分布式计算模型中应用较为广泛的一种。 练习：计算a.txt文件中每个单词出现的次数 hello world hello ha…
阅读更多...
Android View 事件分发机制，看这一篇就够了

Android View 事件分发机制，看这一篇就够了

在 Android 开发当中，View 的事件分发机制是一块很重要的知识。不仅在开发当中经常需要用到，面试的时候也经常被问到。 如果你在面试的时候，能把这块讲清楚，对于校招生或者实习生来说，算是一块不错的加分项。对于工作…
阅读更多...
三种方式在HTML使用阿里字体图标--iconfont阿里巴巴矢量图标库

三种方式在HTML使用阿里字体图标--iconfont阿里巴巴矢量图标库

好久没用到阿里巴巴的图标，突然要用到就发现不会用了，只会导出png格式的图标png了 目录 1、字体图标 方法一、本地使用通过类名使用阿里矢量图标 1、把图标添加入库 2、把图标添加到项目 3、下载字体图标 4、使用文件 5、在对应的HTML页面上引入…
阅读更多...
瑞吉外卖项目笔记01——环境搭建、后台登录功能

瑞吉外卖项目笔记01——环境搭建、后台登录功能

1.1 数据库 数据库&#xff1a; 创建一个空白数据库reggie&#xff0c;然后导入执行SQL文件创建的表如下&#xff1a; 1.2 项目依赖 项目依赖&#xff1a; pom.xml文件内的依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"…
阅读更多...
国外APP项目的上线流程

国外APP项目的上线流程

现在很多创业者希望自己的项目能走出国内&#xff0c;向全球各地发展&#xff0c;尤其对于一些通用APP来说&#xff0c;国外可以增加一个新的收入渠道。比如常见的出海APP有小型游戏、手机清理、杀毒软件等等&#xff0c;这些类型的APP在全球的使用基本都是一样的&#xff0c;因…
阅读更多...
Lucene（1）：Lucene介绍

Lucene（1）：Lucene介绍

Lucene官网&#xff1a; http://lucene.apache.org/ 1 搜索技术理论基础 1.1 lucene优势 原来的方式实现搜索功能&#xff0c;我们的搜索流程如下图&#xff1a; 上图就是原始搜索引擎技术&#xff0c;如果用户比较少而且数据库的数据量比较小&#xff0c;那么这种方式实现搜…
阅读更多...
Lucene（2）：Lucene全文检索的流程

Lucene（2）：Lucene全文检索的流程

1 索引和搜索流程图 &#xff08;1&#xff09;绿色表示索引过程&#xff0c;对要搜索的原始内容进行索引构建一个索引库&#xff0c;索引过程包括&#xff1a; 确定原始内容即要搜索的内容 获得文档创建文档分析文档索引文档 &#xff08;2&#xff09;红色表示搜索过程&…
阅读更多...
win10安装conda

win10安装conda

conda是一个开源的软件包管理系统和环境管理系统&#xff0c;用于安装、管理和升级各种软件和应用程序。它可以在多个操作系统上运行&#xff0c;支持数百种语言和各种计算机程序。conda提供了安装软件包、创建和管理虚拟环境、配置依赖关系等功能&#xff0c;并且可以轻松地在…
阅读更多...
Mac+Vscode+PyQt

Mac+Vscode+PyQt

纵览 1、需要安装Python&#xff0c;而我安装了Anaconda&#xff0c;并建立了一个虚拟环境env_qt2、在Vscode的终端中利用命令&#xff1a;3、在Vscode的扩展中安装「PYQT Integration」插件&#xff0c;4、可以在bin文件夹下创建一个无后缀的文件des&#xff0c;输入&#xff…
阅读更多...
Hacking The Box----Awkward

Hacking The Box----Awkward

信息收集 nmap扫描&#xff0c;发现22号端口和80号端口打开&#xff0c;80号端口上运行着http服务器。访问ip后URL变为hat-valley.htb 修改/etc/hosts文件&#xff0c;添加10.10.11.185 hat-valley.htb&#xff0c;然后就能正常访问网站。可以看到是一家卖帽子的公司的网站&a…
阅读更多...
Windows如何安装使用curl命令

Windows如何安装使用curl命令

一、前言 个人主页: ζ小菜鸡大家好我是ζ小菜鸡&#xff0c;让我们一起学习Windows如何安装使用curl命令。如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连) 二、Curl是什么 curl命令网络应用curl命令是一个利用URL规则在命令行下工作的文件传输工具。 CURL支持的通信协议…
阅读更多...
【从零开始学Skynet】高级篇（一）：Protobuf数据传输

【从零开始学Skynet】高级篇（一）：Protobuf数据传输

1、什么是Protobuf Protobuf是谷歌发布的一套协议格式&#xff0c;它规定了一系列的编码和解 码方法&#xff0c;比如对于数字&#xff0c;它要求根据数字的大小选择存储空间&#xff0c;小于等于15的数字只用1个字节来表示&#xff0c;大于15的数用2个字节表示&#xff0c;以此…
阅读更多...
PBR核心理论与渲染原理

PBR核心理论与渲染原理

基于物理的渲染&#xff08;Physically Based Rendering&#xff0c;PBR&#xff09;是指使用基于物理原理和微平面理论建模的着色/光照模型&#xff0c;以及使用从现实中测量的表面参数来准确表示真实世界材质的渲染理念。 以下是对PBR基础理念的概括&#xff1a; 微平面理论…
阅读更多...
Datax的使用说明及入门操作案例演示

Datax的使用说明及入门操作案例演示

1.DataX DataX 是阿里云 DataWorks数据集成 的开源版本&#xff0c;在阿里巴巴集团内被广泛使用的离线数据同步工具/平台。DataX 实现了包括 MySQL、Oracle、OceanBase、SqlServer、Postgre、HDFS、Hive、ADS、HBase、TableStore(OTS)、MaxCompute(ODPS)、Hologres、DRDS, dat…
阅读更多...
power shell 入门

power shell 入门

常用命令 powershell版本 不区分大小写: $psversiontable $psv + tab 自动补齐 // ps version get-command 或者 gcm //获取所有命令 get-help 命令名 // 获取命令帮助信息 路径相关 get-location 或者 gl 或者 pwd // 获取当前路径 pwd: print work directory 的缩写.
阅读更多...
Linux命令易混淆（看到新知识点就更新）

Linux命令易混淆（看到新知识点就更新）

DNS相关 在Linux操作系统中&#xff0c;TCP/IP网络是通过若干个文本文件进行配置的。系统在启动时通过读取一组有关网络配置的文件和脚本参数内容&#xff0c;来实现网络接口的初始化和控制过程&#xff0c;这些文件和脚本大多数位于/etc目录下。 Linux下配置dns的三种方法 1…
阅读更多...
深入了解梯度消失与梯度爆炸

深入了解梯度消失与梯度爆炸

本文探讨深度学习中经常会提到的概念–梯度消失与梯度爆炸。他们是影响模型收敛&#xff0c;学习好坏的一个重要因素&#xff0c;对此现象也提出了对应的解决方案。在此记录其概念&#xff0c;原因和相关的解决方案&#xff0c;仅供参考。 目录 概念原因解决方案1. 参数初始化2…
阅读更多...
Vim学习笔记【Ch00，Ch01】

Vim学习笔记【Ch00，Ch01】

Vim学习笔记 GitHub的Learn-Vim仓库学习笔记Ch00 前言Ch01 Starting VimVim的官方链接Windows10下载和安装VimVim初级使用打开Vim退出Vim保存文件打开文件帮助文档helpargument参数打开多个窗口暂停 GitHub的Learn-Vim仓库学习笔记 仓库地址&#xff1a;https://github.com/ig…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023