添加模型内容详情页demo

2e264509 · 孙建华 · a48014bf · 2e264509 · 2e264509 · 2e264509
4 changed file
--- a/app/Http/Controllers/Front/ContentController.php
+++ b/app/Http/Controllers/Front/ContentController.php
+<?php
+
+namespace App\Http\Controllers\Front;
+
+use App\Model\Admin\Entity;
+use App\Repository\Admin\ContentRepository;
+
+class ContentController extends BaseController
+{
+    public function show($entityId, $contentId)
+    {
+        $entity = Entity::query()->findOrFail($entityId);
+
+        ContentRepository::setTable($entity->table_name);
+        $content = ContentRepository::findOrFail($contentId);
+
+        return view(
+            'front.content.show',
+            array_merge(['content' => $content, 'entityId' => $entityId], ContentRepository::adjacent($contentId))
+        );
+    }
+}
--- a/app/Repository/Admin/ContentRepository.php
+++ b/app/Repository/Admin/ContentRepository.php
@@ -55,6 +55,11 @@ class ContentRepository
        return self::$model->newQuery()->find($id);
    }

+    public static function findOrFail($id)
+    {
+        return self::$model->newQuery()->findOrFail($id);
+    }
+
    public static function delete($id)
    {
        return self::$model->newQuery()->where('id', $id)->delete();
@@ -76,4 +81,12 @@ class ContentRepository
            }
        }, $data);
    }
+
+    public static function adjacent($id)
+    {
+        return [
+            'previous' => self::$model->newQuery()->where('id', '<', $id)->first(),
+            'next' => self::$model->newQuery()->where('id', '>', $id)->first()
+        ];
+    }
 }
