SpringBoot整合微信小程序

最新推荐文章于 2024-08-16 16:07:13 发布
最新推荐文章于 2024-08-16 16:07:13 发布
阅读量3.7k 收藏 45
点赞数 4
分类专栏： SpringBoot WeChat 文章标签： 小程序 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42750497/article/details/104443034
版权

创建微信小程序—>微信小程序搭建

1.我们在pages目录下新建一个login_test目录在这里插入图片描述

2.在login_test目录下新建一个名为login的Page。这样就会自动生成如下图几个文件

在这里插入图片描述

3.我们打开app.json文件，将"pages/login_test/login"这句话放到前面，目的是我们一打开就能看到这个，设置为首页。

在这里插入图片描述
我们每在pages里新建一个都会在app.json里自动生成一个配置

4.打开login.wxml文件编写页面

<!--pages/login_test/login.wxml-->
<!--<text>pages/login_test/login.wxml</text>-->
<form bindsubmit="formSumbit" bindreset="formRest"> 
<view>       
    <view class="text">登陆</view>
    <view class="input">
        <view class="text1">姓名：</view>
        <input class="input1" bindinput="input_name" type='text' name="username" />
    </view>
     <view class="input">
          <view class="text1">密码：</view>
          <input  class="input1" bindinput="input_pwd" password="true" name="password"  />
    </view>
</view>

<view class="btn">
        <button class="btn1" size="mini" form-type="reset">清除</button>
        <button class="btn2" size="mini" form-type="submit" bindtap="submitButton">登录</button>


</view>
</form>

