二、

新建小程序注册模块，配置好注册页面。

regist.wxml

<view><view class="login-icon"><image class="login-img" src="../resource/images/dsp1.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>

regist.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;
}

三、开发注册用户的接口

新建两个工具类

package com.imooc.utils;/*** @Description: 自定义响应数据结构*                 这个类是提供给门户，ios，安卓，微信商城用的*                 门户接受此类数据后需要使用本类的方法转换成对于的数据类型格式（类，或者list）*                 其他自行处理*                 200：表示成功*                 500：表示错误，错误信息在msg字段中*                 501：bean验证错误，不管多少个错误都以map形式返回*                 502：拦截器拦截到用户token出错*                 555：异常抛出信息*/
public class IMoocJSONResult {// 响应业务状态private Integer status;// 响应消息private String msg;// 响应中的数据private Object data;private String ok;    // 不使用public static IMoocJSONResult build(Integer status, String msg, Object data) {return new IMoocJSONResult(status, msg, data);}public static IMoocJSONResult ok(Object data) {return new IMoocJSONResult(data);}public static IMoocJSONResult ok() {return new IMoocJSONResult(null);}public static IMoocJSONResult errorMsg(String msg) {return new IMoocJSONResult(500, msg, null);}public static IMoocJSONResult errorMap(Object data) {return new IMoocJSONResult(501, "error", data);}public static IMoocJSONResult errorTokenMsg(String msg) {return new IMoocJSONResult(502, msg, null);}public static IMoocJSONResult errorException(String msg) {return new IMoocJSONResult(555, msg, null);}public IMoocJSONResult() {}public IMoocJSONResult(Integer status, String msg, Object data) {this.status = status;this.msg = msg;this.data = data;}public IMoocJSONResult(Object data) {this.status = 200;this.msg = "OK";this.data = data;}public Boolean isOK() {return this.status == 200;}public Integer getStatus() {return status;}public void setStatus(Integer status) {this.status = status;}public String getMsg() {return msg;}public void setMsg(String msg) {this.msg = msg;}public Object getData() {return data;}public void setData(Object data) {this.data = data;}public String getOk() {return ok;}public void setOk(String ok) {this.ok = ok;}}

package com.imooc.utils;import java.security.MessageDigest;import org.apache.commons.codec.binary.Base64;public class MD5Utils {/*** @Description: 对字符串进行md5加密*/public static String getMD5Str(String strValue) throws Exception {MessageDigest md5 = MessageDigest.getInstance("MD5");String newstr = Base64.encodeBase64String(md5.digest(strValue.getBytes()));return newstr;}public static void main(String[] args) {try {String md5 = getMD5Str("imooc");System.out.println(md5);} catch (Exception e) {e.printStackTrace();}}
}

四、开发注册用户的接口

在com.imooc.controller包中新建RegistLoginController类，然后新建相应的Service类，主要是检查用户是否存在以及新增用户。

UserService.class

package com.imooc.service;import com.imooc.pojo.Users;public interface UserService {/*** 判断用户名是否存在* @param username* @return*/public boolean queryUsernameIsExist(String username);/*** 保存用户(用户注册)* @param user*/public void saveUser(Users user);}

UserServiceImpl.class

package com.imooc.service;import org.n3r.idworker.Sid;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;import com.imooc.mapper.UsersMapper;
import com.imooc.pojo.Users;public class UserServiceImpl implements UserService {@Autowiredprivate UsersMapper userMapper;//导入工具包，使用户生成的id是唯一的id
    @Autowiredprivate Sid sid;@Transactional(propagation = Propagation.SUPPORTS)@Overridepublic boolean queryUsernameIsExist(String username) {// TODO Auto-generated method stubUsers user = new Users();user.setUsername(username);Users result = userMapper.selectOne(user);return result == null ? false : true;}@Transactional(propagation = Propagation.REQUIRED)@Overridepublic void saveUser(Users user) {// TODO Auto-generated method stub
        String userId = sid.nextShort();user.setId(userId);userMapper.insert(user);}}

然后在RegistLoginController类中注入Service用于调用方法。

package com.imooc.controller;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.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import com.imooc.pojo.Users;
import com.imooc.service.UserService;
import com.imooc.utils.IMoocJSONResult;
import com.imooc.utils.MD5Utils;@RestController
public class RegistLoginController {@Autowiredprivate UserService userService;@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("用户名已经存在，请换一个试试");}return IMoocJSONResult.ok();}}

