一.介绍


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就完成了。
Logo

前往低代码交流专区

更多推荐