Laravel5.4 博客開發(fā)

Blackjun 發(fā)布于2019-07-01 12:22 / 1683人閱讀

摘要：本文將使用框架開發(fā)一個全新的博客，開發(fā)設(shè)備為，使用環(huán)境，為。現(xiàn)在讓我們先來創(chuàng)建一個文件夾，并將文件放置到其中。完成之后，點(diǎn)擊右下角的按鈕。

本文將使用Laravel5.4框架開發(fā)一個全新的博客，開發(fā)設(shè)備為Mac，使用Homestead 環(huán)境，IDE 為 Phpstorm。

一、安裝Laravel項目 1.安裝項目

> cd ~/Homestead && vagrant up
> vagrant ssh
> vagrant@homestead:~$ cd Code
> vagrant@homestead:~/Code$ composer create-project laravel/laravel digtime

// 或者指定版本
composer create-project --prefer-dist laravel/laravel digtime "5.5.*"

2.homestead.yaml配置

?  ~ atom ~/.homestead/Homestead.yaml

---
ip: "192.168.10.10"
memory: 2048
cpus: 1
provider: virtualbox

authorize: ~/.ssh/id_rsa.pub

keys:
    - ~/.ssh/id_rsa

folders:
    - map: ~/Code
      to: /home/vagrant/Code

sites:
    - map: digtime.app # <--- 這里，第四個項目
      to: /home/vagrant/Code/digtime/public # <--- 這里

databases:
    - digtime

variables:
    - key: APP_ENV
      value: local

# blackfire:
#     - id: foo
#       token: bar
#       client-id: foo
#       client-token: bar

# ports:
#     - send: 50000
#       to: 5000
#     - send: 7777
#       to: 777
#       protocol: udp

3.重啟vagrant

修改完 Homestead.yaml 文件后，需要重新加載配置文件信息才能生效。

?  ~ cd Homestead
?  Homestead git:(7924ab4) vagrant reload --provision

4.修改hosts配置文件

Hosts配置域名在mac的位置： /etc/hosts

192.168.10.10 digtime.app

5.通過域名訪問

digtime.app

6.快速進(jìn)入項目

cd ~/Homestead && vagrant up
vagrant ssh
cd ~/Code/digtime

二、安裝項目需要的資源 1.npm安裝前端包

npm install

2.artisan 生成表

執(zhí)行所有未執(zhí)行的遷移

php artisan migrate

回滾上一次的遷移

vagrant@homestead:~/Code/digtime$ php artisan migrate:rollback

3. artisan 命令生成權(quán)限

php artisan make:auth

4. 修改User位置

Laravel 為我們默認(rèn)創(chuàng)建的模型文件放置在 app 文件夾下，為了更符合 MVC 模式的開發(fā)流程，本博文統(tǒng)一使用 app/Models 文件夾來放置所有的模型文件。現(xiàn)在讓我們先來創(chuàng)建一個 app/Models 文件夾，并將 User.php 文件放置到其中。

$ mkdir app/Models
$ mv app/User.php app/Models/User.php

在執(zhí)行完這一步的操作之后，我們還需要執(zhí)行下面這兩個操作：

1、修改 User.php 文件，更改 namespace 為我們新創(chuàng)建的文件夾路徑：
app/Models/User.php


2、全局更改 AppUser 為 AppModelsUser，在 Atom中使用快捷鍵 shift + cmd(ctrl) + f 來進(jìn)行全局搜索替換的操作。
完成之后，點(diǎn)擊右下角的 Replace All 按鈕。

三、github 托管項目
git 初始化
vagrant@homestead:~/Code/digtime$ git init
Initialized empty Git repository in /home/vagrant/Code/digtime/.git/
vagrant@homestead:~/Code/digtime$ git add -A
> git commit -m "Initial commit"

// 將項目推到github上
> git remote add origin git@github.com:corwien/digtime.git
> git push -u origin master

// 添加分支
> git checkout master
> git checkout -b users
四、webpack打包資源
有關(guān)Laravel5.4 的 webpack使用，請看我的這篇博文：
Laravel5.4新特性-Laravel-mix的使用
Mix 是位于 Webpack 頂層的配置層，所以要運(yùn)行 Mix 任務(wù)你只需要在運(yùn)行包含在默認(rèn) package.json 文件中的其中某個 NPM 腳本即可：
// 1.安裝package.json 包
npm install

// 2.運(yùn)行所有 Mix 任務(wù)...
npm run dev

// 運(yùn)行所有 Mix 任務(wù)并減少輸出...
// npm run production

