laravel内容管理系统_laravel-admin 首页功能-CSDN博客

本文链接：https://blog.csdn.net/2201_76058188/article/details/131251170

1.前台首页

前台首页是用于让外部的访客访问，主要展示的是网站的内容。在接下来要实现的首页中，主要包括了页面布局、首页展示、栏目导航、轮播图、广告位。首页还有一个侧边栏，用于显示热门内容。

1.1页面布局

（1）在resources\views目录下创建public目录，该目录用于保存公共文件，在该目录下创建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">
        @if(session()->has('users.name'))
          <li>
            <a href="#" class="j-layout-pwd">
              <i class="fa fa-user fa-fw"></i>{
  { session()->get('users.name') }}
            </a>
          </li>
          <li><a href="{
  { url('logout') }}"><i class="fa fa-power-off fa-fw"></i>退出</a></li>
        @else
          <li><a href="#" data-toggle="modal" data-target="#loginModal">登录</a></li>
          <li><a href="#" data-toggle="modal" data-target="#registerModal">注册</a></li>
        @endif
      </ul>
    </div>
  </header>

3）创建resources\views\public\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></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>

（2）创建Index控制器。

php artisan make:controller Indexcontroller

（3）在控制器中添加index()方法。

<!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