UNIAPP实战项目笔记58 注册成功信息存储到数据库

news2025/7/28 2:21:09

UNIAPP实战项目笔记58 注册成功信息存储到数据库

注册时候验证手机验证码
验证码通过后讲用户信息存入数据库

实际案例图片

注册通过后,登录成功后的页面

后端接口文件 index.js

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

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



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


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


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


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


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


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

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

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

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

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

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

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


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

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

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



module.exports = router;

后端接口文件 UserSql.js

let User = {
    // 查询用户名或手机号
    queryUserName( param ){
        return "select * from user where userName = '"+param.userName+"' or phone ='"+param.userName+"'";
    },
    // 查询用户名和密码
    queryUserPwd( param ){
        return "select * from user where (userName = '"+param.userName+"' or phone ='"+param.userName+"') and userPwd ='"+param.userPwd+"'";
    },
    // 增加一条用户数据
    insertData( param ){
        return "insert into user (userName,userPwd,phone,imgUrl,nickName,token) values ('','a1a1a1','"+param.userName+"','../../static/logo.png','默认昵称','')";
    }
}

exports = module.exports = User;

用户信息保存接口文档

七 增加用户接口文档
1.1 接口功能

增加用户

1.2 URL

地址 /api/addUser

1.3 支持格式

JSON

1.4 HTTP请求方式

POST

1.5 请求参数

参数必选类型说明
userNamestring手机号
codestring验证码

1.6 返回字段

返回字段字段类型说明
codestring返回结果状态 0:正常 1:错误
dataobject商品分类数据

1.7 接口示例

