小程序与后端联调踩坑
本次练习是以springboot作为后端开发框架、微信小程序做前端交互。
后端代码截图：
@RestController
@Api(value="用户注册登录的接口", tags= {"注册和登录的controller"})
public class RegistLoginController {
@Autowired
private UserService userService;
@ApiOperation(value="用户注册", notes="用户注册的接口")
@PostMapping("/regist")
public IMoocJSONResult regist(@RequestBody Users user) throws Exception {
// 1. 判断用户名和密码必须不为空
if (StringUtils.isBlank(user.getUsername()) || StringUtils.isBlank(user.getPassword())) {
return IMoocJSONResult.errorMsg("用户名和密码不能为空");
}
// 2. 判断用户名是否存在
boolean usernameIsExist = userService.queryUsernameIsExist(user.getUsername());
// 3. 保存用户，注册信息
if (!usernameIsExist) {
user.setNickname(user.getUsername());
user.setPassword(MD5Utils.getMD5Str(user.getPassword()));
user.setFansCounts(0);
user.setReceiveLikeCounts(0);
user.setFollowCounts(0);
userService.saveUser(user);
} else {
return IMoocJSONResult.errorMsg("用户名已经存在，请换一个再试");
}
return IMoocJSONResult.ok();
}
}
service接口层暂时提供两个方法，分别为注册时查询用户是否存在和保存用户。
/**
* @Description: 判断用户名是否存在
*/
public boolean queryUsernameIsExist(String username);
/**
* @Description: 保存用户(用户注册)
*/
public void saveUser(Users user)
实现代码：
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UsersMapper userMapper;
@Autowired
private Sid sid;
@Transactional(propagation = Propagation.SUPPORTS)
@Override
public boolean queryUsernameIsExist(String username) {
Users user = new Users();
user.setUsername(username);
Users result = userMapper.selectOne(user);
return result == null ? false : true;
}
@Transactional(propagation = Propagation.REQUIRED)
@Override
public void saveUser(Users user) {
// 引用自增id，工具包引入
String userId = sid.nextShort();
user.setId(userId);
userMapper.insert(user);
}
}
前端小程序代码，较为简单：
<view>
<view class="login-icon">
<image class="login-img" src="../resource/images/dsp.jpg"></image>
</view>
<view class="login-from">
<form bindsubmit='doRegist'>
<!--账号-->
<view class="inputView">
<image class="nameImage" src="../resource/images/username.png"></image>
<label class="loginLabel">账号</label>
<input name="username" class="inputText" placeholder="请输入账号"/>
</view>
<view class="line"></view>
<!--密码-->
<view class="inputView">
<image class="keyImage" src="../resource/images/password.png"></image>
<label class="loginLabel">密码</label>
<input name="password" class="inputText" password="true" placeholder="请输入密码"/>
</view>
<!--按钮-->
<view>
<button class="loginBtn" type="primary" form-type='submit'>注册</button>
</view>
<view>
<button class="goLoginBtn" type="warn" bindtap="goLoginPage">返回登录</button>
</view>
</form>
</view>
</view>
准备工作做完之后，开始小程序与后端程序的联调：
image-20180728222243912.png
显示在app.js中绑定serverUrl，即后端程序主机地址（开发环境如此设置），注意此次不能填loacalhost，而是所出局域网所分配的地址。
//app.js
App({
serverUrl: "http://192.168.1.183:8081",
userInfo: null
})
接着就是要在详情页设置开发环境，跳过域名设置，否则会控制台会提示错误：
并且在app.json启用debug。
值得注意的是在绑定主机地址时要写全地址，比如写成192.168.1.183:8081是会报错的，应写为http://192.168.1.183:8081。
前端调用后端接口时，应先仔细阅读后端提供接口文档：
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{
var serverUrl=app.serverUrl;
wx.request({
url: serverUrl+'/regist',//此次对应后端提供接口
method: "POST",//此次对应后端提供接口
data:{
username: username,
password: password
},
header:{
'content-type': 'application/json' // 默认值
},
success:function(res){
console.log(res.data);
}
})
}
}
})
对应springboot整合swagger2接口生成文档：
image-20180728222853707.png
小程序的回调函数返回的数据要与swagger页面调试返回的状态吗一致，这样联调就成功了。
