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