微信小程序+springboot

hehetc 2018-11-17 10:09:06

小程序+springboot开发会议室demo

一．我的环境
java环境
YinChongdeMBP:.jenkins YinChong$ java -version
java version "1.8.0_131"
Java(TM) SE Runtime Environment (build 1.8.0_131-b11)
Java HotSpot(TM) 64-Bit Server VM (build 25.131-b11, mixed mode)

Maven环境
YinChongdeMBP:~ YinChong$ mvn -v
Apache Maven 3.5.3 (3383c37e1f9e9b3bc3df5050c29c8aff9f295297; 2018-02-25T03:49:05+08:00)
Maven home: /Users/YinChong/Documents/software/apache-maven-3.5.3
Java version: 1.8.0_131, vendor: Oracle Corporation
Java home: /Library/Java/JavaVirtualMachines/jdk1.8.0_131.jdk/Contents/Home/jre
Default locale: zh_CN, platform encoding: UTF-8
OS name: "mac os x", version: "10.13.3", arch: "x86_64", family: "mac"
YinChongdeMBP:~ YinChong$

看下环境变量：
YinChongdeMBP:/ YinChong$ cat /etc/profile

# System-wide .profile for sh(1)
if [ -x /usr/libexec/path_helper ]; then
eval `/usr/libexec/path_helper -s`
fi
if [ "${BASH-no}" != "no" ]; then
[ -r /etc/bashrc ] && . /etc/bashrc
fi
alias ll="ls -la"

看下：/Users/YinChong下面的.bash_profile
YinChongdeMBP:~ YinChong$ cat .bash_profile

export M2_HOME=/Users/YinChong/Documents/software/apache-maven-3.5.3
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_131.jdk/Contents/Home
CLASS_PATH="$JAVA_HOME/lib"
export PATH=$JAVA_HOME/bin:%JAVA_HOME%\jre\bin:$M2_HOME/bin:$PATH:.

注：mac上环境变量配置文件的优先级：
/etc/profile /etc/paths ~/.bash_profile ~/.bash_login ~/.profile ~/.bashrc

1. /etc/profile （建议不修改这个文件）全局（公有）配置，不管是哪个用户，登录时都会读取该文件。
2. /etc/bashrc （一般在这个文件中添加系统级环境变量）全局（公有）配置，bash shell执行时，不管是何种方式，都会读取此文件。
3. ~/.bash_profile （一般在这个文件中添加用户级环境变量）每个用户都可使用该文件输入专用于自己使用的shell信息,当用户登录时,该文件仅仅执行一次!

YinChongdeMBP:~ YinChong$ echo $PATH
/Library/Java/JavaVirtualMachines/jdk1.8.0_131.jdk/Contents/Home/bin:%JAVA_HOME%jrebin:/Users/YinChong/Documents/software/apache-maven-3.5.3/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/texbin:/usr/local/go/bin:.

关于settings.xml文件
settings.xml文件可能存在于两个地方：
• Maven安装时默认的配置：$M2_HOME/conf/settings.xml
• 用户自定义的配置：~/.m2/settings.xml
如果用户自定义的settings.xml文件存在，可以手动创建。
前一个settings.xml成为全局设置，后一个成为用户设置。当两个文件同时存在的时候，它们的内容将会被合并，在后者中用户具体定的重复配置将会覆盖系统默认的配置。
在某些IDE中也可以指定settings.xml文件的位置，如IDEA：

二．后台springboot
创建springInitializer工程
从初始化工程中删除了三个没用文件
看pom：springbootstarterweb/test
看源码：

模拟请求：http://jsonplaceholder.typicode.com/

写一个roomController试一下前后联通

package com.boc.Controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

/**
* Created by YinChong on 2018/9/3.
*/

@RestController
public class roomController {
@RequestMapping(value = "/room", method = RequestMethod.GET)
public String say(){
return "test success!";
}
}

在工程中引入jpa
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>

配置数据库连接：在application.yml中
spring:
profiles:
active: prod
datasource:
driver-class-name: com.mysql.jdbc.Driver
url: jdbc:mysql://127.0.0.1:3306/dbtool
username: root
password: root
jpa:
hibernate:
ddl-auto: update
show-sql: true

用navcat在数据库连接中新建一个库 dbtool

新建domain ：tool，然后运行工程，会自动在数据库中生成一个room表，没有内容
package com.boc.domain;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.validation.constraints.NotNull;

/**
* Created by YinChong on 2018/9/3.
*/

@Entity 写entity注释才表示对应数据库一张表，运行工程后才会自动生成表
public class Room {

@Id
@GeneratedValue
private Integer id;

@NotNull(message = "roomId必传")
private String roomId;

private String roomName;

private String roomLocation;

private String roomDesc;

public Integer getId() {
return id;
}

public void setId(Integer id) {
this.id = id;
}

public String getRoomId() {
return roomId;
}

public void setRoomId(String roomId) {
this.roomId = roomId;
}

public String getRoomName() {
return roomName;
}

public void setRoomName(String roomName) {
this.roomName = roomName;
}

public String getRoomLocation() {
return roomLocation;
}

public void setRoomLocation(String roomLocation) {
this.roomLocation = roomLocation;
}

public String getRoomDesc() {
return roomDesc;
}

public void setRoomDesc(String roomDesc) {
this.roomDesc = roomDesc;
}
}

写repository接口：

package com.boc.repository;

import com.boc.domain.Room;
import org.springframework.data.jpa.repository.JpaRepository;

import java.util.List;

/**
* Created by YinChong on 2018/9/4.
*/
public interface RoomRepository extends JpaRepository<Room, Integer> {
public List<Room> findByRoomId(String roomId);
}

