UNIAPP实战项目笔记56 注册时验证手机号是否存在

UNIAPP实战项目笔记56 注册时验证手机号是否存在

注册时候需要拦截并验证登录
通过验证的直接跳转,未通过验证的提示手机号已存在

实际案例图片

后端接口文件 index.js

var express = require('express');
var router = express.Router();
var connection = require('../db/sql.js');
var user = require('../db/UserSql.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");
	if (req.method == 'OPTIONS')
		res.sendStatus(200); //让options尝试请求快速结束
	else
		next();
});


/* 注册验证手机号是否存在 */
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 home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

/* 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;

注册页面 login-tel.vue

<template>
    <view>
        <Lines></Lines>
        <view class="login-tel">
            <view class="tel-main">
                <view class="login-from">
                    <view class="login-user">
                        <text class="user-text">手机号</text>
                        <input type="number" focus="true" v-model="userTel" placeholder="请输入11位手机号">
                    </view>
                </view>
                <view class="tel" @click="goNextCode">下一步</view>
            </view>
        </view>
    </view>
</template>

<script>
    import $http from '@/common/api/request.js'
    import Lines from '@/components/common/Lines.vue'
    export default {
        data() {
            return {
                userTel:"",
                rules:{
                    userTel:{
                        rule:/^1[2345679]\d{9}$/,
                        msg:"请输入11位手机号"
                    }
                }
                
            };
        },
        components:{
            Lines
        },
        methods:{
             goNextCode(){
                 if( !this.validate('userTel') ) return ;
                 
                 $http.request({
                     url:'/registered',
                     method:"POST",
                     data:{
                         phone: this.userTel
                     }
                 }).then((res)=>{
                     if(!res.success){
                        uni.showToast({
                            title:res.msg,
                            icon:'none'
                        });
                        return;
                     }else{
                         uni.navigateTo({
                             url:'/pages/login-code/login-code'
                         });
                     }
                 }).catch(()=>{
                     uni.showToast({
                         title:'请求失败',
                         icon:'none'
                     })
                 })
                 
             },
             // 判断验证是否符合要求
             validate(key){
                 let bool = true;
                 if( !this.rules[key].rule.test(this[key]) ){
                     uni.showToast({
                         title:this.rules[key].msg,
                         icon:'none'
                     });
                     bool = false;
                     return false;
                 }
                 return bool;
             },
        }
    }
</script>

<style lang="scss">
.login-tel{
    width: 100vw;
    height: 100vh;
}
.tel-main{
    padding: 0 20rpx;
}
.login-from{
    padding: 30rpx 0;
}
.tel{
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    color: #fff;
    background-color: #40bde8;
    border-radius: 40rpx;
}
.login-user{
    font-size: 40rpx;
    padding: 10rpx 0 ;
    display: flex;
    align-items: center;
    border-bottom: 2rpx solid #f7f7f7;
}
.user-text{
    padding-right: 10rpx;
}
</style>

目录结构

前端目录结构

• 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