浏览器随便打开一个网页，点击右键查看源代码。这些就是HTML代码，浏览器将这些传化成网页给我们查看。
做网站简单的来说就是读取 mysql 里的数据放到 html 里已供展示访问，当然数据也是通过网页方式去增加修改删除操作。
用 laravel 开发并不直接编写 html 文件，而是用 blade 的 php 文件来写代码，叫 模板文件，laravel 会将此文件转为 html 格式 发给浏览器。
之前我们修改的 welcome.blade.php 就是 模板文件，那访问首页展示 welcome.blade.php 的逻辑代码就在写 blog/routes/web.php 路由文件中，路由 简单可以理解成你网站里那些可以访问地址。
Route::get('/', function () {
return view('welcome');
});
代码就三行，照抄就行，laravel 就是这么规定的，没有为什么。但正常开发是不会这样写，一般是指向 controller 里的一个方法。我们修改成
Route::get('/', 'IndexController@index');
然后在 blog/app/Http/Controllers 中创建 IndexController.php 文件。
不推荐手动去创建，phpstorm 打开 View -> Tool Windows -> Terminal，这也是命令行工具。输入
php artisan make:controller IndexController
它就帮你创建好了，非常方便。再添加 index 方法，如下
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class IndexController extends Controller
{
public function index()
{
return view('welcome');
}
}
上面说到 blade 是用来展示数据的，我们就是在方法里扔数据给它，文档里有很多种方式传递数据，但是我们只取一种最好的方法使用。弱水三千只取一瓢饮。
public function index()
{
$time = '今天周二';
return view('welcome', compact('time'));
}
在 welcome.blade.php 模板中展示数据
<div class="title m-b-md">
{{ $time }}
</div>
那再创建一个路由就是举一反三了，路由也有很多种写法，这些同学自己学习。
我们观察一下其他人的网页 html 代码都是固定结构的，html 中包 head，css，body，script。而且同一个网站的不同网页 head 里很多代码都是重复一模一样的，css，js 引用一致。
如果只是复制黏贴，那网页多了，就不科学了。这里我们使用模板的提供的方法，让 html 代码共用。
创建一个 app.blade.php，写入公共部分代码，引用 bootstrap，jquery之类的前端文件，这些前端同学们自己学习。
boostrap 官网：https://getbootstrap.com
75cdn 官网：https://cdn.baomitu.com
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>@yield('title', '')@hasSection('title')-这里填网站名@else这里填网站名@endif</title>
<meta name="keywords" content="@yield('keywords', '这里填网站名')">
<meta name="description" content="@yield('description', '这里填网站名')">
<link crossorigin="anonymous" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" href="https://lib.baomitu.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
@yield('css')
</head>
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="{{ url('/') }}">这里填网站名</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">
<li class="nav-item active">
<a class="nav-link" href="{{ url('/') }}">Home</a>
</li>
</ul>
</div>
</nav>
</header>
<main role="main" class="flex-shrink-0">
@yield('content')
</main>
<footer class="footer mt-auto pb-0 pt-3">
<div class="text-center bg-dark py-2">
<small class="text-white">© {{ date('Y') }} <a href="{{ url('/') }}" class="text-white">这里填网站名</a></small>
</div>
</footer>
<script crossorigin="anonymous" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"></script>
<script crossorigin="anonymous" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" src="https://lib.baomitu.com/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
@yield('js')
</body>
</html>
以后都已 app.blade.php 为基础，让 welcome.blade.php 继承它看看效果
@extends('app')
@section('title', '首页')
@section('content')
<div class="container">
<div class="row">
<div class="col-12">
<h1 class="my-5">{{ $time }}</h1>
</div>
</div>
</div>
@endsection
这些 blade 方法同学参考文档练习几遍就能明白什么意思。今天写的这些就可以提交一下 git了，最好每天提交或者按功能完成度提交一下 git。
网友评论