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

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

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

项目结构

前端
后端

微信小程序
Java后端
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.jarString 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');

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

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

微信小程序实现登录Java前后端分离相关推荐

2022最新微信小程序授权登录（前后端分离）
一.前言首先说一下微信小程序最近两个比较大的变动: 1. 获取用户信息接口由原来的wx.getUserInfo更换为wx.getUserProfile 2021年4月28日24时后发布的新版本小程序 ...
从零开始快速搭建SpringBoot+Mybatis+小程序应用--微信小程序的入门和前后端的联调
目录项目介绍 vx小程序简介 VX开发工具介绍列表页开发 list的编写列表页前后端联调信息编辑页开发 operation的编写区域信息编辑页的联调项目介绍从0搭建后端的Springbo ...
微信小程序获取手机号：前后端源码示例，解决47001这个错误提示
小程序中自动获取手机号为很常见的一个功能点,可以减少用户输入,目前小程序规则是不允许系统直接自动获取,需要用户手动触发本文中的实现方式:前端使用uniapp生成小程序,后端使用springboot ...
微信小程序之微票前后端简易版+五天实训总结
本文为本人原创,如需转载请注明出处! 为期五天的实训结束了,其实算起来除去机房被占用顶多四天多一点. 来给我们做培训的是优才学院(没有打广告的意思,本着实事求是的态度),老师很有耐心,确实学到很多东西 ...
微信小程序文件上传前后端
搭建小程序端用vant组件 <van-uploader file-list="{{ fileList }}" bind:after-read="afterRead ...
小程序php支付，前后端分离
小程序端: xml: <button type="default" bindtap="payOrder">支付</button> js: ...
驾校分期-众筹项目java前后端分离项目vue（微信小程序+java前后端源码下载）
可以idea直接打开,mysql数据库项目,前后端分离项目vue,分期可自动设置,自动换算金额驾校分期-众筹项目java前后端分离项目vue(微信小程序+java前后端源码下载)
微信小程序商城 (后台JAVA)
微信小程序商城(Java版) 技术选型 1 后端使用技术 1.1 springframework4.3.7.RELEASE 1.2 mybatis3.4.1 1.3 shiro1.3.2 1.4 se ...
视频教程-Vue、Spring Boot开发小而完整的Web前后端分离项目实战-Java
Vue.Spring Boot开发小而完整的Web前后端分离项目实战 3年多.net开发经验:5年的java后端开发经验,熟悉行.net,java流行技术,拥有多个.net,java web企业级应; ...

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

项目结构

前端

后端

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

微信小程序实现登录Java前后端分离相关推荐

最新文章

热门文章