微信小程序+SpringBoot实现用户登录

前言

微信小程序越来越吃香了（前话就这么多，嘿嘿）

前端

那就开始吧，登录界面就如此了

wxml内容如下，这是格式化后粘贴过来的，emmm，怪像那回事。

<view class="total"><form bindsubmit="create_login"><view class="t1"><text class="text">账号</text><input type="text" name="moblie" class="box" placeholder="输入您的账号" value="{{moblie}}" bindinput="mobileInput"></input></view><view class="t2"><text class="text">密码</text><input type="password" name="password" class="box" placeholder="输入您的密码" value="{{password}}" bindinput="passwordInput"></input></view><button bindtap="login" class="btn"><text class="font2">登陆</text></button></form>
</view>

wxss是这样的，本来是不想发wxss的，发出来感觉有点看不起在座的各位，可能挨打，不过我寻思着，隔着屏幕你们又弄不死我，嘎嘎嘎，搞错了，桀桀桀

.total{width:100%;height:100%;background-color: rgb(245,245,245);
}
.t1{width:100%;height:125rpx;background-color: white;position: relative;top:50rpx;
}
.t2{width:100%;height:125rpx;background-color: white;position: relative;top:60rpx;
}
.text{position: relative;
left:40rpx;
top:40rpx;
color: rgb(143, 143, 143);
}
.box{width:400rpx;height:80rpx;margin-left: 200rpx;position: relative;bottom: 25rpx;
}
#t3 text{position: relative;
left:40rpx;
top:40rpx;
color: rgb(143, 143, 143);
}
#pass2{width:400rpx;height:80rpx;margin-left: 320rpx;position: relative;bottom: 25rpx;
}
.btn{position: relative;top:100rpx;background-color:rgb(51, 204, 170);width:600rpx;border-radius: 50rpx;
}
.font2{color:white;font-size: 39rpx;
}

