WeChat Template01项目介绍

WeChat Template

一套基于SpringBoot & Shiro 以及 Uni-app构建的微信小程序脚手架

开源地址: https://github.com/TyCoding/wechat-template 欢迎Star、Fork支持作者。

项目介绍

仓库 中包含了两个项目:

  • wechat-api: 基于SpringBoot、Shiro构建的仅提供Restful api的后端项目
  • wechat-app: 基于Uni-app构建的微信小程序

你能学到什么

  1. Uni-app与Java Web项目结合的最佳实践
  2. SpringBoot与Shiro的集成,以及身份校验、Token交互的实现
  3. 如何优雅的封装一套Uni-app(微信小程序)脚手架,包括:request api封装、vuex存储、router页面路由、与Java后端数据交互
  4. 如何优雅的封装一套SpringBoot&Shiro权限项目脚手架,如何处理前后端分离Token交互
  5. 如何处理小程序端Request请求,后续将从Login请求展开逐步分析前后端交互流程

技术选型

开发环境:

Name Version
JDK 1.8
MySql 5.7
IDEA 2020.1
HBuilderX 2.7.9
微信开发者工具 1.03

wechat-api小程序后端:

Name Version
SpringBoot 2.1.3.RELEASE
Spring-Shiro 1.3.2
Mybatis 2.1.0
Mybatis-Plus 3.2.0

wechat-app小程序前端:

Name Version
uni-app 2.7.9
thorui 1.5.0
luch-request 3.0.2
uni-simple-route 1.8.4

目录结构

wechat-api

源码:https://github.com/TyCoding/wechat-template/tree/master/wechat-api

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
└── src
├── main
│ ├── java
│ │ └── cn
│ │ └── tycoding
│ │ ├── Application.java
│ │ ├── biz
│ │ │ ├── controller -- 控制层
│ │ │ ├── entity -- 实体类
│ │ │ ├── mapper -- Mybatis映射接口
│ │ │ └── service -- 业务层
│ │ └── common -- 公共层
│ │ ├── auth -- Shiro鉴权相关
│ │ ├── config -- 项目配置相关
│ │ ├── constants -- 项目公共常量
│ │ ├── controller -- 控制层公共方法提取
│ │ ├── exception -- 异常类
│ │ ├── handler -- 处理器类
│ │ ├── properties -- 框架配置参数
│ │ └── utils -- 工具类
│ └── resources
│ ├── application-dev.yml -- 开发环境配置
│ ├── application-prod.yml -- 生产环境配置
│ ├── application.yml -- 项目基础配置
│ ├── mapper -- Mybatis接口映射XML文件
│ └── tycoding.properties -- 项目自定义参数配置

wechat-app

源码:https://github.com/TyCoding/wechat-template/tree/master/wechat-app

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
├── App.vue			-- 小程序入口(Vue)
├── api -- 项目接口方法(对URL、Params的统一封装,仅需调用其下的方法便可发送请求)
│ └── user.js -- 用户层接口(建议命名和后端Controller对应)
├── common -- 通用文件
├── components -- 组件,HBuilderX新版支持easycom模式:无需手动引入组件仅需按照目录格式
├── config.js -- 项目配置(包含了项目生产环境和开发环境BaseURL配置)
├── main.js -- 项目入口
├── manifest.json -- 应用配置
├── pages -- 页面(vue组件)
│ ├── common -- 通用层页面
│ └── tabbar -- 小程序底部tarbar对应页面
├── pages.json -- 页面属性配置、编译配置
├── permission.js -- 路由守卫,页面Router将被路由守卫拦截处理(判断token是否失效等)
├── router -- 页面路由相关配置,页面的路由path需要和pages.json相对应
│ └── index.js
├── static -- 静态文件
├── store -- vuex相关store缓存配置
│ ├── getters.js -- 定义getters,用于获取store中的参数属性
│ ├── index.js -- Vuex声明、定义
│ └── modules -- 具体需要缓存的数据对象
└── utils -- 工具类
├── auth.js -- 管理Token
├── request.js -- 全局请求封装
└── util.js -- 一些方法的封装

文档

项目文档将在公众号:程序员涂陌 中陆续发布。首先作为后端程序员我们要先阅读微信小程序相关文档:

Tips

由于本人是做后端的,所以本小程序中服务端接口全部由wechat-api项目提供,请各位开发者把重点放在学习该项目是如何封装的、以及数据是如何交互的,这是核心。Uni-app最大的优势就是基于Vue实现,熟悉了Vue则对用Uni-app开发小程序也会很快熟悉;需要提各位,Uni-app框架与HBuilder软件是捆绑的,HBuilder的版本号即是Uni-app框架的版本号,而只能通过HBuilder编译uni-app项目,最后微信开发者工具上预览小程序界面。

以上是对 https://github.com/TyCoding/wechat-template 项目的介绍,后续公众号会陆续发布该项目各个功能模块的实现逻辑,请大家持续关注~~


交流

QQGroup:671017003

WeChatGroup: 关注公众号查看

联系

TyCoding wechat
欢迎关注公众号:程序员涂陌
如果你觉得这篇文章帮助到了你,你可以帮作者买一杯果汁表示鼓励

TOP