小程序與后端聯(lián)調(diào)踩坑
本次練習是以springboot作為后端開發(fā)框架卦睹、微信小程序做前端交互仔夺。
后端代碼截圖：
@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("用戶名已經(jīng)存在激蹲，請換一個再試");
}
return IMoocJSONResult.ok();
}
}
service接口層暫時提供兩個方法扫沼，分別為注冊時查詢用戶是否存在和保存用戶。
/**
* @Description: 判斷用戶名是否存在
*/
public boolean queryUsernameIsExist(String username);
/**
* @Description: 保存用戶(用戶注冊)
*/
public void saveUser(Users user)
實現(xiàn)代碼：
@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>
準備工作做完之后域慷，開始小程序與后端程序的聯(lián)調(diào)：
image-20180728222243912.png
顯示在app.js中綁定serverUrl荒辕，即后端程序主機地址（開發(fā)環(huán)境如此設(shè)置），注意此次不能填loacalhost犹褒，而是所出局域網(wǎng)所分配的地址抵窒。
//app.js
App({
serverUrl: "http://192.168.1.183:8081",
userInfo: null
})
接著就是要在詳情頁設(shè)置開發(fā)環(huán)境，跳過域名設(shè)置叠骑，否則會控制臺會提示錯誤：
并且在app.json啟用debug李皇。
值得注意的是在綁定主機地址時要寫全地址，比如寫成192.168.1.183:8081是會報錯的宙枷，應(yīng)寫為http://192.168.1.183:8081掉房。
前端調(diào)用后端接口時，應(yīng)先仔細閱讀后端提供接口文檔：
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',//此次對應(yīng)后端提供接口
method: "POST",//此次對應(yīng)后端提供接口
data:{
username: username,
password: password
},
header:{
'content-type': 'application/json' // 默認值
},
success:function(res){
console.log(res.data);
}
})
}
}
})
對應(yīng)springboot整合swagger2接口生成文檔：
image-20180728222853707.png
小程序的回調(diào)函數(shù)返回的數(shù)據(jù)要與swagger頁面調(diào)試返回的狀態(tài)嗎一致卓囚，這樣聯(lián)調(diào)就成功了。
