UNIAPP实战项目笔记63 当前用户查询收货地址的前后端实现

ggome

已于 2023-05-11 10:45:36 修改

阅读量795

点赞数

分类专栏： uni-app 文章标签： uni-app 笔记 java javascript 前端

于 2023-05-09 23:41:46 首次发布

本文链接：https://blog.csdn.net/gixome/article/details/130546081

版权

uni-app 专栏收录该内容

109 篇文章 41 订阅

订阅专栏

UNIAPP实战项目笔记63 当前用户查询收货地址的前后端实现

案例实图

在这里插入图片描述

总体思路

当前登陆的时候收货地址( token )
header:{
token:true
}
前端:
后端:
1.设计数据库(新建一个收货地址表)
收货地址表,需要和user表关联 [字段:用户id]
2.创建一个接口

查询收货地址接口文档

1.1 接口功能

查询收货地址

1.2 URL

地址/api/selectAddress

1.3 支持格式

JSON

1.4 HTTP请求

POST

1.5 请求参数

参数	必选	类型	说明

1.6 返回字段

返回字段	字段类型	说明
code	string	返回结果状态. 0:正常;1:错误;
data	object	首页数据

1.7 接口示例

{
	"code":"0",
	"data":[{
		name:"张三",
		tel:13313133311
	}]
}