// 3.監(jiān)控前端資源改變
npm run watch
監(jiān)控前端資源改變
五、密碼重置郵件發(fā)送
對密碼重置郵件發(fā)送進(jìn)行重構(gòu)，使用sendCloud進(jìn)行發(fā)送。
在 AppModelsUser.php 用戶 Model 方法中重寫sendPasswordResetNotification($token)發(fā)送郵件的方法：
 /**
     * 重寫重置密碼的郵件發(fā)送通知，覆蓋zhihu_app_reset_password底層的發(fā)送方法
     * 對這個類進(jìn)行重寫： IlluminateContractsAuthPasswordBroker
     *  $user->sendPasswordResetNotification(
     *   $this->tokens->create($user)
     *   );
     * 類文件：PasswordsPasswordBroker
     * @param $token
     */
    public function sendPasswordResetNotification($token)
    {
        // 重構(gòu)發(fā)送郵件
        (new UserMailer())->resetPassword($token, $this->email);
    }

IlluminateAuthPasswordsPasswordBroker.php
 /**
     * Send a password reset link to a user.
     *
     * @param  array  $credentials
     * @return string
     */
    public function sendResetLink(array $credentials)
    {
        // First we will check to see if we found a user at the given credentials and
        // if we did not we will redirect back to this current URI with a piece of
        // "flash" data in the session to indicate to the developers the errors.

        // 根據(jù)傳遞過來的email獲取用戶信息
        $user = $this->getUser($credentials);

        if (is_null($user)) {
            return static::INVALID_USER;
        }

        // Once we have the reset token, we are ready to send the message out to this
        // user with a link to reset their password. We will then redirect back to
        // the current URI having nothing set in the session to indicate errors.
        $user->sendPasswordResetNotification(
            $this->tokens->create($user)
        );

        return static::RESET_LINK_SENT;
    }
IlluminateAuthPasswordsCanResetPassword.php
 /**
     * Send the password reset notification.
     *
     * @param  string  $token
     * @return void
     */
    public function sendPasswordResetNotification($token)
    {
        $this->notify(new ResetPasswordNotification($token));
    }
最底層的發(fā)送郵件方法：
IlluminateAuthNotificationsResetPassword.php
 /**
     * Build the mail representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return IlluminateNotificationsMessagesMailMessage
     */
    public function toMail($notifiable)
    {
        return (new MailMessage)
            ->line("You are receiving this email because we received a password reset request for your account.")
            ->action("Reset Password", route("password.reset", $this->token))
            ->line("If you did not request a password reset, no further action is required.");
    }
六、自定義函數(shù)方法
在app目錄下，創(chuàng)建共用的函數(shù)文件Support/helpers.php

創(chuàng)建方法文件之后，需要在composer.json文件中自動加載：
 "autoload": {
        "files":[
            "app/Support/helpers.php"
        ],
       
    },
然后執(zhí)行 composer 重新加載方法:
> composer dump-autoload
七、Markdown編輯器
http://editor.integ.me/ segmentfault 家的，解析庫也有：https://segmentfault.com/a/11...
https://laravel-china.org/top...
1.Markdown編輯器
Markdown編輯器：https://simplemde.com/

這個編輯器看起來挺不錯，很簡潔，我們可以集成在我們的項目中。
1.1 npm 安裝
npm install simplemde --save
1.2 引用
在resources/assets/js/bootsrap.js 中引入剛下載的資源包：
// 引入markdown編輯器
window.simplemde = require("simplemde");
1.3 編譯靜態(tài)資源
使用命令編譯剛引入的資源，這樣才可以編輯在 public/app.js 中:
npm run dev
OK,這樣就引入到前端資源文件中了
Demo:
demo.html
  


    
        
        SimpleMDE Dome
       
       
        
    

    

        SimpleMDE Dome

        
            
        

        

    

1.4 在Laravel-admin中集成Simplemde編輯器
我們可以給下邊的 laravel-admin后臺 集成該 Markdown 的編輯器。


Simplemde 是一個優(yōu)秀簡潔的Markdown編輯器，如果 laravel-admin 自帶的基于 ckeditor 的編輯器組件使用上有問題，可以通過下面的步驟可以集成它，并覆蓋掉ckeditor：
1.4.1 先下載前端庫文件Simplemde
先下載前端庫文件Simplemde, 解壓到目錄 public/packages/admin/simplemde
1.4.2 新建組件類
然后新建組件類app/Admin/Extensions/Simplemde.php
script = <<
1.4.3 注冊
然后注冊進(jìn)laravel-admin,在 app/Admin/bootstrap.php 中添加以下代碼：

 *
 * Bootstraper for Admin.
 *
 * Here you can remove builtin form field:
 * EncoreAdminForm::forget(["map", "editor"]);
 *
 * Or extend custom form field:
 * EncoreAdminForm::extend("php", PHPEditor::class);
 *
 * Or require js and css assets:
 * Admin::css("/packages/prettydocs/css/styles.css");
 * Admin::js("/packages/prettydocs/js/main.js");
 *
 */

// EncoreAdminForm::forget(["map", "editor"]);

use AppAdminExtensionsSimplemde;
use EncoreAdminForm;

Form::extend("editor", Simplemde::class);

