所以我的观点存在问题,我认为这是因为路线有问题,虽然我觉得它实际上很好但我似乎无法找到它,
例如路线是这样的
Route::get('/test/test', 'Product\MuslimController@show')->name('muslim.details');
视图就像这样
但是路线是这样的
<!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>
它变得像这样
任何人都可以告诉我为什么会这样吗?谢谢
这是我的观点:
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
答案 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提供了一个asset
帮助程序,您可以使用它来生成资产的URL,例如:
<link rel="stylesheet" href="{{ asset('app.css') }}">
那会产生:
<link rel="stylesheet" href="http://example.com/app.css">