一、舞台布置

一、舞台布置

一、开发环境

Homestead

二、需求分解
1、用例分析

构建一款项目名称为 LaraBBS 

我们主要从以下三种元素入手:

  1. 角色

  2. 信息

  3. 动作

接下来做单独分解。

(1)角色

在我们的 LaraBBS 里,将会出现以下角色:

  • 游客 —— 没有登录的用户;

  • 用户 —— 注册用户,没有多余权限;

  • 管理员 —— 辅助超级管理员做社区内容管理;

  • 站长 —— 权限最高的用户角色。

角色的权限从低到高,高权限的用户将包含权限低的用户权限。

(2)信息结构

主要信息有:

  • 用户 —— 模型名称 User,论坛为 UGC 产品,所有内容都围绕用户来进行;

  • 话题 —— 模型名称 Topic,LaraBBS 论坛应用的最核心数据,有时我们称为帖子;

  • 分类 —— 模型名称 Category,话题的分类,每一个话题必须对应一个分类,分类由管理员创建;

  • 回复 —— 模型名称 Reply,针对某个话题的讨论,一个话题下可以有多个回复。

(3)动作


角色和信息之间的互动称之为『动作』,动作主要由以下几个:

  • 创建 Create

  • 查看 Read

  • 编辑 Update

  • 删除 Delete

2、用例

我们将分别讲解角色的用例,为了减少重复,我们对讲解的顺序做了设计,排后的高权限角色适用前面角色的用例。例如管理员能执行包括游客和用户的操作,但是无法执行站长的操作。

(1)游客

  • 游客可以查看所有话题列表;

  • 游客可以查看某个分类下的所有话题列表;

  • 游客可以按照发布时间和最后回复时间进行话题列表排序;

  • 游客可以查看单个话题内容;

  • 游客可以查看话题的所有回复;

  • 游客可以通过注册按钮创建用户(用户注册,游客专属);

  • 游客可以查看用户的个人页面。

(2)用户

  • 用户可以在某个分类下发布话题;

  • 用户可以编辑自己发布的话题;

  • 用户可以删除自己发布的话题;

  • 用户可以回复所有话题;

  • 用户可以删除自己的回复;

  • 用户可以编辑自己的个人资料;

  • 用户可以接收话题新回复的通知。

(3)管理员

  • 管理员可以访问后台;

  • 管理员可以编辑所有的话题;

  • 管理员可以删除所有的回复;

  • 管理员可以编辑分类。

(4)站长

  • 站长可以编辑用户;

  • 站长可以删除用户;

  • 站长可以修改站点设置;

  • 站长可以删除分类。

三、创建应用

1、开启环境

> cd ~/Homestead && vagrant up
> vagrant ssh
$ cd ~/code

2、composer 加速

$ composer config -g repo.packagist composer https://packagist.laravel-china.org

3、 创建LaraBBS应用

$ cd ~/code
$ composer create-project laravel/laravel larabbs --prefer-dist "5.7.15"

这里安装 laravel 5.7.15 版本,因为安装最新版 5.7.21 ,在安装

$ yarn install --no-bin-links

的时候会报错,我也不知道怎么解决,如下,可能是windows环境问题。

image.png

等待...

4、修改hosts

路径:C:/Windows/System32/Drivers/etc/hosts

5、新增站点

路径:~/Homestead/Homestead.yaml

image.png

6、重启虚拟机

$ exit
> cd ~/Homestead && vagrant provision && vagrant reload
  • vagrant provision 是命令 Vagrant 重新加载 Homestead.yaml 配置;

  • vagrant reload 是重启虚拟机使更改生效。

7、打开工作区(我使用的编辑器是 phpstrom)

image.png

8、.env 文件

APP_NAME=LaraBBS
APP_ENV=local
APP_KEY=base64:DQozYek0DT+zuDjjffefMYXWaSvB8FqrRqzGrLT0KZk=
APP_DEBUG=true
APP_URL=http://larabbs.test

LOG_CHANNEL=stack

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=larabbs
DB_USERNAME=homestead
DB_PASSWORD=secret

调用方法:getenv('APP_ENV');

9、访问应用

image.png

10、git 代码版本控制

为了在接下来更好的追踪项目代码的更改,我们还需要将新建的 Laravel 项目纳入到 Git 版本管理中:

先修改.gitgnore文件,忽略提交的文件(最下两行是新添加的)

