Spring Boot + Mybatis 实现简单的实验室预约微信小程序
本微信小程序主要由Mysql，Eclipse和微信开发者工具共同完成，其主要功能有分角色登录，新闻页浏览及推送，实验室条件筛选查询，实验室预约，查看历史预约记录或取消当前预约以及个人信息修改和教师用户管理实验室功能等
1.数据库
根据上述功能我们大致可以建立以下数据库表如图
这里详细列出lab表，news表和students表，record表中的字段
lab表
news表
students表
records表
这里我所使用的数据库可视化组件为phpMyAdmin，teacher表中字段大致与student表中字段相同
2.后台服务器部分
这里后台服务器选用如今主流框架来进行搭建，分别为Mybatis和Spring Boot
在新建Spring项目后，有一点很关键的是在于如何配置pom.xml文件，如图
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.6.6</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.example</groupId><artifactId>spring</artifactId><version>0.0.1-SNAPSHOT</version><name>spring</name><description>Demo project for Spring Boot</description><properties><java.version>11</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.1.2</version><scope>compile</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>除此之外，我们就可以在src文件中开始搭建项目，其主体目录结构如下图
这其中的application配置文件也十分重要，这里直接贴出代码
mybatis.type-aliases-package=com.example.demo
#mysql驱动
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
#远程数据库链接 serverTimezone不可少
spring.datasource.url=jdbc:mysql://localhost:3306/Reservation?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC
#MySQL数据库用户名、密码
spring.datasource.username=你的数据库用户名
spring.datasource.password=你的数据库密码
#xml格式的mapper文件位置
mybatis.mapper-locations=classpath:/mybatis/mapper/*.xml
server.port=8080
server.servlet.encoding.force=true
server.servlet.encoding.charset=UTF-8
server.servlet.encoding.enabled=true
server.tomcat.uri-encoding=UTF-8同时还需注意的是Application.java为项目的启动文件，同样贴出代码
package com.example.demo;import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplication
@MapperScan(value = "com.example.demo.mapper")
public class Application {public static void main(String[] args) {SpringApplication.run(Application.class, args);}}要注意的是@MapperScan中的值要设定为mapper接口文件位置
当所有配置完毕时，可以点击绿色启动按钮，能在控制台看到以下图，就代表你的服务器已经搭建成功了
然后我们就可以愉快的编写后台代码了，这里列出其中一条系列流程
首先，你应该想到的是实体类，去建立一个什么样的对象。然后就是小程序传给后台的值要来做什么，我需要返回什么，编写一个大致的接口函数，这就是mapper包中的文件，然后在下方的resources文件夹中的mybatis中的相应mapper中建立编写sql语句的文件，最后在controller中去选择调用mapper类的接口函数。
这里分别贴出Records实体类，RecordsMapper，RecordsController以及RecordsMapper.xml代码
Records.java
package com.example.demo.entity;public class Records {public int id;public String date;public String lname;public String uname;public String number;public String address;public int getId() {return id;}public void setId(int id) {this.id = id;}public String getDate() {return date;}public void setDate(String date) {this.date = date;}public String getLname() {return lname;}public void setLname(String lname) {this.lname = lname;}public String getUname() {return uname;}public void setUname(String uname) {this.uname = uname;}public String getNumber() {return number;}public void setNumber(String number) {this.number = number;}public String getAddress() {return address;}public void setAddress(String address) {this.address = address;}}
RecordMapper.java
package com.example.demo.mapper;import java.util.List;import org.apache.ibatis.annotations.Mapper;import com.example.demo.entity.Records;@Mapper
public interface RecordsMapper {public int findBydateAndLname(String date,String lname);public void Book(String lname,String address,String date,String number,String uname);public List<Records> findAllRecordsByNumber(String number);public int findBydateAndLnameAndUname(String date,String lname,String uname);public List<Records> findByUnumber(String number);public List<Records> findBydateAndUnumber(String date,String number);public void deleteBydateAndLnameAndUnumber(String date,String lname,String number);
}RecordMapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace = "com.example.demo.mapper.RecordsMapper"><select id="findBydateAndLname" resultType = "java.lang.Integer" parameterType="java.lang.String">SELECT count(*) FROM `records` where date = #{date} and lname = #{lname};</select><insert id="Book" parameterType="java.lang.String">INSERT INTO `records`(`lname`, `address`, `date`, `number`, `uname`) VALUES (#{lname},#{address},#{date},#{number},#{uname});</insert><select id="findAllRecordsByNumber" resultType="com.example.demo.entity.Records" parameterType="java.lang.String">SELECT * FROM `records` where number = #{number};</select><select id="findBydateAndLnameAndUname" resultType = "java.lang.Integer" parameterType="java.lang.String">SELECT count(*) FROM `records` where date = #{date} and lname = #{lname} and uname = #{uname};</select><select id="findByUnumber" resultType = "com.example.demo.entity.Records" parameterType="java.lang.String">SELECT * FROM `records` where number = #{number};</select><select id="findBydateAndUnumber" resultType = "com.example.demo.entity.Records" parameterType="java.lang.String">SELECT * FROM `records` where date = #{date} and number = #{number};</select><delete id="deleteBydateAndLnameAndUnumber">DELETE FROM `records` WHERE date=#{date} and lname =#{lname} and number = #{number};</delete>
</mapper>RecordsController.java
package com.example.demo.controller;import java.util.List;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import com.example.demo.entity.Records;
import com.example.demo.mapper.RecordsMapper;@RestController
@RequestMapping("/Record")
public class RecordsController {@Autowiredprivate RecordsMapper r;@RequestMapping("/Booknum")public int Booknum(String date,String lname) {int num;num = r.findBydateAndLname(date, lname);return num;}@RequestMapping("/Book")public void Book(String lname,String address,String date,String number,String uname) {r.Book(lname, address, date, number, uname);}@RequestMapping("/checkBook")public int checkBook(String date,String lname,String uname) {return r.findBydateAndLnameAndUname(date, lname, uname);}@RequestMapping("/BookHistory")public List<Records> BookHistory(String number){return r.findByUnumber(number);}@RequestMapping("/TodayBook")public List<Records> TodayBooks(String date,String number){return r.findBydateAndUnumber(date, number);}@RequestMapping("/TomorrowBook")public List<Records> TomorrowBooks(String date,String number){return r.findBydateAndUnumber(date, number);}@RequestMapping("DeleteBook")public void DeleteBook(String date,String lname,String number) {r.deleteBydateAndLnameAndUnumber(date, lname, number);}
}到这里，不出意外的话后台就和数据库顺利相连接了
要注意的是
1.mapper.xml中的返回值类型和参数类型
2.mapper.java中要标注@Mapper，迎接controller.java中的@RestController，否则可能会导致相互寻找不到
3.要注意controller.java中的@RequestMapping中的数即为传给小程序的url地址
这完这些后我们可以简单打开浏览器输入url来进行测试
例如BookHistory这一项，你可以输入http://localhost:8080/Record/BookHistory?number=参数来进行测试，如果页面能正常返回数据库结果则代表已经成功
3.微信开发者工具
这里如果你想在手机调试的话需要在设置中配置不使用任何代理，然后在项目的本地设置中设置不校验合法域名，证书等。同时还要在缓存中开启支持使用工具段的Storage。
首先展示出小程序的目录结构，如图
下面是具体程序页面和功能展示
首页
新闻详情界面
预约查询界面
预约界面点击效果
我的界面
当前预约界面
登录界面
大体效果如上图所示，主要展示一个首页页面代码
首页文件除去tabbar还可分为
tabbar段代码需要在app.json文件中设置，同时其他页面跳转到带有tabbar页面需要使用wx.switchTab函数，代码如下
"tabBar": {"color": "#000","selectedColor": "#328EEB","list": [{"pagePath": "pages/index/index","iconPath": "images/a-huaban2.png","text": "首页","selectedIconPath": "images/a-huaban2-2.png"},{"pagePath": "pages/book/book","iconPath": "images/a-huaban2fuben4.png","text": "预约","selectedIconPath": "images/a-huaban2fuben4-2.png"},{"pagePath": "pages/information/information","iconPath": "images/jiaoseguanli.png","text": "我的","selectedIconPath": "images/jiaoseguanli-2.png"}]},其他代码
index.js
// index.js
var common =require('../../utils/common.js')
// 获取应用实例
Page({/*** 页面的初始数据* 幻灯片图片以及参数*/data:{indicatorDots:true,autoplay:true,interval:10000,duration:1000,imgUrls:["../../images/hebeidaxue.jpeg","../../images/wangjixueyuan.png"],newsList:[]},//界面跳转到预约规则界面ToRules :function () {wx.navigateTo({url: '../index/yuyuerule/yuyuerule',})},//界面跳转到实验室概况界面ToLabs : function(){wx.navigateTo({url: '../index/lab/lab',})},ToTeacherKnow : function () {wx.navigateTo({url: '../index/teacherKnow/teacherKnow',})},goToDetail : function(e){let id = e.currentTarget.dataset.id;wx.navigateTo({url: '../index/detail/detail?id='+id,})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {var that = this;wx.request({url: 'http://localhost:8080/News/listNews',method:"GET",data:{},success:function (res) {var list =res.data;if(list==null){var toastText='获取数据失败';wx.showToast({title:toastText,icon:'',duration:2000}) }else{that.setData({newsList:list})}}})},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})其中wx.request函数便是向服务器传递数据重要函数，使用起来也很简单，看图中参数就能明白
index.json暂无数据，故不展示
index.wxml
<!--index.wxml-->
<view class="haibao"><swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"><block wx:for="{{imgUrls}}"><swiper-item><image src="{{item}}" class="silde-image" style="width: 100%;"></image></swiper-item></block></swiper>
</view>
<view class="nav"><view class="nav-item"><view bindtap="ToTeacherKnow"><image src="../../images/hangyezhengce.png" style="width: 25px;height: 25px;"></image></view><view>教师须知</view></view><view class="nav-item"><view bindtap="ToRules"><image src="../../images/hangyezixun.png" style="width: 25px;height: 25px;"></image></view><view>预约规则</view></view><view class="nav-item"><view bindtap="ToLabs"><image src="../../images/qiyehuaxiang.png" style="width: 25px;height: 25px;"></image></view><view>实验室概况</view></view>
</view>
<view class="hr"></view>
<view id="news-list"><view class="list-item" wx:for="{{newsList}}" wx:for-item="news" wx:key="{{news.id}}"><image src="{{news.poster}}"></image><text bindtap="goToDetail" data-id="{{news.id}}">{{news.title}}\n\n{{news.time}}</text></view>
</view>index.wxss
/**index.wxss**/
.nav{display: flex;flex-direction: row;text-align: center;
}
.nav-item{width: 33%;margin-top: 25px;font-size: 12px;
}
.hr{height: 10px;background-color: gray;margin-top: 15px;opacity: 0.2;
}
swiper{height: 200px;
}
swiper image{width: 100%;height: 100%;
}
#news-list{min-height: 600rpx;padding: 15rpx;
}
.list-item{display: flex;flex-direction: row;border-bottom: 1rpx solid gray;
}
.list-item image{width: 230rpx;height: 150rpx;margin:10rpx;
}
.list-item text{width: 100%;line-height: 60rpx;font-size: 10pt;
}这里要注意的是wxml，wxss文件大体作用如同html，css文件其中view标签与div标签相似。
同时微信小程序不支持getelementbyid函数，所以在取页面值是要注意设置data-id，然后在js代码中使用e.currentTarget.dataset.id来获取界面值。
带页面数值跳转时可以将数据存储到缓存中，然后在页面生命周期函数中可以顺利取值赋予给新页面的元素。
选题的时候头脑发热想尝试微信小程序，一路写下来遇到不少bug，好在是顺利解决。虽然程序简单，但对我来说还是从中获取到了不少新的知识，积累经验希望能对以后的项目有所帮助。
引用伟人的话：
恰同学少年，风华正茂；书生意气，挥斥方遒。
指点江山，激扬文字，粪土当年万户侯。
曾记否，到中流击水，浪遏飞舟？
Spring Boot + Mybatis 实现简单的实验室预约微信小程序相关推荐
- 实验室预约管理小程序前后端完整，包括实验室动态，实验室规章制度，预约审批，用户管理，基础实验室预约，专业实验室预约等功能
功能介绍 实验室预约管理小程序前后端完整,包括实验室动态,实验室规章制度,预约审批,用户管理,基础实验室预约,专业实验室预约等功能.目前部分高校实验室存在设备管理困难的问题,要使用设备可能需要在微信群 ...
- spring boot +Mysql双端融合的教学过程管理系统小程序源码66431
摘 要 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,双端融合的教学过程管理系统小程序被用户普遍使 ...
- 教室预约微信小程序,教室预约系统小程序,教室预约小程序系统毕业设计作品
项目背景和意义 目的:本课题主要目标是设计并能够实现一个基于微信小程序实验室预约系统,前台用户使用小程序,后台管理使用Java+Mysql开发,后台使用了springboot框架:通过后台添加实验室类 ...
- 微信小程序座位预约,微信小程序实现订座位,餐厅座位预约小程序毕设作品
项目背景和意义 目的:本课题主要目标是设计并能够实现一个基于微信小程序预约订座小程序,前台用户使用小程序,后台管理使用基PHP+MySql的B/S架构:通过后台添加座位类型.座位号,用户通过小程序登录 ...
- 浴室预约微信小程序的设计与实现
目 录 摘 要 I Abstract II 1 绪论 1 1.1 选题背景及目的意义 1 1.1.1 选题背景 1 1.1.2 选题目的 1 1.1.3 选题意义 1 1.2 国内外现状 2 1.3 ...
- 场地预约小程序,场地预约微信小程序,运动场地预约小程序
项目背景和意义 目的:本课题主要目标是设计并能够实现一个基于微信小程序运动场地预约系统,前台用户使用小程序,后台管理使用基PHP+MySql的B/S架构:通过后台添加开放的场地类型(比如羽毛球.篮球. ...
- 教室预约微信小程序,教室预约小程序,教室预约系统小程序毕业设计作品
项目背景和意义 目的:本课题主要目标是设计并能够实现一个基于微信小程序教室预约系统,前台用户使用小程序,后台管理使用基PHP+MySql的B/S架构:通过后台添加教室信息.管理用户信息.管理预约信息: ...
- 疫苗预约小程序,疫苗预约微信小程序,新冠疫苗预约小程序毕设作品
项目背景和意义 目的:本课题主要目标是设计并能够实现一个基于微信小程序疫苗预约系统,前台用户使用小程序,后台管理使用基PHP+MySql的B/S架构:通过后台添加疫苗内容.价格.开放预约的日期和时间段 ...
- ASP.NET Core和json请求这样用真简单，axios、微信小程序得救了
本文介绍了一种在ASP.NET Core MVC/ASP.NET Core WebAPI中,将axios等前端提交的json格式请求数据,映射到Action方法的普通类型参数的方法,并且讲解了其实现原 ...
最新文章
- 如何优化tableView的使用?
- ctimespan 获取毫秒_VC++中通过CTime类获取日期差
- 2.1.Python字符串处理（去掉空格或者特殊字符、替换操作、查找操作、判断操作、分割合并操作、字符串文档）
- spring学习（32）:使用junit4测试
- 重构-改善既有代码的设计 （该书写于1999）培训之一
- appscan如何进行web端安全性测试_常用的软件测试工具有哪些？
- python人像绘制_python实现人像动漫化的示例代码
- java表示非法参数的异常是_JAVA 的异常那些事
- [lammps教程] lammps建立纳米管模型
- Linux程序设计第二版练习题（第五章）
- 自认为的经典题，难题，好题，方便日后复习
- 请别相信她成本多少？个人参与有什么优势？安全可靠吗？
- 外显子名词解释_生物信息学常用名词解释（一）
- hadoop初体验——WordCount实例
- 磁盘与文件系统管理详解
- linux开发工具列表
- LeetCode第319周赛题解
- Ath10k Candela Technologies
- 笔记本连不上网怎么办
- python读取docx文件，并进行一些操作