Laravel Vuejs 實戰：開發知乎 （6）發佈問題

1.view部分：

安裝一個擴展包：Laravel-UEditor

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

配置

添加下面一行到 config/app.php 中 providers 部分：

  1 Overtrue\LaravelUEditor\UEditorServiceProvider::class,

發佈配置文件與資源

  1 php artisan vendor:publish --provider=」Overtrue\LaravelUEditor\UEditorServiceProvider」

模板引入編輯器

這行的做用是引入編輯器須要的 css,js 等文件，因此你不須要再手動去引入它們。

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

編輯器的初始化

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

5.4+ 請不要忘記 php artisan storage:link
若是你使用的是 laravel 5.3 如下版本，請先建立軟連接：
# 請在項目根目錄執行如下命令
$ ln -s `pwd`/storage/app/public `pwd`/public/storage
在 config/ueditor.php 配置 disk 爲 'public' 狀況下，上傳路徑在：public/uploads/ 下，確認該目錄存在並可寫。
若是要修改上傳路徑，請在 config/ueditor.php 裏各類類型的上傳路徑，可是都在 public 下。
請在 .env 中正確配置 APP_URL 爲你的當前域名，不然可能上傳成功了，可是沒法正確顯示。

更多請參考 Laravel-UEditor

在views文件夾下新建一個questions文件夾，並在該子文件夾內新建一個create.blade.php文件，代碼以下：

  1 @extends('layouts.app')
  2 @section('content')
  3     @include('vendor.ueditor.assets')
  4     <div class="container">
  5         <div class="row">
  6             <div class="col-md-8 col-md-offset-2">
  7                 <div class="panel panel-default">
  8                     <div class="panel-heading">
  9                         發佈問題
 10                     </div>
 11                     <!-- 編輯器容器 -->
 12                     <script id="container" name="content" type="text/plain"></script>
 13                 </div>
 14             </div>
 15         </div>
 16     </div>
 17 
 18     <!-- 實例化編輯器 -->
 19     <script type="text/javascript">
 20         var ue = UE.getEditor('container');
 21         ue.ready(function () {
 22             ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); // 設置 CSRF token.
 23         });
 24     </script>
 25 
 26 @endsection
 27 

注意能夠在上一節 Laravel Vuejs 實戰：開發知乎 （5）設計問題表 中提到的命令改爲使用

  1   1 php artisan make:model Models/Question -cmr

這樣直接就採用了RESTFul式的Controller，比較方便；web.php中也能夠直接：

  1 Route::resource(‘questions’,’QuestionController’);

若是已經執行過了，能夠刪除QuestionController而後執行：

  1 php artisan make:controller QuestionController –r
  2 
  3 或
  4 
  5 php artisan make:controller QuestionController –resource

在web.php 文件中添加一個：

  1 Route::resource('questions', 'QuestionController'); 

當訪問 http://zhihu.test/questions/create 連接的時候會 由QuestionController中的create方法來接待，咱們須要返回一個view【視圖界面】，因此修改添加以下代碼：

  1   /**
  2      * Show the form for creating a new resource.
  3      *
  4      * @return \Illuminate\Http\Response
  5      */
  6     public function create()
  7     {
  8         //返回questions文件夾下create.blade.php做爲視圖
  9         return view('questions.create');
 10     }
 11 

結果以下：

正確顯示視圖，可是咱們是須要發佈問題，這裏只是看到了編輯器，因此咱們修改create.blade.php視圖代碼以下：

注：若是忘記了或者不太清楚questions提交保存的route路由別名，能夠用命令行： php artisan route:list ，會列出全部的route路由信息，如圖：

  1 @extends('layouts.app')
  2 @section('content')
  3     @include('vendor.ueditor.assets')
  4     <div class="container">
  5         <div class="row">
  6             <div class="col-md-8 col-md-offset-2">
  7                 <div class="card">
  8                     <div class="card-header">
  9                         發佈問題
 10                     </div>
 11                     <div class="card-body">
 12                         <form action="{{ route('questions.store') }}" method="post">
 13                             {{--注意要有csrftoken--}}
 14                             @csrf
 15                             <div class="form-group">
 16                                 <label for="title">標題</label>
 17                                 <input type="text" name="title" class="form-control" placeholder="標題" id="title">
 18                                 <p class="text text-danger"> @error('title') {{ $message }} @enderror </p>
 19                             </div>
 20                             <!-- 編輯器容器 -->
 21                             <script id="container" name="content" type="text/plain"></script>
 22                             <p class="text text-danger"> @error('content') {{ $message }} @enderror </p>
 23                             <!--發佈按鈕-->
 24                             <button type="submit" class="btn btn-primary mt-2 float-md-right">發佈問題</button>
 25                         </form>
 26                     </div>
 27                 </div>
 28             </div>
 29         </div>
 30     </div>
 31 
 32     <!-- 實例化編輯器 -->
 33     <script type="text/javascript">
 34         var ue = UE.getEditor('container');
 35         ue.ready(function () {
 36             ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); // 設置 CSRF token.
 37         });
 38     </script>
 39 
 40 @endsection
 41 

效果如圖：

注意：爲了上傳圖片能夠讀寫，請事前執行一下命令：

  1 php artisan storage:link

圖片上傳的具體配置上傳大小，格式，位置都是由config/ueditor.php中 ‘upload’列裏保存配置信息來具體設置的

因爲提交後的數據是由QuestionController中的store方法來處理的，先測試提交一個數據用 dd()方法查看數據：

因此如今來編輯store方法，代碼以下：

  1 public function store(Request $request)
  2     {
  3         //
  4         $data = $request->validate([
  5             'title' => 'required|min:8',
  6             'content' => 'required|min:8',
  7         ]);
  8 
  9         $data['user_id'] = auth()->user()->id;
 10 
 11         $question = Question::create($data);
 12 
 13         return redirect()->route('questions.show', $question);
 14     }

因爲上一節中問題數據庫遷移設計的時候，忘記了user_id字段，因此添加一下，具體方法參考：Laravel 6.X 數據庫遷移 建立表 與 修改表 

執行：

  1 php artisan make:migration add_user_id_to_questions_table --table=questions

其中代碼

而後執行：

  1 php artisan migrate

記得添加Question模型中的 屬性值

  1 protected $fillable = ['title', 'content', 'user_id']; //不然會提示MassAssignmentException ，也可使用guard屬性 具體看官方文檔

store方法中，保存了數據以後，就跳轉至show route，會由QuestionController的show方法來處理請求，咱們先測試一下 提交問題以後，結果如圖：

修改show方法中的代碼以下：

  1 /**
  2  * Display the specified resource.
  3  *
  4  * @param Question $question
  5  * @return \Illuminate\Http\Response
  6  */
  7 public function show(Question $question)
  8 {
  9     //
 10     return view('questions.show', compact('question'));
 11 }
 12 

接下來，在views/questions文件夾下建立一個show.blade.php文件：其中代碼以下：

  1 @extends('layouts.app')
  2 
  3 @section('content')
  4 
  5     <div class="container">
  6         <div class="row">
  7             <div class="col-md-8 col-md offset-2">
  8                 <div class="card">
  9                     <div class="card-header">
 10                         {{ $question->title }}
 11                     </div>
 12                     <div class="card-body">
 13                         {!! $question->content !!}
 14                     </div>
 15                 </div>
 16             </div>
 17         </div>
 18     </div>
 19 
 20 @endsection
 21 

最後結果：