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

ops/2025/1/17 4:34:13/

在这里插入图片描述

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/ops/150715.html

相关文章

华为OD上机考试真题（Java）——字符串分割

华为OD上机考试真题（Java）——字符串分割

题目&#xff1a; 给定一个字符串&#xff0c;只包含小写字母&#xff0c;字符串长度是 5-30。 求&#xff1a;是否存在两个节点&#xff0c;使得字符串被这两个节点分成三个部分&#xff0c;每个部分的 ASCII 码的值之和都相等。如果存在输出两个节点下标&#xff0c;以逗号隔…
阅读更多...
快速、可靠且高性价比的定制IP模式提升芯片设计公司竞争力

快速、可靠且高性价比的定制IP模式提升芯片设计公司竞争力

作者&#xff1a;Karthik Gopal&#xff0c;SmartDV Technologies亚洲区总经理 智权半导体科技&#xff08;厦门&#xff09;有限公司总经理 无论是在出货量巨大的消费电子市场&#xff0c;还是针对特定应用的细分芯片市场&#xff0c;差异化芯片设计带来的定制化需求也在芯片…
阅读更多...
淘宝 URL 采集商品详情数据及开发

淘宝 URL 采集商品详情数据及开发

一、通过淘宝开放平台&#xff08;如果有资质&#xff09; 注册成为淘宝开发者 访问淘宝开放平台官方网站&#xff0c;按照要求填写开发者信息&#xff0c;包括企业或个人身份验证等步骤。这一步是为了获取合法的 API 使用权限。 了解商品详情 API 淘宝开放平台提供了一系列…
阅读更多...
高通骁龙8 Elite 2性能综合测评

高通骁龙8 Elite 2性能综合测评

骁龙8 Elite 2采用台积电N3P 3nm工艺制程&#xff0c;与N3E相比&#xff0c;在相同功耗下性能提升约4%&#xff0c;相同时钟频率下功耗降低约9%&#xff0c;晶体管密度提高4%。这使得芯片在性能和能效方面取得了较好的平衡&#xff0c;为手机的续航和长时间高性能运行提供了有力…
阅读更多...
浅谈计算机网络02 | SDN控制平面

浅谈计算机网络02 | SDN控制平面

计算机网络控制平面 一、现代计算机网络控制平面概述1.1 与数据平面、管理平面的关系1.2 控制平面的发展历程 二、控制平面的关键技术剖析2.1 网络层协议2.1.1 OSPF协议2.1.2 BGP协议 2.2 SDN控制平面技术2.2.1 SDN架构与原理2.2.2 OpenFlow协议2.2.3 SDN控制器 一、现代计算机…
阅读更多...
平滑算法 效果比较

平滑算法 效果比较

目录 高斯平滑 效果对比 移动平均效果比较： 高斯平滑 效果对比 右边两个参数是1.5 2 代码： smooth_demo.py import numpy as np import cv2 from scipy.ndimage import gaussian_filter1ddef gaussian_smooth_array(arr, sigma):smoothed_arr = gaussian_filter1d(arr, s…
阅读更多...
HTTP 常用方法解析

HTTP 常用方法解析

一、引言 在当今互联网时代&#xff0c;HTTP协议无疑是网络通信的基石&#xff0c;它就像一座桥梁&#xff0c;连接着客户端与服务器&#xff0c;使得信息能够在万维网中自由穿梭。无论是日常使用的网页浏览&#xff0c;还是手机上各类APP的数据交互&#xff0c;HTTP协议都在背…
阅读更多...
【MySQL】mysql数据目录

【MySQL】mysql数据目录

目录 1、背景2、版本3、数据目录4、总结 1、背景 安装mysql之后&#xff0c;在安装目录下会有一个data目录&#xff0c;我们创建的数据库、创建的表、插入的数据都是存储在这个目录中&#xff0c;可以大概了解一下这个目录下是怎么存储数据的。 2、版本 mysql> status --…
阅读更多...
最新文章

Copyright @ 2022~2023