一.介绍

---

web-flash是一个基于Spring Boot和Vue.js的web系统，包含了基于element搭建的后台管理系统和基于vux搭建的手机端h5站点
web-flash具备后台管理类系统的通用的基础功能，而且提供了基于idea intellij的的代码生成插件，可以一键生成前后端页面。
web-flash提供了一个后台管理系统和前端h5站点系统
另提供Material Design风格的单体版：material-admin

官方文档：http://blog.enilu.cn/web-flash/base/preface.html

一.启动项目

---

1.从github 上拷贝项目

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

2.修改flash-api 更改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

3.初始化数据

• 启动项目的时候会自动创建数据库并初始化系统数据，所以无需自己初始化数据
• 本系统通过Spring Boot的配置：spring.jpa.hibernate.ddl-auto=create 来初始化数据库，建议在生产环境中去掉该配置以避免将关键业务数据删除掉。
• 初始化语句为:src/main/resources/import.sql，当配置spring.jpa.hibernate.ddl-auto=create的时候，系统启动会自动执行该语句初始化测试数据，建议之后把配置关掉，避免数据被删除。

4.启动项目

1. 启动后端：cn.enilu.flash.api.ApiApplication.java

2. 启动管理后台：

   • 进入flash-vue-admin目录
   • 命令行窗口运行 npm install --registry=https://registry.npm.taobao.org
   • 运行 npm run dev
   • 启动成功后访问 http://localhost:9528,登录，用户名密码:admin/admin

二、配置自动生成crud

---

1.在数据库里建表

2.进入flush-core里，cn.enilu.flash.bean.entity下建实体类，实体类格式。

package cn.enilu.flash.bean.entity.test;
import cn.enilu.flash.bean.entity.BaseEntity;
import lombok.Data;
import org.hibernate.annotations.Table;
import javax.persistence.Column;
import javax.persistence.Entity;
    
@Entity(name = "t_test_boy") //实体类名
@Table(appliesTo = "t_test_boy", comment = "男孩") //表名
@Data //用于封装入参和返回参数和toString
public class Boy extends BaseEntity {
   @Column(columnDefinition = "VARCHAR(32) COMMENT '姓名'") //数据库对应字段
   private String name;
   @Column(columnDefinition = "INT COMMENT '年龄'")
   private Integer age;
   @Column(columnDefinition = "VARCHAR(12) COMMENT '生日'")
   private String birthday;
   @Column(name = "has_girl_friend", columnDefinition = "TINYINT COMMENT '是否有女朋友'")
   private Boolean hasGirFriend;
}

3.需要安装lombok和flash-generator 插件,lombok可以直接在idea插件库里搜索安装，flash-generator 可以在flash-generator/idea-plugin.jar，idea导入安装即可。

4.插件安装完成后，进入实体类，右键 Generator->web-flash-mvc，修改目录，然后点击OK。

5. 点击生成即可在对应目录下找到代码。后端代码在生成时填写目录的对应位置。前端代码在flash-vue-admin/src/views/下方

6.修改生成前端代码的bug。

• 一个是生成的vue文件里的引入js路径,少了一个.，应该是
• 另一个是生成的js 文件里, => 符号变成了 = > 符号，多了一个空格，需要全局替换一下。

7.在管理后台加上对应菜单目录

• 在系统管理/菜单管理，点击添加目录
  
• 注意两点，第一点是需要把跳转的配置在二级菜单，而一级菜单不做跳转。因为只有在组件为"layout"的菜单下的菜单，才会出现左边的导航栏。 第二点就是一级菜单的组件名称固定填"layout",二级菜单的组件才填跳转地址。

8.给登录用户加上权限。

• 在系统管理/角色管理里，选中角色后点击左上角的权限配置。然后在弹出的多选框里选中刚刚新增配置的菜单。

9.刷新页面后，就会出现对应的菜单配置了。

10.点击即可进入对应页面，到此自动生成crud就完成了。