创建微信小程序

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.jsPage({ /** * 页面的初始数据 */ 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

application.yml

server: port: 8099spring: 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: 10MBlogging: level: com.zhiyou100.hospital-zt.mapper : debugmybatis-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;@Servicepublic 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包

@RestControllerpublic 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,所以需要设置一下
在小程序里设置不检验合法域名就可以了