微信小程序登陆注册界面前后端代码展示
一首先是前端页面效果图
二 登陆限制
登陆没设置太多限制，都输入正确就登陆成功，失败就显示下图
三 注册限制
注册主要现在三点
1 用户名不能重复，否则显示下图效果
2 前后密码必须一致，否则显示下图效果
3 任意位置不能为空，否则显示下图效果
同时满足上面三点则注册成功跳转到登陆界面（其他验证方法可自行选择添加，方式相同）
四 登陆部分完整代码
1 微信前端代码
```java
wxml部分
<view id="total">
<image src="img/111.png"></image>
<form bindsubmit="create_login">
<view id="t1">
<text>账号</text><input type="text" name="username" id="use" placeholder="输入您的账号" value="{{username}}"></input>
</view>
<view id="t2">
<text>密码</text><input type="password" name="password" id="pass1" placeholder="输入您密码" value="{{password}}"></input>
</view>
<view id="t3">
<text>手机号后四位</text><input type="password" name="phone" id="pass2" placeholder="输入您的手机尾号" value="{{phone}}"></input>
</view>
<button bindtap="goto_index" id="btn1" form-type="submit"><text>登陆</text></button>
</form>
<button bindtap="goto_zhuce" id="btn2"><text>注册</text></button>
<button bindtap="goto_update" id="btn3"><text>忘记密码</text></button>
</view>
wxss
#total{
width:100%;
height:1300rpx;
background-color: rgb(245,245,245);
}
image{
width:150rpx;
height:150rpx;
position: relative;
left:300rpx;
top:100rpx;
}
#t1{
width:100%;
height:125rpx;
background-color: white;
position: relative;
top:200rpx;
}
#t2{
width:100%;
height:125rpx;
background-color: white;
position: relative;
top:210rpx;
}
#t3{
width:100%;
height:125rpx;
background-color: white;
position: relative;
top:220rpx;
}
#t1 text{
position: relative;
left:40rpx;
top:40rpx;
color: rgb(143, 143, 143);
}
#use{
width:400rpx;
height:80rpx;
margin-left: 200rpx;
position: relative;
bottom: 25rpx;
}
#t2 text{
position: relative;
left:40rpx;
top:40rpx;
color: rgb(143, 143, 143);
}
#pass1{
width:400rpx;
height:80rpx;
margin-left: 200rpx;
position: relative;
bottom: 25rpx;
}
#t3 text{
position: relative;
left:40rpx;
top:40rpx;
color: rgb(143, 143, 143);
}
#pass2{
width:400rpx;
height:80rpx;
margin-left: 320rpx;
position: relative;
bottom: 25rpx;
}
#btn1{
position: relative;
top:350rpx;
background-color:rgb(51, 204, 170);
width:600rpx;
border-radius: 50rpx;
}
#btn1 text{
color:white;
font-size: 39rpx;
}
#btn2{
position: relative;
top:370rpx;
right:230rpx;
background-color: rgb(245, 245, 245);
}
#btn2::after{
border: none;
}
#btn2 text{
color:black;
font-size: 39rpx;
}
#btn3{
position: relative;
top:261rpx;
left:200rpx;
width:250rpx;
background-color: rgb(245, 245, 245);
}
#btn3::after{
border: none;
}
#btn3 text{
color:black;
font-size: 39rpx;
}
js
``
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options)
wx.getUserInfo({
success: this.setUserInfo.bind(this)
})
this.setData({
})
},
setUserInfo: function (res) {
this.setData({ user: res.userInfo })
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
create_login: function (e) {
console.log(e.detail.value)
wx.request({
url: "http://localhost:8080/WEB18/denglu?username=" + e.detail.value["username"] + "&" + "password=" + e.detail.value["password"] + "&phone=" + e.detail.value["phone"],
//url地址为后端代码的位置需修改
data: e.detail.value,
success: this.getResult.bind(this)
})
},
getResult: function (res) {
console.log(res.data);
if(res.data == "true"){
wx.showToast({
title: "登录成功",
duration: 2000
})
wx.switchTab({
url: '../index/index',
})
setTimeout(function () {
wx.navigateBack({
delta: 2
})
}, 1000)
}
if(res.data == "false"){
wx.showToast({
title: "账号或密码不对",
icon: 'none',
duration: 3000
})
setTimeout(function () {
wx.navigateBack({
delta: 2
})
}, 1000)
}
},
goto_index:function(res){
},
goto_zhuce: function (res) {
wx.navigateTo({
url: '../zhuce/zhuce',
})
}
})
2 登陆java后端代码
package com.qianfeng.loginregister;
import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
/**
* Servlet implementation class login
*/
public class DengLu extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/json;charset=UTF-8");
Connection cn = null;
PreparedStatement ps = null;
ResultSet rs = null;
String username = request.getParameter("username");
String password = request.getParameter("password");
String phone = request.getParameter("phone");
Gson gson = new Gson();
try {
Class.forName("com.mysql.jdbc.Driver");
cn = DriverManager.getConnection("jdbc:mysql://localhost:3306/books","root","971110");
ps = cn.prepareStatement("select * from mima where username=? and password=?and phone=?");
ps.setString(1, username);
ps.setString(2, password);
ps.setString(3, phone);
rs = ps.executeQuery();
if(rs.next()) {
System.out.println("登陆成功！");
String json = gson.toJson("true");
response.getWriter().write(json);
}else {
System.out.println("账号或密码不正确！");
String json = gson.toJson("false");
response.getWriter().write(json);
}
} catch (Exception e) {
e.printStackTrace();
}finally {
try {
if(rs!=null)
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
try {
if(ps!=null)
ps.close();
} catch (SQLException e) {
e.printStackTrace();
}
try {
if(cn!=null)
cn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
五 注册部分完整代码
1 微信部分代码
wxml
<view id="total">
<form bindsubmit="create_zhuce">
<view id="t1">
<text>账号</text><input type="text" name="username" id="use" placeholder="注册您的账号" value="{{username}}"></input>
</view>
<view id="t2">
<text>密码</text><input type="password" name="password1" id="pass1" placeholder="注册您密码" value="{{password1}}"></input>
</view>
<view id="t3">
<text>确认密码</text><input type="password" name="password2" id="pass2" placeholder="确认您密码" value="{{password2}}"></input>
</view>
<view id="t4">
<text>手机号后四位</text><input type="password" name="phone" id="pass3" placeholder="输入您的手机尾号" value="{{phone}}"></input>
</view>
<button id="btn1" form-type="submit"><text>注册</text></button>
</form>
</view>
wxss
#total{
width:100%;
height:1300rpx;
background-color: rgb(245,245,245);
}
#t1{
width:100%;
height:125rpx;
background-color: white;
position: relative;
top:70rpx;
}
#t2{
width:100%;
height:125rpx;
background-color: white;
position: relative;
top:80rpx;
}
#t3{
width:100%;
height:125rpx;
background-color: white;
position: relative;
top:90rpx;
}
#t4{
width:100%;
height:125rpx;
background-color: white;
position: relative;
top:100rpx;
}
#t1 text{
position: relative;
left:40rpx;
top:40rpx;
color: rgb(143, 143, 143);
}
#use{
width:400rpx;
height:80rpx;
margin-left: 200rpx;
position: relative;
bottom: 25rpx;
}
#t2 text{
position: relative;
left:40rpx;
top:40rpx;
color: rgb(143, 143, 143);
}
#pass1{
width:400rpx;
height:80rpx;
margin-left: 200rpx;
position: relative;
bottom: 25rpx;
}
#t3 text{
position: relative;
left:40rpx;
top:40rpx;
color: rgb(143, 143, 143);
}
#pass2{
width:400rpx;
height:80rpx;
margin-left: 320rpx;
position: relative;
bottom: 25rpx;
}
#t4 text{
position: relative;
left:40rpx;
top:40rpx;
color: rgb(143, 143, 143);
}
#pass3{
width:400rpx;
height:80rpx;
margin-left: 320rpx;
position: relative;
bottom: 25rpx;
}
#btn1{
position: relative;
top:350rpx;
background-color:rgb(51, 204, 170);
width:600rpx;
border-radius: 50rpx;
}
#btn1 text{
color:white;
font-size: 39rpx;
}
js
// pages/zhuce/zhuce.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
/*onLoad: function (options) {
console.log(options)
wx.getUserInfo({
success: this.setUserInfo.bind(this)
})
this.setData({
})
},
setUserInfo: function (res) {
this.setData({ user: res.userInfo })
},*/
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
create_zhuce: function (e) {
console.log(e.detail.value)
wx.request({
url: "http://localhost:8080/WEB18/registerdemo?username=" + e.detail.value["username"] + "&password1=" + e.detail.value["password1"] + "&password2=" + e.detail.value["password2"] +"&phone=" + e.detail.value["phone"],
data: e.detail.value,
success: this.getResult.bind(this)
})
},
getResult: function (res) {
console.log(res.data);
if (res.data == "true") {
wx.showToast({
title: "注册成功",
duration: 2000
})
wx.switchTab({
url: '../login/login',
})
setTimeout(function () {
wx.navigateBack({
delta: 2
})
}, 2000)
}
if (res.data == "-1") {
wx.showToast({
title: "用户名已存在",
icon: 'none',
duration: 2000
})
setTimeout(function () {
wx.navigateBack({
delta: 2
})
}, 2000)
}
if (res.data == "1") {
wx.showToast({
title: "注册信息不为空",
icon: 'none',
duration: 2000
})
setTimeout(function () {
wx.navigateBack({
delta: 2
})
}, 2000)
}
if ((res.data == "false") || (res.data == "0")) {
wx.showToast({
title: "前后密码不一致",
icon: 'none',
duration: 3000
})
setTimeout(function () {
wx.navigateBack({
delta: 2
})
}, 2000)
}
},
})
2 后端java完成代码
package com.qianfeng.loginregister;
import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import com.qianfeng.loginregister.RegisterDemo;
/**
* Servlet implementation class login
*/
public class RegisterDemo extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/json;charset=UTF-8");
Connection cn = null;
PreparedStatement ps = null;
Gson gson = new Gson();
String username = request.getParameter("username");
try {
if(!cha(username)) {
String password1 = request.getParameter("password1");
String password2 = request.getParameter("password2");
if(password1.equals(password2)) {
String phone = request.getParameter("phone");
if((!username.equals("")) && (!password1.equals("")) && (!phone.equals(""))) {
Class.forName("com.mysql.jdbc.Driver");
cn = DriverManager.getConnection("jdbc:mysql://localhost:3306/books","root","971110");
ps = cn.prepareStatement("insert into mima values (?,?,?)");
}else {
System.out.println("注册信息不能为空！");
response.getWriter().write(gson.toJson(1));
}
ps.setString(1, username);
ps.setString(2, password1);
ps.setString(3, phone);
int num = ps.executeUpdate();
if(num > 0) {
System.out.println("注册成功！");
String json = gson.toJson("true");
response.getWriter().write(json);
}else {
System.out.println("注册失败！");
String json = gson.toJson("false");
response.getWriter().write(json);
}
}else {
System.out.println("两次密码不一致，请重新输入！");
response.getWriter().write(gson.toJson(0));
}
}else {
System.out.println("用户名重复，请重新输入！");
response.getWriter().write(gson.toJson(-1));
}
} catch (Exception e) {
e.printStackTrace();
}finally {
try {
if(ps!=null)
ps.close();
} catch (Exception e) {
e.printStackTrace();
}
try {
if(cn!=null)
cn.close();
} catch (Exception e) {
e.printStackTrace();
}
}
}
public static Connection method() throws Exception {
Class.forName("com.mysql.jdbc.Driver");
Connection cn = DriverManager.getConnection("jdbc:mysql://localhost:3306/books","root","971110");
return cn;
}
public static boolean cha(String username) throws Exception {
boolean flag;
Connection cn = method();
PreparedStatement ps = cn.prepareStatement("select * from mima where username = ?");
ps.setString(1, username);
ResultSet rs = ps.executeQuery();
if(rs.next()) {
flag = true;
}else {
flag = false;
}
rs.close();
ps.close();
return flag;
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
六 纯博主自己原创，肯定有很多不足，希望各位大牛批评指正
更多推荐
微信小程序登陆注册界面前后端完整代码展示
发布评论