接口后端文件 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", "Authorization,Content-Type,Accep,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,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/selectAddress', function(req, res, next) {
    let token = req.headers.token;
    let phone = jwt.decode(token);
    console.log( 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;

后端代码 UserSql.js

let User = {
    // 查询用户名或手机号
    queryUserName( param ){
        if( param.userName ){
            return "select * from user where userName = '"+param.userName+"' or phone ='"+param.userName+"'";
        }else{
            // 第三方登录
            return "select * from user where provider = '"+param.provider+"' or openid ='"+param.openid+"'";
        }
    },
    // 查询用户名和密码
    queryUserPwd( param ){
        return "select * from user where (userName = '"+param.userName+"' or phone ='"+param.userName+"') and userPwd ='"+param.userPwd+"'";
    },
    // 增加一条用户数据
    insertData( param ){
        let userName = param.userName || param.openid.slice(0,11);
        const jwt = require('jsonwebtoken');// 生成token秘钥
        let payload = {name:userName};//用户名
        let secret = 'alalal';//自定义口令
        let token = jwt.sign(payload,secret);
        let nickName = param.nickName || "默认昵称";
        let avatarUrl = param.avatarUrl || "../../static/logo.png";
        return "insert into user (userName,userPwd,phone,imgUrl,nickName,token,provider,openid) values ('','a1a1a1','"+param.userName+"','"+avatarUrl+"','"+nickName+"','"+token+"','"+param.provider+"','"+param.openid+"')";
    }
}

exports = module.exports = User;

my-path-list.vue

<template>
    <view class="my-path-list">
        <view class="path-list">
            <view  
                v-for="(item,index) in list" 
                :key="index"
                @tap="toAddPath(index)"
            >
            
                <view class="path-item" @tap="goConfirmOrder(item)" >
                    <view class="item-main">
                        <view class="item-name">
                            {{item.name}}
                        </view>
                        <view class="">
                            {{item.tel}}
                        </view>
                    </view>
                    <view class="item-main">
                        <view class="active" v-show="item.isDefault == 1">
                            默认
                        </view>
                        <view class="">
                            {{item.province}} {{item.city}} {{item.district}} {{item.address}}
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="add-path">
            <view class="add-path-btn" @tap="goAddPath">
                新增地址
            </view>
        </view>
    </view>
</template>

<script>
    import $http from '@/common/api/request.js'
    import {mapState,mapMutations} from 'vuex'
    export default {
        data() {
            return {
                isSelectedPath:false
            };
        },
        computed:{
            ...mapState({
                list:state=>state.path.list
            })
        },
        onLoad(e) {
            if (e.type === 'selectedPath') {
                this.isSelectedPath = true;
            }
            // 初始化拿到收货地址数据
            this.__initAddress();
        },
        methods:{
            ...mapMutations(['__initAddressList']),
            // 初始化 (请求收货地址接口)
            __initAddress(){
                
                $http.request({
                    url:'/selectAddress',
                    method:"POST",
                    header:{
                        token: true
                    }
                }).then((res)=>{
                   if(res.success){
                       console.log(res);
                       this.__initAddressList(res);
                   }else{
                       uni.showToast({
                        title:res.msg,
                        icon:"none"
                       })
                   }
                    
                }).catch(()=>{
                    uni.showToast({
                        title:'请求失败',
                        icon:'none'
                    })
                })
            },
            // 修改
            toAddPath(index){
                let pathObj = JSON.stringify({
                    index:index,
                    item:this.list[index]
                });
                uni.navigateTo({
                    url:'../my-add-path/my-add-path?data='+pathObj
                })
            },
            // 新增
            goAddPath(){
                uni.navigateTo({
                    url:'../my-add-path/my-add-path'
                })
            },
            // 返回确认订单
            goConfirmOrder(item){
                // 如果是从确认订单过来的执行
                if(this.isSelectedPath){
                    // 自定义事件:页面通信
                    uni.$emit('selectPathItem',item);
                    // 返回上一页
                    uni.navigateBack();
                }
            }
        }
    }
</script>

<style lang="scss">
.add-path{
    padding: 20rpx 0;
    width: 100%;
    display: flex;
    justify-content: center;
}
.add-path-btn{
    border: 2rpx solid #49bdfb;
    color: #49bdfb;
    border-radius: 30rpx;
    padding: 6rpx 60rpx;
}
.path-list{
    padding: 0 20rpx;
}
.path-item{
    padding: 10rpx;
    border-bottom: 2rpx solid #ccc;
}
.item-main{
    padding: 8rpx 0;
    display: flex;
    align-items: center;
}
.item-name{
    padding-right: 10rpx;
}
.active{
    padding: 6rpx;
    background-color: #49bdfb;
    columns: #fff;
    border-radius: 20rpx;
    font-size: 24rpx;
    text-align: center;
}
</style>

path.js

export default{
    state:{
        list:[
            /* {
                name:"张果老",
                tel:"18010101919",
                city:"北京市朝阳区建国路",
                details:"四惠东199号",
                isDefault:false
            },{
                name:"吕洞宾",
                tel:"18010102929",
                city:"北京市石景山区鲁谷",
                details:"中心西街199号",
                isDefault:true
            } */
        ]
    },
    getters:{
        defaultPath(state){
            return state.list.filter(v=>v.isDefault)
        }
    },
    mutations:{
        // 拿到初始化请求当前用户收货地址数据
        __initAddressList(state,list){
            state.list = list;
        },
        createPath( state, obj ){
            state.list.unshift( obj );
        },
        updatePath( state, {index,item} ){
            for(let key in item){
                state.list[index][key] = item[key];
            }
        },
        // 把之前选中默认的改完未选中
        removePath(state){
            state.list.forEach(v=>{
                if(v.isDefault){
                    v.isDefault = false;
                }
            })
        }
    },
    actions:{
        createPathFn({commit}, obj){
            if(obj.isDefault){
                commit('removePath')
            }
            commit('createPath', obj);
        },
        updatePathFn({commit}, obj){
            if(obj.item.isDefault){
                commit('removePath')
            }
            commit('updatePath', obj);
        }
    }
}

表格结构

CREATE TABLE `address` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL,
  `tel` varchar(255) DEFAULT NULL,
  `province` varchar(255) DEFAULT NULL,
  `city` varchar(255) DEFAULT NULL,
  `district` varchar(255) DEFAULT NULL,
  `address` varchar(255) DEFAULT NULL,
  `isDefault` varchar(255) DEFAULT NULL,
  `userid` int(10) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

CREATE TABLE `goods_search` (
  `Id` int(11) NOT NULL AUTO_INCREMENT,
  `imgUrl` varchar(255) DEFAULT NULL,
  `name` varchar(255) DEFAULT NULL,
  `pprice` varchar(255) DEFAULT NULL,
  `oprice` varchar(255) DEFAULT NULL,
  `discount` varchar(255) DEFAULT NULL,
  `brand` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`Id`)
) ENGINE=MyISAM AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;


CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `userName` varchar(255) DEFAULT NULL,
  `userPwd` varchar(255) DEFAULT NULL,
  `phone` varchar(255) DEFAULT NULL,
  `imgUrl` varchar(255) DEFAULT NULL,
  `nickName` varchar(255) DEFAULT NULL,
  `token` varchar(255) DEFAULT NULL,
  `provider` varchar(255) DEFAULT NULL,
  `openid` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

目录结构

前端目录结构

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

ggome

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
UNIAPP实战项目笔记63 当前用户查询收货地址的前后端实现

当前登陆的时候收货地址( token )header:{token:true前端:后端:1.设计数据库(新建一个收货地址表)收货地址表,需要和user表关联 [字段:用户id]2.创建一个接口。
复制链接

扫一扫