栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

微信小程序实现lot开发06 与springboot结合建立登录与设备信息查看

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

微信小程序实现lot开发06 与springboot结合建立登录与设备信息查看

前几天着重学习了关于微信小程序界面基础与事件的绑定,列表的渲染等知识。

我们先来挂代码:

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 findAllDevice(){
        List deviceList = deviceService.findAllDevice();
        R r = new R();
        r.setCode(1);
        r.setData(deviceList);
        r.setMsg("查询全部设备信息成功!");
        return r;
    }
} 
通用返回结果类 
@Data
public class R {

    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;
    }

}
application.yml
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
}
综合效果

测试

转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号