PHP

使用 Laravel 5.3 + Vue.js 2.1 开发知乎

项目配置

创建 Laravel 项目，并使用 PHPStorm 打开项目，将 app 目录设置为 Sources Root

1
laravel new zhihu

打开用户表迁移文件，新增字段代码如下：

1
2

发送邮件

安装 Laravel-SendCloud

1
composer require naux/sendcloud

添加服务提供者

1
Naux\Mail\SendCloudServiceProvider::class,

修改 .env 驱动和配置密钥

1
2
3
MAIL_DRIVER=sendcloud
SEND_CLOUD_USER=   # 创建的 api_user
SEND_CLOUD_KEY=    # 分配的 api_key

快速生成用户验证界面

1
php artisan make:auth

快速生成控制器，并修改代码如下：

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
php artisan make:controller EmailController
<?php
namespace App\Http\Controllers;
use App\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
class EmailController extends Controller
{
    public function verify($token)
    {
        $user = User::where('confirmationToken', $token)->first();
        if (is_null($user)) {
            return redirect('/');
        }
        $user->isActive = 1;
        $user->confirmationToken = str_random(40);
        $user->save();
        Auth::login($user);
        return redirect('/home');
    }
}

修改注册控制器代码

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
30
31
32
33
34
35
36
37
38
39
40
41
42
<?php
/**
 * Create a new user instance after a valid registration.
 *
 * @param  array  $data
 * @return User
 */
protected function create(array $data)
{
    $user = User::create([
        'name' => $data['name'],
        'email' => $data['email'],
        'avatar' => '/images/avatars/default.png',
        'confirmationToken' => str_random(40),
        'password' => bcrypt($data['password']),
    ]);
    $this->sendVerifyEmailTo($user);
    return $user;
}
/**
 * 验证用户邮箱
 *
 * @param $user
 *
 * @return void
 */
private function sendVerifyEmailTo($user)
{
    $data = [
        'url' => route('email.verify', ['token' => $user->confirmationToken]),
        'name' => $user->name,
    ];
    $template = new SendCloudTemplate('zhihu_app_register', $data);
    Mail::raw($template, function($message) use($user) {
        $message->from('luis@mail.cowcat.cc', 'Laravel');
        $message->to($user->email);
    });
}

新增路由

1
Route::get('email/verify/{token}', ['as' => 'email.verify', 'uses' => 'EmailController@verify']);

Flash 消息提示

安装 Laracasts Flash

1
composer require laracasts/flash

添加服务提供者

1
Laracasts\Flash\FlashServiceProvider::class,

本地化

安装 caouecs/Laravel-lang

1
composer require caouecs/laravel-lang:~3.0

安装完毕之后，把对应的文件复制粘贴到 resource/lang 目录下

富文本编辑器

安装 overtrue/laravel-ueditor

1
composer require "overtrue/laravel-ueditor:~1.0"

添加服务提供者

1
Overtrue\LaravelUEditor\UEditorServiceProvider::class,

发布配置文件与资源

1
php artisan vendor:publish

模板引入编辑器

1
@include('vendor.ueditor.assets')

编辑器的初始化

1
2
3
4
5
6
7
8
9
10
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var ue = UE.getEditor('container');
    ue.ready(function() {
        ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); // 设置 CSRF token.
    });
</script>
<!-- 编辑器容器 -->
<script id="container" name="content" type="text/plain"></script>

简化富文本编辑器

1.clone 代码

1
git clone https://github.com/JellyBool/simple-ueditor.git

2.用此项目的 ueditor 目录替换原来的 ueditor 目录

3.实例化编辑器的时候配置 toolbar ，主要是 toolbar 的配置

1
2
3
4
5
6
7
8
9
10
11
var ue = UE.getEditor('editor', {
    toolbars: [
            ['bold', 'italic', 'underline', 'strikethrough', 'blockquote', 'insertunorderedlist', 'insertorderedlist', 'justifyleft','justifycenter', 'justifyright',  'link', 'insertimage', 'fullscreen']
        ],
    elementPathEnabled: false,
    enableContextMenu: false,
    autoClearEmptyNode:true,
    wordCount:false,
    imagePopup:false,
    autotypeset:{ indent: true,imageBlockLine: 'center' }
});

使用 select 2 组件

1
https://select2.github.io/

使用 Laravel-Repository