--- a/resources/views/front/content/show.blade.php
+++ b/resources/views/front/content/show.blade.php
+<!DOCTYPE html>
+<html>
+<head>
+    <title>{{ $content->title }}</title>
+    <meta charset="utf-8">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <link rel="stylesheet" href="/public/vendor/layui-v2.4.5/css/layui.css" media="all">
+    <link rel="stylesheet" href="/public/css/member.css">
+</head>
+<body class="bg-grey-lightest font-sans leading-normal tracking-normal">
+
+<nav id="header" class="fixed w-full z-10 pin-t">
+    <div id="progress" class="h-1 z-20 pin-t" style="background:linear-gradient(to right, #4dc0b5 var(--scroll), transparent 0);"></div>
+    <div class="w-full md:max-w-md mx-auto flex flex-wrap items-center justify-between mt-0 py-3">
+
+        <div class="pl-4">
+            <a class="text-black text-base no-underline hover:no-underline font-extrabold text-xl"  href="#">
+                LightCMS
+            </a>
+        </div>
+
+        <div class="block lg:hidden pr-4">
+            <button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-grey border-grey-dark hover:text-black hover:border-teal appearance-none focus:outline-none">
+                <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
+            </button>
+        </div>
+
+        <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block mt-2 lg:mt-0 bg-grey-lightest md:bg-transparent z-20" id="nav-content">
+            <ul class="list-reset lg:flex justify-end flex-1 items-center">
+                <li class="mr-3">
+                    @auth('member')
+                        <a class="inline-block text-grey-dark no-underline hover:text-black hover:text-underline py-2 px-4" href="{{ route('member::logout') }}">退出</a>
+                    @else
+                    <a class="inline-block text-grey-dark no-underline hover:text-black hover:text-underline py-2 px-4" href="{{ route('member::login.show') }}">登录</a>
+                    @endauth
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
+
+<!--Container-->
+<div class="container w-full md:max-w-md mx-auto pt-20">
+
+    <div class="w-full px-4 md:px-6 text-xl text-grey-darkest leading-normal" style="font-family:Georgia,serif;">
+
+        <!--Title-->
+        <div class="font-sans">
+                        <h1 class="font-sans break-normal text-black pt-6 pb-2 text-3xl md:text-4xl">{{ $content->title }}</h1>
+				<p class="text-sm md:text-base font-normal text-grey-dark">发布于：{{ $content->created_at }} 最后更新：{{ $content->updated_at }}</p>
+        </div>
+        <div class="mt-6">
+            <!--Post Content-->
+            {!! $content->content !!}
+            <!--/ Post Content-->
+        </div>
+
+
+    </div>
+
+    <!--Tags -->
+    <div class="text-base md:text-sm text-grey px-4 py-6">
+
+    </div>
+
+    <!--Divider-->
+    <hr class="border-b-2 border-grey-light mb-8 mx-4">
+
+    <!--Next & Prev Links-->
+    <div class="font-sans flex justify-between content-center px-4 pb-12">
+            <div class="text-left">
+                @if($previous)
+                <span class="text-xs md:text-sm font-normal text-grey-dark">&lt; 上一篇</span><br>
+                <p><a href="{{ route('web::content', ['contentId' => $previous->id, 'entityId' => $entityId]) }}" class="break-normal text-base md:text-sm text-teal font-bold no-underline hover:underline">{{ $previous->title }}</a></p>
+                @endif
+            </div>
+            <div class="text-right">
+                @if($next)
+                <span class="text-xs md:text-sm font-normal text-grey-dark">下一篇 &gt;</span><br>
+                <p><a href="{{ route('web::content', ['contentId' => $next->id, 'entityId' => $entityId]) }}" class="break-normal text-base md:text-sm text-teal font-bold no-underline hover:underline">{{ $next->title }}</a></p>
+                @endif
+            </div>
+    </div>
+
+
+    <!--/Next & Prev Links-->
+
+</div>
+<!--/container-->
+
+<footer class="bg-white border-t border-grey-light shadow">
+    <div class="container max-w-md mx-auto flex py-8">
+
+        <div class="w-full mx-auto flex flex-wrap">
+            <div class="flex w-full md:w-1/2 ">
+                <div class="px-8">
+                    <h3 class="font-bold text-black">关于</h3>
+                    <p class="py-4 text-grey-dark text-sm">
+                        lightCMS是一个基于Laravel开发的轻量级CMS系统，也可以作为一个通用的后台管理框架使用。
+                    </p>
+                </div>
+            </div>
+
+            <div class="flex w-full md:w-1/2">
+                <div class="px-8">
+                    <h3 class="font-bold text-black">链接</h3>
+                    <ul class="list-reset items-center text-sm pt-3">
+                        <li>
+                            <a class="inline-block text-grey-dark no-underline hover:text-black hover:text-underline py-1" href="https://github.com/eddy8/lightCMS" target="_blank">GitHub</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+
+
+    </div>
+</footer>
+<script src="/public/vendor/layui-v2.4.5/layui.all.js"></script>
+<script type="text/javascript" src="/public/js/member.js"></script>
+<script>
+    $(function () {
+        $('button').click(function () {
+            var form = $('#login');
+            if ($(this).attr('id') === 'submit-register') {
+                form = $('#register');
+            }
+
+            window.form_submit = $(this);
+            form_submit.prop('disabled', true);
+            $.ajax({
+                url: form.attr('action'),
+                data: form.serialize(),
+                success: function (result) {
+                    if (result.code !== 0) {
+                        form_submit.prop('disabled', false);
+                        layer.msg(result.msg, {shift: 6});
+                        return false;
+                    }
+                    layer.msg(result.msg, {icon: 1}, function () {
+                        if (result.reload) {
+                            location.reload();
+                        }
+                        if (result.redirect) {
+                            location.href = '/';
+                        }
+                    });
+                }
+            });
+            return false;
+        });
+    });
+
+    /* Progress bar */
+    //Source: https://alligator.io/js/progress-bar-javascript-css-variables/
+    var h = document.documentElement,
+        b = document.body,
+        st = 'scrollTop',
+        sh = 'scrollHeight',
+        progress = document.querySelector('#progress'),
+        scroll;
+    var scrollpos = window.scrollY;
+    var header = document.getElementById("header");
+    var navcontent = document.getElementById("nav-content");
+
+    document.addEventListener('scroll', function() {
+
+        /*Refresh scroll % width*/
+        scroll = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
+        progress.style.setProperty('--scroll', scroll + '%');
+
+        /*Apply classes for slide in bar*/
+        scrollpos = window.scrollY;
+
+        if(scrollpos > 10){
+            header.classList.add("bg-white");
+            header.classList.add("shadow");
+            navcontent.classList.remove("bg-grey-lightest");
+            navcontent.classList.add("bg-white");
+        }
+        else {
+            header.classList.remove("bg-white");
+            header.classList.remove("shadow");
+            navcontent.classList.remove("bg-white");
+            navcontent.classList.add("bg-grey-lightest");
+
+        }
+
+    });
+
+
+    //Javascript to toggle the menu
+    document.getElementById('nav-toggle').onclick = function(){
+        document.getElementById("nav-content").classList.toggle("hidden");
+    }
+</script>
+</body>
+</html>
--- a/routes/web.php
+++ b/routes/web.php
@@ -21,6 +21,10 @@ Route::group(
        // 首页
        Route::get('/', 'HomeController@index')->name('index');

+        // 模型内容
+        Route::get('/entity/{entityId}/content/{contentId}', 'ContentController@show')
+            ->name('content')->where(['entityId' => Regexp::RESOURCE_ID, 'contentId' => Regexp::RESOURCE_ID]);
+
        // 评论列表
        Route::get('/entity/{entityId}/content/{contentId}/comment', 'CommentController@list')
            ->name('comment.list')->where(['entityId' => Regexp::RESOURCE_ID, 'contentId' => Regexp::RESOURCE_ID]);