Laravel——Web开发实战之路（四）

最新推荐文章于 2024-01-25 09:50:33 发布

食兔人

最新推荐文章于 2024-01-25 09:50:33 发布

阅读量825

点赞数

分类专栏：团队项目教程后端框架文章标签： laravel 框架后端

本文链接：https://blog.csdn.net/weixin_38312031/article/details/79177689

版权

团队项目同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

教程

21 篇文章 1 订阅

订阅专栏

框架

10 篇文章 0 订阅

订阅专栏

Laravel——Web开发实战之路（四）

@[Laraval|后端|框架]

LaravelWeb开发实战之路四

前言

之前在第三章还落下了blade模板和Artisan命令没讲
本次顺便连带页面的优化–前端设计一起，可以作为一个前端入门的人来说，这一章很简单，但是中间的环境配置让我耽误了三个小时，希望可以让大部分后端人员，不要像我一样执着于此，耽误宝贵的项目开发时间

Blade模板

laravel的美妙之处，blade模板应该是一个很明显的体验了。
在前端代码大段copy的时候，blade模板让我深深的体会到了框架的美妙所在，把一个页面，拆成多个部件，提高了重复利用率，大大减少了代码量，并且不容易出错

使用通用视图default
在resources/views/layouts/default.blade.php加入通用代码，也就是每个页面都有的代码，相当于面向对象中的父类的概念

<!DOCTYPE html>
<html>
  <head>
    <title>Sample App</title>
  </head>
  <body>
    @yield('content')
  </body>
</html>

下面代码代表该区域将用于显示content区块的内容，其内容来自于子视图的定义

@yield('content')

