IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> PHP知识库 -> Laravel-shop 前端布局 -> 正文阅读

[PHP知识库]Laravel-shop 前端布局

基础布局

基础布局布局文件统一存放在 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_modulespackage.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 会自动重新编译

  PHP知识库 最新文章
Laravel 下实现 Google 2fa 验证
UUCTF WP
DASCTF10月 web
XAMPP任意命令执行提升权限漏洞(CVE-2020-
[GYCTF2020]Easyphp
iwebsec靶场 代码执行关卡通关笔记
多个线程同步执行,多个线程依次执行,多个
php 没事记录下常用方法 (TP5.1)
php之jwt
2021-09-18
上一篇文章      下一篇文章      查看所有文章
加:2022-10-22 20:56:11  更:2022-10-22 20:56:32 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年3日历 -2024/3/29 12:55:05-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码