前几天着重学习了关于微信小程序界面基础与事件的绑定,列表的渲染等知识。
我们先来挂代码:
springboot后端接口配置 实体类(用到就挂上,没用到先不挂)@Data
public class User {
private String Id;
private String Name;
private Integer Amount;
private String Phone;
private String password;
}
@Data
public class Device {
private String Id;
private boolean State;
private boolean Lock;
private String Info;
}
Mapper层
@Mapper
public interface UserMapper {
// 登录
@Select("select password from getmsqlconnection.user where Id=#{Id}")
String login(@Param("Id") String Id,@Param("password") String password);
// 注册
@Insert("insert into getmsqlconnection.user values(#{user.Id},#{user.Name},#{user.Phone},#{user.Amount},#{user.password})")
Boolean register(@Param("user") User user);
// 修改密码
@Update("update getmsqlconnection.user set password=#{password} where Id=#{Id}")
Boolean updatePassword(@Param("Id") String Id,@Param("password") String password);
}
@Mapper
public interface DeviceMapper {
@Select("select * from getmsqlconnection.device")
List findAllDevice();
}
controller层
@RestController
public class UserController {
@Autowired
private UserService userService;
@RequestMapping("/login")
public R userLogin(@RequestParam("Id")String Id, @RequestParam("password")String password){
// System.out.println("-------------"+Id+"||"+password+"--------------------");
if (Id == null || password == null){
return R.error("输入完整的账号密码!");
}
try {
String userLogin = userService.userLogin(Id, password);
// System.out.println("-------------"+userLogin+"----------");
if (!userLogin.equals(password)){
throw new SQLException("账号密码错误!");
}
return R.success(true);
}catch (Exception e){
return R.error("登录失败!");
}
}
@RequestMapping("/register")
@ResponseBody
public R UserRegister(@RequestParam("Id") String Id,@RequestParam("Name")String Name,@RequestParam("Phone")String Phone,@RequestParam("password")String password){
System.out.println("-----------微信小程序访问------------");
if (Id == null || password == null)
return R.error("请填写完整的用户信息!");
String password1 = null;
try {
password1 = userService.userLogin(Id,password);
}catch (Exception e){
System.out.println("该账户没有注册过!");
throw e;
}
try{
if (password1 != null)
throw new Exception("该账户名已经被使用!");
User user = new User();
user.setId(Id);
user.setName(Name);
user.setAmount(0);
user.setPhone(Phone);
user.setPassword(password);
boolean userRegister = userService.UserRegister(user);
if (!userRegister){
throw new Exception("注册失败!");
}
return R.success(true);
}catch (Exception e){
return R.error("注册失败!");
}
}
}
@RestController
public class DeviceController {
@Autowired
private DeviceService deviceService;
@RequestMapping("/findAllDevice")
@ResponseBody
public R
通用返回结果类
@Data public class Rapplication.yml{ private Integer code; private String msg; private T data; private Map map = new HashMap(); public static R success(T object) { R r = new R (); r.data = object; r.code = 1; return r; } public static R error(String msg) { R r = new R (); r.msg = msg; r.code = 0; return r; } public R add(String key, Object value) { this.map.put(key, value); return this; } }
server:
port: 8080
spring:
application:
name: 712
thymeleaf:
enabled: false
encoding: UTF-8
cache: false
mode: HTML5
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/getmsqlconnection?serverTimezone=UTC
username: root
password: 123456
type: com.zaxxer.hikari.HikariDataSource
mvc:
static-path-pattern: /static
data: {
Id: "",
password:"",
msg:'',
sign: 0,
jpg1:'../../static/images/自习室1.jpg',
jpg2:'../../static/images/自习室2.jpg',
jpg3:'../../static/images/自习室3.jpg'
},
// 用户输入Id
inId(e){
this.setData({
[`${e.currentTarget.dataset.params}`]: e.detail.value,
})
},
// 用户输入password
inPassword(e){
this.setData({
[`${e.currentTarget.dataset.params}`]: e.detail.value
})
},
// 用户点击登录
submit(){
var th = this;
wx.request({
url: 'http://192.168.100.222:8080/login',
method:"GET",
data:{
Id: this.data.Id,
password: this.data.password,
},
header:{
'content-type': 'application/json'
},
success(res){
app.globalData.userId = th.data.Id,
console.log(res),
th.setData({
msg: res.data.msg,
// code就是正确码
sign: res.data.code,
})
// 判断登录信号码,进行回跳页面
if(th.data.sign == 1){
wx.showToast({
title: 'success',
})
setTimeout(function(){
wx.navigateTo({
url: '/pages/List/list',
})
},2000)
}else{
wx.showToast({
title: 'error',
})
}
}
})
},
// 用户注册跳转页面
register(){
wx.showToast({
title: '前往注册页面',
})
setTimeout(function(){
wx.navigateTo({
url: '/pages/Zhuce/zhuce',
})
},100)
}
})
wxss
page{
background-color: #F5F5F5
}
.swiper{
text-align: center;
height: 200px;
width: auto;
}
.header{
margin-top: 20px;
margin-bottom: 10px;
text-align: center;
}
.text{
color: black;
font-size: 25px;
font-style: italic;
}
.bg{
}
.button{
margin-top: 10px;
overflow: hidden;
width: fit-content;
height: fit-content;
}
.login-form {
flex: 1;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
}
.input-group {
display: flex;
align-items: center;
padding: 25rpx 10rpx;
margin: 40rpx 3%;
background: #fff;
border-radius: 5px;
border: 2px solid #f4f4f4;
transition: all .25s ease-in-out;
}
.input-label {
color: #888;
font-size: 13pt;
height: 25rpx;
line-height: 25rpx;
padding: 0 25rpx;
border-right: 1px solid #d8d8d8;
}
.input-group input,
.input-group picker {
flex: 1;
font-size: 13pt;
min-height: 52rpx;
height: 52rpx;
line-height: 52rpx;
padding: 0 25rpx;
}
注册页
wxml
欢迎注册自习室账户
js
// pages/Zhuce/zhuce.js
const app = getApp();
Page({
data: {
Id:"",
Name:"",
Phone:"",
password:"",
Vpassword:"",
sign: 0,
msg:""
},
// 用户输入Id
inId(event){
this.setData({
[`${event.currentTarget.dataset.params}`]: event.detail.value
})
},
// 用户输入Name
inName(event){
this.setData({
[`${event.currentTarget.dataset.params}`]: event.detail.value
})
},
// 用户输入电话
inPhone(event){
this.setData({
[`${event.currentTarget.dataset.params}`]: event.detail.value
})
},
// 用户输入密码
inpassword(event){
this.setData({
[`${event.currentTarget.dataset.params}`]: event.detail.value
})
},
// 用户输入验证密码
Vipassword(event){
this.setData({
[`${event.currentTarget.dataset.params}`]: event.detail.value
})
},
// 点击注册
submit(){
if(this.data.password !== this.data.Vpassword){
wx.showToast({
title: '密码确认失败,请重新确认密码',
})
}else{
var th = this;
wx.request({
url: 'httP://192.168.100.222:8080/register',
method:"GET",
header:{
'content-type': 'application/json'
},
data:{
Id: th.data.Id,
Name: th.data.Name,
Phone: th.data.Phone,
password: th.data.password
},
success(res){
console.log(res),
th.setData({
sign: res.data.code,
msg: res.data.msg
})
if(th.data.sign == 1){
wx.showToast({
title: "注册成功",
})
setTimeout(function(){
wx.navigateTo({
url: '/pages/index/index',
})
},1000)
}else{
wx.showToast({
title: "注册失败",
})
}
}
})
}
},
// 点击返回
return(){
wx.navigateTo({
url: '/pages/index/index',
})
}
})
wxss
page{
position: fixed;
height: 100%;
width: 100%;
overflow: hidden;
background-color: #F5F5F5;
background-image: url(https://tse1-mm.cn.bing.net/th/id/OIP-C.kFUai67ymOqqTNqT0T3O7gHaFj?pid=ImgDet&rs=1);
}
.header{
text-align: center;
margin: 5px;
font-size: larger;
}
.input{
text-align: center;
width: 40%;
height: 5px;
display: inline-block;
border: black 3px solid;
border-radius: 3px;
}
.button{
margin: 5px;
}
.text{
color: black;
font-size: 35px;
font-style: initial;
}
.login-form {
flex: 1;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
}
.input-group {
display: flex;
align-items: center;
padding: 25rpx 10rpx;
margin: 40rpx 3%;
background: #fff;
border-radius: 5px;
border: 2px solid #f4f4f4;
transition: all .25s ease-in-out;
}
.input-label {
color: #888;
font-size: 13pt;
height: 25rpx;
line-height: 25rpx;
padding: 0 25rpx;
border-right: 1px solid #d8d8d8;
}
.input-group input,
.input-group picker {
flex: 1;
font-size: 13pt;
min-height: 52rpx;
height: 52rpx;
line-height: 52rpx;
padding: 0 25rpx;
}
设备主页
wxml
设备号:{{item.id}} 设备状态:{{item.state}} 设备锁:{{item.lock}} 设备信息:{{item.info}}
js
// pages/List/list.js
const app = getApp();
Page({
data: {
deviceList:[
],
msg: '',
sign: 0
},
orderDevice(event){
app.globalData.deviceId = event.currentTarget.dataset.id
wx.navigateTo({
url: '/pages/Order/order',
})
},
onLoad(options) {
// 页面加载时就让他初始化设备信息
var th = this;
wx.request({
url: 'http://192.168.100.222:8080/findAllDevice',
method:"GET",
header:{
'content-type': 'application/json'
},
success(res){
console.log(res),
th.setData({
deviceList: res.data.data,
sign: res.data.code,
msg: res.data.msg
})
console.log(app.globalData.userId)
}
})
}
})
wxss
page{
background-color: #F5F5F5
}
.container{
padding: 10px 20px;
align-content: center;
}
.header{
text-align: center;
}
.border{
border: black 2px solid;
margin-bottom: 3px;
}
.text-content{
padding: 10px;
align-content: center;
border-bottom: 1rpx solid #F5F5F5;
background-color: #FFFFFF
}
综合效果
测试



