微信小程序> [微信小程序]学习笔记2前后端交互实现简单的登录功能-微信小程序后端-微信小程序后端JAVA

[微信小程序]学习笔记2前后端交互实现简单的登录功能-微信小程序后端-微信小程序后端JAVA

浏览量:3170 时间: 来源:animalcoder
环境:win7+IDEA2019.2.1+微信开发者工具前端:微信小程序后端:springboot+mybatis+MySQL+navicat功能:输入账号密码登录,成功返回上一页,失败显示登陆失败思路:1.小程序传数据X到后台。2.后台将X与数据库判断账号密码是否一致。3.后台将结果(true/false)传回小程序,根据这不同的结果编写不同的逻辑。效果如下图:首页-点击头像跳转到登录界面-if登录成功-返回到首页;if登录失败-留在原地实现步骤:1.后台搭建:1.1springinitializr创建新项目:next两下,然后添加如下图依赖,加少了也可以在pom.xml补上1.2.进去之后,我们先来感受下最后的项目结构图,先将红色字的文件文件夹补上1.3.新建wxtest数据库建表tb_users:然后自己随便添加数据,这里就不搞加密盐了1.4.补充各红色部分的代码application.properties配置端口,数据库地址等spring.datasource.urljdbc:mysql://127.0.0.1:3306/数据库名?useUnicodetruecharacterEncodingUTF-8serverTimezoneUTCspring.datasource.username自己填spring.datasource.password自己填spring.datasource.driver-class-namecom.mysql.jdbc.Drivermybatis.typeAliasesPackagecom.example.demo.demainmybatis.mapperLocationsclasspath:mapper/*.xmllogging.level.com.example.fuckspringboot:DEBUGserver.port8084实体类Userpackagecom.example.demo.domain;importlombok.ToString;importjava.util.Date;@ToStringpublicclassUsers{privateIntegeruser_id;privateStringuser_name;privateStringuser_pwds;privateDateuser_times;privateStringuser_images;publicUsers(Integeruser_id,Stringuser_name,Stringuser_pwds,Dateuser_times,Stringuser_images){this.user_iduser_id;this.user_nameuser_name;this.user_pwdsuser_pwds;this.user_timesuser_times;this.user_imagesuser_images;}publicUsers(){super();}publicIntegergetUser_id(){returnuser_id;}publicvoidsetUser_id(Integeruser_id){this.user_iduser_id;}publicStringgetUser_name(){returnuser_name;}publicvoidsetUser_name(Stringuser_name){this.user_nameuser_name;}publicStringgetUser_pwds(){returnuser_pwds;}publicvoidsetUser_pwds(Stringuser_pwds){this.user_pwdsuser_pwds;}publicDategetUser_times(){returnuser_times;}publicvoidsetUser_times(Dateuser_times){this.user_timesuser_times;}publicStringgetUser_images(){returnuser_images;}publicvoidsetUser_images(Stringuser_images){this.user_imagesuser_images;}}DAOUsersMapper接口,补上查找用户的函数findAllUsers()packagecom.example.demo.mapper;importcom.example.demo.domain.Users;importorg.apache.ibatis.annotations.Mapper;importorg.springframework.stereotype.Repository;@Repository@MapperpublicinterfaceUsersMapper{UsersfindAllUsers(Usersusers);}UsersMapper.xml与数据库打交道,findAllUsers()的真正实现处(select)注意1.第4行的namespace里要绑定自己的UsersMapper接口路径2.第6行的type绑定自己的Users实体类路径3.一般来说什么Field找不到bean,无法createbean的报错啊,就是xml没写对?xmlversion"1.0"encoding"UTF-8"?!DOCTYPEmapperPUBLIC"-//mybatis.org//DTDMapper3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"mappernamespace"com.example.demo.mapper.UsersMapper"resultMapid"BaseResultMap"type"com.example.demo.domain.Users"constructoridArgcolumn"user_id"jdbcType"INTEGER"javaType"java.lang.Integer"/argcolumn"user_name"jdbcType"VARCHAR"javaType"java.lang.String"/argcolumn"user_pwds"jdbcType"VARCHAR"javaType"java.lang.String"/argcolumn"user_times"jdbcType"TIMESTAMP"javaType"java.util.Date"/argcolumn"user_images"jdbcType"VARCHAR"javaType"java.lang.String"//constructor/resultMapsqlid"Base_Column_List"user_id,user_name,user_pwds,user_times,user_images/sqlselectid"findAllUsers"resultMap"BaseResultMap"parameterType"com.example.demo.domain.Users"select*fromtb_userswhere11anduser_name#{user_name}anduser_pwds#{user_pwds}/select/mapper服务类接口:IUserService定义登录login函数packagecom.example.demo.Service;publicinterfaceIUserService{booleanlogin(Stringuser_name,Stringuser_pwds);}服务类实现:UserServiceImpl实现login函数后台业务功能一般都写在这类。select找得到,说明账号密码匹配上了,返回true。记得标上注解@Servicepackagecom.example.demo.Service.Impl;importcom.example.demo.Service.IUserService;importcom.example.demo.domain.Users;importcom.example.demo.mapper.UsersMapper;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.stereotype.Service;@ServicepublicclassUserServiceImplimplementsIUserService{@AutowiredprivateUsersMapperusersMapper;@Overridepublicbooleanlogin(Stringuser_name,Stringuser_pwds){UsersusersnewUsers();users.setUser_name(user_name);users.setUser_pwds(user_pwds);UsersallUsersthis.usersMapper.findAllUsers(users);if(allUsers!null){returntrue;}returnfalse;}}控制类:IndexController小程序前端会传数据X到控制类控制类利用此数据X,调用服务类的login(),并将结果返回到小程序packagecom.example.demo.Controller;importcom.example.demo.Service.IUserService;importorg.mybatis.spring.annotation.MapperScan;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.stereotype.Controller;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RequestMethod;importorg.springframework.web.bind.annotation.RestController;@RestControllerpublicclassIndexController{//logintest小程序的后台@AutowiredprivateIUserServiceuserService;@RequestMapping("/login")publicbooleanlogin(Stringuser_name,Stringuser_pwds){System.out.println("用户名:"+user_name+"....用户密码:"+user_pwds);booleanloginthis.userService.login(user_name,user_pwds);System.out.println(login);if(login){returntrue;}returnfalse;}@RequestMapping("/count")publicIntegercount(Integert1,Integert2){Integert3t1+t2;System.out.println("a:"+t1+"....b:"+t2);returnt3;}}1.5运行后台看到如下图就说明后台搭好了如果报错,看xml有没有写对,看配置文件有没有写对,看注解有没有漏了,会不会有的依赖加载不上,比如公司网络不好就会加载不到某些插件。pom.xml如下?xmlversion"1.0"encoding"UTF-8"?projectxmlns"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.0https://maven.apache.org/xsd/maven-4.0.0.xsd"modelVersion4.0.0/modelVersionparentgroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-parent/artifactIdversion2.1.8.RELEASE/versionrelativePath/!--lookupparentfromrepository--/parentgroupIdcom.example/groupIdartifactIddemo/artifactIdversion0.0.1-SNAPSHOT/versionnamedemo/namedescriptionDemoprojectforSpringBoot/descriptionpropertiesjava.version1.8/java.version/propertiesdependenciesdependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-data-jdbc/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-thymeleaf/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-devtools/artifactIdscoperuntime/scopeoptionaltrue/optional/dependencydependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactIdoptionaltrue/optional/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-test/artifactIdscopetest/scope/dependencydependencygroupIdorg.mybatis.spring.boot/groupIdartifactIdmybatis-spring-boot-starter/artifactIdversion2.0.1/version/dependencydependencygroupIdmysql/groupIdartifactIdmysql-connector-java/artifactIdscoperuntime/scope/dependency/dependenciesbuildpluginsplugingroupIdorg.springframework.boot/groupIdartifactIdspring-boot-maven-plugin/artifactId/plugin/plugins/build/project2.前台搭建2.1申请小程序账号,拿到自己小程序的appID,这步在小程序官网上完成,下载微信开发者工具然后新建一个小程序,发现自带一个index页面右键新建Page,名为logins,使得项目结构如下图2.2app.json中绑定我们的登录界面路径2.3logins.wxmlviewclass"weui-cellsweui-cells_after-title"viewclass"weui-cell"viewclass"weui-cell__hd"viewclass"weui-label"账号/view/viewviewclass"weui-cell__bd"inputclass"weui-input"placeholder"name"bindinput"input_name"type"text"//view/viewviewclass"weui-cell"viewclass"weui-cell__hd"viewclass"weui-label"密码/view/viewviewclass"weui-cell__bd"inputplaceholder"password"bindinput"input_pwds"type"password"//view/view/viewbuttontype"primary"bindtap"btns"login/button2.4logins.jsPage({/***页面的初始数据*/data:{//定义初始化变量值user_name:'',user_pwds:'',t1:'',t2:'',ans:'',dayStyle:[{month:'current',day:newDate().getDate(),color:'white',background:'#AAD4F5'},{month:'current',day:newDate().getDate(),color:'white',background:'#AAD4F5'}]},//获取用户名的值并将值赋给最先定义的初始化变量input_name:function(e){this.setData({user_name:e.detail.value})},//跟上面一样input_pwds:function(e){this.setData({user_pwds:e.detail.value})},input_t1:function(e){this.setData({t1:e.detail.value})},//跟上面一样input_t2:function(e){this.setData({t2:e.detail.value})},/***点击登录按钮时间*/btns:function(){console.log("登录获取的参数:"+this.data.user_name+","+this.data.user_pwds)varthatthis;wx.request({//记得这个URL如果你没有域名的话不改东西的话是会报错的url:'http://localhost:8084/login',//请求的URLmethod:'POST',//提交方式header:{'content-type':'application/x-www-form-urlencoded'},//设置请求的data:{'user_name':that.data.user_name,'user_pwds':that.data.user_pwds},//请求参数success:function(res){//接受后台的回调函数varresDatares.data;console.log("???:"+resData);if(resDatatrue){wx.showToast({//这是微信小程序里面自带的成功弹窗title:'登录成功',//弹窗里面的内容icon:'success',//图标duration:15000,//弹窗延迟的时间success:function(){wx.navigateTo({//保留当前页面,跳转到应用内的某个页面url:'../index/index',//跳转的页面})}})}else{wx.showToast({title:'登录失败',icon:'none',duration:2000,})}}})},/***生命周期函数--监听页面加载*/onLoad:function(options){},/***生命周期函数--监听页面初次渲染完成*/onReady:function(){},/***生命周期函数--监听页面显示*/onShow:function(){},/***生命周期函数--监听页面隐藏*/onHide:function(){},/***生命周期函数--监听页面卸载*/onUnload:function(){},/***页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh:function(){},/***页面上拉触底事件的处理函数*/onReachBottom:function(){},/***用户点击右上角分享*/onShareAppMessage:function(){}})2.5在index.js中改这一行代码,使得点击头像跳到登录界面wxss那块用了weui,不用不影响功能,最后得把详情-本地配置-不检验非法域名勾上。完成!

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