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

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

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

源码地址:

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

环境:

数据库:MySQL

一、创建数据库和表

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

二、Java后台

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

三、小程序中的代码

3.1注册页面register.wxml

一个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

先来看看第一个事件,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开发有很多相似的地方,相信你看了这篇文章之后,登录的功能对你来说问题不大了。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180609G07JCT00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券