当前位置： 首页 > article >正文

校园跑腿小程序--我的，登录和注册页面开发

article 2025/1/16 15:57:27

在这里插入图片描述

hello hello~ ，这里是 code袁~💖💖 ，欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹

🦁作者简介：一名喜欢分享和记录学习的在校大学生
💥个人主页：code袁的博客
💥 个人QQ：2647996100
🐯 个人wechat：code8896
code袁系列专栏导航
1.《毕业设计与课程设计》本专栏分享一些毕业设计的源码以及项目成果。🥰🥰🥰
2.《微信小程序开发》本专栏从基础到入门的一系开发流程，并且分享了自己在开发中遇到的一系列问题。🤹🤹🤹
3.《vue开发系列全程线路》本专栏分享自己的vue的学习历程。

非常期待和您一起在这个小小的互联网世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨ 

在这里插入图片描述

文章目录

      • 1.我的页面
      • 2.登录页面
      • 3.注册页面
      • 4.api login
      • 5.responseFormat.js 和statusCodes.js
      • 6. login 和 addUser
      • 🎉写在最后

B站讲解视频 视频地址

1.我的页面

<!--pages/my/my.wxml-->
<view class="top" wx:if="{{status}}">
  <view class="img">
    <image src="{{userInfo.imgUrl}}" mode=""/>
  </view>
  <view>
    <view class="name">{{userInfo.username}}</view>
    <view class="money">余额 <image src="../../image/index/money.png" mode=""/>{{userInfo.money}}</view>
  </view>
</view>
<view class="top" wx:else>
   <button bind:tap="goLogin">登录</button>
</view>
<view class="center">
  <view class="title">常用设置</view>
  <view class="people" bind:tap="goApprove">个人认证 <image src="../../image/index/jt.png" mode=""/></view>
  <view class="price" bind:tap="goPrice">充值 <image src="../../image/index/jt.png" mode=""/></view>
  <button open-type="contact" class="our" >联系我们 <image src="../../image/index/jt.png" mode=""/></button>
</view>
<view class="button">
  <view class="title">通用设置</view>
  <view class="quite" bind:tap="goQuite">退出登录 <image src="../../image/index/jt.png" mode=""/></view>
</view>