/node_modules
/public/hot
/public/storage
/storage/*.key
/vendor
.env
.phpunit.result.cache
Homestead.json
Homestead.yaml
npm-debug.log
yarn-error.log

.idea
/public/packages
$ cd ~/Code/larabbs
$ git init
$ git add -A
$ git commit -m "初始化"

码云创建应用

然后运行下面代码

$ git remote add origin git@gitee.com:<username>/larabbs.git
$ git push -u origin master

11、统一代码风格

.editorconfig  添加

[*.{js,html,blade.php,css,scss}]
indent_style = space
indent_size = 2

接着让我们将该文件加入到版本控制中。

$ git add -A
$ git commit -m "Add .editorconfig"

四、配置信息

1、存放位置

Laravel 框架的所有配置都保存在 config 目录中,每个文件中包含多个配置选项,每个选项都有说明,你可随时查看这些文件并熟悉都有哪些配置选项可供你使用。

2、配置文件

下面是配置文件的简单说明:

文件名称配置类型
app.php应用相关,如项目名称、时区、语言等
auth.php用户授权,如用户登录、密码重置等
broadcasting.php事件广播系统相关配置
cache.php缓存相关配置
database.php数据库相关配置,包括 MySQL、Redis 等
filesystems.php文件存储相关配置
hashing.php加密算法相关设置
logging.php日志记录相关的配置
mail.php邮箱发送相关的配置
queue.php队列系统相关配置
services.php放置第三方服务配置
session.php用户会话相关配置
view.php视图存储路径相关配置

3、访问配置值

你可以在应用程序的任何位置使用全局 config 函数来访问配置值。配置值的访问可以使用「点」语法,这其中包含了要访问的 文件名称 和 选项 的名称。还可以指定默认值,如果配置选项不存在,则返回默认值:

$value = config('app.timezone');

要在运行时设置配置值,传递一个数组给 config 函数:

config(['app.timezone' => 'America/Chicago']);

4、调整配置信息

现在我们需要调整几个应用配置信息。

(1)应用名称

config/app.php

'name' => env('APP_NAME', 'Laravel'),

此处使用 env() 方法可知其优先读取 .env 文件中的 APP_NAME 选项,前往修改为 LaraBBS

.env

APP_NAME=LaraBBS

(2)应用链接

config/app.php

'url' => env('APP_URL', 'http://localhost'),

优先读取 .env 文件中的 APP_URL 选项,前往修改为以下:

.env

APP_URL=http://larabbs.test

(3)时区

请将选项 timezone 修改为上海的时区:

config/app.php

'timezone' => 'Asia/Shanghai',

(4)默认语言

请将选项 locale 修改为中文:

config/app.php

'locale' => 'zh-CN',

Git 代码版本控制

接着让我们将该文件加入到版本控制中:

$ git add -A
$ git commit -m "修改配置信息"

五、辅助函数

Laravel 提供了很多 辅助函数,有时候我们也需要创建自己的辅助函数。

我们把所有的『自定义辅助函数』存放于 app/helpers.php 文件中,这里需要新建一个空文件:

$ touch app/helpers.php

Linux 的 touch touch命令有两个功能:一是用于把已存在文件的时间标签更新为系统当前的时间(默认方式),它们的数据将原封不动地保留下来;二是用来创建新的空文件。

在我们新增 helpers.php 文件之后,还需要在项目根目录下 composer.json 文件中的 autoload 选项里 files 字段加入该文件:

composer.json

{
    {
        }[
        ][
        ]
}

修改保存后运行以下命令进行重新加载文件即可:

$ composer dump-autoload

Git 代码版本控制

接着让我们将该文件加入到版本控制中:

$ git add -A
$ git commit -m "新增自定义辅助函数文件"

六、基础布局

1、基础布局

在教程开始之前,我们需要为我们的项目构建一个基础的页面布局,布局文件统一存放在 resources/views/layouts文件夹中,布局涉及的文件如下:

  • app.blade.php —— 主要布局文件,项目的所有页面都将继承于此页面;

  • _header.blade.php —— 布局的头部区域文件,负责顶部导航栏区块;

  • _footer.blade.php —— 布局的尾部区域文件,负责底部导航区块;

2、主要布局文件

我们先创建主要布局文件:

resources/views/layouts/app.blade.php

  - Laravel

app()->getLocale() 获取的是 config/app.php 中的 locale 选项,因为我们在前面章节中做了修改,所以此选项的值应为 zh-CN

<meta name="csrf-token" content="{{csrf_token()}}">

csrf-token 标签是为了方便前端的 JavaScript 脚本获取 CSRF 令牌。

@yield('title', 'LaraBBS') 继承此模板的页面,如果没有定制 title 区域的话,就会自动使用第二个参数 LaraBBS 作为标题前缀。

mix('css/app.css') 会根据 webpack.mix.js 的逻辑来生成 CSS 文件链接。

<div id="app" class="{{ route_class() }}-page">

route_class() 是我们自定义的辅助方法,我们还需要在 helpers.php 文件中添加此方法:

app/helpers.php

<?php

function route_class()
{
   return str_replace('.','-',Route::currentRouteName());
}

此方法会将当前请求的路由名称转换为 CSS 类名称,作用是允许我们针对某个页面做页面样式定制。在后面的章节中会用到。

@include('layouts._header')

加载顶部导航区块的子模板。

@yield('content')

占位符声明,允许继承此模板的页面注入内容。

@include('layouts._footer')

加载页面尾部导航区块的子模板。页面的『顶部导航』和『尾部导航』子模板并不存在,接下来由我们来创建这两个模板。

3、顶部导航

resources/views/layouts/_header.blade.php

LaraBBS

注册登录链接我们将在后面章节中修改。

4、底部导航

resources/views/layouts/_footer.blade.php<footer class="footer">

: :

5、消息提醒

resources/views/shared/_messages.blade.php

@foreach(['danger', 'warning', 'success', 'info'] as $msg)
   @if(session()->has($msg))
       <div class="flash-message">
           <p class="alert alert-{{$msg}}">
               {{session()->get($msg)}}
           </p>
       </div>
   @endif
@endforeach

后面我们往闪存里写入:

session()->flash('success', 'This is a success alert—check it out!');
session()->flash('danger', 'This is a danger alert—check it out!');
session()->flash('warning', 'This is a warning alert—check it out!');
session()->flash('info', 'This is a info alert—check it out!');

6、首页展示

(1)创建控制器

我们将使用控制器 PagesController 来处理所有自定义页面的逻辑,并使用 root() 方法来处理首页的展示。接下来执行以下命令新建控制器

$ php artisan make:controller PagesController

将会生成以下文件:

app/Http/Controllers/PagesController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PagesController extends Controller
{
   //
}


我们新增 root() 方法:

app/Http/Controllers/PagesController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PagesController extends Controller
{
   public function root()
   {
       return view('pages.root');
   }
}

(2)视图


控制器 root() 方法中加载了视图 pages.root,目前我们还没有此视图文件,前往创建:

resources/views/pages/root.blade.php

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

@section('content')
   <h1>这里是首页</h1>
@stop

Laravel 自带一个主页视图 welcome.blade.php,既然我们已经自定义了主页视图,即可将废弃的主页视图删除

$ rm resources/views/welcome.blade.php

(3)绑定路由

接下来绑定下路由,将 web.php 里的内容替换为以下:

routes/web.php


Route::get('/','PagesController@root')->name('root');

打开浏览器尝试访问:

image.png


这是因为我们在 resources/views/layouts/app.blade.php 中使用 mix() 方法,而我们还未运行 Laravel Mix 进行编译,找不到 mix-manifest.json 文件,所以报错,没事接下来我们来解决这个问题。

7、样式调整

(1)运行Laravel Mix

使用 Yarn 来安装依赖,在这之前,因为国内的网络原因,我们还需为 Yarn 配置安装加速:

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

使用 Yarn 安装依赖:

$ yarn install

安装成功后,运行以下命令即可:

$ npm run watch-poll

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

注意:在后面的课程中,我们需要保证 npm run watch-poll 一直处在执行状态中。

正常运行的界面应类似:

image.png

样式有点奇怪,接下来我们优化下。

8、优化页面

resources/sass/app.scss

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

/* universal */

