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

微信小程序 专栏收录该内容
1 篇文章 0 订阅

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

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

  1. 项目结构
  • 前端
  • 后端
  1. 微信小程序
  2. Java后端
  3. 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');

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

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

评论 8 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:技术工厂 设计师:CSDN官方博客 返回首页

打赏作者

江璇Up

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值