首页使用Blade模板的继承，则`resources/views/static_pages/home.blade.php改为

@extends('layouts.default')
@section('content')
  <h1>主页</h1>
@stop

我们使用了 @extends 并通过传参来继承父视图 layouts/default.blade.php 的视图模板
使用 @section 和@stop 代码来填充父视图的 content 区块，所有包含在 @section 和 @stop 中的代码都将被插入到父视图的 content区块

更多blade模板继承请看文档

Artisan命令

只需要一个表就好啦

命令	说明
php artisan key:generate	生成 App Key
php artisan make:controller	生成控制器
php artisan make:model	生成模型
php artisan make:policy	生成授权策略
php artisan make:seeder	生成 Seeder 文件
php artisan migrate	执行迁移
php artisan migrate:rollback	回滚迁移
php artisan migrate:refresh	重置数据库
php artisan db:seed	填充数据库
php artisan tinker	进入 tinker 环境
php artisan route:list	查看路由列表

页面优化

之前构建的都是简陋的静态页面，接下来就是页面的优化问题了

我们的项目组主要用bootstrap作为前端开发，所以我就用此举例了

总的说，laravel的前端工作流是非常棒的，奈何环境配置太gg了，对于一般的前端来讲，个人提议可以跳过前端工作流的部分（我配置了三小时，依旧以失败告终了的说，好气）

直接将bootstrap的文件夹放置public路径下，就可以使用相对路径进行前端优化了

先更改基础视图为

<!DOCTYPE html>
<html>
  <head>
    <title>@yield('title', 'Sample App') - Laravel 入门教程</title>
    <link rel="stylesheet" href="/css/app.css">
  </head>
  <body>
    <header class="navbar navbar-fixed-top navbar-inverse">
      <div class="container">
        <div class="col-md-offset-1 col-md-10">
          <a href="/" id="logo">Sample App</a>
          <nav>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="/help">帮助</a></li>
              <li><a href="#">登录</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </header>

    <div class="container">
      @yield('content')
    </div>    
  </body>
</html>

同时在app.css文件中加入

body {
    padding-top: 60px;
}

section {
    overflow: auto;
}

textarea {
    resize: vertical;
}

.jumbotron {
    text-align: center;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1;
}

h1 {
    font-size: 3em;
    letter-spacing: -2px;
    margin-bottom: 30px;
    text-align: center;
}

h2 {
    font-size: 1.2em;
    letter-spacing: -1px;
    margin-bottom: 30px;
    text-align: center;
    font-weight: normal;
    color: #777;
}

p {
    font-size: 1.1em;
    line-height: 1.7em;
}


.navbar-inverse {
    background-color: #3C3E42;
}

#logo {
    float: left;
    margin-right: 10px;
    font-size: 1.7em;
    color: #fff;
    text-decoration: none;
    letter-spacing: -1px;
    padding-top: 9px;
    font-weight: bold;
}

body {
    padding-top: 60px;
}

section {
    overflow: auto;
}

textarea {
    resize: vertical;
}

.jumbotron {
    text-align: center;
}

/* typography */

h1, h2, h3, h4, h5, h6 {
    line-height: 1;
}

h1 {
    font-size: 3em;
    letter-spacing: -2px;
    margin-bottom: 30px;
    text-align: center;
}

h2 {
    font-size: 1.2em;
    letter-spacing: -1px;
    margin-bottom: 30px;
    text-align: center;
    font-weight: normal;
    color: #777;
}

p {
    font-size: 1.1em;
    line-height: 1.7em;
}

/* header */

.navbar-inverse {
    background-color: #3C3E42;
}

#logo {
    float: left;
    margin-right: 10px;
    font-size: 1.7em;
    color: #fff;
    text-decoration: none;
    letter-spacing: -1px;
    padding-top: 9px;
    font-weight: bold;
}

#logo:hover {
     color: #fff;
}

就出现了一个超大屏幕和导航栏
这里写图片描述

书上是用sass写的，由于我跳过了前端工作流，所以这里的css文件是sass编译或者说是我个人翻译的结果

局部视图

更确切的说，其实就是把default.blade.php文件继续拆分，为了更好的维护

头部文件

resources/views/layouts/_header.blade.php

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <div class="col-md-offset-1 col-md-10">
      <a href="/" id="logo">Sample App</a>
      <nav>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="/help">帮助</a></li>
          <li><a href="#">登录</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

resources/views/layouts/_footer.blade.php

<div class="col-md-12">
  <footer class="footer">
    <small class="slogon">
      <img class="brand-icon" src="https://dn-phphub.qbox.me/uploads/images/201612/12/1/iq7WQc2iuW.png?imageView2/1/w/34/h/34">
      <a href="https://laravel-china.org/courses">
        刻意练习，每日精进
      </a>
    </small>
    <nav>
      <ul>
        <li><a href="/about">关于</a></li>
      </ul>
    </nav>
  </footer>
</div>

footer的样式，也要加入app.css哦


/* footer */

footer {
    margin-top: 45px;
    padding-top: 5px;
    border-top: 1px solid #eaeaea;
    color: #777;
}

footer a {
    color: #555;
}

footer a:hover {
    color: #222;
}

footer small {
    float: left;
}

footer ul {
    float: right;
    list-style: none;
}

footer li {
    float: left;
    margin-left: 15px;
}

img.brand-icon {
    width: 17px;
    height: 17px;
}

.slogon {
    font-size: 13px;
    font-weight: bold;
}

引入局部视图

include进去就好了，以home为例

<!DOCTYPE html>
<html>
  <head>
    <title>@yield('title', 'Sample App') - Laravel 入门教程</title>
    <link rel="stylesheet" href="/css/app.css">
  </head>
  <body>
    @include('layouts._header')

    <div class="container">
      <div class="col-md-offset-1 col-md-10">
        @yield('content')
        @include('layouts._footer')
      </div>
    </div>
  </body>
</html>

最后，还有一个路由的问题，希望大家可以自行看文档

食兔人

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Laravel——Web开发实战之路（四）

Laravel——Web开发实战之路（四）@[Laraval|后端|框架]LaravelWeb开发实战之路四前言Blade模板Artisan命令页面优化局部视图头部文件footer文件引入局部视图前言之前在第三章还落下了blade模板和Artisan命令没讲本次顺便连带页面的优化–前端设计一起，可以作为一个前端入门的人来说，这一章很简
复制链接

扫一扫