body {
  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
}

/* header */

.navbar-static-top {
  border-color: #e7e7e7;
  background-color: #fff;
  box-shadow: 0px 1px 11px 2px rgba(42, 42, 42, 0.1);
  border-top: 4px solid #00b5ad;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 40px;
  margin-top: 0px;
}

设置了全局字体,还有顶部导航栏的阴影,效果如下:

image.png

9、页脚固定

resources/sass/app.scss

/* Sticky footer styles */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #000;

  .container {
    padding-right: 15px;
    padding-left: 15px;

    p {
      margin: 19px 0;
      color: #c1c1c1;

      a {
        color: inherit;
      }
    }
  }
}

七、浏览器缓存问题

1、问题描述

现代化的浏览器,会对静态文件进行缓存,静态文件在本课程的范畴内,指的是 .css.js 后缀的文件。这是一个浏览器的优化功能,极大地加快了网页的加载速度,但是在我们日常开发和维护中,有时候会造成混淆。

开发时,你明明修改了样式,但是刷新浏览器却看不见变化,然后你就来回不断地修改你的样式文件、重新编译、做各种测试,浏览器页面仍然一成不变。直到你重新刷新好多次,或者修改样式文件名称时,才恍然大悟,原来是浏览器缓存了。

2、解决方案


Laravel Mix 给出的方案是为每一次的文件修改做哈希处理。只要文件修改,哈希值就会变,提醒客户端需要重新加载文件,很巧妙地解决了我们的问题。我们只需要对 webpack.mix.js稍作修改,即可使用此功能:

