Spring Boot + Mybatis 实现简单的实验室预约微信小程序

本微信小程序主要由Mysql，Eclipse和微信开发者工具共同完成，其主要功能有分角色登录，新闻页浏览及推送，实验室条件筛选查询，实验室预约，查看历史预约记录或取消当前预约以及个人信息修改和教师用户管理实验室功能等

根据上述功能我们大致可以建立以下数据库表如图

这里详细列出lab表，news表和students表，record表中的字段

lab表

news表

students表

records表

这里我所使用的数据库可视化组件为phpMyAdmin，teacher表中字段大致与student表中字段相同

这里后台服务器选用如今主流框架来进行搭建，分别为Mybatis和Spring Boot

在新建Spring项目后，有一点很关键的是在于如何配置pom.xml文件，如图

	4.0.0
	
		org.springframework.boot
		spring-boot-starter-parent
		2.6.6
		 
	
	com.example
	spring
	0.0.1-SNAPSHOT
	spring
	Demo project for Spring Boot
	
		11
	
	
		
			org.springframework.boot
			spring-boot-starter-web
		

		
			mysql
			mysql-connector-java
			runtime
		
		
			org.mybatis.spring.boot
			mybatis-spring-boot-starter
			2.1.2
			compile
		
		
			org.springframework.boot
			spring-boot-starter-test
			test
		
	

	
		
			
				org.springframework.boot
				spring-boot-maven-plugin
			
		
	

除此之外，我们就可以在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
  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

  
    
    
    
    
    
  


  
  
  教师须知
  
  
  
  预约规则
  
  
  
  实验室概况
  



  
    
    {{news.title}}nn{{news.time}}
  

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，好在是顺利解决。虽然程序简单，但对我来说还是从中获取到了不少新的知识，积累经验希望能对以后的项目有所帮助。

引用伟人的话：

恰同学少年，风华正茂；书生意气，挥斥方遒。

指点江山，激扬文字，粪土当年万户侯。

曾记否，到中流击水，浪遏飞舟？