tp6-vue-admin用 ThinkPHP 6 Vue 搭一套前后端分离后台权限模型直接可用【免费下载链接】tp6-vue-admin基于thinkphp6vue2.6element2.13 前后端分离落地解决方案项目地址: https://gitcode.com/gh_mirrors/tp/tp6-vue-admintp6-vue-admin 是基于 ThinkPHP 6 Vue 2.6 的前后端分离落地方案后端是纯接口服务前端是带动态菜单的管理界面。当需求是「做个前后端分离的后台」时首先要拍板的问题往往是菜单和权限怎么管、每个请求怎么验证身份。这个项目把这套问题给出了参考实现。跑起来在本地启动项目先克隆仓库。顶层是两个独立工程tp6是后端vue-admin是前端git clone https://gitcode.com/gh_mirrors/tp/tp6-vue-admin cd tp6-vue-admin后端要求 PHP 7.1 和 Composer。装完依赖后导入随仓库附带的tp6/tp666.sql再把tp6/.example.env复制为.env填好[DATABASE]一节的本地数据库凭据cd tp6 composer install php think runphp think run用框架内置服务器跑默认监听 8000 端口Web 根目录是tp6/public用 nginx 的话直接指向这个目录即可。前端对环境版本有要求package.json里的node-sass4.13 需要 Node 14README 推荐 14.18.1Node 16 以上直接装会报错。cd vue-admin npm install npm run serve开发服务器默认起在 8010 端口vue.config.js里的proxy会把请求转发到后端http://127.0.0.1/index.php不需要自己处理跨域。打开浏览器访问http://localhost:8010应该看到一个带验证码的登录页输入 admin / 123456登录后左侧出现文章管理和权限管理菜单说明前后端链路已经通了。核心工作流从新增一个管理模块走一遍完整周期以「加一个管理模块」为例完整周期分五步每步对应 tp6-vue-admin 的一个机制。定义接口后端用注解路由topthink/think-annotation不需要在route/app.php里写路由。在app/controller/admin下加控制器方法上声明路由业务按四层结构model → repository → service → controller分步写model 关联数据表repository 只做数据访问service 组合业务逻辑controller 收参数、做校验、调 service。分层的目的是代码复用所以不建议跨层或平层调用。挂菜单与权限规则接口写完后前端路由代码不用动。往auth_rule表加一条菜单规则或按钮级规则再通过auth_group分给对应的管理员分组。重新登录后前端通过接口拉取权限规则实时生成左侧菜单和动态路由。也就是说你在浏览器里看到的菜单来自数据库而不是代码动态菜单让权限和页面代码解耦。写前端页面在vue-admin/src/views下新建模块目录列表页和表单页各一个文件。现有的views/article模块可以直接抄列表页包含搜索、表格、分页、表单四块接口地址统一加到src/api。页面挂到对应菜单下请求经代理打到后端。接口认证与签名管理端每个请求都过CheckAdmin中间件前端 axios 拦截器统一带上x-access-tokenJWT 令牌中间件解出令牌、校验登录有效期、再拉一次管理员最新状态。漏带令牌会拿到错误码 11101前端统一跳登录页。用户端api控制器还多一层全局CheckSign签名校验签名 key 和白名单在tp6/config/system.php。错误文案统一在config/error.php定义禁止代码里直接写死字符串前端只需按status和code提示。发布在vue-admin下执行npm run build产物输出到backend目录把它放进tp6/public就等于让后端域名托管前端跨域问题随之消失。认清技术栈与项目结构ThinkPHP 6.0后端框架单应用模式注解路由减少路由文件维护成本topthink/think-orm MySQL数据访问初始化脚本tp666.sql随仓库附带firebase/php-jwt无状态登录令牌管理端不维护会话topthink/think-queue短信发送这类异步任务Vue 2.6 Element UI 2.13管理界面与请求封装Vue CLI 4 node-sass 4.13构建链也是 Node 14 版本限制的来源目录结构记住四处就够tp6/app/controller分admin和api两组前者面向管理端后者面向用户端tp6/app下按 model、repository、service 三层组织vue-admin/src/api集中管理接口地址vue-admin/src/views是页面一个模块一个目录列表页加表单页。配置与定制大概率要改的三个地方本地开发时关键是vue.config.js的proxy.target指向本地后端入口http://127.0.0.1/index.php同时.env.development里VUE_APP_BASE_API保持空字符串。这样请求经 dev server 转发前后端在浏览器看来同域。前后端分离部署时前端独立部署把.env.production的VUE_APP_BASE_API改成后端真实地址如http://api.example.com/index.php再执行npm run build。注意vue.config.js的publicPath是/backend/静态站部署到域名根目录时要同步改成/。上线前加固后端.env里已经放了数据库凭据tp6/config/system.php的jwt_secret_key、pass_salt、app_sign_key三个值都是示例值生产环境务必更换user_login_time可按业务调整令牌有效期。登录验证码基于think-captcha存储依赖 Redis用验证码就要保证 Redis 可用。两个典型团队怎么用两人小团队做内容型站点后台如果你们是 1 前端 1 后端需求是管理文章、栏目和评论可以直接拿 tp6-vue-admin 当底仓库自带的article模块就是完整的增删改查加菜单规则、权限分组替换数据表和字段就能用登录、验证码、文件上传、操作日志都是现成的。权限管理界面管理员、角色、规则三张表也开箱即用「谁能看什么」这部分不用自己写。已有接口项目想补一个管理端如果你手上已经有一套 ThinkPHP 接口服务只是想挂个管理界面可以拆开用把vue-admin独立跑起来VUE_APP_BASE_API指向你自己的后端地址再把src/api和动态路由规则适配成你的接口结构或者反过来只参考tp6/app的四层结构和 JWT 认证写进老项目。README 里专门写了这种用法先整体跑起来再逐处改成自己的规则。已知限制与下一步仓库 README 开头明确写着本项目已停止维护作者转向了基于 ThinkPHP 6 Vue 3 的新项目选它当长期底座要留意这一点。另外两个实际限制前端构建链锁在 Node 14与当前主流 Node 版本不兼容数据库只有tp666.sql一套初始化脚本业务表和权限规则需要自己建。问题反馈和修改提交都在仓库的 issue 与 PR 区。动手改造前建议先通读tp6/app的四层代码和 README 里的目录说明这两处基本覆盖了项目的所有约定。【免费下载链接】tp6-vue-admin基于thinkphp6vue2.6element2.13 前后端分离落地解决方案项目地址: https://gitcode.com/gh_mirrors/tp/tp6-vue-admin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考