微信小程序结合springboot实现登录功能

闲话不多说，我们直接开始：

准备工具：
1、微信开发者工具（到微信小程序官网下载）
2、IDEA

微信开发者工具

1、下载完后打开新建项目


上面是项目的目录
2、增加页面

按上图所示增加页面后保存，目录中就会自动生成相应的页面文件
3、编写页面

4、编写逻辑
在login.js中

// pages/login/login.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    user_name: '',
    user_pwds: ''
  },
  //获取用户名的值并将值赋给最先定义的初始化变量
  input_name: function (e) {
    this.setData({ user_name: e.detail.value })
  },
  //跟上面一样
  input_pwds: function (e) {
    this.setData({ user_pwds: e.detail.value })
  },
  /**
   * 点击登录按钮时间
   */
  btns: function () {
    console.log("登录获取的参数：" + this.data.user_name + "," + this.data.user_pwds)
   var that = this;
    wx.request({  //记得这个URL如果你没有域名的话  不改东西的话是会报错的
      url: 'http://localhost:8080/user/find',  //请求的URL
      method: "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) {   //接受后台的回调函数
        console.log("回调函数:" + res.data)
        var resData = res.data;
        if (resData == true) {
          wx.showToast({    //这是微信小程序里面自带的成功弹窗
            title: '登录成功',  //弹窗里面的内容
            icon: 'success',  //图标
            duration: 2000,   //弹窗延迟的时间
            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 () {

  }
})

springboot后台

文件目录

1、用spring Initializr方式创建项目，引入相关依赖

2、引入阿里巴巴的数据源

<dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.10</version>
        </dependency>

编写配置文件

spring.datasource.url=jdbc:mysql://localhost:3306/springbootdata?serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.initiaSize=20
spring.datasource.minIdle=10
spring.datasource.maxActive=100

编写自定义配置类为数据源属性注入

package com.itheima.demo.config;

import com.alibaba.druid.pool.DruidDataSource;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import javax.sql.DataSource;

@Configuration
public class DataSourceConfig {
    @Bean
    @ConfigurationProperties(prefix = "spring.datasource")
    public DataSource getDruid() {
        return new DruidDataSource();
    }
}

3、实体类

package com.itheima.demo.model.domin;

public class User {
    private String id;
    private String user_name;
    private String user_pwds;
    private String phone;

    public void setId(String id) {
        this.id = id;
    }

    public String getId() {
        return id;
    }

    public void setUser_name(String user_name) {
        this.user_name = user_name;
    }

    public String getUser_name() {
        return user_name;
    }

    public void setUser_pwds(String user_pwds) {
        this.user_pwds = user_pwds;
    }

    public String getUser_pwds() {
        return user_pwds;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }

    public String getPhone() {
        return phone;
    }

    @Override
    public String toString() {
        return "User{" +
                "id='" + id + '\'' +
                ", user_name='" + user_name + '\'' +
                ", user_pwds='" + user_pwds + '\'' +
                ", phone='" + phone + '\'' +
                '}';
    }
}

4、DAO层接口类

package com.itheima.demo.dao;

import com.itheima.demo.model.domin.User;
import org.apache.ibatis.annotations.*;

@Mapper
public interface UserMapper {
    @Select("SELECT * FROM t_user WHERE user_name = #{username} " +
            "and user_pwds = #{password}")
    public User findUser(String username,String password);
}

5、Servise层接口类以及实现类

package com.itheima.demo.service;

import com.itheima.demo.model.domin.User;
import org.apache.ibatis.annotations.Param;

public interface UserService {
    public User finduser(@Param("username")String username, @Param("password")String password);
}

package com.itheima.demo.service.impl;

import com.itheima.demo.dao.UserMapper;
import com.itheima.demo.model.domin.User;
import com.itheima.demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

@Service
@Transactional
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper;
    @Override
    public User finduser(String username, String password) {
        User user = userMapper.findUser(username,password);
        return user;
    }
}

6、controller层

package com.itheima.demo.controller;

import com.itheima.demo.model.domin.User;
import com.itheima.demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.Map;

@RestController
@RequestMapping("/user")
public class userController {
    @Autowired
    private UserService userService;

    @RequestMapping("/find")
    public boolean userfind(String user_name ,String user_pwds){
        System.out.println(user_name+","+user_pwds);
        User user = userService.finduser(user_name,user_pwds);
        if(user != null){
            return true;
        }
        return false;
    }
}

7、最后运行后台，微信小程序登录验证


至此就结束了，希望对大家有帮助！

提示：在做登录验证是要勾选如图选项