微信小程序实现登录Java前后端分离

最近在学习微信小程序相关的知识，找了很多资料虽然文档很多，但是自己需要的的并不多，现在我把自己学会的做一个小小的demo，以便给那些还没有经验的入门者一些小小的指引，我这是一篇基于Java后端的前后端分离的微信小程序实现的登录。鉴于是简单的前后端demo就没有用Java框架了。前端也是简单的导入了一些组件。该项目是一个完整的登录项目，实际中应用到了MySQL，jdbc进行数据的查询，json作为数据交换。项目中需要用到的jar包，我也会一起放上来，以便大家下载学习。希望大家多多支持。

项目我已经上传到码云了，传送门

1. 项目结构

• 前端
• 后端

2. 微信小程序
3. Java后端
4. MySQL

项目结构

前端

• 下载微信开发者工具，点此跳转
• 注册微信开发者账号，查看自己的APPID（这里其实在开发过程中可以暂时不用，在这里我不过多的描述，这个可以看别人的教程）
• 导入项目，微信小程序中的代码。
• 下面是界面图片和包结构
  
  这里不用纠结pages里面那么多的页面文件，主要登录用的是login页面的文件。读者只需将login文件看懂即可。然后修改下app.json中的配置文件。
  

后端

• 这里我使用的是IDEA，当然也可以使用eclipse或者MyEclipse，都是没得问题的，我就简单的建立了一个Javaweb的项目，方便能够接收跨域的请求。下面是我的项目结构，
  
• 这里我着重的贴一下Java端用来接收前端请求的selvlet的代码，其他的Java后端代码也已经上传到码云项目中了。

package servlet;

import com.google.gson.Gson;
import dao.UserDao;
import vo.User;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.Writer;
import java.sql.SQLException;
import java.util.HashMap;
import java.util.Map;

@WebServlet("/WechatDemo1")
public class WechatDemo1 extends javax.servlet.http.HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {


        //设置请求编码
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        /* 设置响应头允许ajax跨域访问 */
        response.setHeader("Access-Control-Allow-Origin", "*");
        /* 星号表示所有的异域请求都可以接受， */
        response.setHeader("Access-Control-Allow-Methods", "GET,POST");


        //获取微信小程序get的参数值并打印
        String account = (String) request.getParameter("x");
        String password = (String) request.getParameter("y");
        System.out.println(account + "---->" + password);


        UserDao userDao = new UserDao();
        User user = null;

        try {
            user = userDao.findUserByAccountAndPassword(account,password);

        } catch (Exception e) {
//            System.out.println(e.getMessage());
            e.printStackTrace();
        }
		//转成json数据
        Map<String,Object> result = new HashMap<String, Object>();
        result.put("data",user);

		//使用Gson类需要导入gson-2.8.0.jar
        String json = new Gson().toJson(result);
        
		//返回值给微信小程序
        Writer out = response.getWriter();
        out.write(json);
        out.flush();
        
    }
}

• 上面需要的jar包也在项目中有包含，可以直接从项目中下载，还有就是数据库文件。数据库连接配置在util包中的DBConnection中修改。

package util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class DBConnection {

    private DBConnection (){

    }

    public static Connection getInstance(){
        Connection con = null;
        DBConnection db = new DBConnection();
        return db.getConnection(con);

    }

    private Connection getConnection(Connection con){

        String driver = "com.mysql.cj.jdbc.Driver";  //驱动路径
        String url = "jdbc:mysql://localhost:3306/wechat_demo";  //数据库路径，需要自行修改
        String name = "root";  //数据库用户名
        String password = "XXXXXXX";  //这里是数据库密码

        try {
            Class.forName(driver);
            System.out.println("数据库驱动加载成功");

            con = DriverManager.getConnection(url,name,password);
            System.out.println("数据库连接成功");
        } catch (ClassNotFoundException | SQLException e) {
            e.printStackTrace();
        }
        return con;
    }
}

• 下面是我数据库中的table，我的MySQL版本应该是8.0.19，所以这里我上传的驱动也是相应的版本，一般的5.0版本也可以去MySQL官网下载，这里请读者自行百度。
  
  数据库管理工具自己决定用什么吧，我这里用的是Navicat，新建一个user表，插入数据如下。

INSERT INTO `users` VALUES (1000000001, 'admin', '123456', 'Admin');
INSERT INTO `users` VALUES (1000000002, 'test', '123456', 'Test');

项目已经搭建成功了。我讲得可能比较含糊，如果大家有不明白的地方，可以留言，在我力所能及的范围下，我都会给以解答的，谢谢了。

具体的项目地址，点此访问