文章目录
小程序注册代码
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);
}
}
此时就可以通过小程序页面访问后端接口。