为了账号安全,请及时绑定邮箱和手机立即绑定

「小程序JAVA实战」小程序注册与后端联调(35)

小程序的后端spring boot的注册接口已经完成了,下一步就是修改小程序的前端请求联调下。之前说过wx.request的api。源码:https://github.com/limingios/wxProgram.git 中的wx-springboot 和 No.15

注册与后端的联调

  • 在app.js定义后端服务器的路径
    >这里需要提一下,假设在手机上测,如果手机开启的4G信号,跟电脑不是在同一个局域网的情况下。需要电脑端开启内网穿透的功能才可以在测试。如果在同一个局域网内可以通过内网ip的形式。localhost直接都是一台机器。

app.js

//app.js
App({
  serverUrl:"http://localhost:8081",
  userInfo:null
})

app.json

{
  "pages":[
    "pages/userRegister/userRegister"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "小程序视频",
    "navigationBarTextStyle":"black"
  },
  "debug":true
}

userRegister.js

const app = getApp()

Page({
    data: {

    },

    doRegist: function(e) {
      var formObject = e.detail.value;
      var username = formObject.username;
      var password = formObject.password;

      // 简单验证
      if (username.length == 0 || password.length == 0) {
        wx.showToast({
          title: '用户名或密码不能为空',
          icon: 'none',
          duration: 3000
        })
      }else{
        wx.request({
          url: app.serverUrl +"/regist", 
          method:"POST",
          data: {
            username: username,
            password: password
          },
          header: {
            'content-type': 'application/json' // 默认值
          },
          success: function (res) {
            console.log(res.data);
            var status = res.data.status;
            if(status == 200){
              wx.showToast({
                title: "用户注册成功~!",
                icon: 'none',
                duration: 3000
              })
              app.userinfo = res.data.data;
            }else if(status == 500){
              wx.showToast({
                title: res.data.msg,
                icon: 'none',
                duration: 3000
              })
            }
          }
        })
      }
    },
    goLoginPage:function(e){
      console.log("跳转到登录");
    }
})
  • 程序测试
    >开启eclipse的spring boot的程序

http://localhost:8081 不在以下 request 合法域名列表中,请参考文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html

调试的解决方案

  • 成功运行


  • 微信小程序模拟器在笔记本上input无法获取焦点,无法输入

    在input框里面鼠标长按即可

PS:整个这个从前端到后端的针对注册接口已经开发完毕了。


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
全栈工程师
手记
粉丝
1.7万
获赞与收藏
1318

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消