架构说明
前后端分离架构说明
前后端分离几乎已经成为互联网项目开发的业界标准;可以实现真正的前后端解耦, 前端服务器采用诸如Nginx等Web服务器,其中存放的是css,js等静态资源,负责页面路由 引用、跳转等操作,前端页面异步调用后端接口;后端服务器提供接口和业务逻辑的实现;
- Simplest Admin V2 (后台管理系统) 采用前后端分离的开发架构;
- 后端为Thinkphp6项目
- 前端为Vue2项目(ui)
目录结构
Simplest Admin V2 (后台管理系统)后端目录结构完全以Thinkphp官方约定为标准;前端目录完全以Vue默认结构为标准;
// Simplest Admin V2 (后台管理系统) 目录结构
|-- .example.env // 环境配置示例文件
|-- .gitignore // git 配置文件
|-- composer.json // Composer 配置文件
|-- data.sql // 初始化数据文件
|-- readme.md // 项目介绍文件
|-- think // 命令行控制台入口
|-- app // 应用目录
| |-- AppService.php // 应用服务类
| |-- BaseController.php // 默认基础控制器类
| |-- common.php // 全局公共函数文件
| |-- event.php // 全局事件定义文件
| |-- ExceptionHandle.php // 应用异常定义文件
| |-- middleware.php // 全局中间件定义文件
| |-- provider.php // 服务提供定义文件
| |-- Request.php // 应用请求对象
| |-- service.php // 系统服务定义文件
| |-- admin // admin 应用目录
| | |-- common.php // 公共函数文件
| | |-- event.php // 事件定义文件
| | |-- middleware.php // 中间件定义文件
| | |-- config // 配置目录
| | |-- controller // 控制器目录
| | | |-- Admin.php // 控制器基础类
| | | |-- Base.php // 公共类
| | | |-- Home.php // 仪表盘控制器
| | | |-- Index.php // 首页入口控制器
| | | |-- Login.php // 登录
| | | |-- Upload.php // 上传
| | | |-- Uploadconfig.php // 上传配置
| | | |-- Admin // Admin模块
| | | | |-- Chart.php // 图表
| | | | |-- Config.php // 基础配置
| | | | |-- Dept.php // 部门
| | | | |-- Log.php // 日志
| | | | |-- Role.php // 角色
| | | | |-- Statisic.php // 统计示例数据
| | | | |-- User.php // 用户
| | | |-- Sys
| | | |-- Base.php // 菜单管理
| | | |-- Config.php // 配置
| | | |-- middleware // 中间件
| | | |-- model // 模型
| | | |-- service // 服务
| | | |-- validate // 验证器
| | |-- model
| | | |-- AdminToken.php // 登录Token管理模型
| | | |-- Files.php // 上传的文件模型
| | | |-- Upload.php // 上传模型
| | | |-- Uploadconfig.php // 上传配置模型
| | | |-- Admin // admin 模块
| | | | |-- Chart.php // 图表
| | | | |-- Config.php // 基础配置
| | | | |-- Dept.php // 部门
| | | | |-- Log.php // 日志
| | | | |-- Role.php // 角色
| | | | |-- Statisic.php // 统计示例数据
| | | | |-- User.php // 用户
| | |-- route // 路由
| | | |-- route.php // 路由配置
| | |-- validate // 验证器目录
| | | |-- Upload.php // 上传
| | | |-- Uploadconfig.php // 上传配置
| | | |-- Admin // admin 模块
| | | | |-- Chart.php // 图表
| | | | |-- Config.php // 基础配置
| | | | |-- Dept.php // 部门
| | | | |-- Log.php // 日志
| | | | |-- Role.php // 角色
| | | | |-- Statisic.php // 统计示例数据
| | | | |-- User.php // 用户
| |-- api // api 应用
| |-- apidoc.json // 文档配置文件
| |-- common.php // 公共函数文件
| |-- config // 配置目录
| |-- controller // 控制器目录
| |-- middleware // 中间件目录
| |-- route // 路由目录
| |-- view // 视图目录
|-- config // 全局配置目录
|-- extend // 第三方工具类
|-- public // WEB目录(对外访问目录)
|-- ui // Vue 前端应用目录
|-- package.json // 包依赖信息
|-- README.md // 项目说明
|-- vue.config.js // 配置文件
|-- public // 静态文件
|-- src // 源码目录
|-- App.vue // 页面入口
|-- main.js // 程序入口
|-- permission.js // 权限判断函数
|-- settings.js // UI默认设置
|-- api // jsapi目录
|-- assets // 静态资源目录
|-- components // 公共组件
|-- layout // 布局定义
|-- mixin // 混入文件
|-- router // 路由配置
|-- store // 状态管理
|-- utils // 自定义工具
|-- views // 路由组件
|-- admin // admin 应用目录
| |-- admin // admin 模块
| | |-- chart // 图表组件
| | |-- config // 基础配置组件
| | |-- dept // 部门管理组件
| | |-- log // 日志管理组件
| | |-- role // 角色管理组件
| | |-- statisic // 统计数据
| | |-- user // 用户管理
| |-- base // base 模块
| |-- sys // 系统模块
| |-- uploadconfig // 上传配置组件
|-- error // 错误目录
|-- 404.vue // 404
多应用
Simplest Admin V2 (后台管理系统)采用Thinkphp多应用结构,系统默认创建了两个应用:
- admin 应用是进行基础功能管理和业务开发的应用,已经建立好了几个基础的功能模块;
- api 应用不是必须的,是可以删除并重建的,主要用于演示为一些前端(app,小程序)提供接口的测试和开发;
源码阅读核心提示
Simplest Admin V2 (后台管理系统) 源码结构总体来讲非常简单,主要分为两部分: 后端Thinkphp项目源码和前端Vue项目源码,其中有些经常被问到的文件列在下面:
- 登录页后端控制器:admin/controller/Login.php
- 登录页前端组件:ui/src/views/admin/base/login.vue
- 登录后首页控制器:admin/controller/Home.php
- 登录后首页前端组件:ui/src/views/admin/base/home.vue
- 后端JWT验证的原理:admin/controller/Admin.php
- 系统内置菜单控制器目录:admin/controller/Admin
- 前端请求拦截器及JWT适配:ui/src/api/request.js
- 前端UI布局:ui/src/layout