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

已于 2022-07-13 18:26:13 修改
阅读量380 收藏
点赞数 1
分类专栏： 小程序学习 springboot java基础学习 文章标签： spring boot 后端 java
于 2022-07-13 18:26:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59588838/article/details/125769252
版权

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

我们先来挂代码：

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<Device> findAllDevice();
}

 controller层

@RestController
public class UserController {
    @Autowired
    private UserService userService;

    /**
     * 登录
     * @param Id
     * @param password
     * @return
     */
    @RequestMapping("/login")
    public R<Boolean> 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("登录失败！");
        }
    }

    /**
     * 注册
     * @param Id
     * @param Name
     * @param Phone
     * @param password
     * @return
     */
    @RequestMapping("/register")
    @ResponseBody
    public R<Boolean> 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;

    /**
     * 查询全部设备信息
     * @return
     */

    @RequestMapping("/findAllDevice")
    @ResponseBody
    public R<Object> findAllDevice(){
        List<Device> deviceList = deviceService.findAllDevice();
        R<Object> r = new R<Object>();
        r.setCode(1);
        r.setData(deviceList);
        r.setMsg("查询全部设备信息成功！");
        return r;
    }
}

通用返回结果类

/**组件返回通用类，设定返回码与消息与返回结果的封装*/
@Data
public class R<T> {

    private Integer code;
    private String msg;
    private T data;
    private Map map = new HashMap();

    public static <T> R<T> success(T object) {
        R<T> r = new R<T>();
        r.data = object;
        r.code = 1;
        return r;
    }

    public static <T> R<T> error(String msg) {
        R<T> r = new R<T>();
        r.msg = msg;
        r.code = 0;
        return r;
    }

    public R<T> 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/**
mybatis:
  configuration:
    map-underscore-to-camel-case: false

微信小程序

登录页

wxml

<!-- 登录页面 -->
<view>
  <swiper class="swiper" autoplay="true" interval="2000" circular="false" indicator-dots="true">
    <swiper-item>
      <view>
        <image src="{{jpg1}}"></image>
      </view>
    </swiper-item>
    <swiper-item>
      <view>
        <image src="{{jpg2}}"></image>
      </view>
    </swiper-item>
    <swiper-item>
      <view>
        <image src="{{jpg3}}"></image>
      </view>
    </swiper-item>
  </swiper>
</view>
<view class="bg">
  <view class="header">
    <text class="text">欢迎登录测试自习室</text>
  </view>
  <form class="login-form">
    <view class="input-group">
      <text class="input-label">输入账号：</text>
      <input type="text" data-params="Id" value="{{Id}}" placeholder="请输入id" bindinput="inId" type="text"></input>
    </view>
    <view class="input-group">
      <text class="input-label">输入密码：</text>
      <input password="true" data-params="password" value="{{password}}" placeholder="请输入password" bindinput="inPassword"></input>
    </view>
  </form>
  <view class="header">
    <button class="button" type="primary" bindtap="submit">登录</button>
  </view>
  <view>
    <button class="button" type="primary" bindtap="register">注册</button>
  </view>
  <view wx:if="{{sign == 0}}">{{msg}}</view>
</view>

js
 

const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  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{
  /* height: 350px;
  background-image: url(https://tse1-mm.cn.bing.net/th/id/OIP-C.kFUai67ymOqqTNqT0T3O7gHaFj?pid=ImgDet&rs=1); */
}
.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

<!--pages/Zhuce/zhuce.wxml-->
<!-- 注册用户页面 -->
<view>
  <view class="header">
    <text class="text">欢迎注册自习室账户</text>
  </view>
  <form class="login-form">
    <view class="input-group">
      <text class="input-label">账户：</text>
      <input type="text" placeholder="输入自定义账户" data-params="Id" bindinput="inId"></input>
    </view>
    <view class="input-group">
      <text class="input-label">姓名：</text><input type="text" placeholder="输入您的姓名" data-params="Name" bindinput="inName"></input>
    </view>
    <view class="input-group">
      <text class="input-label">电话：</text><input type="text" placeholder="输入您的电话" data-params="Phone" bindinput="inPhone"></input>
    </view>
    <view class="input-group">
      <text class="input-label">密码：</text><input type="safe-password" placeholder="输入您的密码" data-params="password" bindinput="inpassword"></input>
    </view>
    <view class="input-group">
      <text class="input-label">确认</text>：<input type="safe-password" placeholder="验证您的密码" data-params="Vpassword" bindinput="Vipassword"></input>
    </view>
  </form>
  <view>
    <button class="button" type="primary" bindtap="submit">注册</button>
    <button class="button" type="primary" bindtap="return">返回</button>
  </view>