/* pages/my/my.wxss */
.top{
    height: 150rpx;
    display: flex;
    justify-content: flex-start;
    margin: 40rpx 30rpx;
    border-bottom: 1rpx dashed gainsboro;
}
.top button{
    width: 60%;
    height: 90rpx;
    border-radius: 50rpx;
    color: white;
    background-color:#1296db ;
}
.img{
    padding-right: 30rpx;
}
.img image{

    width: 120rpx;
    height: 120rpx;
    border-radius: 100%;
}
.name{
    margin-bottom: 20rpx;
}
.money image{
    width: 45rpx;
    height: 45rpx;
}
.center,.button{
    width: 90%;
    margin: 20rpx auto;
    padding: 15rpx;
    box-shadow: 0 0 15px rgb(0 0 0 / 20%);
    border-radius: 5rpx;
    
}
.title{
    padding-left: 10rpx;
    border-left:6rpx solid  #1296db;
    font-size: 37rpx;
    font-weight: 600;
}
.center image{
    width: 50rpx;
    height: 50rpx;
}
.button image{
    width: 50rpx;
    height: 50rpx;
}
.people,.price,.quite{
    height:100rpx;
    align-items: center;
    border-bottom:1rpx dashed gainsboro ;
    display: flex;
    justify-content: space-between;
    font-size: 36rpx;
    font-weight: 540;
}
.our{
    height: 100rpx;
    margin: 0;
    padding: 0;
    background-color: white;
    border-bottom: 1rpx dashed gainsboro;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

// pages/my/my.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userInfo:'',
    status:false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
      this.setData({
          userInfo:wx.getStorageSync('userInfo'),
          status:wx.getStorageSync('status')
      })
  },
  goApprove(){
      wx.navigateTo({
        url: '../approve/approve',
      })
  },
  goPrice(){
     wx.navigateTo({
       url: '../goPrice/goPrice',
     })
  },
  goLogin(){
      wx.navigateTo({
        url: '../login/login',
      })
  },
  goQuite(){
      wx.showModal({
        title: '提升',
        content: '是否退出登录？',
        complete: (res) => {      
          if (res.confirm) {
            wx.setStorageSync('status', false)
            wx.setStorageSync('userInfo', '')
            this.setData({
                status:false,
                userInfo:''
            })
          }
        }
      })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.setData({
        userInfo:wx.getStorageSync('userInfo'),
        status:wx.getStorageSync('status')
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

效果展示
在这里插入图片描述

2.登录页面

<view class="logo" hidden="{{checkFace}}" style="color: #1296db;">REGISTRATION LOGIN</view>
<view class="login" hidden="{{checkFace}}">
  <view class="username">
    <view class="zh">账号</view>
    <input type="text" bindinput="username" placeholder="输入账号"/>
  </view>
  <view class="password">
    <view class="zh">密码</view>
    <input type="password" bindinput="password" placeholder="输入密码"/>
  </view >

<view style="display: flex; justify-content: space-between;">
    <view class="tips" bind:tap="goregister">还没有账号，<text style="color: #1296db;">马上注册</text></view>
</view>

  <button class="bt" style="background-color: {{themColor}}; width: 550rpx;" bind:tap="goLogin">登录</button>
</view>

<view hidden="{{!checkFace}}" class="camera1">
    <camera style="width: 100%; height:700rpx;" device-position="front"></camera>
    <button class="bt" style="width: 600rpx;" bind:tap="getPicBase">登录</button>
</view>

/* pages/login/login.wxss */
.logo{
    margin-top: 25rpx;
    height:300rpx;
    font-size: 100rpx;
    text-align: center;
    opacity: 0.1;
}
.login{
    height: 200rpx;
    margin-left: 35rpx;
    width: 90%;
}
.username{
    background-color: rgb(242, 242, 248);
    height: 120rpx;
    border-radius: 20rpx;
}
.zh{
   padding: 10rpx 20rpx;
}
.password{
    margin-top: 30rpx;
    border-radius: 20rpx;
    background-color: rgb(242, 242, 248);
    height: 120rpx;
}

.username input{
    padding: 0 15rpx;
    height: 60rpx;
}
.password input{
    padding: 0 15rpx;
    height: 60rpx;
}
.tips{
    margin-top: 50rpx;
}

.bt{
    margin-top: 70rpx;
    border-radius: 50rpx;
    color: white;
    background-color: #1296db;
}

.camera1{
    margin: 300rpx auto;
    height: 500rpx;
    width: 500rpx;
   border-radius: 20rpx;
    
}

// pages/login/login.js
const {login} =require('../../api/login')
Page({

  /**
   * 页面的初始数据
   */
  data: {
    username:'',
    password:'',
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
  username(e){
   this.setData({
       username:e.detail.value
   })
  },
  password(e){
    this.setData({
        password:e.detail.value
    })
  },
  goregister(){
      wx.navigateTo({
        url: '../register/register',
      })
  },
  goLogin(){
      console.log('888')
      if(this.data.username==''){
        wx.showToast({
            title: '账号不能为空',
            icon:'none'
          })
      }else if(this.data.password==''){
        wx.showToast({
            title: '密码不能为空',
            icon:'none'
          })
      }else{
        let data={
            username:this.data.username,
            password:this.data.password
        }
        login(data).then(res=>{
           if(res.code==200){
             wx.setStorageSync('status', true)
             wx.setStorageSync('userInfo', res.data[0])
            wx.switchTab({
                url: '../my/my',
              })
           }
        })
        
      }
      
  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

效果展示
在这里插入图片描述

3.注册页面

<view class="logo" style="color: #1296db">REGISTER STYSTEM</view>
<view class="login">
  <view class="username">
    <view class="zh">账号</view>
    <input type="text" bindinput="username" placeholder="输入账号"/>
  </view>
  <view class="password">
    <view class="zh">密码</view>
    <input type="password" bindinput="password" placeholder="输入密码"/>
  </view>
  <view class="password">
    <view class="zh">手机号</view>
    <input  bindinput="phone" placeholder="输入手机号"/>
  </view>
  <view class="password">
    <view class="zh">头像</view>
    <view style="display: flex; justify-content: space-between;">
        <view class="zh" bind:tap="getImg">点击获取头像</view>
        <image style="width: 100rpx; height: 100rpx; margin-top: -40rpx;" src="{{imgUrl}}" mode=""/>
    </view>
  </view>

  <view class="tips" bind:tap="goLogin">已有账号，<text style="color:#1296db">去登录</text></view>
  <button class="bt" style="width: 550rpx;" bind:tap="goRegister">注册</button>
</view>


/* pages/login/login.wxss */
.logo{
    height: 300rpx;
    font-size: 100rpx;
    text-align: center;
    opacity: 0.10;
    margin-top: 25rpx;
}
.login{
    height: 200rpx;
    margin-left: 35rpx;
    width: 90%;
}
.username{
    background-color: rgb(242, 242, 248);
    height: 120rpx;
    border-radius: 20rpx;
}
.zh{
   padding: 10rpx 20rpx;
}
.password{
    margin-top: 30rpx;
    border-radius: 20rpx;
    background-color: rgb(242, 242, 248);
    height: 120rpx;
}

.face{
    margin-top: 30rpx;
    border-radius: 20rpx;
    background-color: rgb(242, 242, 248);
    height: 130rpx; 
}
.face input{
    padding: 0 15rpx;
    height: 60rpx;
}
.username input{
    padding: 0 15rpx;
    height: 60rpx;
}
.password input{
    padding: 0 15rpx;
    height: 60rpx;
}
.tips{
    margin-top: 50rpx;
}

.bt{
    margin-top: 70rpx;
    border-radius: 50rpx;
    color: white;
    background-color: #1296db;
}
.camera1{
    margin: 300rpx auto;
    height: 500rpx;
    width: 500rpx;
   border-radius: 20rpx;
    
}

// pages/register/register.js
const {addUser} =require('../../api/login')
const { formatTime }=require('../../utils/time')
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgUrl:'',
    username:'',
    password:'',
    phone:'',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },
  username(e){
    this.setData({
        username:e.detail.value
    })
   },
   password(e){
     this.setData({
         password:e.detail.value
     })
   },
   phone(e){
    this.setData({
        phone:e.detail.value
    })
  },
  goLogin(){
      wx.navigateBack()
  },
  getImg(){
      wx.getUserProfile({
        desc: 'desc',
        success:(res)=>{
            this.setData({
                imgUrl:res.userInfo.avatarUrl
            })
        }
      })
  },
  goRegister(){
      let data={
          username:this.data.username,
          password:this.data.password,
          phone:this.data.phone,
          imgUrl:this.data.imgUrl,
          uploadTime:formatTime(new Date())
      }
      if(this.data.username==''){
          wx.showToast({
            title: '账号不能为空',
            icon:'none'
          })
      }else if(this.data.password==''){
        wx.showToast({
            title: '密码不能为空',
            icon:'none'
          })
      }else if(this.data.phone==''){
        wx.showToast({
            title: '手机号不能为空',
            icon:'none'
          })
      }else{
        addUser(data).then(res=>{
            wx.navigateBack()
          })
      }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

效果展示
在这里插入图片描述

4.api login

在这里插入图片描述

const {
    request
} = require('../utils/request')
 
//基于业务封装的接口
module.exports = {
    // 获取轮播图
login: (data) => {
    return request('/login/login', 'POST',data);
 },
 addUser:(data)=>{
    return request('/login/addUser', 'POST',data);
 }
}

5.responseFormat.js 和statusCodes.js

在这里插入图片描述
responseFormat.js

// utils/responseFormat.js
const StatusCodes = require('./statusCodes');

function responseFormat(res, statusCode, message, data = null) {
    console.log(message)
  return  res.status(statusCode).json({
    code: statusCode,
    msg: message,
    data: data,
  });
}

module.exports = {
  responseFormat,
  StatusCodes,
};

statusCodes.js

// utils/statusCodes.js
const StatusCodes = {
    OK: 200,
    CREATED: 201,
    BAD_REQUEST: 400,
    UNAUTHORIZED: 401,
    FORBIDDEN: 403,
    NOT_FOUND: 404,
    INTERNAL_SERVER_ERROR: 500,
  };
  
  module.exports = StatusCodes;

6. login 和 addUser

后端模板的下载 看这篇文章

在这里插入图片描述

var express = require('express');
var router = express.Router();
var connection=require('../db/sql.js')
var QcloudSms=require('qcloudsms_js'); //需要下载
const { responseFormat, StatusCodes } = require('../public/common/responseFormat');


//登录操作
router.post('/login',(req,res)=>{
    let username=req.body.username
    let password=req.body.password
    let sql='select * from user where username=?'
    connection.query(sql,[username],(error,result)=>{
        if(error) return console.log(error.message)
        if(result.length>0){
            //用户存在
            let sql="select * from user where username=? and password=?"
            connection.query(sql,[username,password],(error,result)=>{
                if(error) return console.log(error.message)
                if(result.length>0){
                   return responseFormat(res,StatusCodes.OK,'登录成功',result)
                }else{
                    return responseFormat(res,StatusCodes.OK,'密码错误')
                }
            })
        }else{
            return responseFormat(res,StatusCodes.OK,'用户不存在')
        }
    })
})

//注册用户
router.post('/addUser',(req,res)=>{
    let phone=req.body.phone
    let username=req.body.username
    let password=req.body.password
    let imgUrl=req.body.imgUrl
    let uploadTime=req.body.uploadTime
    let sql='select * from user where phone=?'
    connection.query(sql,[phone],(error,result)=>{
        if(error) return console.log(error.message)
        if(result.length>0){
            //用户仅存在在了
          return responseFormat(res,StatusCodes.OK,'注册成功')
        }else{
            //用户不存在
         let sql='insert into user value(null,?,?,?,?,?)'
         connection.query(sql,[username,password,imgUrl,phone,uploadTime],(error,result)=>{
            if(error) return console.log(error.message)
            return responseFormat(res,StatusCodes.OK,'注册成功')
         })
        }
    })
})
//修改用户信息
router.post('/updateUser',(req,res)=>{
    console.log("222",req.body)
    let id=req.body.id
    let sql='update user set ? where id=?'
    connection.query(sql,[req.body,id],function(error,results){
        // if(error) return console.log(error.message)
        res.send({
          code:200,
          data:{
            msg:'修改成功'
          }
        })
      })
})
module.exports=router

🎉写在最后

🍻伙伴们，如果你已经看到了这里，觉得这篇文章有帮助到你的话不妨点赞👍或 Star ✨支持一下哦！手动码字，如有错误，欢迎在评论区指正💬~

你的支持就是我更新的最大动力💪~
在这里插入图片描述


http://www.kler.cn/a/505198.html

相关文章：

  • 字符串提取数字求和⭐
  • SpringMVC
  • 系统架构设计师-第1章-计算机系统知识要点
  • client-go 的 QPS 和 Burst 限速
  • ESP32,uart安装驱动uart_driver_install函数剖析，以及intr_alloc_flags 参数的意义
  • 支持Google Analytics快捷添加的CMS：费用与部署形式详解
  • Springboot集成Easy Rules引擎，实现一个商品优惠券系统
  • 数据结构(Java版)第九期：LinkedList与链表
  • 《Java核心技术II》实现服务器
  • vue3 父组件调用子组件方法
  • 在 WSL Ubuntu 上安装 ProxySQL 并配置 主从同步，读写分离，延迟检测
  • C++并发编程之掩藏任务延迟与提高响应性的应用说明
  • Windows MFC 管理员权限DragAcceptFiles无效 处理方法
  • JavaSwing游戏开发之Camera原理
  • Java 输入输出流(上)
  • Gitlab流水线配置
  • Java 后端整合 Swagger + Knife4j 接口文档
  • 学员答疑：安卓分屏窗口的TouchableRegion设置流程追踪
  • 【STM32】存储分析深入——堆栈与map文件
  • C++进阶(四)--set和map的介绍与使用
  • 【落羽的落羽 C语言篇】文件操作
  • stack_queue的底层,模拟实现,deque和priority_queue详解
  • 深入探讨DICOM医学影像中的MPPS服务及其具体实现
  • 【原创】大数据治理入门（4）《保护数据隐私：大数据治理的最佳实践》入门必看 高赞实用
  • 战场物联网：通信挑战与最新解决方案综述
  • BUUCTF[ACTF新生赛2020]easyre