{
	"code":'0',
	"data":[
		{
    	success:true,
    	code:6585
  	}
}

验证验证码页面 login-code.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="text" focus="true" v-model="userCode" placeholder="请输入验证码">
                        <button plain="true" size="mini" :disabled="disabled" @tap="sendCode">{{codeMsg}}</button>
                    </view>
                </view>
                <view class="tel" @click="getNextIndex">下一步</view>
            </view>
        </view>
    </view>
</template>

<script>
    import $http from '@/common/api/request.js'
    import Lines from '@/components/common/Lines.vue'
    export default {
        data() {
            return {
                //用户输入的验证码
                userCode:"",
                // 倒计时时间
                codeNum:60,
                // 显示的文本
                codeMsg:"",
                // 按钮是否禁用
                disabled:false,
                // 手机号
                phone:'',
                // 得到的验证码
                getCode:"",
            };
        },
        components:{
            Lines
        },
        onReady() {
            this.codeMsg = '重新发送('+this.codeNum+')';
            this.sendCode();
        },
        onLoad(e) {
            this.phone = e.phone;
        },
        methods:{
             sendCode(){
                 // 请求接口返回验证码
                 $http.request({
                     url:'/code',
                     method:"POST",
                     data:{
                         userName: this.phone
                     }
                 }).then((res)=>{
                     
                     console.log(res.code);
                     this.getCode = res.code;
                     
                 }).catch(()=>{
                     uni.showToast({
                         title:'请求失败',
                         icon:'none'
                     })
                 })
                 
                 this.disabled = true;
                 let timer = setInterval(()=>{
                     --this.codeNum;
                     this.codeMsg = '重新发送('+this.codeNum+')';
                 },1000);
                 setTimeout(()=>{
                     clearInterval(timer);
                     this.codeNum = 60;
                     this.disabled = false;
                     this.codeMsg = '重新发送';
                 },60000)
             },
             // 点击下一步
             getNextIndex(){
                 
                 if(  this.getCode == this.userCode ){
                     // 请求后端接口 => 往数据库增加一条数据
                     $http.request({
                         url:'/addUser',
                         method:"POST",
                         data:{
                             userName: this.phone,
                             code:this.userCode
                         }
                     }).then((res)=>{
                         
                         console.log(res);
                         // 注册成功
                         if( res.success ){
                             
                             uni.showToast({
                                 title:res.msg,
                                 icon:'none'
                             })
                             
                             uni.redirectTo({
                                 url:"../index/index"
                             })
                         }
                         
                     }).catch(()=>{
                         uni.showToast({
                             title:'请求失败',
                             icon:'none'
                         })
                     })
                 }else{
                     uni.showToast({
                         title:"验证码错误",
                         icon:"none"
                     })
                 }
                 
                 // uni.switchTab({
                 //     url:'/pages/index/index'
                 // })
             }
        },
    }
</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>

手机登录页面 login.vue

<template>
    <view class="login">
        <swiper vertical="true" style="height: 100vh;">
            <swiper-item>
                <scroll-view>
                    <view class="login-tel">
                        <view class="tel-main">
                            <view class="close" @tap="goBack">
                                <image class="close-img" src="../../static/img/close-bold.png" mode=""></image>
                            </view>
                            <view class="logo">
                                <image class="logo-img" src="../../static/logo.png" mode=""></image>
                            </view>
                            <view class="tel" @tap="goLoginTel">手机号注册</view>
                            <LoginOther></LoginOther>
                            <view class="login-go">
                                <view class="">已有账号,去登录</view>
                                <image src="../../static/img/arrow-down.png" mode=""></image>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </swiper-item>
            <swiper-item>
                <scroll-view>
                    <view class="login-tel">
                        <view class="tel-main">
                            <view class="close close-center">
                                <view class="" @tap="goBack">
                                    <image class="close-img" src="../../static/img/close-bold.png" mode=""></image>
                                </view>
                                <view class="login-go">
                                    <image class="close-img" src="../../static/img/up.png" mode=""></image>
                                    <view class="">没账号,去注册</view>
                                </view>
                                <view class=""></view>
                            </view>
                            <view class="login-form">
                                <view class="login-user">
                                    <text class='user-text'>账号</text>
                                    <input type="text" v-model="userName" value="" placeholder="请输入手机号/昵称"/>
                                </view>
                                <view class="login-user">
                                    <text class='user-text'>密码</text>
                                    <input type="safe-password" v-model="userPwd" value="" placeholder="6-16位字符"/>
                                </view>
                            </view>
                            <view class="login-quick">
                                <view class="">忘记密码</view>
                                <view class="">免密登录</view>
                            </view>
                            <view class="tel" @tap="submit">登录</view>
                            <view class="reminder">温馨提示,您可以选择免密登录,更加方便</view>
                            <LoginOther></LoginOther>
                        </view>
                    </view>
                </scroll-view>
            </swiper-item>
        </swiper>
        
        
        
    </view>
</template>

<script>
    import $http from '@/common/api/request.js'
    import LoginOther from '@/components/login/login-other.vue'
    import {mapMutations} from 'vuex'
    export default {
        data() {
            return {
                userName:"",
                userPwd:"",
                rules:{
                    userName:{
                        rule:/\S/,
                        msg:"账号不能为空 "
                    },
                    userPwd:{
                        rule:/^[0-9a-zA-Z]{6,16}$/,
                        msg:"密码应该为6-16位字符"
                    }
                }
            };
        },
        components:{
            LoginOther
        },
        methods:{
            ...mapMutations(['login']),
             goBack(){
                 uni.navigateBack();
             },
             submit(){
                 if( !this.validate('userName') ) return ;
                 if( !this.validate('userPwd') ) return ;
                 
                 uni.showLoading({
                     title:"登录中..."
                 });
                 // setTimeout(()=>{
                 //     uni.hideLoading();
                 //     uni.navigateBack();
                 // },2000)
                 
                 $http.request({
                     url:'/login',
                     method:"POST",
                     data:{
                         userName: this.userName,
                         userPwd : this.userPwd
                     }
                 }).then((res)=>{
                     // 保存用户信息
                     this.login(res.data);
                     console.log(res.data);
                     
                     uni.showToast({
                         title:res.msg,
                         icon:"none"
                     })
                     // console.log(res);
                     uni.hideLoading();
                     if(res.success){
                         uni.navigateBack();
                     }
                 }).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;
             },
             // 进入手机号注册页面
             goLoginTel(){
                 uni.navigateTo({
                     url:"/pages/login-tel/login-tel"
                 })
             }
        }
    }
</script>

<style lang="scss">
.login-tel{
    width: 100vw;
    height: 100vh;
}
.tel-main{
    padding: 0 20rpx;
}
.close{
    padding: 120rpx 0;
}
.close-img{
    width: 60rpx;
    height: 60rpx;
}
.logo{
    padding: 0 100rpx;
    padding-bottom: 100rpx;
    display: flex;
    justify-content: center;
    
}
.logo-img{
    width: 200rpx;
    height: 200rpx;
}
.tel{
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    color: #fff;
    background-color: #40bde8;
    border-radius: 40rpx;
}


.login-go{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.login-go image{
    width: 60rpx;
    height: 60rpx;
}

// 第二屏
.close-center{
    display: flex;
}
.close-center >view{
    flex: 1;
}
.login-form{
    padding-top: 100rpx;
}
.login-user{
    font-size: 40rpx;
    padding: 10rpx 0 ;
    display: flex;
    align-items: center;
    border-bottom: 2rpx solid #f7f7f7;
}
.user-text{
    padding-right: 10rpx;
}
.login-quick{
    display: flex;
    padding: 20rpx 0;
    justify-content: space-between;
}
.reminder{
    color: #ccc;
    font-size: 32rpx;
    padding: 20rpx 0;
    text-align: center;
}
</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

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

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

相关文章

爱奇艺“资产重定价”:首次全年运营盈利是拐点,底层逻辑大改善

长视频行业历时一年有余的降本增效、去肥增瘦&#xff0c;迎来首个全周期圆满收官的玩家。 北京时间2月22日美股盘前&#xff0c;爱奇艺发布2022年Q4及全年财报&#xff0c;Q4 Non-GAAP净利润明显超越预期&#xff0c;且首次实现全年运营盈利。受业绩提振&#xff0c;爱奇艺盘…

SpringSecurity源码分析(二) SpringBoot集成SpringSecurity即Spring安全框架的执行过程

在上一篇文章中我们描述了SpringSecurity的执行过程。我们我们了解到了以下内容 在SpringSecurity框架中有三个非常核心的类和接口&#xff0c;分别是 1.SecurityFilterChain接口 2.FilterChainProxy类 3.DelegatingFilterProxy类 springboot项目中&#xff0c;客户端向Tomcat …

day51【代码随想录】动态规划之回文子串、最长回文子序列

文章目录前言一、回文子串&#xff08;力扣647&#xff09;二、最长回文子序列&#xff08;力扣516&#xff09;前言 1、回文子串 2、最长回文子序列 一、回文子串&#xff08;力扣647&#xff09; 给你一个字符串 s &#xff0c;请你统计并返回这个字符串中 回文子串 的数目…

从网易到支付宝,3年外包生涯做完,我这人生算是彻底废了......

我为什么一直做外包呢&#xff0c;原因是薪资和技术方面。 在华三做了一年外包&#xff0c;薪资5k&#xff0c;功能测试&#xff0c;接触Linux和网络&#xff0c;但是说实在的技术很难沉淀&#xff0c;就像雾里看花一样&#xff0c;过年之后&#xff0c;想走的人都走了&#x…

Word处理控件Aspose.Words功能演示:使用 C# VB.NET 将 DOCX 转换为 DOC 或将 DOC 转换为 DOCX

Aspose.Words 是一种高级Word文档处理API&#xff0c;用于执行各种文档管理和操作任务。API支持生成&#xff0c;修改&#xff0c;转换&#xff0c;呈现和打印文档&#xff0c;而无需在跨平台应用程序中直接使用Microsoft Word。此外&#xff0c; Aspose API支持流行文件格式处…

深度学习编译器CINN(1):框架概览和编译安装

目录 框架概览 编译安装 参考 框架概览 CINN是一种在不改变模型代码的条件下加速飞桨模型运行速度的深度学习编译器。CINN致力于创造训推一体自动调优、分布式编译加速等特色功能&#xff0c;对深度学习模型提供全自动、极致的性能优化&#xff0c;并在科研界和工业界建立影…

【布隆过滤器(Bloom Filter)基本概念与原理、Bloom Filter优点与缺点、以及应用场景】

布隆过滤器&#xff08;Bloom Filter&#xff09;基本概念与原理、Bloom Filter优点与缺点、以及应用场景 Bloom Filter 基本概念 布隆过滤器是1970年由一个叫布隆的小伙子提出的。它实际上是一个很长的二进制向量和一系列随机映射函数。布隆过滤器可以用于检索一个元素是否在…

DualCor: Event Causality Extraction with Event Argument Correlations论文解读

Event Causality Extraction with Event Argument Correlations(带有事件论元相关性的事件因果关系抽取) 论文&#xff1a;2301.11621.pdf (arxiv.org) 代码&#xff1a;cuishiyao96/ECE: Dataset and code for COLING2022 paper Event Causality Extraction with Event Argum…

【vue 10 第一个vue-cli程序】

1.什么是vue-cli vue-cli官方提供的一个脚手架&#xff0c;用于快速生成一个vue的项目模版&#xff1b; 预先定义好的目录结构及基础代码&#xff0c;就好比咱们在创建Maven项目时可以选择创建一个骨架项目&#xff0c;这个骨架项目就是脚手架&#xff0c;我们的开发更加的快速…

FC总线知识点小结

FC总线 &#xff08;一&#xff09;特点&#xff1a; FC具备通道和网络双重优势&#xff0c;具备高带宽、高可靠性、高稳定性&#xff0c;抵抗电磁干扰等优点&#xff0c;能够提供非常稳定可靠的光纤连接&#xff0c;容易构建大型的数据传输和通信网络&#xff0c;目前支持1x…

2022阿里,字节跳动,JAVA岗(一线企业校招、社招)面试题合集

前言 以下面试题全属于一线大厂社招以及校招的面试真题&#xff0c;各位在做这些题目对照自己的时候请平凡心对待&#xff0c;不要信心受挫。其实 做为致力于一线企业校招或者社招的你来说&#xff0c;能把每个知识模块的一小部分问题去深入学习和总结&#xff0c;已经很棒了&…

SpringBoot整合阿里云OSS文件上传、下载、查看、删除

SpringBoot整合阿里云OSS文件上传、下载、查看、删除1、开发准备1.1 前置知识1.2 环境参数1.3 你能学到什么2. 使用阿里云OSS2.1 创建Bucket2.2 管理文件2.3 阿里云OSS文档3. 项目初始化3.1 创建SpringBoot项目3.2 Maven依赖3.3 安装lombok插件4. 后端服务编写4.1 阿里云OSS配置…

Ask林曦|来回答,30个你关心的日常问题(三)

在林曦老师的线上书法直播课上&#xff0c;上课前后的聊天时间里&#xff0c;时常有同学向林曦老师提问&#xff0c;这些问题涵盖了日常生活的诸多方面&#xff0c;从身体的保养&#xff0c;到快乐的法门&#xff0c;皆是大家感兴趣的&#xff0c;也都共同关切的。      暄…

Spring Cloud @RefreshScope 原理分析:扫描 Bean 定义

背景 最近读了一下 spring cloud 的 RefreshScope 生效的源码&#xff0c;总结一下该注解的 refresh 类型的类实例化的过程。 关键技术点&#xff1a; 扫描过程中对 RefreshScope 注解做了特殊处理&#xff0c;会额外注册两个BeanDefinition。GenericScope 实现了 BeanDefin…

医疗影像工具LEADTOOLS 入门教程: 从 PDF 中提取附件 - 控制台 C#

LEADTOOLS 是一个综合工具包的集合&#xff0c;用于将识别、文档、医疗、成像和多媒体技术整合到桌面、服务器、平板电脑、网络和移动解决方案中&#xff0c;是一项企业级文档自动化解决方案&#xff0c;有捕捉&#xff0c;OCR&#xff0c;OMR&#xff0c;表单识别和处理&#…

ARM平台搭建Python环境

ARM平台搭建Python环境写在最前常见问题1. 主机&#xff08;Ubuntu&#xff09;安装Python3.8.101.1 安装前的准备1.2 Ubuntu安装Python3.8.101.3 Ubuntu配置Python3.8.102. 宿主机&#xff08;AMR&#xff09;安装Python3.8.102.1 主机安装交叉编译工具2.2 交叉编译zlib库2.3 …

简析RE中python的exe文件

0x00. 前置学习 简单了解 python为什么要打包成exe文件&#xff1f;在日常生活中的应用是因为传输源文件以及源代码给他人是需要配置好一定的环境才能进行编译操作&#xff0c;而打包成exe文件就可以跟电脑软件一样打开就可以运行也可以分享给他人。 而对于ctf比赛来说&…

(三十三)大白话MySQL运行时多个事务同时执行是什么场景?

到目前为止&#xff0c;我们已经给大家深入讲解了MySQL的buffer pool机制、redo log机制和undo log机制&#xff0c;相信大家现在对我们平时执行一些增删改语句的实现原理&#xff0c;都有了一定较为深入的理解了&#xff01; 因为平时我们执行增删改的时候&#xff0c;无非就…

Python|Leetcode刷题日寄Part04

Python|Leetcode刷题日寄Part0401&#xff1a;环形链表02&#xff1a;跳跃游戏03&#xff1a;括号生成04&#xff1a;二分查找05&#xff1a;打家劫舍06&#xff1a;搜索旋转排序数组07&#xff1a;Z字形变换08&#xff1a;买卖股票的最佳时机Ⅱ09&#xff1a;最后一个单词的长…

国产蓝牙耳机300左右哪个牌子的好?三百左右蓝牙耳机推荐

现在的蓝牙耳机样式越来越五花八门&#xff0c;各种性能也越来越好。特别是国产蓝牙耳机&#xff0c;近几年的发展十分快速。那么&#xff0c;三百左右哪个牌子的国产蓝牙耳机好&#xff1f;接下来&#xff0c;我来给大家推荐几款三百左右的蓝牙耳机&#xff0c;一起来看看吧。…