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

于 2025-01-15 10:04:39 发布
阅读量1k 收藏 19
点赞数 23
分类专栏： 校园跑腿小程序零基础开发 文章标签： 小程序 校园跑腿小程序 小程序开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48164590/article/details/145152369
版权

在这里插入图片描述

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

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

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

在这里插入图片描述

文章目录

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 ✨支持一下哦！手动码字，如有错误，欢迎在评论区指正💬~

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

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

code袁

你的支持是我莫大的幸运

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值