此时，关于注册的类开发完了，接下来使用swagger2构建restful接口测试，关于swagger2的好处有以下几点：

接下来，在项目里导入swagger2，在common模块中的pom文件上注入以下配置

在api模块的com.imooc包中新建Swagger2类

package com.imooc;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.service.Contact;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;@Configuration
@EnableSwagger2
public class Swagger2 {@Beanpublic Docket createRestApi() {return new Docket(DocumentationType.SWAGGER_2).apiInfo(apiInfo()).select().apis(RequestHandlerSelectors.basePackage("com.imooc.controller")).paths(PathSelectors.any()).build();}private ApiInfo apiInfo() {// TODO Auto-generated method stubreturn new ApiInfoBuilder()// 设置页面标题.title("使用swagger2构建短视频后端api接口文档")// 设置联系人.contact(new Contact("imooc-zhaoBe", "http://www.imooc.com", "imooc@163.com"))// 描述.description("欢迎访问短视频接口文档，这里是描述信息")// 定义版本号.version("1.0").build();}}

接着 ,在各个类中分别配置导入swagger2

首先是RegistLoginController类的类名前和对应的方法名前

接着是作为返回值的Users类，特别是作为参数的username以及password

以下是正确配置完swagger2之后的界面。

五、小程序注册与后端联调

首先在app.js上配置全局变量（如果测试时是在手机上的话，需要填http内网穿透）

接着写regist.js，用来完成联调

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.showLoading({title: '请等待...',});wx.request({url: serverUrl + '/regist',method: "POST",data: {username: username,password: password},header: {'content-type': 'application/json' // 默认值
        },success: function(res) {console.log(res.data);wx.hideLoading();  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: 3000})}}})}},goLoginPage: function () {wx.navigateTo({url: '../userLogin/login',})}
})

测试时，需要在app.json上加上"debug": true的配置，在上线时再删除

六、用户登录

1、界面

login.wxml

<view><view class="login-icon"><image class="login-img" src="../resource/images/dsp1.jpg"></image></view><view class="login-from"><form bindsubmit='doLogin'><!--账号--><view class="inputView"><image class="nameImage" src="../resource/images/username.png"></image><label class="loginLabel">账号</label><input name="username" value='imooc' 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" value='imooc' class="inputText" password="true" placeholder="请输入密码" /></view><!--按钮--><view><button class="loginBtn" type="primary" form-type='submit'>登录</button></view><view><button class="goRegistBtn" type="warn" bindtap="goRegistPage">没有账号？点击注册</button></view></form></view>
</view>

login.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;
}.goRegistBtn {width: 80%;margin-top: 15px;
}

2、编写后端springboot接口

RegistLoginController.class

