推荐Web-Flash：基于Spring Boot和Vue.js开发的全栈Web系统，包含Element搭建的后台管理系统和Vux搭建的手机端H5站点，提供完整的前后端解决方案。

本文档以向导的方式引导用户使用web-flash系统做二次开发， web-flash项目本身有readme文件，如果你有丰富的spring boot的和vuejs的开发经验，那么基本上你是用不上本文档了， 有什么问题直接看代码即可。大多数功能都可以参考代码，即使找不到的google和百度也能帮到你。

但是考虑到有的开发者可能初次使用上述组件，有的甚至刚接触java不久，那么本文当将引导你一步步使用本系统搭建一个后台管理系统，并在此基础上做二次开发。

版本说明

web-flash提供了一个后台管理系统和前端h5站点系统

web-flash是一个基于Spring Boot和Vue.js的web系统，包含了基于element搭建的后台管理系统和基于vux搭建的手机端h5站点

web-flash具备后台管理类系统的通用的基础功能，而且提供了基于idea intellij的的代码生成插件，可以一键生成后台代码(service,dao,controller)和管理系统(flash-vue-admin)的前端界面。

目录说明

flash-api 后台api服务

flash-vue-admin 基于vuejs的前端界面

flash-vue-h5 移动端内容系统，基于后台管理CMS内容管理模块的内容进行展示。

flash-core 基础模块，包括工具类，dao，service，bean等内容

flash-generator 代码生成模块，IDEA插件需要配合该模块进行代码生成，如果在代码生成方面你有什么特殊需求，可以直接调整该模块

演示

后台管理(vue版本) http://flash-admin.enilu.cn

手机端 http://flash-mobile.enilu.cn/#/index 打开浏览器后使用debug模式的手机视图模式浏览

建议 开发之前先将上面两个演示系统的功能查看一遍，这样后续开发可以知道参考哪些功能;演示系统为方便演示给出的权限比较大。过程中请请温柔操作，不要随意删改关键数据。

技术选型

核心框架：Spring Boot 2

数据库层：Spring data jpa

权限认证：Shiro+Jwt

数据库连接池：Druid

缓存：Ehcache

前端：基于Vue.js的element和vux

包含的功能

web-flash包含了成熟的后台管理功能和手机端h5内容站点系统

部门管理

用户管理

角色管理

菜单管理：配置菜单功能

权限分配：为指定的角色配置特定的功能菜单

参数管理：维护系统参数，并缓存系统参数提供高效的读取

数据字典管理：配置维护数据字典

定时任务管理：编写、配置、执行定时任务

业务日志：通过注解的方式记录用户操作日志，并提供日志查询功能

登录日志：查看用户登录登出日志

cms内容管理，配合flash-vue-h5提供了手机端内容展示系统

消息管理：配置消息模板，发送短信，邮件消息

基于idea插件的代码生成

使用

克隆本项目

导入idea或者eclipse

创建数据库：webflash

在开发环境中配置了系统启动后自动创建数据库和初始化数据，所以不需要开发人员手动初始化数据库

确保开发工具下载了lombok插件

修改flash-api中数据库连接配置

启动flash-api，访问http://localhost:8082/swagger-ui.html，保证api服务启动成功

进入flash-vue-admin目录

运行 npm install --registry=https://registry.npm.taobao.org 安装依赖

运行npm run dev 启动项目

启动成功后访问 http://localhost:9528.登录，用户名密码:admin/admin

进入flash-vue-h5目录

运行 npm install --registry=https://registry.npm.taobao.org

运行npm run dev

启动成功后访问 http://localhost:8088/#/index

手机端运行效果图：

#在线文档

http://enilu.github.io/web-flash

国内加速版：http://enilu.gitee.io/web-flash

#交流

Bugs: Issues

Gitter: Gitter channel

QQ:752844606

也欢迎你给该项目点个赞：

Github:https://github.com/enilu/web-flash

Gitee: https://gitee.com/enilu/web-flash

前台演示图：

开发前必读

本章介绍本书所需要的一些准备工作. 请确保把各部分的准备工作完成

本文档基于Intellij IDEA,Mysql,Maven，JDK8这四个基本工具， 当然你也可以用Eclipse开发工具。

Jdk

请选用当前最新的版本,根据平台选用X64或X86版本的JDK8.并妥善安装

JDK最低版本要求1.8

MySQL

Mysql官网

下载页面, 选用5.6以上系列的版本

妥善安装,并配置账号密码

Intellij IDEA

Intellij IDEA官网

下载页面

请自行下载安装合适版本的IDEA(或者eclipse)

Lombok

Lombok是一个可以通过简单的注解形式来帮助我们简化消除一些必须有，但显得很臃肿的Java代码的工具，通过使用对应的注解，可以在编译源码的时候生成对应的方法。

本系统用通过给实体类增加@Data注解让给实体类自动生成setter，getter方法。

开发之前需要安装开发工具对应的Lombok插件

添加新的实体的时候要在类名上增加@Data注解。

