React + SpringBoot 的后台管理系统

1,121 阅读1分钟

前言

        去年公司项目被砍,为了保留一点火种,所以基于之前的框架与技术,重新编码实现一个后台管理系统的基础模版。最初的想法是,如果自己工作不顺,出去接私活,有个基础的开发框架,可能会比较顺手。

基本简介

        Asany 是一个基于 React + SpringBoot + GraphQL 的后台系统, UI 主要是基于 `themeforest.net/\` 上购买的一个基于 bootstrap 的模版,所以有比较多的自定义组件封装。

在线预览地址  测试用户 admin/12345678

目前版本前端基于React1.8 + Apollo GraphQL ,使用 umi3 构建

目前版本后端基于SpringBoot 2.7.0 + JDK1.8 ,使用 Gradle 构建

目前实现功能

- 登录 / 注销

- 后台基本布局
  - 自定义侧边栏

- 应用管理
  - 菜单管理
  - 路由管理

- 日程
- 邮件
- 网盘
- 通讯录
- 个人中心
  - 修改密码
  - 修改个人信息

- 组织管理

系统截图

快速部署

推荐使用 docker-compose 部署,因为我就是这样弄的

version: '3.3'
services:

  admin:
    image: limaofeng/asany-admin:v0.2.30
    ports:
      - 8002:80
    restart: always

  web:
    image: limaofeng/asany-web:v0.2.24
    ports:
      - 8001:80
    restart: always
    
  db:
    image: mysql:5.7
    ports:
      - '3306:3306'
    volumes:
      - db-data:/var/lib/mysql
    restart: always
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --lower_case_table_names=1
    environment:
      MYSQL_ROOT_PASSWORD: ******
      
  redis:
    image: redis
    command: redis-server --requirepass ******
    ports:
     - "6379:6379"
    volumes:
     - redis-data:/var/lib/redis
     
  server:
    depends_on:
      - db
      - redis
    links:
      - db
      - redis
    image: limaofeng/asany-server:v0.1.28
    ports:
      - 8000:8080
    restart: always
    environment:
      spring.profiles.active: prod
      DATABASE_USERNAME: root
      REDIS_HOST: redis
      REDIS_PASSWORD: ******
      DATABASE_PASSWORD: ******
      DATABASE_INSTANCE_NAME: asany
      DATABASE_HOST: db


volumes:
  db-data:
  redis-data:

总结

该项目为业余时间开发,一些具体的技术实现细节,会在之后补充。如果对某些实现细节有兴趣或者的,也可以留言告诉我。

项目地址: 前端后端