package com.imooc.controller;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.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import com.imooc.pojo.Users;
import com.imooc.service.UserService;
import com.imooc.utils.IMoocJSONResult;
import com.imooc.utils.MD5Utils;import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;@RestController
@Api(value = "用户注册登录的接口",tags = {"注册登录的controller"})
public class RegistLoginController {@Autowiredprivate 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("用户名已经存在，请换一个试试");}user.setPassword("");return IMoocJSONResult.ok(user);}@ApiOperation(value="用户登录", notes="用户登录的接口")@PostMapping("/login")public IMoocJSONResult login(@RequestBody Users user) throws Exception {String username = user.getUsername();String password = user.getPassword();//        Thread.sleep(3000);// 1. 判断用户名和密码必须不为空if (StringUtils.isBlank(username) || StringUtils.isBlank(password)) {return IMoocJSONResult.ok("用户名或密码不能为空...");}// 2. 判断用户是否存在Users userResult = userService.queryUserForLogin(username, MD5Utils.getMD5Str(user.getPassword()));// 3. 返回if (userResult != null) {userResult.setPassword("");
//            UsersVO userVO = setUserRedisSessionToken(userResult);return IMoocJSONResult.ok(userResult);} else {return IMoocJSONResult.errorMsg("用户名或密码不正确, 请重试...");}}}

UserServiceImpl.class

package com.imooc.service;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;import com.imooc.mapper.UsersMapper;
import com.imooc.pojo.Users;import tk.mybatis.mapper.entity.Example;
import tk.mybatis.mapper.entity.Example.Criteria;@Service
public class UserServiceImpl implements UserService {@Autowiredprivate UsersMapper userMapper;//导入工具包，使用户生成的id是唯一的id
    @Autowiredprivate Sid sid;@Transactional(propagation = Propagation.SUPPORTS)@Overridepublic boolean queryUsernameIsExist(String username) {// TODO Auto-generated method stubUsers user = new Users();user.setUsername(username);Users result = userMapper.selectOne(user);return result == null ? false : true;}@Transactional(propagation = Propagation.REQUIRED)@Overridepublic void saveUser(Users user) {// TODO Auto-generated method stub
        String userId = sid.nextShort();user.setId(userId);userMapper.insert(user);}@Transactional(propagation = Propagation.SUPPORTS)@Overridepublic Users queryUserForLogin(String username, String password) {Example userExample = new Example(Users.class);Criteria criteria = userExample.createCriteria();criteria.andEqualTo("username", username);criteria.andEqualTo("password", password);Users result = userMapper.selectOneByExample(userExample);return result;}}

3、小程序登录与后端联调

login.js

const app = getApp()Page({data: {},// onLoad: function (params) {//   var me = this;//   var redirectUrl = params.redirectUrl;//   // debugger;//   if (redirectUrl != null && redirectUrl != undefined && redirectUrl != '') {//     redirectUrl = redirectUrl.replace(/#/g, "?");//     redirectUrl = redirectUrl.replace(/@/g, "=");//     me.redirectUrl = redirectUrl;//   }// },// 登录  doLogin: function (e) {// var me = this;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.showLoading({title: '请等待...',});// 调用后端
      wx.request({url: serverUrl + '/login',method: "POST",data: {username: username,password: password},header: {'content-type': 'application/json' // 默认值
        },success: function (res) {console.log(res.data);wx.hideLoading();  if (res.data.status == 200) {// 登录成功跳转
            wx.showToast({title: '登录成功',icon: 'success',duration: 2000});app.userInfo = res.data.data;// // fixme 修改原有的全局对象为本地缓存// app.setGlobalUserInfo(res.data.data);// 页面跳转// var redirectUrl = me.redirectUrl;// if (redirectUrl != null && redirectUrl != undefined && redirectUrl != '') {//   wx.redirectTo({//     url: redirectUrl,//   })// } else {//   wx.redirectTo({//     url: '../mine/mine',//   })// }
            } else if (res.data.status == 500) {// 失败弹出框
            wx.showToast({title: res.data.msg,icon: 'none',duration: 3000})}}})}},goRegistPage:function() {wx.navigateTo({url: '../userRegist/regist',})}
})

注：在两个页面的js文件上都配置了跳转到彼此的js函数。

转载于:https://www.cnblogs.com/bozzzhdz/p/9726815.html

