【java小程式實戰】小程式註冊功能的前後端程式碼
阿新 • • 發佈：2018-12-21
文章目錄
小程式註冊程式碼
1 、小程式和後端互動，對app.js進行全域性配置
1)serverUrl: 聲明後端的ip和埠號。在同一臺電腦測試時可以直接寫IP和埠號。當伺服器在電腦啟動，手機進行測試時，需要進行內網穿透，可以點選此處進行內網穿透配置
2)userInfo: 宣告一個全域性的使用者資訊
//app.js
App({
serverUrl: "http://192.168.1.111:8081",//後臺執行的ip，不在同一個網端，需要內網穿透
userInfo: null //使用者登入和註冊，設定一個全域性的使用者資訊
})
2、小程式的wxml程式碼
<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='goLoginBtn'>返回登入</button> </view> </form> </view> </view>
3、小程式的wxss程式碼
page { background-color: whitesmoke; } .login-img { width: 750rpx; } /*表單內容*/ .inputView { background-color: white; line-height: 45px; } /*輸入框*/ .nameImage, .keyImage { margin-left: 22px; width: 20px; height: 20px; } .loginLabel { margin: 15px 15px 15px 10px; color: gray; font-size: 15px; } .inputText { float: right; text-align: right; margin-right: 22px; margin-top: 11px; font-size: 15px; } .line { width: 100%; height: 1px; background-color: gainsboro; margin-top: 1px; } /*按鈕*/ .loginBtn { width: 80%; margin-top: 35px; } .goLoginBtn { width: 80%; margin-top: 15px; }
4、小程式js程式碼
const app = getApp()
Page({
data:{
},
doRegist: function(e){
//通過事件獲取物件
var fromObject = e.detail.value;
var username = fromObject.username;
var password = fromObject.password;
//簡單驗證
if(username.length == 0 || password.length == 0){
//提示彈窗
wx.showToast({
title: '使用者名稱或密碼不能為空',
icon: 'none',
duration: 500
})
} else {
//獲取serverUrl
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);
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: 500
})
}
}
})
}
}
})
註冊後端程式碼
因為我們之前通過程式碼生成mybatis的mapper配置檔案和mapper對映類。
對於一些簡單的資料庫插入、刪除、修改，就不需要我們再進行重寫了
1、UserService介面
package com.imooc.imoocvideosdevservice.com.imooc.service;
import com.imooc.pojo.Users;
public interface UserService {
/**
* 判斷使用者名稱是否存在
* @param username
* @return
*/
public boolean queryUsernameIsExist(String username);
/**
* 儲存使用者資訊
* @param users
*/
public void saveUser(Users users);
}
2、UserServiceImpl實現類
1、 @Transactional 是管理事務的註解，通常預設情況下，只有RunTimeException時，才會回滾，為了保證資料一致性，我們需要聲所有異常都會回滾（rollbackFor = Exception.class）
2、此處呼叫 String userId = sid.nextShort(); 生成ID，程式碼可以在 github下載
package com.imooc.imoocvideosdevservice.com.imooc.service;
import com.imooc.mapper.UsersMapper;
import com.imooc.pojo.Users;
import org.n3r.idworker.Sid;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UsersMapper usersMapper;
@Autowired
private Sid sid;
@Transactional(propagation = Propagation.SUPPORTS , rollbackFor = Exception.class)
@Override
public boolean queryUsernameIsExist(String username) {
Users user = new Users();
user.setUsername(username);
Users result = usersMapper.selectOne(user);
return result == null ? false : true;
}
@Transactional(propagation = Propagation.REQUIRED , rollbackFor = Exception.class)
@Override
public void saveUser(Users users) {
String userId = sid.nextShort();
users.setId(userId);
usersMapper.insert(users);
}
}
3、controller程式碼
package com.imooc.controller;
import com.imooc.imoocvideosdevservice.com.imooc.service.UserService;
import com.imooc.pojo.Users;
import com.imooc.utils.IMoocJSONResult;
import com.imooc.utils.MD5Utils;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
//返回格式為json格式
@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 {
System.out.println("username:"+user.getUsername()+"password:"+user.getPassword());
//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.setReceiveLikeCounts(0);
user.setFansCounts(0);
user.setFollowCounts(0);
userService.saveUser(user);
}else{
return IMoocJSONResult.errorMsg("使用者名稱已經存在");
}
//在註冊完畢，將使用者資料返回給前端之前，為了安全，將密碼設為null
user.setPassword("");
return IMoocJSONResult.ok(user);
}
}
此時就可以通過小程式頁面訪問後端介面。