微信小程序+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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
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;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
//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("登录失败")
}
})
}
}
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
后端
那啥springboot啥的我就不建了， emmm，文件传一下吧
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="/POM/4.0.0"
xmlns:xsi="http:///2001/XMLSchema-instance"
xsi:schemaLocation="/POM/4.0.0 /xsd/maven-4.0.">
<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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
t_user的 依赖就这么多，头头尾尾的麻烦还占空间
<dependencies>
<!--依赖common工程-->
<dependency>
<groupId></groupId>
<artifactId>t_common</artifactId>
<version>1.0-SNAPSHOT</version>
</dependency>
<!--依赖jpa 【前身是hibernate】-->
<dependency>
<groupId></groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<!--依赖MySQL连接包-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
</dependencies>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
用到的工具类
/**
* 返回结果类
* @author hjh 这不是我名字，就是单纯的好家伙首字母拼写 笑
*/
public class Result {
//满足接口文档对返回值数据格式要求
private Boolean flag;
private Integer code;
private String message;
private Object data;
//三个构造方法 无参，无data，全参 以及get set
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
常量类还是写出来吧
/**
* 定义常量类
* @author hjh
*/
public class StatusCode {
//满足接口文档数据格式要求，把状态码提埃纳定义为常量，方便使用
//不需要构造方法 以及get set
public 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;//重复操作
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
对了，配置文件，差点给忘了，要是看不懂，我直接阿巴阿巴
server:
port: 9000
spring:
application:
name: t_user
datasource:
driver-class-name: com.mysql.jdbc.Driver
url: jdbc:mysql://localhost:3306/tensquare_user?useSSL=false
username: root
password: root
jpa:
database: mysql
show-sql: true
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
项目启动类，有个自动生成id的类，用不到就不展示了
/**
* 启动类
* @author hjh
*/
@SpringBootApplication
public class UserApplication {
public static void main(String[] args) {
SpringApplication.run(UserApplication.class);
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
用户实体类，加注解了，不懂的了解了解去，我能把我自己讲糊涂，嘿嘿
/**
* 用户类
* @author hjh
*/
@Entity
@Table(name = "tb_user")//表名
public class User implements Serializable {
@Id
private 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;//关注数
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
持久层，注解全的很，我是不会浪费口舌的，哼
/**
* 用户持久层
* 作用：访问数据库，向数据库发送sql语句，完成数据的增删改查任务。
* @author hjh
*/
public interface UserDao extends JpaRepository<User,String>, JpaSpecificationExecutor<User> {
//JpaRepository 包含了简单的crud的API crud：增删改查 ---基本的增删改查
//JpaSpecificationExecutor 包含了带（规范）条件查询的API ---复杂的条件查询
//效果：JPA继承了这两个接口，标志着我们以后在后期操作数据库过程中
// 有大部分操作都不需要自己写sql语句，而是可以调用接口中现成的API
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
接口和实现类放一块得了，对了前端已经判断过用户名密码是否为空了，这地方再写有点多于，可以删了(有这解释的时间，早删了，但我偏不)
public interface UserService {
//登录
public Result userLogin(User user);
}
/**
* 操作用户接口实现类
* @author hjh
*/
@Transactional//emmm，自己了解，这玩意我也不明白
@Service
public class UserServiceImpl implements UserService {
//注入dao层
@Autowired
UserDao userDao;
@Autowired
IdWorker idWorker;//啊，刚才说的就是这玩意
@Override
public 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>() {
@Override
public 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, "用户名或密码错误");
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
那啥，控制层
/**
* @author hjh
*/
@RestController//这也去了解吧，要是我说错了，你信了，你笨了还怪我，嘿嘿
public class UserController {
@Autowired
UserService userService;
@PostMapping("/user/login")
public Result userLogin(@RequestBody User user){
return userService.userLogin(user);
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
没漏，没漏，没漏，嗯，没漏，这是真的
运行了，postman瞅一眼，没毛病，那啥就前端测了
完了。这就完了？嗯，完了。就这？，就这啊？
最后很复杂的审视了一遍，这时我写的？倒数第二个图提示可以改一下，不然容易和用户名密码错误提示弄混