5.login.js界面

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

  /**
   * 页面的初始数据
   */
  data: {
    username: '',
    password: ''
  },
  input_name: function (e) {
    this.setData({
      username: e.detail.value
    })
  },
  input_pwd: function (e) {
    this.setData({
      password: e.detail.value
    })
  },
  submitButton: function () {
    console.log("点击按钮!" + "获取到的用户名:" + this.data.username + "获取到的密码:" + this.data.password)
    var that = this;

    wx.request({
      url: 'http://localhost:8099/login',
      method: 'POST',
      header: { 'content-type': 'application/x-www-form-urlencoded' },
      data: {
        'username': that.data.username,
        'password': that.data.password
      },
      success: function (res) {
        console.log("回调函数:" + res.data)
        var resData = res.data;
        if (resData == true) {
          wx.showToast({
            title: '登录成功',
            duration: 2000
          })
        } else {
          wx.showToast({
            title: '登录失败',
            duration: 2000
          })
        }
      }

    })


  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

6.login.wxss界面

/* pages/login_test/login.wxss */


.text{
    width: 100%;
      height: 60rpx;    
    text-align: center;
    font-size: 40rpx;
    margin-top: 40rpx;
    font-weight: 600;
}
.input{
    width: 100%;
    height: 60rpx;
    font-size: 40rpx;
    margin-top: 40rpx;
    font-weight: 600;
}
.text1{
    width: 20%;
    float: left;
    margin-left: 30rpx;
}
.input1{
      width: 50%;
     height: 60rpx;
    border:1rpx solid #000;
}
.btn{
     width: 100%;
      height: 60rpx;    
    font-size: 50rpx;
    margin-top: 40rpx;
}


.btn1{  
    margin-left: 20%;
    float: left;
    color: white;
    background: cornflowerblue;

}


.btn2{  
    margin-left: 20%;
    color: white;
    background: cornflowerblue;

}

后端编写

IDEA搭建springboot 项目

pom依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="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.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.5.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.zt</groupId>
    <artifactId>wecaht-demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>wecaht-demo</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.46</version>
        </dependency>
        <!--lombok-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.2.0</version>
        </dependency>
        <!--德鲁伊连接池 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.9</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

application.yml

server:
  port: 8099
spring:
  datasource:
    name: project
    type: com.alibaba.druid.pool.DruidDataSource
    druid:
      driver-class-name: com.mysql.jdbc.Driver
      url: jdbc:mysql://127.0.0.1:3306/hospital?characterEncoding=utf-8
      username: root
      password: 123456
      initial-size: 1
      min-idle: 1
      max-active: 20
      max-wait: 60000
      time-between-eviction-runs-millis: 60000
      min-evictable-idle-time-millis: 300000
      validation-query: SELECT 'x'
      test-while-idle: true
      test-on-borrow: false
      test-on-return: false
      pool-prepared-statements: false
      max-pool-prepared-statement-per-connection-size: 20
      filters: stat,wall
      stat-view-servlet:
        enabled: true
        url-pattern: /druid/*
  main:
    allow-bean-definition-overriding: true
  servlet:
    multipart:
      file-size-threshold: 10MB
      max-request-size: 10MB
logging:
  level:
    com.zhiyou100.hospital-zt.mapper : debug
mybatis-plus:
  mapper-locations: classpath:mapper/*Mapper.xml
  type-aliases-package: com.zt.wecahtdemo.pojo

WecahtDemoApplication

@SpringBootApplication
//扫描mapper 包
@MapperScan("com.zt.wecahtdemo.mapper")
public class WecahtDemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(WecahtDemoApplication.class, args);
    }

}

数据库在这里插入代码片
在这里插入图片描述
mapper包

public interface UserMapper extends BaseMapper<User> {

    User selectUser(User user);
    
}

service包

public interface UserService {
        
        boolean login(String userName,String passWord);

}


package com.zt.wecahtdemo.service.impl;

import com.zt.wecahtdemo.mapper.UserMapper;
import com.zt.wecahtdemo.pojo.User;
import com.zt.wecahtdemo.service.UserService;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;

@Service
public class UserServiceImpl implements UserService {
    @Resource
    private UserMapper userMapper;
    @Override
    public boolean login(String userName, String passWord) {
        User user = new User();
        user.setUserName(userName);
        user.setPassWord(passWord);
        User user1 = userMapper.selectUser(user);
        if (user1 !=null){
            return true;
        }
        return false;
    }
}

controller包

@RestController
public class UserController {
    @Resource
    private UserService userService;

    @RequestMapping("/login")
    public  boolean login (String username, String password){
        System.out.println ( "微信小程序调用接口！！！用户名:" + username + "密码:" + password );
        boolean login = userService.login ( username, password );
        if (login) {
            return true;
        }
        return false;
    }

}

mapper.xml

<mapper namespace="com.zt.wecahtdemo.mapper.UserMapper">
    <resultMap type="com.zt.wecahtdemo.pojo.User" id="user">
        <id property="Id" column="id"/>
        <result property="userName" column="username"/>
        <result property="passWord" column="password"/>
    </resultMap>
    <select id="selectUser" parameterType="com.zt.wecahtdemo.pojo.User" resultMap="user">
        SELECT * FROM `user` WHERE username=#{userName} AND password =#{passWord}
    </select>

</mapper>

结果! ! !

在这里插入图片描述

喜欢就点个赞再走吧!!!

注意注意! ! !

因为是是在开发环境,小程序不允许我们使用本机ip,所以需要设置一下
在小程序里设置不检验合法域名就可以了

在这里插入图片描述
在这里插入图片描述

凸比难拨弯
关注
专栏目录
SpringBoot整合微信小程序开发工具
qq_21998021的博客
07-16 2026
一、介绍 通常进行微信开发时，不建议直接使用restful的方式调用微信官方提供的开发文档。一方面在于微信官方文档杂乱，影响开发效率；另一方面开源社区提供了众多微信开发的工具的封装。 本文将为快速开发微信小程序后端提供解决方案，并集成推荐使用的微信小程序开发工具包，参考： https://github.com/Wechat-Group/weixin-java-tools 附：微信小程序开发文档： https://mp.weixin.qq.com/debug/wxadoc/dev/api/ 二
Spring boot与微信小程序(1)
m0_55682843的博客
05-30 908
Spring boot idae创建spring boot项目 1.新建一个Spring Initialize项目 勾选spring web，mysql drive和mybatis framework Spring boot配置文件 spring boot配置文件有两种：yaml和properties 注释：本文采用yaml配置 这个即为spring boot的配置文件 通过重命名的方法将后缀改成yml 在com.example.springboot文件夹下创建两个...
微信小程序后端Springboot
07-07
微信小程序后端Springboot，功能增、删、改、查操作，一个交互demo 前端地址：https://download.csdn.net/download/huanfengzhiqiu/10526403 后端地址：https://download.csdn.net/download/huanfengzhiqiu/10526396
微信小程序~整合springboot
憨憨小江的博客
01-25 1779
整合微信小程序.我们得先去看微信小程序的文档我们先来看登录的流程是什么首先,我们小程序要wx.login 获取code,这个code是然后带着这个code发送到我们后端的服务器,再后端服务器中,我们要像微信的接口api发送请求,获得比较重要的就是这个openid,openid是用户的唯一标识,反而这个session_id不太中重要,因为我们这里用到是token,返回请求之后,我们要生成token返回给前端,前端其他的请求要发过来的化,就要带着这个token。
SpringBoot集成微信小程序 （一）【搭建】
最新发布
weixin_39311781的博客
08-16 1223
小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
Spring Boot + MyBatis 搭建微信小程序
01-29
使用 Spring Boot + MyBatis 开发后台 API 接口，微信小程序作为前端展示页面。
基于Springboot实现微信小程序（后端）
Lysmua的博客
02-26 2051
基于Springboot实现微信小程序
springboot对接微信小程序支付以及回调详细代码
10-09
在本文中，我们将深入探讨如何使用SpringBoot框架与微信小程序进行支付对接，并实现支付回调功能。这个过程涉及多个步骤，包括配置、接口开发、微信支付API的调用以及回调处理。我们将按照描述中的"非常详细，完整...
springboot整合微信小程序支付
weixin_43934051的博客
07-10 209
springboot 后台整合微信小程序支付 直接可以使用
springboot整合微信支付，拿来即用
06-09
总的来说，通过SpringBoot的灵活配置，我们可以轻松地整合微信支付服务，提供安全便捷的支付体验。Thymeleaf则在前端扮演了展示支付界面的角色，使得交互更加直观。通过深入理解这些技术，你可以为你的应用构建出...
Springboot+mybatis微信小程序开发项目
09-06
基于Springboot和mybatis框架做的一款微信小程序，完整的前后端代码，IEDA平台编写，可以用Tomcat运行。
微信小程序+springboot简单的登录增删改查.zip
04-11
springboot+微信小程序开发 简单的增删改查以及登录，所用技术：springboot + mysql + mybatis + 小程序开发
微信小程序后台Springboot+Mysql
09-01
微信小程序后台 Springboot + Mysql 开发 可以作为参考
基于springboot和微信小程序的线上智能点餐系统，课程设计大作业，本科毕业设计，前后端分离，接口数据通信
06-20
一款基于springboot和微信小程序的点餐系统 客户端用微信小程序实现 服务端由springboot整合，使用了mybatis、kafka、websocket、vue.js、layui、Lombok、freemarker等技术 JDK版本：1.8 数据库:mysql ，微信小程序...
java springboot集成微信小程序【详细教程】
AstarCloud
07-25 7378
java springboot maven项目集成微信小程序，使用java api进行集成的哦，详细教程
基于Springboot实现微信小程序（前端）
Lysmua的博客
02-26 2185
基于Springboot实现微信小程序
Springboot+微信小程序
热门推荐
Timor的博客
04-17 3万+
项目描述：在微信小程序中通过与Springboot操作数据库实现登录验证，其中我是用springboot整合mybatis操作数据库 微信小程序代码：` account.wxml <form bindsubmit="formSumbit" bindreset="formRest"> <view> <view class="text">员工...
springboot开发微信小程序
一起coding，一起嗨。
07-19 5275
注意事项配置小程序appid等正确，WxMaConfiguration可以被启动了扫描；
springboot整合微信小程序项目
03-23
可以使用Spring Boot提供的RESTful API来实现微信小程序的后端服务，同时可以使用Spring Security来保护API的安全性。在实现微信小程序的登录功能时，可以使用微信提供的登录API来获取用户的OpenID和Session Key，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值