跟我来学小程序（三）结合Java后台做一个注册功能

大家好，我是一个爱举铁的程序员Shr。

 

原本这篇文章是要介绍小程序提供的API，粗略看了一下，API实在太多，一个一个介绍有点费时间，只有在后面写项目时再详细介绍了，但是今天的内容还是会用到几个API。

 

源码地址：

https://github.com/ShrMus/wechat_xcx/tree/master/demo_20180608

 

 

环境：

数据库：MySQL

开发工具：Eclipse，Maven，微信开发者工具

 

一、创建数据库和表

 

创建一个名为xcx_20180608的数据库，新建表user

CREATE TABLE `user` (
  `user_id` int(11) NOT NULL auto_increment,
  `user_username` varchar(20) default NULL,
  `user_password` varchar(50) default NULL,
  PRIMARY KEY  (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

 

二、Java后台

因为这篇文章是介绍小程序API，所以这里就不贴代码了，不然篇幅太长，因为之前写过太多的，后台的代码是我之前写过的权限管理系统的代码，UserController添加了注册的方法，其他的都一样。这篇文章的代码可以在文章开头的源码地址查看。

 

三、小程序中的代码

3.1 注册页面register.wxml

<view class="container">
  <view>注册页面view>
  <form bindsubmit='formSubmit' bindreset="formReset">
    <view>
      用户名
    view>
    <view>
      <input type="text" name="userUsername" />
    view>
    <view>
      密码
    view>
    <view>
      <input type="password" name="userPassword" />
    view>
    <view>
      <button form-type="submit">注册button>
      <button bindtap="toBack">返回button>
    view>
  form>
view>

 

一个form表单，bindsubmit属性绑定一个事件，携带form表单中的数据，触发submit事件。

 

注册按钮中的form-type属性只有submit和reset值，触发表单的submit和reset事件。

 

小程序中的事件是以key/value的形式。

key：绑定事件用bind或catch开头，然后跟上事件类型，如bindtap，catchtouchstart，自基础库版本 1.5.0起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap，catch:touchstart。

value：事件名，需要在对应的js文件中的Page()中定义同名的函数。

 

3.2 逻辑处理register.js

// pages/index/register.js
Page({
  // 返回上一页面
  toBack: function(){
    wx.navigateBack({
      delta:1
    })
  },
  // 注册
  formSubmit: function(e){
    // console.log(e);
    // 发起请求
    wx.request({
      // 请求地址
      url: 'http://localhost:8090/xcx/user/reg',
      // 请求参数
      data: e.detail.value,
      // 请求方式
      method:"POST",
      // 请求头
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      // 请求成功回调
      success:function(res){
        // console.log(res);
        wx.redirectTo({
          url: res.data,
        })
      }
    })
  }
})

 

先来看看第一个事件，toBack，我自定义为返回上一页面，因为还有一个登录页面。这里用到了一个wx.navigateBack的API。

 

wx.navigateBack(OBJECT)，关闭当前页面，返回上一页面或多级页面。OBJECT参数中只有一个delta参数，类型为Number，代表返回的页面数。

 

接着就是注册页面中绑定的表单提交的事件，事件中的参数e，当我在页面中输入用户名和密码点击注册之后，可以来看一看控制台打印的内容。

在e.detail.value中。

 

知道输入的数据在哪之后，然后是提交到后台，用到了wx.request的API。

 

wx.request(OBJECT)，OBJECT参数中url是请求地址，data是请求参数，method是请求方式，header请求头，请求头中的content-type默认是application/json，但是请求方式为POST，请求头这样写后台获取不到前台传来的参数，表单用POST请求方式可以用application/x-www-form-urlencoded。

success就是请求成功之后的回调了，可以看看回调函数的参数。

 

data是开发者服务器返回的数据，errMsg是返回的错误信息，但这次请求是没有错误的。header是开发者服务器返回的响应头，statusCode是开发者服务器响应的HTTP状态码，

 

请求成功之后使用了wx.redirectTo

 

wx.redirectTo(OBJECT)，关闭当前页面，跳转到应用内的某个页面，OBJECT参数中的url就是指定的页面，请求成功之后跳转到登录页面。

 

总结

input组件要有一个边框的样式，不然是看不到输入框的。

 

表单用POST方式提交，请求头要用application/x-www-form-urlencoded，用application/json后台获取不到参数。

 

小程序开发其实和Web开发有很多相似的地方，相信你看了这篇文章之后，登录的功能对你来说问题不大了。