Laravel-shop 前端布局

最新推荐文章于 2024-08-24 08:00:25 发布

胡萝卜的兔

最新推荐文章于 2024-08-24 08:00:25 发布

阅读量504

点赞数

分类专栏： php laravel 文章标签： php

本文链接：https://blog.youkuaiyun.com/xxpxxpoo8/article/details/127362974

版权

laravel 同时被 2 个专栏收录

54 篇文章

订阅专栏

php

43 篇文章

订阅专栏

基础布局

基础布局布局文件统一存放在 resources/views/layouts 文件夹中，布局涉及的文件如下

app.blade.php —— 主要布局文件，项目的所有页面都将继承于此页面；
_header.blade.php —— 布局的头部区域文件，负责顶部导航栏区块；
_footer.blade.php —— 布局的尾部区域文件，负责底部导航区块；

存放目录位置

resources/views/layout/*
在这里插入图片描述

具体代码

主体公共文件
resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'Laravel Shop') - Laravel 电商教程</title>
    <!-- 样式 -->
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app" class="{{ route_class() }}-page">
    @include('layouts._header')
    <div class="container">
        @yield('content')
    </div>
    @include('layouts._footer')
</div>
<!-- JS 脚本 -->
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

头部公共文件
resources/views/layouts/_header.blade.php

<nav class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{{ url('') }}">
                Laravel Shop
            </a>
        </div>
        <div class="collapse navbar-collapse" id="app-navbar-collapse">
            <ul class="nav navbar-nav">
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
            </ul>
        </div>
    </div>
</nav>

底部公共文件
resources/views/layouts/_footer.blade.php

<footer class="footer">
    <div class="container">
        <p class="pull-left">
            由 <a href="u/1837553744?is_hot=1" target="_blank">Xxp</a> 设计和编码 <span style="color: #e27575;font-size: 14px;">❤</span>
        </p>

        <p class="pull-right"><a href="mailto:root@leo108.com">联系我们</a></p>
    </div>
</footer>

创建控制器

<?php
namespace App\Http\Controllers;
class IndexController extends Controller
{
    public function index(){
        d(['name'=>'threeBody','age'=>25]);
        return view("index.index");
    }
}

创建视图

resources/views/index/index.blade.php

@extends('layouts.app')
@section('title', '首页')

@section('content')
    <h1>index</h1>
@stop

绑定路由

Route::get('/index', [\App\Http\Controllers\IndexController::class,'index'])->name('index');

运行lararvel-mix

安装yarn

注意：前端要使用npm还是yarn 来实现包管理工具，这里使用yarn来实现，
把之前npm生成的node_modules 和 package.json.lock删除

npm install -g yarn

设置国内镜像

yarn config set registry https://registry.npm.taobao.org

安装依赖

yarn install -no-bin-links

安装cross

yarn add cross-env

运行

npm run dev
//或
npm run watch-poll

npm run watch-poll 动态热部署

webpack.mix.js

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .version();

在末尾加了一个 version()，使 Mix 每次生成的静态文件后面加上一个类似版本号的参数，避免浏览器缓存。

然后，运行以下命令即可：

npm run watch-poll

watch-poll 会在你的终端里持续运行，监控 resources 文件夹下的资源文件是否有发生改变。在 watch-poll 命令运行的情况下，一旦资源文件发生变化，Webpack 会自动重新编译