//js
Page({data: {moblie: '',//账号password: ''//密码},// 获取输入的账号 mobileInput: function (e) {this.setData({moblie: e.detail.value})},// 获取输入的密码 passwordInput: function (e) {this.setData({password: e.detail.value})}, // 登录login: function () {var that = this;//判断账号密码是否为空，为空弹窗提示if (this.data.moblie == nul || that.data.password == null) {wx.showToast({title: "用户名或密码错误",icon: '',duration: 2000 //弹出时间})} else {wx.request({url: "http://localhost:9000/user/login",method: "POST",dataType: "json",data: {mobile: that.data.moblie,password: that.data.password},header: {'content-type': 'application/json'},success: function (result) {console.log("回调函数:" + result)if (result.data.code == "20000") {console.log("成功")wx.navigateTo({url: '../logs/logs',})} else {console.log("用户名或密码错误")wx.showToast({title: "用户名或密码错误",icon: '',duration: 2000 //弹出时间})}},//若是请求路径错了，着下面语句就有用了fail: function () {console.log("登录失败")}})}}
})

后端

那啥springboot啥的我就不建了， emmm，pom.xml文件传一下吧

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.zut</groupId><artifactId>t_parents</artifactId><packaging>pom</packaging><version>1.0-SNAPSHOT</version><modules><!--子模块--><!--经常用的类封装到一个模块里边，返回类型，常量，分页啥的--><module>t_common</module><module>t_base</module><module>t_recruit</module><module>t_article</module><!--用户登录的模块--><module>t_user</module><module>t_qa</module></modules><!--为了统一jar包版本，让子工程依赖--><!--springboot项目是通过main方法启动 是web项目--><!--其内置tomcat 不需要第三方tomcat--><!--父工厂 包含spring所需要的一系列jar--><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.0.1.RELEASE</version><relativePath/></parent><!--编译版本--><properties><project.build.sourceEncoding>UTF‐8</project.build.sourceEncoding><project.reporting.outputEncoding>UTF‐8</project.reporting.outputEncoding><java.version>1.8</java.version></properties><dependencies><!--相当于springmvc的jar--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!--spring测试的jar--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency></dependencies><!--指定远程仓库 方便jar包快速下载--><repositories><repository><id>spring-snapshots</id><name>Spring Snapshots</name><url>https://repo.spring.io/snapshot</url><snapshots><enabled>true</enabled></snapshots></repository><repository><id>spring-milestones</id><name>Spring Milestones</name><url>https://repo.spring.io/milestone</url><snapshots><enabled>false</enabled></snapshots></repository></repositories><!--加速jar包下载的插件--><pluginRepositories><pluginRepository><id>spring-snapshots</id><name>Spring Snapshots</name><url>https://repo.spring.io/snapshot</url><snapshots><enabled>true</enabled></snapshots></pluginRepository><pluginRepository><id>spring-milestones</id><name>Spring Milestones</name><url>https://repo.spring.io/milestone</url><snapshots><enabled>false</enabled></snapshots></pluginRepository></pluginRepositories></project>

t_user的pom.xml 依赖就这么多，头头尾尾的麻烦还占空间

<dependencies><!--依赖common工程--><dependency><groupId>com.zut</groupId><artifactId>t_common</artifactId><version>1.0-SNAPSHOT</version></dependency><!--依赖jpa 【前身是hibernate】--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jpa</artifactId></dependency><!--依赖MySQL连接包--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId></dependency></dependencies>

用到的工具类

/*** 返回结果类* @author hjh 这不是我名字，就是单纯的好家伙首字母拼写 笑*/
public class Result {//满足接口文档对返回值数据格式要求private Boolean flag;private Integer code;private String message;private Object data;//三个构造方法 无参，无data，全参 以及get set

常量类还是写出来吧

/*** 定义常量类* @author hjh*/
public class StatusCode {//满足接口文档数据格式要求，把状态码提埃纳定义为常量，方便使用//不需要构造方法 以及get setpublic static final int OK=20000;//成功public static final int ERROR =20001;//失败public static final int LOGINERROR =20002;//用户名或密码错误public static final int ACCESSERROR =20003;//权限不足public static final int REMOTEERROR =20004;//远程调用失败public static final int REPERROR =20005;//重复操作
}

对了，配置文件，差点给忘了，要是看不懂，我直接阿巴阿巴

server:port: 9000
spring:application:name: t_userdatasource:driver-class-name: com.mysql.jdbc.Driverurl: jdbc:mysql://localhost:3306/tensquare_user?useSSL=falseusername: rootpassword: rootjpa:database: mysqlshow-sql: true

项目启动类，有个自动生成id的类，用不到就不展示了

/*** 启动类* @author hjh*/
@SpringBootApplication
public class UserApplication {public static void main(String[] args) {SpringApplication.run(UserApplication.class);}
}

用户实体类，加注解了，不懂的了解了解去，我能把我自己讲糊涂，嘿嘿

/*** 用户类* @author hjh*/
@Entity
@Table(name = "tb_user")//表名
public class User implements Serializable {@Idprivate String id;//编号private String mobile;//手机号private String password;//密码private String nickname;//昵称private String sex;//性别private Date birthday;//生日private String avatar;//头像private String email;//邮件private Date regdate;//注册时间private Date updatedate;//更新时间private Date lastdate;//最后消息时间private long online;//在线private String interest;//兴趣private String personality;//性格private Integer fanscount;//粉丝数private Integer followcount;//关注数

持久层，注解全的很，我是不会浪费口舌的，哼

/*** 用户持久层* 作用：访问数据库，向数据库发送sql语句，完成数据的增删改查任务。* @author hjh*/
public interface UserDao extends JpaRepository<User,String>, JpaSpecificationExecutor<User> {//JpaRepository 包含了简单的crud的API crud：增删改查  ---基本的增删改查//JpaSpecificationExecutor 包含了带（规范）条件查询的API  ---复杂的条件查询//效果：JPA继承了这两个接口，标志着我们以后在后期操作数据库过程中//     有大部分操作都不需要自己写sql语句，而是可以调用接口中现成的API
}

接口和实现类放一块得了，对了前端已经判断过用户名密码是否为空了，这地方再写有点多于，可以删了(有这解释的时间，早删了，但我偏不)

public interface UserService {//登录public Result userLogin(User user);
}/*** 操作用户接口实现类* @author hjh*/
@Transactional//emmm，自己了解，这玩意我也不明白
@Service
public class UserServiceImpl implements UserService {//注入dao层@AutowiredUserDao userDao;@AutowiredIdWorker idWorker;//啊，刚才说的就是这玩意@Overridepublic Result userLogin(User user) {if (user.getMobile().equals("") || user.getMobile() == null || user.getPassword().equals("") || user.getPassword() == null) {return new Result(false, StatusCode.LOGINERROR, "用户名或密码为空");}List<User> all = userDao.findAll(new Specification<User>() {@Overridepublic Predicate toPredicate(Root<User> root, CriteriaQuery<?> query, CriteriaBuilder criteriaBuilder) {Predicate predicate = criteriaBuilder.equal(root.get("mobile").as(String.class), user.getMobile());Predicate predicate1 = criteriaBuilder.equal(root.get("password").as(String.class), user.getPassword());return criteriaBuilder.and(predicate, predicate1);}});if (all.size() > 0) {return new Result(true, StatusCode.OK, "登录成功");}return new Result(false, StatusCode.LOGINERROR, "用户名或密码错误");}}

那啥，控制层

/*** @author hjh*/
@RestController//这也去了解吧，要是我说错了，你信了，你笨了还怪我，嘿嘿
public class UserController {@AutowiredUserService userService;@PostMapping("/user/login")public Result userLogin(@RequestBody User user){return userService.userLogin(user);}
}

没漏，没漏，没漏，嗯，没漏，这是真的

运行了，postman瞅一眼，没毛病，那啥就前端测了

完了。这就完了？嗯，完了。就这？，就这啊？
最后很复杂的审视了一遍，这时我写的？倒数第二个图提示可以改一下，不然容易和用户名密码错误提示弄混

微信小程序+SpringBoot实现用户登录相关推荐

微信小程序开发之——用户登录-登录流程(1)
一概述新建微信小程序自带用户登录简化小程序登录流程时序二新建微信小程序自带用户登录简化新建的微信小程序默认有用户登录功能,将多余功能去除后,简化如下 2.1 index.wxml < ...
【微信小程序】通过用户登录实现批量收集formId
参考网上多篇文章,本文目的旨在做个记录. [微信小程序]通过用户登录实现批量收集formid,无限次发送模板消息提交1次表单可下发1条模板消息,多次提交下发条数独立,相互不影响. 所以,想无限次发送 ...
Laravel 微信小程序后端实现用户登录的示例代码
Laravel 微信小程序后端实现用户登录的示例代码这篇文章主要介绍了Laravel 微信小程序后端实现用户登录的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值 ...
微信小程序踩坑—用户登录界面
最近做的一个项目有涉及到用户登录.微信小程序的用户登录在我看来有两种,一种是需要用微信提供的用户身份标识,简单地说就是小程序的登录者就是使用这个小程序的微信用户,还有一种是小程序和服务器之间有自己的一 ...
用 Django 开发微信小程序后端实现用户登录
本文将介绍采用 Django 开发微信小程序后端,通过将用户模块进行重构,并采用JWT来进行用户认证,来解决以下问题: 微信小程序不支持 Cookie,因此不能采用 Django 默认的 Sessio ...
java开发微信如何维护登录状态_微信小程序中做用户登录与登录态维护的实现详解...
总结大家都知道,在开发中提供用户登录以及维护用户的登录状态,是一个拥有用户系统的软件应用普遍需要做的事情.像微信这样的一个社交平台,如果做一个小程序应用,我们可能很少会去做一个完全脱离和舍弃连接用户 ...
【微信小程序+node】微信小程序结合node用户登录-06
申请一个微信小程序账号,并获取appId,appSecret 1.使用新的qq注册一个新的小程序 2.获取appId,appSecret.特别注意appSecret需要自己保存,每次获取都要验证,特别 ...
微信小程序开发之——用户登录-搭建开发者服务器(2)
一概述用Node.js搭建开发者服务器开发服务器作为登录中的三个角色(小程序/开发者服务器/微信接口)中的重要一环开发者服务器接收code,保存openid和session_key,并返回to ...
微信小程序开发之——用户登录-开放数据校验与解密(6)
一概述小程序端获取到的用户信息通过wx.request发送给开发者服务器开发者服务器无法辨别数据的真伪(如发送虚假用户信息) 小程序提供了开发数据的校验和解密机制二获取用户信息 2.1 代码 ...

微信小程序+SpringBoot实现用户登录

微信小程序+SpringBoot实现用户登录

前言

前端

后端

微信小程序+SpringBoot实现用户登录相关推荐

最新文章

热门文章