tp6-vue-adminThinkPHP6 Vue 前后端分离后台管理落地方案【免费下载链接】tp6-vue-admin基于thinkphp6vue2.6element2.13 前后端分离落地解决方案项目地址: https://gitcode.com/gh_mirrors/tp/tp6-vue-admintp6-vue-admin 是一套基于 ThinkPHP6、Vue 2.6 和 Element 2.13 的前后端分离落地解决方案后端提供接口、权限与验证码能力前端是一套现成的后台管理界面。适合刚接触前后端分离、想快速搭起一套带登录和权限的后台系统的初学者。 五分钟跑起前后端分离环境项目没有提供 Docker 方式但手动部署很直接分后端、前端两步。先跑后端克隆仓库并安装 PHP 依赖git clone https://gitcode.com/gh_mirrors/tp/tp6-vue-admin cd tp6-vue-admin/tp6 composer install导入根目录的tp666.sql数据库文件含管理员账号和权限规则数据把config/database.php里的连接信息改成你自己的库// config/database.php 中改连接信息即可 hostname 127.0.0.1, username root, password 你的密码, database tp666,启动后端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 6PHP 7.1单应用模式注解路由前端Vue 2.6 Element-UI 2.13 Vuex Vue Router axiosORMthink-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 留足内存并配置持久化周边生态与社区作者已把后续开发转到新项目 HardAdminThinkPHP6 Vue3 Element Plus本仓库标注为停止维护更适合作为学习和参考用途如果你团队要新开工且用 Vue3可以优先看新项目。这里发现疑问或想提建议直接到仓库页面提一个 Issue 就行有空可以去看看。写在最后回到开头那个问题想快速搭一套带登录、权限、CRUD 的前后端分离后台不用从零写起按上面的步骤把它跑通再照着示例模块换成自己的业务就行。现在就可以动手跑一遍试试。想看一个接口从路由到返回值的完整写法翻tp6/app/controller/下的控制器层代码最直观。【免费下载链接】tp6-vue-admin基于thinkphp6vue2.6element2.13 前后端分离落地解决方案项目地址: https://gitcode.com/gh_mirrors/tp/tp6-vue-admin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
