本地前后端交互登录Demo---微信小程序学习

最新推荐文章于 2024-03-31 17:35:40 发布

你在此地别动

最新推荐文章于 2024-03-31 17:35:40 发布

阅读量535

点赞数 1

分类专栏：笔记文章标签：小程序微信

本文链接：https://blog.csdn.net/qq_41625082/article/details/119987656

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文记录学习重点:

1.输入框值的绑定以及如何带入请求
2.路由如何跳转
3.为何本地调试总说请求不被许可
4.为何同WIFI下的手机扫码调试与PC结果不同，表现为发不出请求

PS:由于本人为后端人员，所以小程序页面只求功能不求好看，见谅哈

上面提到的第四点直接解答:如果本地使用的是localhost，那么手机扫码调试时解析localhost是有问题的，所以应该填写自己pc的ip地址。

一、登录WXML

登录页只放一个账户与密码的输入框，加一个发请求用的按钮

<!--pages/test/test.wxml-->
<text>测试调用服务</text>

<view class="input-group">
        <text class="input-label">帐号</text>
        <input type="text" bindinput="getUserName" cursor-spacing="30" id="username" placeholder="请输入账号" />
      </view>
      <view class="input-group">
        <text class="input-label">密码</text>
        <input password="true" bindinput="getPassWord" cursor-spacing="30" id="password" placeholder="请输入密码" />
      </view>
<button bindtap="RequestData" value="Button">请求</button>

1.这里的值绑定与获取主要是靠<input>标记的bindinput属性，通过其指定的方法，调用that.setData({ 这里是属性与赋值 });进行赋值。

2.发送请求也是依靠按钮上绑定的方法去进行发送。

登录js

登录的js里主要负责渲染画面，其中包含生命周期函数，变量以及方法，值都放在`data`中，方法则都有`function`前缀，很容易辨识

 data: {
    textdata: "测试 wx.request",
    username:"",
    password:""
  },

//获取账号
  getUserName:function(e){
    this.setData({
      username:e.detail.value
    });
  },

在这小部分代码中，username属性在属性域中进行初始化，而当我们在输入框进行输入时，触发上面的方法，将按键值赋值给我们定义的变量，注意在小程序里的方法中赋值，采用this.setData({})。

然后就是我们的发送请求ajax部分不做赘述，参数的话主要是使用this.data.username来获取我们在数据域中声明的变量。

RequestData: function () {

    console.log(this.data.username);
    var that = this;
    wx.request({
      url: 'http://192.168.1.6:8088/wx/hello',
      data: {userName:this.data.username,passWord:this.data.password},
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 设置请求的 header 默认是application/json
      success: function (res) {

        console.log(res.data.status);

        if(res.data.status == "1"){

          wx.showToast({  
            title: '登录成功',  
            icon: 'loading',  
            duration: 500,
            complete:()=>{
              wx.reLaunch({
                url: '../list/list',
              })
            }
        }) 
        }else{
          wx.showToast({  
            title: '密码错误',  
            icon: 'loading',  
            duration: 500  
        })  
        }
        that.setData({ textdata: res.data});
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })
  },

   //获取账号
  getUserName:function(e){
    this.setData({
      username:e.detail.value
    });
  },

在这段代码里，请求成功后的complete:()=>{ wx.reLaunch({ url: '../list/list', }) }的含义就是进行页面跳转注意你的当前页面想要跳到目标页的层级关系，..就是出一层，斜线就是进一层。

完整js文件:

// pages/test/test.js
Page({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  data: {
    textdata: "测试 wx.request",
    username:"",
    password:""
  },
  /**
   * 发送请求
   */
  RequestData: function () {

    console.log(this.data.username);
    var that = this;
    wx.request({
      url: 'http://192.168.1.6:8088/wx/hello',
      data: {userName:this.data.username,passWord:this.data.password},
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 设置请求的 header 默认是application/json
      success: function (res) {

        console.log(res.data.status);

        if(res.data.status == "1"){

          wx.showToast({  
            title: '登录成功',  
            icon: 'loading',  
            duration: 500,
            complete:()=>{
              wx.reLaunch({
                url: '../list/list',
              })
            }
        }) 
        }else{
          wx.showToast({  
            title: '密码错误',  
            icon: 'loading',  
            duration: 500  
        })  
        }
        that.setData({ textdata: res.data});
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })
  },

   //获取账号
  getUserName:function(e){
    this.setData({
      username:e.detail.value
    });
  },

  //获取密码
getPassWord:function(e){
  this.setData({
password:e.detail.value
  });
},

  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  }
})

三、后台服务

后台就是起一个SpringBoot项目，然后写一个最简单的接口即可，这里我就粘一下接口与pom方便各位创建新工程

接口：

package com.lx.controller;

import org.springframework.stereotype.Controller;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.HashMap;
import java.util.Map;

@Controller
@RequestMapping("/wx")
public class WxController {

    @GetMapping("/hello")
    @ResponseBody
    public Map hello(String userName, String passWord){

        Map result = new HashMap();

        if("luoxi".equals(userName) && "123".equals(passWord)){

            result.put("status","1");
        }else{
            result.put("status","0");
        }

        return result;
    }
}

POM:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>springbootStudy</artifactId>
    <version>1.0-SNAPSHOT</version>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.9.RELEASE</version>
    </parent>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>com.lowagie</groupId>
            <artifactId>itext</artifactId>
            <version>4.2.2</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.3.1</version>
        </dependency>

        <!-- SpringBoot 测试依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>

        <!-- 打印Log -->
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-log4j12</artifactId>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <source>8</source>
                    <target>8</target>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

四、开始测试

这个时候，我们就算前后台都启动，也会报错，比如请求无法发送或者域名不被许可，像这样
在这里插入图片描述
这时候就需要我们打开右上角的详情，在本地设置里勾选不校验域名项

这样就可以发送请求了

你在此地别动

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
本地前后端交互登录Demo---微信小程序学习

本文记录学习重点:1.输入框值的绑定以及如何带入请求2.路由如何跳转3.为何本地调试总说请求不被许可4.为何同WIFI下的手机扫码调试与PC结果不同，表现为发不出请求PS:由于本人为后端人员，所以小程序页面只求功能不求好看，见谅哈上面提到的第四点直接解答:如果本地使用的是localhost，那么手机扫码调试时解析localhost是有问题的，所以应该填写自己pc的ip地址。一、登录WXML登录页只放一个账户与密码的输入框，加一个发请求用的按钮<!--pages/test/test.
复制链接

扫一扫