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

server/2025/1/17 11:48:50/

在这里插入图片描述

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.usernamelet password=req.body.passwordlet 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.phonelet username=req.body.usernamelet password=req.body.passwordlet imgUrl=req.body.imgUrllet uploadTime=req.body.uploadTimelet 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.idlet 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.ppmy.cn/server/159071.html

相关文章

Redis 在项目中的实战应用与复盘

Redis 在项目中的实战应用与复盘

Redis 在项目中的实战应用与复盘 在当今数字化时代&#xff0c;数据处理和存储的效率对于项目的成功至关重要。在近期参与的一个高并发的电商项目中&#xff0c;Redis 发挥了举足轻重的作用&#xff0c;极大地提升了系统的性能和用户体验。今天&#xff0c;就来和大家分享一下…
阅读更多...
c#删除文件和目录到回收站

c#删除文件和目录到回收站

之前在c上遇到过这个问题&#xff0c;折腾许久才解决了&#xff0c;这次在c#上再次遇到这个问题&#xff0c;不过似乎容易了一些&#xff0c;亲测代码如下&#xff0c;两种删除方式都写在代码中了。 直接上完整代码&#xff1a; using Microsoft.VisualBasic.FileIO; using Sy…
阅读更多...
【LLM】25.1.15 arxiv更新37篇

【LLM】25.1.15 arxiv更新37篇

—第1篇---- Consistency of Responses and Continuations Generated by Large Language Models on Social Media &#x1f50d; 关键词: Large Language Models, emotional consistency, semantic coherence, social media, Gemma, Llama 链接1 摘要: 本文研究了大型语言模…
阅读更多...
RabbitMQ确保消息可靠性

RabbitMQ确保消息可靠性

消息丢失的可能性 支付服务先扣减余额和更新支付状态&#xff08;这俩是同步调用&#xff09;&#xff0c;然后通过RabbitMq异步调用支付服务更新订单状态。但是有些情况下&#xff0c;可能订单已经支付 &#xff0c;但是更新订单状态却失败了&#xff0c;这就出现了消息丢失。…
阅读更多...
HunyuanVideo 文生视频模型实践

HunyuanVideo 文生视频模型实践

HunyuanVideo 文生视频模型实践 flyfish 运行 HunyuanVideo 模型使用文本生成视频的推荐配置&#xff08;batch size 1&#xff09;&#xff1a; 模型分辨率(height/width/frame)峰值显存HunyuanVideo720px1280px129f60GHunyuanVideo544px960px129f45G 本项目适用于使用 N…
阅读更多...
Vue 和 uniApp 中 CSS 样式差别

Vue 和 uniApp 中 CSS 样式差别

之前一直在做vue2的项目&#xff0c;最近开始uniapp的项目&#xff0c;发现两种项目之间css还是有亿点区别的。 一、布局单位 Vue 2 项目&#xff1a; 通常使用 px 作为主要的长度单位&#xff0c;这是一个绝对单位&#xff0c;在不同设备屏幕上显示的物理尺寸相同。例如&am…
阅读更多...
nginx 实现 正向代理、反向代理 、SSL（证书配置）、负载均衡 、虚拟域名 ，使用其他中间件监控

nginx 实现 正向代理、反向代理 、SSL（证书配置）、负载均衡 、虚拟域名 ，使用其他中间件监控

我们可以详细地配置 Nginx 来实现正向代理、反向代理、SSL、负载均衡和虚拟域名。同时&#xff0c;我会介绍如何使用一些中间件来监控 Nginx 的状态和性能。 1. 安装 Nginx 如果你还没有安装 Nginx&#xff0c;可以通过以下命令进行安装&#xff08;以 Ubuntu 为例&#xff0…
阅读更多...
每天一篇逻辑漏洞

每天一篇逻辑漏洞

前言&#xff1a; 不赶进度了&#xff0c;学习并运用吧 内容&#xff1a; 该文章有bili赞助发布摆烂哥如何从0开始到年入20w 到多家SRC TOP10白帽的心路历程分享_哔哩哔哩_bilibili 逻辑漏洞 验证码回显 //一般站没有&#xff0c;边缘资产有 用户名枚举 …
阅读更多...
最新文章

Copyright @ 2022~2023