小程序短视频项目———开发用户登录注册（一）相关推荐

  1. 小程序短视频项目———视频展示页面开发

    一.小程序首页视频列表 index.wxml <!-- <view wx:for="{{videoList}}" class="item-container& ...

  2. 小程序短视频项目———上传短视频业务

    一.用户选择视频 1.微信选中视频接口 wx.chooseVideo(Object object) 拍摄视频或从手机相册中选视频. 参数 Object object 属性 类型 默认值 是否必填 说明 ...

  3. 小程序短视频项目———上传短视频业务流程简介

    转载于:https://www.cnblogs.com/bozzzhdz/p/9741157.html

  4. 微信小程序毕设——使用云开发实现登录注册

    1 wxml <view class="container"><view class="login-icon"><image cl ...

  5. 在线电子书阅读微信小程序 毕业设计（5）用户登录注册

    wxml代码 <form ><view class='denlgu'><text class='shuoming'>请输入您的会员账号</text>&l ...

  6. 微信小程序电商项目开发实战漫谈

    原创文章,若转载请于明显处标明出处和相关链接:https://www.toutiao.com/i6567868839856439822/,否则追究其法律责任! 2018年小程序内容电商风口已成,如果我 ...

  7. 微信小程序仿淘票票之登录注册讲解

    微信小程序仿淘票票之登录注册讲解(这也是我学习的第一步嘛) 前言 一.登录以及注册的业务逻辑 二.核心代码 1.register代码 2.login代码 总结 前言 愉快的期末,终于结束了,我准备把程 ...

  8. 微信小程序在线考试项目开发-接口封装调用

    本项目会耗时一周到两周来完成,最近要又要辛苦加班了,项目给的时间不多,程序员太不容易了,做完项目调休好好休息一下! 此时此刻,记录一下项目实现. 小程序在线考试项目介绍: 技术选型:轻量.可靠的小程序 ...

  9. 小编程（三）：用户登录注册界面开发及用户信息管理案例代码详解

    用户登录注册界面开发及用户信息管理案例详解 刚开始接触Android编程,这算是我写的第一个简单工程,主要功能有:用户登录.注册.注销.修改密码.记住密码共5个基本操作,其内容涉及到以下几点: 1:B ...

最新文章

  1. go语言中的defer
  2. 云原生架构下的持续交付实践
  3. 【数据结构与算法】之深入解析“等差数列划分II”的求解思路与算法示例
  4. MongoDb 大数据查询优化、 MongoDB 索引、复合索引、唯一索引、 explain 分 析查询速度
  5. C++实现对象序列化和反序列化（读写二进制文件）操作
  6. nebula模拟器_nebula模拟器中文金手指版本
  7. python函数定义参数类型和返回值类型
  8. python21天打卡day3
  9. 统计学习方法读书笔记12-逻辑斯蒂回归与最大熵
  10. DataBase简答题
  11. 人类简史下载pdf_人类简史 从动物到上帝pdf电子书下载
  12. 使用Python的pandas库操作Excel
  13. 360保存html,360极速浏览器怎么保存网页为图片？
  14. 石灰窑计算机控制上料,石灰窑自动化控制系统
  15. 编译超频Android内核,安卓超频工具apk下载
  16. JavaScript边学边玩的小游戏、好用的js网站：
  17. NDN-lite 命名数据网络 -----第二章：对Interest和Data包的处理
  18. android sd 挂载流程_Android7.0 SD卡挂载流程
  19. 堡垒前线7月30日服务器维护,堡垒前线7月24日停服维护公告 全新功能初心岛正式上线...
  20. 智能投影机android系统,智能投影机

热门文章

  1. 使用ffmpeg打印音视频的详细信息
  2. 【CyberSecurityLearning 41】Linux密码破解以及菜单加密
  3. Thymeleaf一些标签的传字符串/message/消息
  4. python编程题三
  5. cordova自定义一个简单的alert的插件(android平台)
  6. 数据库中插入英文数字正常，插入中文错误解决方案
  7. Git 中的对象模型和文件的详细视图 —— Git 学习笔记 13
  8. 活用内核链表解决约瑟夫斯问题
  9. 全局变量、成员变量、类变量、静态变量、实例变量、局部变量的定义与区别
  10. Bit-Z CEO长顺入围2018中国经济潮流人物