TDD 构建 Laravel 应用之前端预设

本系列文章为 laracasts.com 的系列视频教程 ——Build A Laravel App With TDD 的学习笔记,若喜欢该系列视频,可去该网站订阅后下载该系列视频, 支持正版

利用已有的布局界面重构页面

  • 修改项目列表页:

resources/views/projects/index.blade.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@extends('layouts.app')

@section('content')
<div style="display: flex;align-items: center">
<h1 style="margin-right: auto">Birdboard</h1>
<a href="/projects/create">New Project</a>
</div>

<ul>
@forelse($projects as $project)
<li>
<a href="{{ $project->path() }}">{{ $project->title }}</a>
</li>
@empty
<li>No project yet.</li>
@endforelse
</ul>

@endsection
  • 修改布局文件:

resources/views/layouts/app.blade.php

1
2
3
<main class="container py-4">
@yield('content')
</main>
  • 修改项目详情页:

resources/views/projects/show.blade.php

1
2
3
4
5
6
7
8
@extends('layouts.app')

@section('content')

<h1>{{$project->title}}</h1>
<div>{{$project->description}}</div>
<a href="/projects">Go Back</a>
@endsection
  • 修改项目创建页:

resources/views/projects/create.blade.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
@extends('layouts.app')

@section('content')
<form method="post" action="/projects">
@csrf
<h1 class="heading is-1">Create a Project</h1>
<div class="field">
<label class="label" for="title">Title</label>

<div class="control">
<input type="text" class="input" name="title" placeholder="Title" id="title">
</div>
</div>
<div class="field">
<label class="label" for="description">Description</label>

<div class="control">
<textarea class="textarea" name="description" placeholder="Description" id="description">
</textarea>
</div>
</div>
<div class="field">
<div class="control">
<button type="submit" class="button is-link">Create Project</button>
<a href="/projects">Cancel</a>
</div>
</div>
</form>
@endsection

Laravel 前端脚手架

  • 安装依赖包
1
npm install
  • 编译开发环境文件
1
npm run development
  • 安装 tailwindcss 依赖
1
npm install tailwindcss --save-dev
  • app.scss 中导入组件:
1
2
3
4
5
@import "~tailwindcss/base";

@import "~tailwindcss/components";

@import "~tailwindcss/utilities";

由于没有安装 postCSS,所以需要一点设置:

1
2
# 生成配置文件
npx tailwind init

webpack.mix.js 配置如下:

1
2
3
4
5
6
7
8
9
10
const mix = require('laravel-mix');

const tailwindcss = require('tailwindcss')

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('tailwind.config.js') ],
})

现在可以顺利编译文件了。