当前位置：首页 > news >正文

【微信小程序】shrio安全登录界面实现

news 来源：原创 2024/5/6 13:00:13

博主：👍不许代码码上红
欢迎：🐋点赞、收藏、关注、评论。
格言：大鹏一日同风起，扶摇直上九万里。

文章目录

一、关于微信小程序的登录界面制作
1.1、wxml代码
1.2、checkbox标签
1.2.1、color属性
1.2.2、disabled属性
1.2.4、value属性

1.3、wxss画一个区域
1.3.1、bindsubmit属性
1.3.2、placeholder属性

二、登录界面逻辑实现
2.1、将数据提交给后台
2.1.1、success属性
2.1.2、url属性
2.1.3、data属性
2.1.4、header属性
2.1.5、method属性

三、后端接收小程序提交的表单
四、shrio框架
简介
核心

在这里插入图片描述

一、关于微信小程序的登录界面制作

1.1、wxml代码

<view class='login'>
    <image src='../../images/login.jpg' class='login-bg'></image>
    <view class='login-wrap'>
        <form bindsubmit="formSubmit" bindreset="formReset">
            <view class='title'>登录</view>
            <view class='inp'>
                <input type="text" name="username" value="{{username}}" placeholder="请输入账号" />
            </view>
            <view class='inp'>
                <input class="inputText" type="password" name="password" value="{{password}}" password="true" placeholder="请输入密码" />
            </view>
            <view class='login-btn'>
                <button class="btn1" type="primary" size="mini" form-type='submit'>
                    登录
                </button>
                <button class='btn2' size='mini' bindtap="goToRegist">注册</button>
            </view>
        </form>
        <view class='password-info'>
            <checkbox-group class="rember">
                <label>
                    <checkbox value='请记住用户名' />
                    请记住用户名
                </label>
            </checkbox-group>
        </view>
    </view>
</view>

效果
在这里插入图片描述
其中，在页面的最下面一行字：“请记住用户名”。在这一行我们用的是
checkbox标签

1.2、checkbox标签

1.2.1、color属性

color属性：改变对勾颜色
例如：

 <checkbox value='请记住用户名' color="#FF3333"/>
      请记住用户名

在这里插入图片描述

1.2.2、disabled属性

disabled属性：禁用打对勾
例如：

   <checkbox value='请记住用户名' disabled="true"/>
      请记住用户名

在这里插入图片描述

1.2.3、checked属性
checked属性：默认选中
例如：

  <checkbox value='请记住用户名' checked="true"/>
      请记住用户名

在这里插入图片描述

1.2.4、value属性

value属性：checkbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value
例如：

<checkbox-group bindchange="checkboxChange">
<checkbox value='football'>足球</checkbox>
<checkbox value='请记住用户名'> 请记住用户名</checkbox>
<checkbox value='baseball'>棒球</checkbox>
<checkbox value='pingpang'>乒乓球</checkbox>
</checkbox-group>

在这里插入图片描述

<checkbox-group class="rember">
    <label>
      <checkbox value='请记住用户名' />
      请记住用户名
    </label>
</checkbox-group>

在这里插入图片描述

1.3、wxss画一个区域

.login-wrap {
  position: absolute;
  padding: 20rpx 60rpx;
  z-index: 2;
  width: 560rpx;
  left: 50%;
  top: 40%;
  box-shadow: 0 10rpx 20rpx 0px #888888;
  transform: translate3d(-50%, -50%, 0);
  border-radius: 16rpx;
  background-color: #fff;
}

在这里插入图片描述
这个区域画出来之后，将登录、注册等内容加进去

<form bindsubmit="formSubmit">
            <view class='title'>登录</view>
            <view class='inp'>
                <input type="text" name="username" value="{{username}}" placeholder="请输入账号" />
            </view>
            <view class='inp'>
                <input class="inputText" type="password" name="password" value="{{password}}" password="true" placeholder="请输入密码" />
            </view>
            <view class='login-btn'>
                <button class="btn1" type="primary" size="mini" form-type='submit'>
                    登录
                </button>
                <button class='btn2' size='mini' bindtap="goToRegist">注册</button>
            </view>
        </form>

在这里插入图片描述

1.3.1、bindsubmit属性

bindsubmit属性：

携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}

1.3.2、placeholder属性

placeholder属性：
输入框为空时占位符

二、登录界面逻辑实现

2.1、将数据提交给后台

formSubmit: function (e) {
    // form 表单取值，格式 e.detail.value.name(name为input中自定义name值)
    var that = this;
    var username = e.detail.value.username;
    var password = e.detail.value.password;

    wx.request({
      url: "http://localhost:8080/wxlogin",
      data: {
        'username': username,
        'password': password,
      },
      method: "POST",
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        if (res.data.role == "student") {
            wx.navigateTo({
              url: '../index/index'
            })
        } else if (res.data.role == "teacher") {
            wx.switchTab({
              url: '../look/look'
            })
        
        } else {
          wx.showToast({
            title: '账号或密码错误',
            icon: 'loading',
            duration: 2000
          })
        }
      }
    })
  }

2.1.1、success属性

接口调用成功的回调函数

2.1.2、url属性

开发者服务器接口地址

2.1.3、data属性

请求的参数

2.1.4、header属性

设置请求的 header，header 中不能设置 Referer。

2.1.5、method属性

HTTP 请求方法

三、后端接收小程序提交的表单

代码

@RequestMapping(value = "/wxlogin", method = {RequestMethod.POST,RequestMethod.GET})
    @ResponseBody
    public Map<String,String>  wxlogin(Userlogin userlogin, Model model) throws Exception{

        //Shiro实现登录
        Map<String,String> map = new HashMap<String, String>();
        UsernamePasswordToken token = new UsernamePasswordToken(userlogin.getUsername(),
                userlogin.getPassword());
        //Subject：项目，通过Shiro保护的项目一个抽象概念
        //通过令牌（token）与项目（subject）的登陆（login）关系，Shiro保证了项目整体的安全
        //获取Subject单例对象
        Subject subject = SecurityUtils.getSubject();
        //如果获取不到用户名就是登录失败，但登录失败的话，会直接抛出异常
        //登录
        subject.login(token);

        if (subject.hasRole("admin")) {
            map.put("role","admin");
            map.put("username",userlogin.getUsername());
        } else if (subject.hasRole("teacher")) {
            map.put("role","teacher");
            map.put("username",userlogin.getUsername());
        } else if (subject.hasRole("student")) {
            map.put("role","student");
            map.put("username",userlogin.getUsername());
        }
        return map;

    }