SpringBoot整合微信小程序_小程序 springboot demo

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

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>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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 () {

  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

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;

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

后端编写

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

WecahtDemoApplication

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

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

}
1
2
3
4
5
6
7
8
9
10

数据库在这里插入代码片

mapper包

public interface UserMapper extends BaseMapper<User> {

    User selectUser(User user);
    
}
1
2
3
4
5

service包

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

}

1
2
3
4
5
6

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;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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;
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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>
1
2
3
4
5
6
7
8
9
10
11

结果! ! !

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

注意注意! ! !

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