基于微信小程序的自习室预约系统的设计与实现

hello hello~ 这里是 code袁~ 欢迎大家点赞关注收藏作者简介一名喜欢分享和记录学习的在校大学生个人主页code袁的博客个人QQ2647996100个人wechatcode8896code袁系列专栏导航1.《毕业设计与课程设计》本专栏分享一些毕业设计的源码以及项目成果。2.《微信小程序开发》本专栏从基础到入门的一系开发流程并且分享了自己在开发中遇到的一系列问题。3.《vue开发系列全程线路》本专栏分享自己的vue的学习历程。非常期待和您一起在这个小小的互联网世界里共同探索、学习和成长。 ✨✨ 欢迎订阅本专栏 ✨✨视频演示基于微信小程序的自习室预约系统的设计与实现1、前言介绍伴随着信息技术与互联网技术的不断发展校园也进到了一个新的信息化时代传统管理技术性没法高效率、容易地管理自习室预约信息内容。为了实现时代的发展必须提升自习室预约高效率各种各样自习室预约体系应时而生自习室预约管理系统的实现是信息内容时代浪潮时代的产物之一。一切系统都要遵循系统设计的基本流程。它还需要通过市场调查、需求分析报告、汇总设计、详尽设计以及测试根据node语言表达设计完成实验室预约管理系统。该系统根据B/S即所谓的电脑浏览器/网络服务器方式运用Java技术前端采用微信小程序等技术实现选用MySQL作为后台系统。2、功能设计自习室预约管理平台选用B/S架构模式即网页页面和网站架构设计的开发方式。这类系统构造可以理解为对 C/S 系统构造的改变与推广能够进行信息分布式处理减少资源成本提升订制系统的性能。在这种设计下极少有事务处理在前进行绝大多数重要事务管理的思路需要在服务端完成。3、功能实现系统登录功能是程序必不可少的功能在登录页面必填的数据有两项一项就是账号另一项数据就是密码当管理员正确填写并提交这二者数据之后管理员就可以进入系统后台功能操作区。下图就是管理员登录页面。目管理页面提供的功能操作有查看自习室删除自习室操作新增自习室操作修改自习室操作。下图就是实验室管理页面公告信息管理页面提供的功能操作有新增公告修改公告删除公告操作。下图就是公告信息管理页面。4、开发技术简介本节介绍场馆预约平台用到的一些技术和开发环境的简介用到开发技术主要包括1前端用到Element UI组件库和Vue框架2后端Springboot3包管理器Npm5数据库MySQL系统开发环境主要是前端开发工具VscodeHbuilder、操作系统Win10、CPU i5-9300H、内存8G。5、系统物理架构自习室系统的物理架构主要有管理端和用户端其中管理端主要是基于Vue和Element UI用户端主要基于安卓、微信小程序和H5自习室系统的物理建构图6、系统流程图用户发起预约时首先会检测用户是否登录若登录则进入到相应的预约界面此时用户可以选择需要预约的时间段以及场地。当用户预约成功时用户会在我的预约中找到这次预约。当用户去场馆时可以通过预约生成的二维码来验证身份。若用户的预约时间失效也会有响应的提示7、库表设计8、关键代码// pages/xgxx/xgxx.jsconstdbwx.cloud.database()const{updateUser}require(../../api/login)Page({/** * 页面的初始数据 */data:{openid:,userInfo:,xy_index:0,nj_index:0,imgUrl:},/** * 生命周期函数--监听页面加载 */onLoad:function(options){varuserinfowx.getStorageSync(userInfo)this.setData({userInfo:userinfo})},bindchangenj:function(e){console.log(e.detail.value)this.setData({nj_index:e.detail.value})},bindchangexy:function(e){console.log(e.detail.value)this.setData({xy_index:e.detail.value})},changImg(res){let thatthiswx.chooseImage({count:1,sizeType:[original, compressed],sourceType:[album,camera],success(res){varimgsFileres.tempFilePaths[0];wx.uploadFile({filePath:imgsFile,name:file,url:http://localhost:3000/upload/upload,success:res{that.data.imgUrlJSON.parse(res.data).url console.log(JSON.parse(res.data).url)}})console.log(that.data.imgUrl)}})},//提交修改formSubmit(e){varuserinfowx.getStorageSync(userInfo)//判断let imgif(this.data.imgUrl!){imgthis.data.imgUrl}else{imguserinfo.imgUrl}let userInfo{id:userinfo.id,username:e.detail.value.name,phone:e.detail.value.phone,imgUrl:img,address:e.detail.value.address,password:e.detail.value.password}console.log(1,userInfo)updateUser(userInfo).then(res{wx.showToast({icon:none,title:修改成功,})wx.setStorageSync(userInfo,userInfo)})},/** * 生命周期函数--监听页面显示 */onShow:function(){},/** * 生命周期函数--监听页面隐藏 */onHide:function(){},/** * 生命周期函数--监听页面卸载 */onUnload:function(){},/** * 页面相关事件处理函数--监听用户下拉动作 */onPullDownRefresh:function(){},/** * 页面上拉触底事件的处理函数 */onReachBottom:function(){},/** * 用户点击右上角分享 */onShareAppMessage:function(){}})varexpressrequire(express);varrouterexpress.Router();varconnectionrequire(../db/sql.js)router.post(/addReservation,(req,res){console.log(req.body)let usernamereq.body.username let phonereq.body.phone let placeNamereq.body.placeName let addressreq.body.address let endtimereq.body.endtime let pricereq.body.price let isReservationreq.body.isReservation let isCanclereq.body.isCancle let idreq.body.status let starttimereq.body.starttime let placeNumberreq.body.placeNumber let reservationIdreq.body.reservationId let status1let steatIdid let datareq.body.data let sqlinsert into reservationvalue(null,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?) connection.query(sql,[username,phone,placeName,address,endtime,price,isReservation,isCancle,starttime,placeNumber,reservationId,0,0,null,null,steatId,data],(error,result){if(error)returnconsole.log(error.message)if(result.affectedRows1){let sql1update steat set status?where id? connection.query(sql1,[status,id],(error,result){if(error)returnconsole.log(error.message)res.send({code:200,msg:预约成功})})}else{res.send({code:200})}})})//查询预约表router.post(/getReservation,(req,res){let phonereq.body.phone let sqlselect*from reservation where phone? connection.query(sql,[phone],(error,result){if(error)returnconsole.log(error.message)res.send({code:200,data:{data:result}})})})//取消预约router.post(/deteleReservation,(req,res){let idreq.body.id let usernamereq.body.username let phonereq.body.phone let reasonreq.body.reason let placeNamereq.body.placeName let cancelTimereq.body.cancelTime let isCancle1let isReservation0let steatIdreq.body.steatId let status0console.log(steatId)let sqlupdate reservation set isCancle?,isReservation?where id? connection.query(sql,[isCancle,isReservation,id],(error,result){if(error)returnconsole.log(error.message)if(result.affectedRows1){let sqlinsert into cancelvalue(null,?,?,?,?,?) connection.query(sql,[reason,phone,username,placeName,cancelTime],(error,result){if(error)returnconsole.log(error.message)if(result.affectedRows1){let sqlupdate steat set status?where id? connection.query(sql,[status,steatId],(error,result){res.send({code:200,msg:取消成功})})}})}else{res.send({code:403,msg:取消失败})}})})//查询取消表单个人router.post(/getCancel,(req,res){let phonereq.body.phone let sqlselect*from cancel where phone? connection.query(sql,[phone],(error,result){if(error)returnconsole.log(error.message)res.send({code:200,data:{data:result}})})})//查询取消router.get(/getCancel,(req,res){let sqlselect*from cancel connection.query(sql,(error,result){if(error)returnconsole.log(error.message)res.send({code:200,data:{data:result}})})})//删除取消router.post(/deletecancel,function(req,res,next){//查询数据constidreq.query.id console.log(id)let sqldelete from cancel where id ?;connection.query(sql,[id],function(err,result,fields){if(err)returnconsole.log(err.message)res.send({code:200,data:{msg:删除成功}})})});//查询预约表router.get(/getAllReservation,(req,res){let sqlselect*from reservation connection.query(sql,(error,result){if(error)returnconsole.log(error.message)res.send({code:200,data:{data:result}})})})//通过姓名查询预约router.post(/searchAllReservation,(req,res){let usernamereq.query.username let sqlselect*from reservation where username? connection.query(sql,[username],(error,result){if(error)returnconsole.log(error.message)res.send({code:200,data:{data:result}})})})//删除预约表信息router.post(/deleteAllReservation,function(req,res,next){//查询数据constidreq.query.id console.log(id)let sqldelete from reservation where id ?;connection.query(sql,[id],function(err,result,fields){if(err)returnconsole.log(err.message)res.send({code:200,data:{msg:删除成功}})})});//修改预约表router.post(/updateAllReservation,function(req,res,next){let idreq.query.id let sqlupdate reservation set?where id? connection.query(sql,[req.query,id],function(error,results){if(error)returnconsole.log(error.message)res.send({code:200,data:{msg:修改成功}})})})module.exportsrouter9、源码获取大家点赞、收藏、关注、评论啦 、查看获取联系方式写在最后伙伴们如果你已经看到了这里觉得这篇文章有帮助到你的话不妨点赞或 Star ✨支持一下哦手动码字如有错误欢迎在评论区指正~你的支持就是我更新的最大动力~