本文共 6376 字，大约阅读时间需要 21 分钟。

小程序注册代码

1 、小程序和后端交互，对app.js进行全局配置

1)serverUrl: 声明后端的ip和端口号。在同一台电脑测试时可以直接写IP和端口号。当服务器在电脑启动，手机进行测试时，需要进行内网穿透，可以点击此处

//app.jsApp({   serverUrl: "http://192.168.1.111:8081",//后台运行的ip，不在同一个网端，需要内网穿透   userInfo: null   //用户登录和注册，设置一个全局的用户信息})

2、小程序的wxml代码

      
          
        
       
           
     
            
                  
                    
                     
       账号              
                   
                  
                  
                  
                     
                      
       密码               
                   
                  
                  
                    
       注册            
                  
                     
       返回登录            
             
     
   
    
   

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）

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

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

转载地址：http://djfoi.baihongyu.com/