laravel 5.4路由视图崩溃错误

时间:2018-04-10 11:07:57

标签: html laravel routes

所以我的观点存在问题,我认为这是因为路线有问题,虽然我觉得它实际上很好但我似乎无法找到它,

例如路线是这样的

Route::get('/test/test', 'Product\MuslimController@show')->name('muslim.details');

视图就像这样

First Image

但是路线是这样的

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
{{-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> --}}
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">

<title>Amazia Collection</title>

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Styles -->
<link href="css/carousel.css" rel="stylesheet">

</head>
<body>
<header>
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand" href="#">Carousel</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
      {{-- <ul class="navbar-nav"> --}}
        <li class="nav-item active">
          <a class="nav-link" href="{{ url('main') }}">Home</a>
        </li>
        @if(Auth::check() == false)                      
          <li class="nav-item"><a class="nav-link" href="{{ url('login') }}">Login</a></li>
          <li class="nav-item"><a class="nav-link" href="{{ route('register') }}">Register</a></li>
        @else
      </ul>

      <ul class="navbar-nav mr-4">
      <li class="nav-item dropdown d-flex flex-row-reverse">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Halo, {{ Auth::user()->name }}
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              {{-- <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a> --}}
              <a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault();
                                                           document.getElementById('logout-form').submit();">Logout</a>
                  <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                    {{ csrf_field() }}
                  </form>
            </div>
          </li>
      </ul>
      @endif

      {{-- <form class="form-inline mt-2 mt-md-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div> --}}
  </nav>
</header>

<main role="main">

  @yield('content')

</main>

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
@yield('script')

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/jquery-slim.min.js"><\/script>')</script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/holder.min.js"></script>

<script>
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (function() {
      'use strict';
      window.addEventListener('load', function() {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('form-signin');
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form) {
          form.addEventListener('submit', function(event) {
            if (form.checkValidity() === false) {
              event.preventDefault();
              event.stopPropagation();
            }
            form.classList.add('was-validated');
          }, false);
        });
      }, false);
    })();
</script>

它变得像这样

second image

任何人都可以告诉我为什么会这样吗?谢谢

这是我的观点:

usernav.blade.php

@extends('layouts.usernav')

@section('content')

<link href="{{asset('css/details.css')}}" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-  awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">

<div class="container">
    <div class="card">
        <div class="container-fliud">
            <div class="wrapper row">
                <div class="preview col-md-6">

                    <div class="preview-pic tab-content">
                        {{-- <div class="tab-pane active" id="pic-1"><img src="image/{{$image['img_picture']}}" /></div> --}}
                      {{-- <div class="tab-pane active" id="pic-1"><img src="http://placekitten.com/400/252" /></div> --}}
                     {{--  <div class="tab-pane" id="pic-2"><img src="http://placekitten.com/400/252" /></div>
                      <div class="tab-pane" id="pic-3"><img src="http://placekitten.com/400/252" /></div>
                      <div class="tab-pane" id="pic-4"><img src="http://placekitten.com/400/252" /></div>
                      <div class="tab-pane" id="pic-5"><img src="http://placekitten.com/400/252" /></div> --}}
                    </div>
                    {{-- <ul class="preview-thumbnail nav nav-tabs">
                      <li class="active"><a data-target="#pic-1" data-toggle="tab"><img src="http://placekitten.com/200/126" /></a></li>
                      <li><a data-target="#pic-2" data-toggle="tab"><img src="http://placekitten.com/200/126" /></a></li>
                      <li><a data-target="#pic-3" data-toggle="tab"><img src="http://placekitten.com/200/126" /></a></li>
                      <li><a data-target="#pic-4" data-toggle="tab"><img src="http://placekitten.com/200/126" /></a></li>
                      <li><a data-target="#pic-5" data-toggle="tab"><img src="http://placekitten.com/200/126" /></a></li>
                    </ul> --}}

                </div>
                <div class="details col-md-6">
                    <h3 class="product-title">Code Name: </h3>
                    {{-- <div class="rating">
                        <div class="stars">
                            <span class="fa fa-star checked"></span>
                            <span class="fa fa-star checked"></span>
                            <span class="fa fa-star checked"></span>
                            <span class="fa fa-star"></span>
                            <span class="fa fa-star"></span>
                        </div>
                        <span class="review-no">41 reviews</span>
                    </div> --}}
                    {{-- <p class="product-description">Suspendisse quos? Tempus cras iure temporibus? Eu laudantium cubilia sem sem! Repudiandae et! Massa senectus enim minim sociosqu delectus posuere.</p> --}}
                    <p class="product-description">Harga Grosir: </p>
                    <p class="product-description">Harga Eceran: </p>

                    {{-- <h4 class="price">current price: <span>$180</span></h4> --}}
                    {{-- <p class="vote"><strong>91%</strong> of buyers enjoyed this product! <strong>(87 votes)</strong></p> --}}
                    <h5 class="sizes">sizes:
                        <span class="size" data-toggle="tooltip" title="small">s</span>
                        <span class="size" data-toggle="tooltip" title="medium">m</span>
                        <span class="size" data-toggle="tooltip" title="large">l</span>
                        <span class="size" data-toggle="tooltip" title="xtra large">xl</span>
                    </h5>
                    <h5 class="colors">colors:
                        <span class="color orange" data-toggle="tooltip" title="Not In store"></span>
                        <span class="color green"></span>
                        <span class="color blue"></span>
                    </h5>
                    <div class="action">
                        <a href="{{route('muslim.order')}}" class="add-to-cart btn btn-default" type="button">add to cart</a>
                        <button class="like btn btn-default" type="button"><span class="fa fa-heart"></span></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

details.blade.php

Route::prefix('muslim')->group(function(){

Route::get('', 'Product\MuslimController@main')->name('muslim.dashboard');

Route::get('{ID}', 'Product\MuslimController@details')->name('muslim.details');
 });

这是路线

namespace App\Http\Controllers\Product;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use DB;
use App\Muslim;

class MuslimController extends Controller
{
    public function main(){
        $muslim = Muslim::all();
        return view('product.muslim.muslim', compact('muslim'));
}

public function details($id){

    $item = DB::table('muslims')->where('ID', $id)->first();
    return view('product.muslim.details', compact('item'));
}

}

这是我的控制器     

my stuff

1 个答案:

答案 0 :(得分:0)

问题

这不是一个Laravel问题,它是一个简单的HTML问题。您的样式表是相对引用的,这意味着Web浏览器使用请求的基本路径加上相对路径来确定请求URL。例如:

<link rel="stylesheet" href="app.css">

当您访问http://example.com/test时,您的浏览器会将样式表引用解释为以下内容:

<link rel="stylesheet" href="http://example.com/app.css">

那是因为http://example.com/是基本路径。当您访问http://example.com/test/test时,您的浏览器会将样式表引用解释为以下内容:

<link rel="stylesheet" href="http://example.com/test/app.css">

那是因为http://example.com/test/是基本路径。解决方案是使用对基本路径的绝对引用,而不是相对引用,例如:

<link rel="stylesheet" href="/app.css">

然后,当您访问您网站上的任何页面时,它将始终发出以下请求:

<link rel="stylesheet" href="http://example.com/app.css">

Laravel Way

Laravel提供了一个asset帮助程序,您可以使用它来生成资产的URL,例如:

<link rel="stylesheet" href="{{ asset('app.css') }}">

那会产生:

<link rel="stylesheet" href="http://example.com/app.css">