内容管理系统

m0_73697778

已于 2023-06-25 19:39:24 修改

阅读量124

点赞数 2

文章标签： lavarel

于 2023-06-19 15:09:12 首次发布

本文链接：https://blog.csdn.net/m0_73697778/article/details/131265847

版权

1.前台首页

前台首页是用于让外部的访客访问，主要展示的是网站的内容。在接下来要实现的首页中，主要包括了页面布局、首页展示、栏目导航、轮播图、广告位。首页还有一个侧边栏，用于显示热门内容，热门内容会在8.5节专门进行讲解。本节将讲解如何开发前台首页的部分功能。

1.1页面布局

掌握首页布局的实现，能够完成首页公共部分的代码编写

下面讲解如何开发前台的部分功能。

(1)在resources/vies目录下创建common目录，该目录用于保存公用文件，在目录下创建static.blade.php，用于保存静态文件，具体代码如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{asset('home')}}/common/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="{{asset('home')}}/common/font-awesome-4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{{asset('home')}}/css/main.css">
<script src="{{asset('home')}}/common/jquery/1.12.4/jquery.min.js"></script>
<script src="{{asset('home')}}/common/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

(2)创建 header.blade.php文件，具体代码如下：

<div class="header">
  <header>
    <div class="container">
      <a href="{{url("/")}}" style="color:#000000">
        <div class="header-logo"><span>内容</span>管理系统</div>
      </a>
      <ul class="header-right">
     <li>
<a class="header-right">
          <li>
<a href=="#",data-toggle="model" data-target="#loginModal">
登录</a>
</li>
<li>
  <a href="#" data-toggle="model" data-target="#registerModal">
注册</a>
</li>
</ul>
</div>
      <!--登录-->
</div>
<！--登录表单-->
<!-- 注册表单 --->

（3）创建resources\views\common\footer.blade.php文件，该文件用于保存页面底部的内容，具体代码如下：

<div class="footer">
  <div class="container">内容管理系统</div>
</div>

1.2页面展示

掌握首页展示功能的实现，能够完成首页的页面编写和展示

（1）创建页面视图，在resources\views目录下创建index.blade.php,及具体代码如下：

<!DOCTYPE html>
<html>
<head>
  @include('public/static')
  <title>首页</title>
</head>
<body>
@include('public/header')
<div class="main">
  <div class="container">
    <div class="row mt-4">
      <!-- 轮播图 -->
      <div class="col-md-6 main-carousel">
        <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            @foreach($recommend as $k=>$con)
              <div class="carousel-item @if($k==0) active @endif">
                <img src="/static/upload/{{$con->image}}" class="d-block w-100">
                <a href="{{url('detail', ['id'=> $con->id])}}">
                  <div class="carousel-caption d-none d-md-block">
                    <h5>{{$con->title}}</h5>
                    <p>{!! str_limit($con->content,100)!!}</p>
                  </div>
                </a>
              </div>
            @endforeach
          </div>
          <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
      <!-- 广告位 -->
      <div class="col-md-6">
        <div class="row main-imgbox">
          @foreach($adv as $adval)
            <div class="col-md-6">
              <a href="#"><img class="img-fluid" src="/static/upload/{{$adval}}"></a>
            </div>
          @endforeach
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-9">
        <div class="row">
          <!-- 栏目内容 -->
          @foreach($list as $value)
          <div class="col-md-6 mb-4">
            <div class="card main-card">
              <div class="card-header">
                <h2>{{$value->name}}</h2>
                <span class="float-right">
                  <a href="{{ url('lists', ['id' => $value->id ])}}">[ 查看更多 ]</a>
                </span>
              </div>
              @foreach($value->content as $val)
              <div class="card-body">
                <div class="main-card-pic">
                  <a href="{{url('detail', ['id'=> $val->id])}}">
                    <img class="img-fluid" src="/static/upload/{{$val->image}}">
                    <span><i class="fa fa-search"></i></span>
                  </a>
                </div>
                <div class="main-card-info">
                  <span><i class="fa fa-calendar"></i>
                  {{ date('Y-m-d', strtotime($val->created_at)) }}</span>
                </div>
                <h3><a href="{{url('detail', ['id'=> $val->id])}}">{{$val->title}}</a></h3>
                <div class="main-card-desc">{!!str_limit($val->content , 100)!!}</div>
              </div>
              @endforeach
            </div>
          </div>
          @endforeach
        </div>
      </div>
      <div class="col-md-3">
        <!-- 侧边栏 -->
        @include('public/sidebar')
      </div>
    </div>
  </div>
</div>
@include('public/footer')
</body>
</html>

（2）创建Index控制器，具体命令如下：

PHP artisan make:controller IndexController

（3)在控制器中添加index（）方法，具体代码如下：

<?
namespace App\Http\Controllers;

use Illuminate\Http\Request;

class IndexController extends Controller
{
    public function index()
    {
      retrun view ('index');
  }
}

(4)routes\web.php文件中添加路由规则，具体代码如下:

Route::get('/', 'IndexController@index');

通过浏览器访问前台首页，效果图如下：

1.3栏目导航

（1）在index控制器中引入Category模板命名空间，具体代码如下：

use App\Category;

(2)在Index控制器下用navBar()方法，查询栏目记录，并在index()方法中调用navBar()方法，具体代码如下：

 public function index()
    {
        $this->navBar();
        $this->hotContent();
        $recommend = Content::where('status', '2')->get();   // 新增代码
        $advcontent = [];
        $advlist = Adv::where('name', 'imgbox')->get();
        foreach ($advlist as $key => $value) {
            foreach ($value->content as $k => $v) {
                $advcontent= explode('|', $v->path);
            }
        }
        $list = Category::orderBy('id', 'desc')->get()->take(4);
        return view('index', ['recommend' => $recommend, 'adv' => $advcontent, 'list' => $list]);

    }