</view>

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

/* pages/Zhuce/zhuce.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

<!--pages/List/list.wxml-->
<!-- 设备列表页面 -->
<view class="header">
  <rich-text nodes="<h1>设备信息列表<h1>"></rich-text>
</view>
<view class="container">
  <block wx:for="{{deviceList}}" wx:key="index">
    <view class="border" bindtap="orderDevice" data-id="{{item.id}}">
      <view class="text-content">设备号：{{item.id}}</view>
      <view class="text-content">设备状态：{{item.state}}</view>
      <view class="text-content">设备锁：{{item.lock}}</view>
      <view class="text-content">设备信息：{{item.info}}</view>
    </view>
  </block>
</view>

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

/* pages/List/list.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
}

综合效果

测试

ForestSpringH
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
小程序定义并使用类
weixin_30558305的博客
07-26 1300
目录结构 config.js const myShowLoading = (info,time)=>{ wx.showLoading({ title: info, }); setTimeout(function(){ wx.hideLoading(); },time) } const baseUrl = 'http...
微信小程序实现lot开发04 条件渲染与列表渲染
m0_59588838的博客
07-03 327
我的网络继电器设备到了，今天下午也是很开心的测试了一波，很有意思，通过网络连接去阿里云的服务器，通过服务器实现对网段中的硬件发送控制信息以及收取状态反馈信息，可以发现基于mqtt协议，UDP协议里的网络继电器设备在连接网线之后不断的发包和收包，以至于它的工作灯一直闪烁。那么我也不能闲着，抓紧学习了小程序基础的最后一部分内容，条件渲染和列表渲染。......
微信小程序 ---设备及交互API 10
weixin_42061487的博客
09-08 571
获取网络状态： wx.getNetworkType({ success: function(res) { console.log(res) }, }) 返回的数据 返回设备信息: wx.getSystemInfo({ success: function(res) { console.log(res) }, ...
【Core】.net core 3.1 api 返回实体类数据存在null，导致小程序调用接口也直接显示了null，原来要这样设置才可
小5聊的博客
02-04 1802
在实际项目开发中，我们难免会遇到调用接口返回字段值为null的情况。 如果不做处理，那么直接显示在客户端，会给人一种不专业的感觉，这个也是开发人员需要特别注意的。
实体类的变形【1】—— 餐盘原理
jyk 金色海洋工作室 ASP.NET经验总结
08-30 691
     在亚历山大同学的post里面我说可以让实体类和表不必一一对应，但是并没有详细说明如何来做，也有人想问我是怎么做的，那么我就说一下。先说一个简单一点的，那就是在网页里面显示列表数据的情况，其他的下次再说。我们先来看一个生活中的情况，然后再说程序里面如何来做。 餐盘原理——模糊对应      餐盘，大家去食堂吃饭的时候，是不是会用一个长方形的餐盘来盛饭和
Springboot实现微信小程序注册登录及微信登录.zip
03-10
微信小程序是腾讯公司基于微信平台推出的一种轻量级应用形态，它无需用户下载安装即可在微信内直接使用。自2017年正式上线以来，小程序凭借其便捷性、易获取性和出色的用户体验迅速获得市场认可，并成为连接线上线下...
基于微信小程序的点餐系统设计与实现 毕业论文.docx
04-30
本文档是一篇关于基于微信小程序的点餐系统设计与实现的毕业论文，旨在利用微信小程序这一日益普及的技术，优化餐厅点餐流程，提供便捷的在线点餐服务。论文详细介绍了系统的开发背景、技术选型、需求分析、系统设计...
基于微信小程序点餐系统的设计与实现（含word论文）
03-29
《基于微信小程序点餐系统的设计与实现》 随着信息技术的快速发展，互联网已深入人们生活的各个领域，其中，餐饮行业的数字化转型尤为明显。微信小程序作为移动应用的一种轻量化形式，为餐饮业提供了便捷的线上点餐...
医院核酸检测服务系统微信小程序设计实现-后台基于Springboot框架实现
最新发布
06-12
微信小程序毕业设计优质毕设-医院核酸检测服务系统微信小程序设计实现-后台基于Springboot框架实现.zip 个人经导师指导并认可通过的高分设计项目，评审分98分。主要针对计算机相关专业的正在做毕设的学生和需要项目...
设备远程管理小程序开发制作
hanlin1888的博客
12-08 618
设备远程管理小程序，目的就是为大家提供更便捷的体验。 小程序依然延用APP的风格，使用扁平化简约的设计，所有的元素干净利落，更少的按钮和选项使得界面干净简洁，使用起来格外简单。设置选择类型中，减少了推流时对平台的选择，其他设置基本相同，APP能做到的，小程序中也能做到（微信更新版本可对小程序进行缩小显示悬浮图标，随时可打开查看，在不影响聊天的同时，能多次对小程序进行操作）。 打开小程序，输入手机验证码，即可登录。如果是已有账号的老用户，也只需输入您APP中注册绑定的手机号，即可快速登录，账户信息
springboot小区物联网平台源码
qq_630137186的博客
02-15 856
springboot小区物联网平台源码
SpringBoot整合IoTDB
zjy660358的专栏
01-12 2098
Maven <dependency> <groupId>org.apache.iotdb</groupId> <artifactId>iotdb-session</artifactId> <version>0.10.1</version> </dependency> 我所使用原生ses
微信小程序提交表单多个input输入框，通过一个bindinput方法实现双向数据绑定
guairena的博客
10-28 3465
微信小程序提交表单多个input输入框，通过一个bindinput方法实现双向数据绑定
微信小程序的布局css部分样式
Mr_LiJiaLe的博客
02-22 1480
width: fit-content; font-size:20px; /*设置文字字号*/ color:red; /*设置文字颜色*/ font-weight:bold; /*设置字体加粗*/ border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/ font-family:"宋体"; /*设置字体为宋体*/ font-style:italic; /*文字排版--斜体*/ text-decoration:underli...
微信小程序商品详情页规格属性选择
技术渣的博客
10-30 2万+
微信小程序商城开发之商品详情页 商品属性规格选择功能实现
#微信小程序#参照微信朋友圈实现内容回复、弹起输入框在软键盘之上
weixin_43811390的博客
12-29 2238
实现的是一个展示用户历史打卡数据，其中部分打卡有工作人员点评，而用户可以回复工作人员的点评（仅能回复一条）。 界面效果如下图所示： 简单记录整理一下这个界面的代码。 纠结很久的点在于如何做到像微信朋友圈那样，点击评论按键，弹出输入框和软键盘，并且输入框的位置刚好对准需要评论的内容底下。 我目前只实现了前半部分，输入框的位置还不能很好地对准内容组件的底部，并且使用感并不好，弹出收回输入框和软键盘的过程卡卡的。 后续还要不断优化。 <!-- wxml --> <block wx:if="
微信小程序长按复制文本
热门推荐
xubingnan123的博客
01-18 4万+
在微信小程序内的文字无法长按复制，除了text节点以外。 但是要在text标签内加一个“selectable”属性。
微信小程序的布局css样式
xinyuandu的博客
09-05 1458
width: fit-content; font-size:20px; /设置文字字号/ color:red; /设置文字颜色/ font-weight:bold; /设置字体加粗/ border:1px solid red;/添加边框样式（粗细为1px， 颜色为红色的实线）/ font-family:”宋体”; /设置字体为宋体/ font-s...
微信小程序会议室管理系统：SpringBoot+Mybatis实现
Mybatis作为持久层框架，与SpringBoot结合使用，能够灵活地执行SQL语句，实现数据的增删查改操作。Mybatis的映射文件和接口方法可以精确控制每一个SQL操作，确保数据操作的安全性和效率。 在前端，系统使用微信小...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ForestSpringH

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值