webpack.mix.js

const mix = require('laravel-mix');

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

以上可看出,我们只是增加了 version() 函数的调用,其他未做修改。

在我们的全局模板中,我们已经使用了动态的加载样式代码,此处无需修改。贴上代码来看下,注意以下 css 和 js 加载的地方:

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">

<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', 'LaraBBS') - Laravel 进阶教程</title>

 <!-- Styles -->
 <link href="{{ mix('css/app.css') }}" rel="stylesheet">

</head>

<body>
<div id="app" class="{{ route_class() }}-page">

 @include('layouts._header')

 <div class="container">

 @include('shared._messages')

        @yield('content')

 </div>

 @include('layouts._footer')
</div>

<!-- Scripts -->
<script src="{{ mix('js/app.js') }}"></script>
</body>

</html>

mix() 方法与 webpack.mix.js 文件里的逻辑遥相呼应。接下来刷新页面,查看页面源代码:

image.png

另外的,线上环境中,我们一般会使用 CDN 服务器来加载静态文件,已达到优化网页加载速度的效果。CDN 也会遇到像浏览器缓存类似的问题,Laravel Mix 的 version() 同时也是一个很好解决文件版本变更的方案。


Git 代码版本控制

接着让我们将本次更改纳入版本控制中:

$ git add -A
$ git commit -m "静态文件浏览器缓存问题"


八、字体图标

本项目我们将使用 Font Awesome 来作为字体图标库。Font Awesome 提供了可缩放的矢量图标,允许我们使用 CSS 所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。

1、安装

yarn add @fortawesome/fontawesome-free --no-bin-links

image.png

打开 package.json 可以看到新增了这一行依赖:

package.json

"dependencies": {
    "@fortawesome/fontawesome-free": "^5.6.3"
}

2、载入

我们还需要在样式中载入:

resources/sass/app.scss

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

// Fontawesome
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

3、编译

运行 mix 编译命令:

$ npm run watch-poll

能看到类似以下的输出即可:

image.png


Git 代码版本控制

接着让我们将本次更改纳入版本控制中:

$ git add -A
$ git commit -m "增加字体图标"

九、小结

学到了什么?

本章中,我们学习了:

  • 开发环境的初始化;

  • 新建 Laravel 项目;

  • Composer 加速;

  • Laravel 的配置信息;

  • 布局模板的构建;

  • Yarn 安装加速;

  • 引入字体图标;

  • Laravel Mix 安装和使用。

提交代码

作为一个合格的 Web 工程师,在代码管理上,要养成以下好习惯:

不要让代码在你的机器上过夜。

当你本地有很多代码版本时,频繁提交到远程服务器是一个最佳实践。代码是我们的时间和智力的结晶,远程服务器就是你的备份。笔者见过同事在本机上开发一周的代码,因为一个硬盘故障,一周的辛劳付之东流,对自己和项目都是一笔不小的损失。

接下来我们将本地的代码提交到线上,以后课程每章结束时,我们都会将本地代码同步到远程服务器:

$ git push origin master














回复列表



回复操作

正在加载验证码......

请先拖动验证码到相应位置