企业官网建设流程全解析

tp6-vue-admin：ThinkPHP6 + Vue 前后端分离后台管理落地方案

【免费下载链接】tp6-vue-admin基于thinkphp6+vue2.6+element2.13 前后端分离落地解决方案项目地址: https://gitcode.com/gh_mirrors/tp/tp6-vue-admin

tp6-vue-admin 是一套基于 ThinkPHP6、Vue 2.6 和 Element 2.13 的前后端分离落地解决方案：后端提供接口、权限与验证码能力，前端是一套现成的后台管理界面。适合刚接触前后端分离、想快速搭起一套带登录和权限的后台系统的初学者。

🚀 五分钟跑起前后端分离环境

项目没有提供 Docker 方式，但手动部署很直接，分后端、前端两步。

先跑后端：

1. 克隆仓库并安装 PHP 依赖：

git clone https://gitcode.com/gh_mirrors/tp/tp6-vue-admin cd tp6-vue-admin/tp6 composer install

2. 导入根目录的tp666.sql数据库文件（含管理员账号和权限规则数据），把config/database.php里的连接信息改成你自己的库：

// config/database.php 中改连接信息即可 'hostname' => '127.0.0.1', 'username' => 'root', 'password' => '你的密码', 'database' => 'tp666',

3. 启动后端：

php think run

再跑前端，切到vue-admin目录：

cd vue-admin npm install npm run serve

跑通后访问 http://localhost:8010 即可看到登录页，用账号admin、密码123456登录。前端开发代理指向http://127.0.0.1/index.php，所以后端要跑在默认 80 端口，代理规则在vue.config.js的proxy配置里。

这套后台管理系统能帮你做什么

它的价值不在炫技，而在于把后台管理常见的脏活累活提前做好了。

搭好带登录和权限的后台骨架

新做一套后台，最先头疼的就是登录和菜单权限，这套方案里管理員、角色、规则三套增删改查页面已经就位。

• 登录后签发 JWT 令牌，之后每个请求带x-access-token请求头，由app/middleware/CheckAdmin.php统一校验身份和有效期
• 菜单按后端权限规则动态加载，前端路由随之配置，你不用手写菜单
• vue-admin/src/views/manage/下就是现成的管理页，改字段就能变成你自己的

封装增删改查和文件上传

重复 CRUD 是后台代码的大头，这里前后端都把这部分收敛了。

• 后端按 model、repository、service、controller 四层分工，各层公共方法沉淀在app/traits/里
• 文件上传支持本地存储和阿里云 OSS 两种方式
• 前端封装了搜索、表格、分页、表单这一套通用组件，做个新列表页主要是配字段

处理好验证码和登录安全

登录安全这块它也做了完整闭环，不用你从零想方案。

• 登录验证码基于think-captcha组件改造，验证码存 Redis，使用前确保 Redis 服务可用
• 令牌有效期由config/system.php里的user_login_time控制，过期自动要求重新登录
• 错误码统一收敛在config/error.php，前端按码提示，不会出现文案满天飞

技术底牌

• 后端：ThinkPHP 6（PHP 7.1+），单应用模式，注解路由
• 前端：Vue 2.6 + Element-UI 2.13 + Vuex + Vue Router + axios
• ORM：think-orm 2.x
• 认证：firebase/php-jwt 签发和校验令牌
• 扩展：think-queue 队列、think-throttle 限流、阿里云 OSS SDK

它最值得看的地方是后端那套四层拆分：数据操作只允许走app/repository/，业务逻辑放app/service/，控制器只接参数、整合调用，官方也明确不建议跨层调用。这个约定对初学者很友好，业务变复杂时你能清楚知道该动哪一层。

换个真实项目里怎么用

场景一，你要新开一套后台。作为开发者，你克隆仓库、导入数据库，当天就能登录进系统；权限模块原样保留，文章、栏目这类示例业务可以删掉，自己的业务照 model、repository、service、controller 的路子新建四份文件，配好注解路由就会自动出现在菜单里。

场景二，前后端分人协作。作为前端，你不用等后端把接口全做完：项目的接口规则和动态路由是两边按约定对接的，后端出一批接口，前端就能连上逐页开发；遇到没配置的路由或没有权限的地址，就会落到 404 页面。

调优与进阶

• 如果生产环境和开发环境库不一样，建议把config/database.php里的连接信息改成按环境变量读取，避免每次部署手改
• 前端接口地址只有两处：.env.development的VUE_APP_BASE_API和vue.config.js的proxy.target，切换环境时只动这两个地方
• 如果你的团队规模更大、登录并发更高，注意验证码依赖 Redis，给 Redis 留足内存并配置持久化

周边生态与社区

作者已把后续开发转到新项目 HardAdmin（ThinkPHP6 + Vue3 + Element Plus），本仓库标注为停止维护，更适合作为学习和参考用途；如果你团队要新开工且用 Vue3，可以优先看新项目。这里发现疑问或想提建议，直接到仓库页面提一个 Issue 就行，有空可以去看看。

写在最后

回到开头那个问题：想快速搭一套带登录、权限、CRUD 的前后端分离后台，不用从零写起，按上面的步骤把它跑通，再照着示例模块换成自己的业务就行。现在就可以动手跑一遍试试。

想看一个接口从路由到返回值的完整写法，翻tp6/app/controller/下的控制器层代码最直观。

【免费下载链接】tp6-vue-admin基于thinkphp6+vue2.6+element2.13 前后端分离落地解决方案项目地址: https://gitcode.com/gh_mirrors/tp/tp6-vue-admin