微信小程序+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;}
//jsPage({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="/POM/4.0.0"xmlns:xsi="/2001/XMLSchema-instance"xsi:schemaLocation="/POM/4.0.0 /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: 9000spring: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*/@SpringBootApplicationpublic 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，自己了解，这玩意我也不明白@Servicepublic 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瞅一眼，没毛病，那啥就前端测了
完了。这就完了？嗯，完了。就这？，就这啊？
最后很复杂的审视了一遍，这时我写的？倒数第二个图提示可以改一下，不然容易和用户名密码错误提示弄混
