# VocalAdmin

**Repository Path**: tecms/vocal-admin

## Basic Information

- **Project Name**: VocalAdmin
- **Description**: 基于ThinkPHP6 Vue3.4 JavaScript Vite5.2的前后端分离项目 低门槛！
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 15
- **Forks**: 5
- **Created**: 2024-10-15
- **Last Updated**: 2025-08-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: tp6, Vue, JavaScript, vite, Ant-Design

## README

## Vocal Admin 

#### 基于ThinkPHP6 Vue3.4 Vite5.2的前后端分离项目
仅包含基础（按钮级）权限控制的一个干净的前后端分离项目
#### 设计初衷
在当今的开发环境中，前后端分离已成为一种趋势，它不仅提高了开发效率，还促进了技术的模块化和可维护性。然而，对于那些刚入门的开发者来说，涉足前后端分离项目，特别是在使用 TypeScript (TS) 时，可能会遇到一系列挑战。这些挑战包括但不限于对新技术的学习曲线、项目结构的复杂性，以及权限控制等高级功能的实现难度。

Vocal Admin 诞生的初衷，正是为了解决这些问题。我们的目标是提供一个简洁、易于理解和使用的前后端分离项目模板，特别是对于那些不太熟悉 TypeScript 或前后端分离架构的新手开发者。通过使用当前流行的技术栈——ThinkPHP6、Vue3.4 和 Vite5.2，我们确保了项目不仅能够满足现代 web 开发的需求，而且也是新手友好的。

#### 为什么选择 Vocal Admin？
新手友好：Vocal Admin 旨在降低新手入门的门槛。我们通过提供清晰的文档、示例代码和最佳实践，帮助开发者快速上手和理解前后端分离项目的开发流程。
基础权限控制：我们理解权限控制是任何管理系统不可或缺的一部分。因此，Vocal Admin 包含了一个基础（按钮级）权限控制系统，使得开发者可以在此基础上进行扩展，以满足更复杂的业务需求。

#### Vocal Admin 将作为长期更新的项目
#### 2024-11-11更新说明
1.新增数据大屏
2.说明部署方式
3.新增个人信息页面
#### 下载
```
git clone https://gitee.com/tecms/vocal-admin.git
```
#### 后端部署说明
运行目录设置成```public```
提供后端```Apache伪静态```
```
<IfModule mod_rewrite.c>
 RewriteEngine on
 RewriteBase /
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteRule ^(.*)$ index.php?s=/$1 [QSA,PT,L]
 RewriteCond %{HTTP:Authorization} .
 RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
</IfModule>
```
提供后端```Nginx伪静态```
```
location ~* (runtime|application)/{
	return 403;
}
location / {
	if (!-e $request_filename){
	  
		rewrite  ^(.*)$  /index.php?s=$1  last;   break;
	}
}
```

后端进入到 ```backend``` 文件夹 将 ```.env.example``` 单独复制并且命名为 ```.env``` 在该文件中配置 数据库信息以及 jwt秘钥
将```sql文件夹下```的```vocaladmin.sql```文件导入到数据库中
执行
```
composer install
```
安装依赖
#### 前端部署说明
进入前端文件夹```frontend```
终端执行``` npm install ``` 
推荐node版本 ```16.20.0```
安装完成后执行```npm run dev```
访问```127.0.0.1:3100```

#### 前端伪静态处理
在放在nginx服务器中刷新出现404的情况放以下伪静态
```
location / {
    try_files $uri $uri/ /index.html;
}
```

#### 项目截图
![登录页](https://msimg.iamms.cn/2024/vocaladmin/1.png)
![账户管理](https://msimg.iamms.cn/2024/vocaladmin/2.png)
![角色管理](https://msimg.iamms.cn/2024/vocaladmin/3.png)
![权限编辑](https://msimg.iamms.cn/2024/vocaladmin/4.png)
![菜单管理](https://msimg.iamms.cn/2024/vocaladmin/5.png)