文章/答案/技术大牛

发布

社区首页 >问答首页 >特定视图无法扩展Laravel 7中的布局文件。

问特定视图无法扩展Laravel 7中的布局文件。
EN

Stack Overflow用户

提问于 2020-04-06 05:18:00

回答 1查看 199关注 0票数 1

我正在使用Laravel 7开发一个慈善网站，我有一个主布局文件，在两个视图( index视图和show视图)中扩展，两个视图都在同一个目录中，为了测试目的，我从index视图中复制了代码并将其粘贴到show视图中，但是index视图显示了正确的样式和所有内容，但是当加载show视图时，它没有css样式和js，下面是所有相关文件：

layout视图：

<!DOCTYPE html>
<html lang="en">

<head>  
@include('partials.header')
@yield('styles') 
</head>
<body>
   @include('partials.nav')
   @yield('content')
   @include('partials.footer')  
<!-- loader -->
<div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"> 
<circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle 
class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" 
stroke="#F96D00"/></svg></div>

<script src="js/jquery.min.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>

<script src="js/jquery.fancybox.min.js"></script>

<script src="js/aos.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js? 
key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="js/google-map.js"></script>
<script src="js/main.js"></script>
@yield('scripts')

</body>
</html>

下面是正确工作的index视图：

@extends('layout')
@section('content')
<div class="site-section fund-raisers bg-light">
<div class="container">
  <div class="row mb-3 justify-content-center">
    <div class="col-md-8 text-center">
      <h2>All Fundraisers</h2>
      <p class="lead">These are the fundraisers that require your little help to give hope to the 
 ones in need.</p>

    </div>
  </div>
</div>

<div class="container-fluid">


    <!-- <div class="row"> -->

    <div class="col-md-12 block-11">
    <div class="nonloop-block-11 owl-carousel">

   @foreach($causes as $cause)


        <div class="card fundraise-item">

          <a href="#"><img class="card-img-top" src="{{ asset($cause->image) }}" alt="Image 
  placeholder"></a>

          <div class="card-body">

            <h3 class="card-title"><a href="{{ route('causes.show', $cause->id) }}">{{ $cause->title 
  }}</a></h3>

            <p class="card-text">{{ $cause->body }}</p>

            <span class="donation-time mb-3 d-block">Last donation 1w ago</span>

            <div class="progress custom-progress-success">
              <div class="progress-bar bg-primary" role="progressbar" style="width: 80%" aria- 
  valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
            </div>

            <span class="fund-raised d-block">$12,000 raised of $30,000</span>

          </div>

        </div>

    @endforeach



    </div>

 </div>

 <br />
  <div class="d-flex justify-content-center align-items-cente"> {{ $causes->links() }} </div>

 </div>
 </div>

 @endsection

这是show视图，它显示一个项，但不能正确工作：

@extends('layout')
@section('content')
<div class="site-section fund-raisers bg-light">
<div class="container">
  <div class="row mb-3 justify-content-center">
    <div class="col-md-8 text-center">
      <h2>All Fundraisers</h2>
      <p class="lead">These are the fundraisers that require your little help to give hope to the 
 ones in need.</p>

    </div>
  </div>
</div>

<div class="container-fluid">


    <!-- <div class="row"> -->

    <div class="col-md-12 block-11">
    <div class="nonloop-block-11 owl-carousel">



        <div class="card fundraise-item">

          <a href="#"><img class="card-img-top" src="{{ asset($cause->image) }}" alt="Image 
  placeholder"></a>

          <div class="card-body">

            <h3 class="card-title"><a href="">{{ $cause->title }}</a></h3>

            <p class="card-text">{{ $cause->body }}</p>

            <span class="donation-time mb-3 d-block">Last donation 1w ago</span>

            <div class="progress custom-progress-success">
              <div class="progress-bar bg-primary" role="progressbar" style="width: 80%" aria- 
   valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
            </div>

            <span class="fund-raised d-block">$12,000 raised of $30,000</span>

          </div>

        </div>




    </div>

    </div>


  </div>
 </div>



 @endsection

这是controller文件：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Cause as Cause;

class CausesController extends Controller
{
/**
 * Display a listing of the resource.
 *
 * @return \Illuminate\Http\Response
 */
public function index()
{
    $causes = Cause::take(15)->paginate(5);

    return view('causes.index', ['causes' => $causes]);
}

/**
 * Show the form for creating a new resource.
 *
 * @return \Illuminate\Http\Response
 */
public function create()
{
    //
}

/**
 * Store a newly created resource in storage.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return \Illuminate\Http\Response
 */
public function store(Request $request)
{
    //
}

/**
 * Display the specified resource.
 *
 * @param  int  $id
 * @return \Illuminate\Http\Response
 */
public function show($id)
{
    $cause = Cause::findOrFail($id)->first();

    return view('causes.show', ['cause' => $cause]);
}

下面是路由的web.php文件：

<?php

use Illuminate\Support\Facades\Route;



Route::get('/', 'HomeController@index')->name('home.index');

Route::get('/causes', 'CausesController@index')->name('causes.index');
Route::get('/causes/{id}', 'CausesController@show')->name('causes.show');

下图显示了index视图和show视图的路径：

我尽力了两天，找到了解决办法，但没有任何帮助，在这方面的任何帮助将不胜感激。

laravel

layout

view

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-04-06 06:04:04

问题不在视图代码或逻辑中。一切都是正确的。唯一的问题是加载静态资源的方式，即CSS和JS文件。

我认为您必须将CSS和JS文件放在公用文件夹中，所以当您访问索引路由时，JS URL就变成了

<script src="js/jquery.min.js"></script>

但是当您试图搜索那些CSS和JS文件时，

<script src="causes/{id}/js/jquery.min.js"></script>

你可以尝试的是：

<script src="{{ url('js/jquery.min.js') }}"></script>

这只是为了解决您的问题，理想情况下，您应该将这些文件保存在资源文件夹中，并且应该使用Laravel编译这些文件并自动加载这些文件。

参考资料：https://laravel.com/docs/7.x/mix

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61053360

复制

相似问题

问特定视图无法扩展Laravel 7中的布局文件。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问特定视图无法扩展Laravel 7中的布局文件。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问特定视图无法扩展Laravel 7中的布局文件。
EN