【java小程序实战】小程序注册功能的前后端代码

小程序注册代码

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);
    }
}

此时就可以通过小程序页面访问后端接口。