脚本代码 分享 打印版本 举报 Josh v10.0- Laravel 后台管理模板 + 前端界面 + CRUD 功能 reishi 2024-01-11 101 0 60 项目简介"Josh" 是一款基于 Laravel 框架开发的用户友好型后台管理模板，它不仅提供了前端界面（Front End）组件，还集成了创建、读取、更新和删除（CRUD）功能的构建工具，使得开发者能够快速搭建具有数据操作能力的后台管理系统。该模板采用流行的 Bootstrap CSS 框架作为基础样式，并支持多个 Bootstrap 和 Material 设计版本。这意味着开发人员可以轻松地利用预设的主题和组件来定制化界面，同时保持响应式布局和跨设备兼容性。通过 Josh 提供的 GUI CRUD 构建器，开发者可以高效地生成处理数据库记录的各种操作页面，极大地减少了在常规任务上花费的时间和重复工作量。此外，这个模板默认包含了网站认证功能，方便实现用户的登录、注册以及权限管理等功能。在线演示https://demo.joshadmin.com/功能介绍用户界面组件：预设的页面布局（如仪表板、数据列表、详情页等）。响应式设计，适应不同设备屏幕尺寸。使用 Bootstrap 或 Material Design 提供丰富的 UI 组件，包括按钮、表单元素、导航菜单、通知提示等。权限与角色管理：多用户支持，包括管理员、普通用户等不同角色划分。权限控制机制，可自定义不同角色对各个模块和操作的访问权限。CRUD 功能生成器：通过图形化或代码辅助的方式快速构建创建（Create）、读取（Read）、更新（Update）、删除（Delete）操作。自动化处理数据库模型与前端表单之间的映射关系。数据管理：动态表格展示数据，支持排序、筛选、分页等功能。数据导入导出功能，例如 CSV、Excel 格式的文件处理。主题定制：可轻松切换或自定义主题颜色、字体样式等。国际化支持：内建多语言支持（i18n），方便开发多语言环境下的后台系统。日志记录与审计：记录用户活动、登录历史以及系统操作日志，便于追踪和分析。更多介绍请点击这里下载地址&安装方法 .dlepay-box{border:1px solid rgba(128,128,128,.28);border-radius:14px;padding:18px 20px;margin:18px 0;background:rgba(128,128,128,.06);box-shadow:0 6px 20px rgba(15,23,42,.05);font-size:14px;line-height:1.7;color:inherit} .dlepay-box.dlepay-free,.dlepay-box.dlepay-paid{border:1px solid rgba(34,197,94,.5);background:rgba(34,197,94,.09);box-shadow:none} .dlepay-head{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap} .dlepay-badge{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:rgba(15,118,110,.92);color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;white-space:nowrap} .dlepay-free .dlepay-badge,.dlepay-paid .dlepay-badge{background:rgba(22,163,74,.92)} .dlepay-head__text{flex:1;min-width:200px;font-size:14px;line-height:1.7;color:inherit} .dlepay-head__text b{color:#ef4444;font-size:16px} .dlepay-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px} .dlepay-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 18px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;border:1px solid transparent;transition:transform .15s ease,box-shadow .15s ease;font-family:inherit} .dlepay-btn:active{transform:translateY(1px)} .dlepay-btn-primary{background:#1677ff;color:#fff;box-shadow:0 8px 18px rgba(22,119,255,.22)} .dlepay-btn-primary:hover{background:#0f62d9;color:#fff} .dlepay-btn-ghost{background:transparent;color:inherit;border-color:rgba(128,128,128,.42)} .dlepay-btn-ghost:hover{background:rgba(128,128,128,.14)} .dlepay-sub{margin-top:8px;font-size:12px;color:inherit;opacity:.62} .dlepay-note{margin-bottom:10px;font-size:13px;font-weight:700;color:#16a34a} .dlepay-content{margin-top:12px;padding:14px 16px;border:1px dashed rgba(128,128,128,.42);border-radius:10px;background:transparent} .dlepay-modal{position:fixed;left:0;top:0;right:0;bottom:0;z-index:99999;display:none;color:inherit} .dlepay-modal.is-open{display:block} .dlepay-modal__mask{position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(15,23,42,.55)} .dlepay-modal__dialog{position:relative;width:min(92vw,360px);margin:10vh auto 0;background:#fff;color:#0f172a;border-radius:16px;padding:22px 22px 18px;box-shadow:0 24px 60px rgba(15,23,42,.35);text-align:center} .dlepay-modal__title{font-size:16px;font-weight:800;color:#0f172a;margin-bottom:14px} .dlepay-modal__close{position:absolute;top:8px;right:12px;border:0;background:transparent;font-size:22px;line-height:1;color:#94a3b8;cursor:pointer} .dlepay-modal__close:hover{color:#0f172a} .dlepay-loading{font-size:13px;color:#94a3b8;padding:30px 0} .dlepay-qr{display:none;width:220px;height:220px;margin:0 auto;border-radius:10px;border:1px solid rgba(128,128,128,.3);background:#fff} .dlepay-status{margin-top:12px;font-size:13px;line-height:1.7;color:#334155;min-height:20px} .dlepay-status b{color:#ef4444;font-size:15px} .dlepay-ok{color:#16a34a;font-weight:700} .dlepay-err{color:#ef4444;font-weight:700} [data-theme="dark"] .dlepay-box{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.14);box-shadow:none} [data-theme="dark"] .dlepay-box.dlepay-free,[data-theme="dark"] .dlepay-box.dlepay-paid{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.45)} [data-theme="dark"] .dlepay-head__text b,[data-theme="dark"] .dlepay-status b,[data-theme="dark"] .dlepay-err{color:#f87171} [data-theme="dark"] .dlepay-ok{color:#4ade80} [data-theme="dark"] .dlepay-btn-primary{background:#2f81f7;box-shadow:none} [data-theme="dark"] .dlepay-modal__dialog{background:#1e2228;color:#e6e6e6;box-shadow:0 24px 60px rgba(0,0,0,.65)} [data-theme="dark"] .dlepay-modal__title{color:#f1f5f9} [data-theme="dark"] .dlepay-modal__close{color:#9aa4b2} [data-theme="dark"] .dlepay-modal__close:hover{color:#fff} [data-theme="dark"] .dlepay-loading{color:#9aa4b2} [data-theme="dark"] .dlepay-status{color:#cbd5e1} @media (max-width:480px){.dlepay-box{padding:14px}.dlepay-btn{width:100%}} × 扫码支付 正在加载… (function(){ if (window.dlePayReady) { return; } window.dlePayReady = true; var CFG = {"url":"https:\/\/topide.com\/index.php?do=pay","qr":"https:\/\/topide.com\/index.php?do=alipaypay&action=qr&data=","token":"4454a01b5583578770b54619f3c0e66f0b645761","currency":"积分"}; function el(id) { return document.getElementById(id); } window.dlePayOpen = function(){ var m = el('dlepay-modal'); if (m) { m.className = 'dlepay-modal is-open'; m.setAttribute('aria-hidden','false'); } }; window.dlePayClose = function(){ var m = el('dlepay-modal'); if (m) { m.className = 'dlepay-modal'; m.setAttribute('aria-hidden','true'); } }; window.dlePayStatus = function(html, cls){ var s = el('dlepay-status'); if (!s) { return; } s.className = 'dlepay-status' + (cls ? ' ' + cls : ''); s.innerHTML = html; }; window.dlePayLoading = function(on){ var l = el('dlepay-loading'); var q = el('dlepay-qr'); if (l) { l.style.display = on ? 'block' : 'none'; } if (on && q) { q.style.display = 'none'; } }; function post(action, data, callback){ var fd = new FormData(); fd.append('action', action); fd.append('token', CFG.token || ''); for (var k in data) { if (Object.prototype.hasOwnProperty.call(data, k)) { fd.append(k, data[k]); } } fetch(CFG.url, { method: 'POST', body: fd, credentials: 'same-origin', headers: { 'X-Requested-With': 'XMLHttpRequest' } }).then(function(r){ return r.json(); }).then(function(d){ callback(d || { status: 'error', message: '返回数据异常' }); }).catch(function(){ callback({ status: 'error', message: '网络错误，请稍后重试' }); }); } window.dlePayScan = function(tagId, newsId){ window.dlePayOpen(); window.dlePayLoading(true); window.dlePayStatus('正在生成支付二维码…'); post('create', { tag_id: tagId, news_id: newsId }, function(d){ window.dlePayLoading(false); if (d.status === 'success') { if (d.free || d.paid) { window.dlePayStatus('已解锁，正在刷新…'); setTimeout(function(){ location.reload(); }, 500); return; } var q = el('dlepay-qr'); if (q) { q.src = CFG.qr + encodeURIComponent(d.qr_code); q.style.display = 'block'; } window.dlePayStatus('请使用支付宝扫码支付 ' + d.amount + ' 元（' + d.price + ' ' + (CFG.currency || '') + '）'); window.dlePayPoll(d.out_trade_no); } else { window.dlePayStatus('' + (d.message || '下单失败') + ''); } }); }; window.dlePayPoll = function(outTradeNo){ var tries = 0; function tick(){ tries ++; if (tries > 200) { window.dlePayStatus('二维码已过期，请关闭后重新下单'); return; } post('query', { out_trade_no: outTradeNo }, function(d){ if (d.status === 'paid') { window.dlePayStatus('支付成功，正在刷新…'); setTimeout(function(){ location.reload(); }, 600); return; } if (d.status === 'closed') { window.dlePayStatus('订单已关闭，请重新下单'); return; } setTimeout(tick, 3000); }); } setTimeout(tick, 2500); }; window.dlePayBalance = function(tagId, newsId){ if (!window.confirm('确认使用余额支付？')) { return; } window.dlePayOpen(); window.dlePayStatus('正在处理…'); post('balance', { tag_id: tagId, news_id: newsId }, function(d){ if (d.status === 'success') { window.dlePayStatus('支付成功，正在刷新…'); setTimeout(function(){ location.reload(); }, 500); } else { window.dlePayStatus('' + (d.message || '支付失败') + ''); } }); }; })(); 付费内容此部分内容需要支付 10 积分 后查看，请先登录。 标签 JoshLaravelAdmin TemplateFront EndCRUD