小程序后台交互与登录

先拿到Java端写好的接口 

mapper层
	
	
		select * from Users where
		username=#{username} and password=#{password}
	

service

	@Override
	public boolean login1(String username, String password) {
		// TODO Auto-generated method stub 把传入的用户名密码放进去 
	        Users allUsers = this.mapper.login(username, password);
	        if (allUsers != null){
	            return true;
	        }
	        return false;
	    }

	controller层

	 @ResponseBody
	 @RequestMapping("/login1")//最后返回查到的那一个去判断
	    public boolean login1(String username,String password){
	        boolean login1 = this.userservice.login1(username, password);
	        if (login1){//判断用户名密码是否是对的
	            return true;
	        }
	        return false;

	 }
	

然后去写小程序这边代码

主界面 需要自己画 样式的话就是根据自己需求改

页面样式 

/**index.wxss**/
page{
  /*最外面有一层page设置整个高度 和背景  */
  height: 100%;
  background: rgba(175, 187, 211, 0.219);
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tou{
  font-size: 60rpx;
  /*字体变粗  */
  font-weight: bold;
}

.users{
  font-size: 45rpx;
  margin-top: 20rpx;
}

.text1{
 border: 1px solid skyblue;
 margin-bottom: 30rpx;
  height: 100rpx;
  /* 输入框设置椭圆 */
   border-radius: 5px;
}

.text2{
 border: 1px solid skyblue;
 height: 100rpx;
   border-radius: 5px;

}

button{
  border: 1px solid skyblue;
  font-size: 40rpx;
  margin-top: 30rpx;
  width: 350rpx;
  background:  rgb(169, 218, 241);
}

 最后就是输入内容后根据Java端的方法去判断是否数据库里的人 不是就登录失败

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    //定义初始化变量值
    username: '',
    password: ''
  },
  //获取用户名的值并将值赋给最先定义的初始化变量
  inputname: function (e) {
    this.setData({ username: e.detail.value })
  },
  //跟上面一样
  inputpwd: function (e) {
    this.setData({ 
      password: e.detail.value 
      })
  },
  /**
   * 点击登录按钮时间
   */
  btns: function () {
    var that = this;
    wx.request({  //记得这个URL如果你没有域名的话  不改东西的话是会报错的
      url: 'http://2257o052f2.iask.in:18157/jinnierp/login1',  //请求的URL
      method: 'POST',                                        //提交方式
      header: { 'content-type': 'application/x-www-form-urlencoded' }, //设置请求的
      data: {
        'username': that.data.username,
        'password': that.data.password
      },  //请求参数
      success: function (res) {   //接受后台的回调函数
        var resData = res.data;//拿到返回的数据后判断 true就调界面 否则就不跳
        console.log("sjjjjj:",resData);
        if (resData == true) {
          wx.showToast({    //这是微信小程序里面自带的成功弹窗
            title: '登录成功',  //弹窗里面的内容
            icon: 'success',  //图标
            duration: 1000,   //弹窗延迟的时间
            success: function () {
              wx.navigateTo({  //保留当前页面，跳转到应用内的某个页面
                url: '../list/list',   //跳转的页面
              })
            }
          })
        } else {
          wx.showToast({
            title: '用户密码错误',
            icon: 'none',
            duration: 1000,
          })
        }
      }
    })
  },
  // //点击当前页面跳转页面
  // handleParent() {//同名属性可省略 可以不写function
  //   //redirectTo直接跳转到另外一个页面 如果加了tab页面就跳转不了 需要换成switchtab
  //   wx.redirectTo({
  //     //保留当前页面跳转另外页面
  //     url: '/pages/list/list',
  //   })
  // }



})

最后返回数据为true成功就跳到list页面了