Maven -下载页面

Tomcat -如果在tomcat中部署，要求至少Tomcat8及其以上版本

基本包结构

本节详细说明本项目的基本目录结构

#web-flash模块

web-flash包含5个核心模块：

flash-api 后台api服务,为vue-admin和vue-h5提供后台数据接口。个人小建议：如果前后端项目不复杂，可以前后端项目共用这么一个api服务，如果业务比较复杂，建议前后端的api服务分拆开来：后台管理一个api服务，手机端系统一个api服务。

flash-vue-admin 基于Vue.js的后台管理的界面系统

该模块克隆自：vue-admin-template，感谢PanJiaChen，欢迎大家给他点赞。

PanJiaChen老师提供了全面详细的文档，开发过程可以参考这里：vue-elment-admin官方文档

flash-vue-h5 移动端内容系统，基于后台管理CMS内容管理模块的内容进行展示。基于vux开发

flash-core 基础模块，包括工具类，dao，service，bean等内容

flash-generator 代码生成模块，配合IDEA Intellij的代码生成插件：webflash-generator可以根据实体类一键生成前后端代码。方便快速开发

克隆本项目

本项目地址为：https://github.com/enilu/web-flash,如果对你有用，欢迎给个star

如果访问github有困难，可以访问gitee地址:https://gitee.com/enilu/web-flash;不用担心，这两个地址的项目代码是一致的，不存在代码和功能的差异。 项目共三个分支分别为：

master 项目主分支：稳定版

develop 开发分支：一些新功能或者实验性功能会先在该分支开发，不稳定

gh-pages 项目在线文档

进入控制台输入以下命令将项目克隆到本地：

git clone https://github.com/enilu/web-flash.git

或者

git clone https://gitee.com/enilu/web-flash.git

初始化数据

本系统使用mysql数据库

在mysql中创建数据库 webflash

CREATE DATABASE IF NOT EXISTS `webflash` DEFAULT charset utf8 COLLATE utf8_general_ci;

启动项目的时候会自动创建数据库并初始化系统数据，所以无需自己初始化数据

本系统通过Spring Boot的配置：spring.jpa.hibernate.ddl-auto=create 来初始化数据库，建议在生产环境中去掉该配置以避免将关键业务数据删除掉。

初始化语句为:src/main/resources/import.sql，当配置spring.jpa.hibernate.ddl-auto=create的时候，系统启动会自动执行该语句初始化测试数据。

如果你是个传统的人;就是想要数据库文件，用传统的方式初始化数据库，点击这里database.sql，强烈不建议使用这种方式，因为本人可能不是那么及时的更新这个文件导致一些问题。

配置项目

你已经下载项目，并且初始化好了数据库，那么接下来只需要更改相应的配置就可以运行该项目了

更改src/resources/application-dev.properties配置：

## 开发环境配置，根据实际情况调整数据库连接信息

spring.datasource.url=jdbc:mysql://localhost:3306/web-flash?useUnicode=true&characterEncoding=UTF8

spring.datasource.username=root

spring.datasource.password=root

## 系统启动自动创建数据库和导入测试语句

spring.jpa.hibernate.ddl-auto=create

启动项目

#启动flash-api

右键直接运行cn.enilu.flash.api.ApiApplication 类即可已启动flash-api

启动成功后访问http://localhost:8082/swagger-ui.html 

#启动flash-vue-admin

本项目使用Node.js，请保证妥善安装了Node.js

进入flash-vue-admin目录

命令行窗口运行 npm install --registry=https://registry.npm.taobao.org

运行 npm run dev

启动成功后访问 http://localhost:9528.登录，用户名密码:admin/admin 

#启动flash-vue-h5

启动步骤和flash-vue-admin类似

进入flash-vue-h5目录

运行 npm install --registry=https://registry.npm.taobao.org

运行npm run dev

启动成功后访问 http://localhost:8088/#/index

so，是不是很简单!

基本包结构

本节详细说明本项目的基本目录结构

#web-flash模块

web-flash包含4个模块：

flash-api api服务(web服务)

flash-core 核心库(dao,service,util)

flash-generator 代码生成模块

flash-vue-admin 后台管理前端界面

flash-vue-h5 手机端cms系统前端界面

具体每个包里的细节不详细介绍，开发人员可以在使用过程中了解，本身代码量并不大，了解起来不需要花费太多时间。

这里仅详细说明下flash-api的内部结构，毕竟日常开发主要是基于该模块来做的。

#flash-api

flash-api是一个标准的是后台数据接口服务

目录结构包含：

src/main/java java源码

src/main/resources 配置文件 这里介绍下web-flash的基本目录和开发流程

#src/main/java/ 源代码

目录结构如下所示：

config 该package 包含项目支持各种特性的相关配置。例如：

跨域配置

json配置

EhCache缓存配置

支持swagger在线文档的配置

审计功能配置

权限配置

controller 控制层

interceptor 拦截器

utils api相关工具类