當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時(shí)間：2025/3/15 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了小程序短视频项目———开发用户登录注册（一）小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

二、

新建小程序注冊(cè)模塊，配置好注冊(cè)頁(yè)面。

regist.wxml

regist.wxss

page {background-color: whitesmoke; }.login-img {width: 750rpx; }/*表單內(nèi)容*/ .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; }

三、開(kāi)發(fā)注冊(cè)用戶的接口

?新建兩個(gè)工具類(lèi)

package com.imooc.utils;/*** @Description: 自定義響應(yīng)數(shù)據(jù)結(jié)構(gòu)* 這個(gè)類(lèi)是提供給門(mén)戶，ios，安卓，微信商城用的* 門(mén)戶接受此類(lèi)數(shù)據(jù)后需要使用本類(lèi)的方法轉(zhuǎn)換成對(duì)于的數(shù)據(jù)類(lèi)型格式（類(lèi)，或者list）* 其他自行處理* 200：表示成功* 500：表示錯(cuò)誤，錯(cuò)誤信息在msg字段中* 501：bean驗(yàn)證錯(cuò)誤，不管多少個(gè)錯(cuò)誤都以map形式返回* 502：攔截器攔截到用戶token出錯(cuò)* 555：異常拋出信息*/ public class IMoocJSONResult {// 響應(yīng)業(yè)務(wù)狀態(tài)private Integer status;// 響應(yīng)消息private String msg;// 響應(yīng)中的數(shù)據(jù)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: 對(duì)字符串進(jìn)行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();}} }

四、開(kāi)發(fā)注冊(cè)用戶的接口

在com.imooc.controller包中新建RegistLoginController類(lèi)，然后新建相應(yīng)的Service類(lèi)，主要是檢查用戶是否存在以及新增用戶。

UserService.class

package com.imooc.service;import com.imooc.pojo.Users;public interface UserService {/*** 判斷用戶名是否存在* @param username* @return*/public boolean queryUsernameIsExist(String username);/*** 保存用戶(用戶注冊(cè))* @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;//導(dǎo)入工具包，使用戶生成的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類(lèi)中注入Service用于調(diào)用方法。

?此時(shí)，關(guān)于注冊(cè)的類(lèi)開(kāi)發(fā)完了，接下來(lái)使用swagger2構(gòu)建restful接口測(cè)試，關(guān)于swagger2的好處有以下幾點(diǎn)：

接下來(lái)，在項(xiàng)目里導(dǎo)入swagger2，在common模塊中的pom文件上注入以下配置

在api模塊的com.imooc包中新建Swagger2類(lèi)

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()// 設(shè)置頁(yè)面標(biāo)題.title("使用swagger2構(gòu)建短視頻后端api接口文檔")// 設(shè)置聯(lián)系人.contact(new Contact("imooc-zhaoBe", "http://www.imooc.com", "imooc@163.com"))// 描述.description("歡迎訪問(wèn)短視頻接口文檔，這里是描述信息")// 定義版本號(hào).version("1.0").build();}}

接著 ,在各個(gè)類(lèi)中分別配置導(dǎo)入swagger2

首先是RegistLoginController類(lèi)的類(lèi)名前和對(duì)應(yīng)的方法名前

接著是作為返回值的Users類(lèi)，特別是作為參數(shù)的username以及password

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

五、小程序注冊(cè)與后端聯(lián)調(diào)

?首先在app.js上配置全局變量（如果測(cè)試時(shí)是在手機(jī)上的話，需要填http內(nèi)網(wǎng)穿透）

接著寫(xiě)regist.js，用來(lái)完成聯(lián)調(diào)

測(cè)試時(shí)，需要在app.json上加上"debug": true的配置，在上線時(shí)再刪除

六、用戶登錄

1、界面

2、編寫(xiě)后端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 = "用戶注冊(cè)登錄的接口",tags = {"注冊(cè)登錄的controller"}) public class RegistLoginController {@Autowiredprivate UserService userService;@ApiOperation(value = "用戶注冊(cè)", notes = "用戶注冊(cè)的接口")@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、保存用戶，注冊(cè)信息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("用戶名已經(jīng)存在，請(qǐng)換一個(gè)試試");}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("用戶名或密碼不正確, 請(qǐng)重試...");}}}

?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;//導(dǎo)入工具包，使用戶生成的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、小程序登錄與后端聯(lián)調(diào)

注：在兩個(gè)頁(yè)面的js文件上都配置了跳轉(zhuǎn)到彼此的js函數(shù)。

轉(zhuǎn)載于:https://www.cnblogs.com/bozzzhdz/p/9726815.html

總結(jié)

以上是生活随笔為你收集整理的小程序短视频项目———开发用户登录注册（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：网络流24题之餐巾计划问题
下一篇： centos安装java的jdk