1.4.4 使用
// 這樣就可以使用我們上邊自定義的Simplemde Markdown編輯器了
$form->editor("content");
完整文件
  /**
     * Make a form builder.
     *
     * @return Form
     */
    protected function form()
    {
        return Admin::form(Article::class, function (Form $form) {

            $form->display("id", "ID");
            $form->text("title", "標(biāo)題")->rules("required|min:3");
            $form->text("subtitle", "副標(biāo)題");

            $form->text("user_id", "作者ID")->default(4);
            $form->text("slug", "Slug")->default("My-blog-4");
            $form->text("category_id", "分類ID")->default(1);
            $form->text("order", "排序")->default(1);
            $form->radio("is_excellent", "是否精華")->options(["F" => "否", "T" => "是"])->default("T");

            // 圖片路徑為upload/images/
            $form->image("page_image", "上傳文章背景圖")->move("images", function($file){

                // 自定義文件名,時間戳+五個隨機(jī)字符串+用戶ID
                $file_name =  date("Ymd") . str_random(6);
                return $file_name . "." . $file->guessExtension();
            });

            $form->datetime("published_at", "發(fā)布作品時間")->format("YYYY-MM-DD HH:mm:ss");

            $form->display("created_at", trans("admin::lang.created_at"));
            $form->display("updated_at", trans("admin::lang.updated_at"));
            
            // 自定義的編輯器
            $form->editor("content")->rules("required|min:3");
        });
    }
2.Markdown解析類
segmentfault 的Markdown解析類：SegmentFault/HyperDown
Laravel 引入第三方類文件，我們在app目錄下新建一個路徑，app/Markdown,并將下載的類文件 Parser.php 放在該目錄下，然后再新建一個文件，引用該類，這樣做的好處就是可以完全分離核心類文件，如同合約contacts 一樣，如果以后我們的解析類變了，我們只需對核心類做改變，而其他應(yīng)用的方法不需要再修改。
markdown.php 引用 parse.php 類:

parser = $parser;
    }

    public function markdown($text)
    {
        $html = $this->parser->makeHtml($text);

        return $html;
    }


}

在引用第三方類后，需要執(zhí)行下面命令進(jìn)行自動加載：
composer dump-autoload
使用方法：
markdown = $markdown;
}

// 解析Markdown 內(nèi)容
$this->markdown->markdown($article->content);

3.Markdown語法高亮
找了一個非常簡潔的 Markdown 樣式文件，我放在了 Gist 上，有需要的朋友可以看看：
Gist: corwien/Markdown.scss
將該文件下載放在Laravel中  resources/assets/css/vendor/markdown.scss，然后在 resources/sass/app.scss 中引入：
// Markdown

// 代碼高亮
@import "./../css/vendor/highlight.min";

// 編輯器樣式文件
@import "./../css/vendor/simplemde.min";

// 引入markdown樣式文件
@import "./../css/vendor/markdown.scss";   
然后編譯前端資源文件：
npm run dev
這樣，該markdwon樣式文件就編譯到前端資源文件中了。
我們可以在前端的內(nèi)容字段處引入 class="markdown" 樣式，然后看看渲染效果：
article.blade.php
    
       {!! $article->content !!}
    

代碼塊是不是很簡潔清爽許多呢？
八、開源的管理后臺
我們可以在項目中引入開源的管理后臺，這樣可以大大的提高我們的項目開發(fā)速度，這里推薦兩個非常強(qiáng)大的開源管理后臺。
1.Laravel-Administrator
【擴(kuò)展推薦】管理員后臺快速生成工具 Administrator "增強(qiáng)版" 分享
項目GitHub地址：summerblue/administrator
該后臺非常好用，由Laravel-China 團(tuán)隊維護(hù)開發(fā)，十分鐘就可以搭建起一個簡單的管理后臺：

2.laravel-admin
該管理后臺非常強(qiáng)大，使用Laravel AdminLTE開發(fā)，可以快速實現(xiàn)增刪改查功能及角色管理。
項目：GitHub地址: z-song/laravel-admin
Demo： 后臺用戶名：admin 密碼：admin

由于該前端資源有引入google地圖，所以，前端加載會非常慢，這里我們對源碼進(jìn)行一下修改：
換掉谷歌的地圖，加載時間過長：
/vendor/encore/laravel-admin/src/Form/Field/Map.php
/**
     * Get assets required by this field.
     *
     * @return array
     */
    public static function getAssets()
    {
        // 本項目配置環(huán)境使用的語言包是zh-CN,"resources/lang/zh-CN/", 所以這里對zh_CN做出修改【20170501】
        if (config("app.locale") == "zh-CN") {
            $js = "http://map.qq.com/api/js?v=2.exp";
        } else {
            $js = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=".env("GOOGLE_API_KEY");
        }

        return compact("js");
    }

九、Markdown側(cè)邊欄生成
為了使我們的文章詳情頁更利于瀏覽，像SF一樣，有一個側(cè)邊導(dǎo)航欄，這里我們使用一段js代碼就可以輕松的實現(xiàn)該功能。

js代碼：

 


 



DemoGist:corwien/markdown-side-menu-demo.html