微信小程序如何实现登录注册带源码

前几天没事随手写了个小程序端的登录注册，现在分享给大家

一、登录微信前端

这是效果图与wxml代码

这是wxss代码

input{
height: 100rpx;
text-align: center;
margin-top: 20rpx;
border: 1px solid skyblue;
}
.input1{
  margin-top: 10rpx;
}
button{
  color:rgb(184, 173, 173);
  margin-top: 20rpx;
  background-color:seagreen;
}
.bg{
  height: 70vh;
  width: 100vw;

}
.button1{
  margin-left: 50rpx;

}
.button2{
  margin-right: 50rpx;
  float: right;
}

这是login.js逻辑代码

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

  /**
   * 页面的初始数据
   */
  data: {

  },
//登录按钮绑定的事件
submit2:function(e){
var  username=e.detail.value.username;
var  password=e.detail.value.password;
    console.log(username);
    console.log(password);
    wx.request({
    //url地址可以换成你自己的后台服务器地址
      url: 'http://localhost:8080/weixin02/LoginServlet',
      data:{
        username:username,
        password:password,
      },
      header:{
        "content-type":" application/json" 
      },
      success:function(res){
        
       console.log(res.data.code)
        var re=res.data.code
        if(re==200){
          wx.switchTab({
            url: '../index/index',
          })
        }
        else{
          console.log("登录失败")
          wx.navigateTo({
            url: 'login',
          })
          
        }
       
        console.log(res)
      }
    })
},
//这是注册按钮
submit1:function(e){
  wx.navigateTo({
    url: 'register',
  })
}
})

微信前端就是这么多了，接下来是后台的代码我使用的是idea写的，不管用啥java代码都是一样的

二、登录后台

这是大概需要的代码框架

由于篇幅有限我这里提供一下最核心的代码首先是userDaoImpl的代码

package com.lwh.dao.impl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;



import com.lwh.dao.UserDao;
import com.lwh.pojo.User;
import com.lwh.utils.JdbcUtil;

public class UserDaoImpl implements UserDao {



    @Override
    public int login(User user)  {
        // TODO Auto-generated method stub
        PreparedStatement ps = null;
        Connection connection=null;
        ResultSet rs=null;
        int r=-1;
        try
        {
            connection = JdbcUtil.getConnection();
            String sql="SELECT*FROM tb_user WHERE username=? AND PASSWORD=?";
            ps=connection.prepareStatement(sql);
            ps.setObject(1,user.getUsername());
            ps.setObject(2, user.getPassword());
            //boolean execute = ps.execute();
            rs = ps.executeQuery();
            boolean absolute = rs.absolute(1);
            System.out.println(absolute);
            if(absolute) {
                System.out.println("登录成功");
                r=1;
            }
            else {
                System.out.println("登录失败");
            }
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        finally {
            JdbcUtil.JdbcClose();
        }
        return r;
    }
//这是注册的代码可以忽略
    @Override
    public int register(User user) {
        // TODO Auto-generated method stub
        PreparedStatement ps = null;
        Connection connection=null;
        int  rs=-1;
        int r=-1;
        try
        {
            connection = JdbcUtil.getConnection();
            String sql="insert into tb_user(username,password) value(?,?)";
            ps=connection.prepareStatement(sql);
            ps.setObject(1,user.getUsername());
            ps.setObject(2, user.getPassword());
            //boolean execute = ps.execute();
            rs = ps.executeUpdate();
            System.out.println(rs);
            if(rs>0) {
                System.out.println("注册成功");
                r=1;
            }
            else {
                System.out.println("注册失败用户已存在");
            }
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            System.out.println("注册失败用户已存在");
            //e.printStackTrace();
        }
        finally {
            JdbcUtil.JdbcClose();
        }
        return r;
    }

}

接下来就是那个servlet的代码用于接受微信端请求的数据的代码

package com.lwh.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.lwh.pojo.User;
import com.lwh.service.LoginService;
import com.lwh.service.impl.LoginServiceImpl;

/**
 * Servlet implementation class LoginService
 */
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public LoginServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

   
	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
		//response.setCharacterEncoding("UTF-8");
	   //response.setContentType("application/json;charset=utf-8");
        //request.setCharacterEncoding("UTF-8");
		PrintWriter out=response.getWriter();
		String username=request.getParameter("username");
		String password=request.getParameter("password");
		LoginService ls=new LoginServiceImpl();
		System.out.println(username+"--"+password);
		User user=new User();
		user.setUsername(username);
		user.setPassword(password);
	    int re=ls.login(user);
	    System.out.println("re"+re);
	    if(re>0)
	    {
	    	out.print("{\"code\":\"200\",\"msg\":\"success\"}");
	    	System.out.println("Servlet登录成功");
	    }
	    else {
	    	out.print("{\"code\":\"201\",\"msg\":\"false\"}");
	    	System.out.println("Servlet登录失败");
	    }
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

OK，到这里就差数据库了，看下面这是数据库建的表

that is all ，大功告成，测试登录成功，由于时间问题，明天我再分享注册最后欣赏一下我登录后主页面