接口里面可以是空的，就可以用自带的一些mapper方法，有些想自己定义的可以写

写service：
package com.boc.service;

import com.boc.domain.Room;
import com.boc.repository.RoomRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
* Created by YinChong on 2018/9/4.
*/

@Service
public class RoomService {
@Autowired
private RoomRepository roomRepository;

/**
* 查询所有会议室列表
* @return
*/
public List<Room> roomList(){
return roomRepository.findAll();
}

}

修改controller，改为从service调用

package com.boc.Controller;

import com.boc.domain.Room;
import com.boc.repository.RoomRepository;
import com.boc.service.RoomService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

/**
* Created by YinChong on 2018/9/3.
*/

@RestController
public class roomController {

@Autowired
private RoomService roomService;

/**
* 查询所有会议室列表
* @return
*/
@GetMapping(value = "rooms")
public List<Room> roomList(){
return roomService.roomList();
}

}

注意：写post请求在springboot中，若requestParam形式，则前端请求时是url？id=的形式，若requestBody，才是单独的data：xxx
在postman模拟时，requestParam是放在header参数里，requestBody则放在Body参数里

三．前台-小程序
小程序注册
小程序要独立于公众号单独注册
登陆也是分开的用户名密码
可在公众号中关联小程序

AppID(小程序ID) wx4573a7910ba14b95
要访问后台接口，必须在小程序设置中添加服务器信息（要鉴权）
然后开发者工具，项目设置里面要点开域名信息一下（刷新一下）:设置-项目设置

小程序开发中注意的点
flex布局的使用，非常方便。

页面之间发请求并传值时，要转为string才行。
navigateToBooking:function(e){
var obj = {};
obj.roomId = e.currentTarget.dataset.roomid;
obj.roomName = e.currentTarget.dataset.roomname;
var data = JSON.stringify(obj)
wx.navigateTo({
url: "/pages/booking/booking?room=" + data
})
}

下个页面解析获取值再转回来
onLoad:function(options) {
var room = JSON.parse(options.room);
var room_id = room.roomId;
var room_name = room.roomName;
var current_day = new Date().getDay(); //今天星期几，用于设置daySelected初始值，从而颜色为绿色
var current_date_format = util.formatDate(new Date());
var days = this.setDays();
this.setData({
roomId: room.roomId,
roomName: room.roomName,
daySelected: current_day,
dateSelected: current_date_format,
days:days
});
var that = this;
that.getScheInfoByRoomAndDate(room_id, current_date_format);//异步问题，值还没返回就执行下面的，下面的拿不到scheInfo的值。所以要在函数内部，请求success里写“赋值已预定时间段“。

},

需要实现：
1. 根据当前日期，决定展示的五个星期几的日期分别是多少。

思路：
date函数获取当前日期和星期几，然后向前和向后分别循环设置其余日期。
返回的是封装好了都设置了值的7天日期对象。

setDays:function(){
var current_day = new Date().getDay();//今天星期几
var obj = this.data.days;//获取当前的days对象
obj[current_day].date = util.formatDate(new Date()); //设置今天的日期
obj[current_day].dateShow = new Date().getDate(); //设置今天的日期
//两个while设置今天之前和之后的日期
var current_day_temp = current_day; //用于循环的临时变量
var current_day_temp2 = current_day; //用于循环的临时变量
while (current_day_temp > 0) {
var date_to_be_set = this.getOtherDate(obj[current_day_temp].date, -1);
obj[current_day_temp - 1].date = date_to_be_set.date;
obj[current_day_temp - 1].dateShow = date_to_be_set.dateShow;
current_day_temp--;
}
while (current_day_temp2 < 6) {
var date_to_be_set2 = this.getOtherDate(obj[current_day_temp2].date, 1);
obj[current_day_temp2 + 1].date = date_to_be_set2.date;
obj[current_day_temp2 + 1].dateShow = date_to_be_set2.dateShow;
current_day_temp2++;
}
return obj; //返回的是封装好了都设置了值的7天日期对象
},

getOtherDate:function(today, addDayCount) {
//返回某日期前后的其他日期(完整和末位)，若today输null，则默认基准是今天，若输入一个日期，则以那个日期为基准

2. 根据当前日期标识为绿色，选择哪个日期就把相应日期标为绿色。

思路：数据设置一个daySelected、dateSelected。获取当前日期，赋值给daySelected。然后在html页面里动态绑定class：用于展示每个日期格内内容的 js文件里的days数据里，设置一个select属性，0-6.
若select属性等于daySelected，则设置为绿色的class样式。

<view class="container">
<view class="days-container">
<block wx:for="{{days}}" wx:key="*this">
<view data-select="{{item.select}}" class="{{item.select == daySelected ? 'day-selected':''}} day-item" bindtap="selectDay">
<view>{{item.dateShow}}</view>
<view> {{item.name}} </view>
</view>

</block>
</view>

onLoad:function(options) {
var room = JSON.parse(options.room);
var room_id = room.roomId;
var room_name = room.roomName;
var current_day = new Date().getDay(); //今天星期几，用于设置daySelected初始值，从而颜色为绿色
var current_date_format = util.formatDate(new Date());
var days = this.setDays();
this.setData({
roomId: room.roomId,
roomName: room.roomName,
daySelected: current_day,
dateSelected: current_date_format,
days:days
});
var that = this;
that.getScheInfoByRoomAndDate(room_id, current_date_format);//异步问题，值还没返回就执行下面的，下面的拿不到scheInfo的值。所以要在函数内部，请求success里写“赋值已预定时间段“。

},

3．选择时间段的处理：
先判断已选时间之外的时间才能选
设置timeSelected数据。
点击时间段时，

...全文