(3)在header.blade.php中输出栏目列表，具体代码如下：

<nav class="navbar navbar-expand-md navbar-dark">
    <div class="container">
      <div></div>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-expanded="false" aria-controls="navbarSupportedContent" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="/index.php">首页</a>
           </li>
          @foreach($category as $v)
            @if(isset($v['sub']))
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  {{$v['name']}}
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                  @foreach($v['sub'] as $val)
                    <a class="dropdown-item" href="{{url('lists', ['id' => $val['id']] )}}">{{$val['name']}}</a>
                  @endforeach
                </div>
              </li>
            @else
              <li class="nav-item">
                <a class="nav-link" href="{{url('lists', ['id' => $v['id']] )}}">{{$v['name']}}</a>
              </li>
            @endif
          @endforeach
        </ul>
      </div>
    </div>
  </nav>

（4）通过上述栏目在浏览器中运行得出如下：

1.4轮播图

掌握轮播图功能的实现，能够实现轮播图页面效果的开发

（1）在Index控制器中引入Category模型的命名空间

use App\Content;

(2)在Index控制器中的index()方法中，查询状态为置顶的内容，具体代码如下：

public function index()
    {
        $this->navBar();
        $this->hotContent();
        $recommend = Content::where('status', '2')->get();   // 新增代码
        $advcontent = [];
        $advlist = Adv::where('name', 'imgbox')->get();
        foreach ($advlist as $key => $value) {
            foreach ($value->content as $k => $v) {
                $advcontent= explode('|', $v->path);
            }
        }
        $list = Category::orderBy('id', 'desc')->get()->take(4);
        return view('index', ['recommend' => $recommend, 'adv' => $advcontent, 'list' => $list]);

    }

（3）在index.blade.php中输出轮播图，具体代码如下：

<div class="col-md-6 main-carousel">
        <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            @foreach($recommend as $k=>$con)
              <div class="carousel-item @if($k==0) active @endif">
                <img src="/static/upload/{{$con->image}}" class="d-block w-100">
                <a href="{{url('detail', ['id'=> $con->id])}}">
                  <div class="carousel-caption d-none d-md-block">
                    <h5>{{$con->title}}</h5>
                    <p>{!! str_limit($con->content,100)!!}</p>
                  </div>
                </a>
              </div>
            @endforeach
          </div>
          <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>

（4）通过浏览器访问，访问效果图如下：

1.5广告位

（1）在index控制器中导入Adv模型的命名空间，具体代码如下：

use App\Adv;

(2)修改app\Adv.php,设置关联模型，具体代码如下：

public function content()
{
return $this->hasMany('App\Advcontent', 'advid','id');
}

(3)在Index控制器中的index（）方法中查询首页广告位下的广告内容，具体代码如下：

 public function index()
    {
        $this->navBar();
        $this->hotContent();
        $recommend = Content::where('status', '2')->get();   // 新增代码
        $advcontent = [];
        $advlist = Adv::where('name', 'imgbox')->get();
        foreach ($advlist as $key => $value) {
            foreach ($value->content as $k => $v) {
                $advcontent= explode('|', $v->path);
            }
        }
       return view('index', ['recommend' => $recommend,
      'adv' => $advcontent]);
    }

(4)在index.blade.php显示广告内容，具体代码如下：

 <div class="col-md-6">
        <div class="row main-imgbox">
          @foreach($adv as $adval)
            <div class="col-md-6">
              <a href="#"><img class="img-fluid" src="/static/upload/{{$adval}}"></a>
            </div>
          @endforeach
        </div>
      </div>

1.6 栏目内容

（1）在index控制器中的index()方法，具体代码如下：：

public function index()
{
......(原有代码）

$list = Category::orderBy('id', 'desc')->get()->take(4);
        return view('index', ['recommend' => $recommend, 'adv' => $advcontent, 
'list' => $list]);

    }

（2）修改app\Category.php,设置关联模型，具体代码如下：

public function content ()
{
return $this->hasMany('App\Content','cid','id')
->orderBy('id', 'desc')->limit(1);

(3)在控制器index.blade.php显示栏目内容，具体代码如下：

@foreach($list as $value)
          <div class="col-md-6 mb-4">
            <div class="card main-card">
              <div class="card-header">
                <h2>{{$value->name}}</h2>
                <span class="float-right">
                  <a href="{{ url('lists', ['id' => $value->id ])}}">[ 查看更多 ]</a>
                </span>
              </div>
              @foreach($value->content as $val)
              <div class="card-body">
                <div class="main-card-pic">
                  <a href="{{url('detail', ['id'=> $val->id])}}">
                    <img class="img-fluid" src="/static/upload/{{$val->image}}">
                    <span><i class="fa fa-search"></i></span>
                  </a>
                </div>
                <div class="main-card-info">
                  <span><i class="fa fa-calendar"></i>
                  {{ date('Y-m-d', strtotime($val->created_at)) }}</span>
                </div>
                <h3><a href="{{url('detail', ['id'=> $val->id])}}">{{$val->title}}</a></h3>
                <div class="main-card-desc">{!!str_limit($val->content , 100)!!}</div>
              </div>
              @endforeach
            </div>
          </div>
          @endforeach

（4）通过浏览器访问，栏目内容。