vuejs知乎_Laravel Vuejs 实战：开发知乎 （6）发布问题

1.view部分：

安装一个扩展包：Laravel-UEditorjavascript

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

配置

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

1 Overtrue\LaravelUEditor\UEditorServiceProvider::class,发布配置文件与资源

1 php artisan vendor:publish --provider=”Overtrue\LaravelUEditor\UEditorServiceProvider”模板引入编辑器

这行的做用是引入编辑器须要的 css,js 等文件，因此你不须要再手动去引入它们。css

1 @include('vendor.ueditor.assets')编辑器的初始化

1

2

3 var ue = UE.getEditor('container');

4 ue.ready(function() {

5 ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); // 设置 CSRF token.

6 });

7

8

9

10

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 为你的当前域名，不然可能上传成功了，可是没法正确显示。html

在views文件夹下新建一个questions文件夹，并在该子文件夹内新建一个create.blade.php文件，代码以下：laravel

1 @extends('layouts.app')

2 @section('content')

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

4

5

6

7

8

9 发布问题

10

11

12

13

14

15

16

17

18

19

20 var ue = UE.getEditor('container');

21 ue.ready(function () {

22 ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); // 设置 CSRF token.

23 });

24

25

26 @endsection

27

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

这样直接就采用了RESTFul式的Controller，比较方便；web.php中也能够直接：github

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

若是已经执行过了，能够删除QuestionController而后执行：web

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

5

6

7

8

9 发布问题

10

11

12

13 {{--注意要有csrftoken--}}

14 @csrf

15

16 标题

17

18

@error('title') {{ $message }} @enderror

19

20

21

22

@error('content') {{ $message }} @enderror

23

24 发布问题

25

26

27

28

29

30

31

32

33

34 var ue = UE.getEditor('container');

35 ue.ready(function () {

36 ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); // 设置 CSRF token.

37 });

38

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

6

7

8

9

10 {{ $question->title }}

11

12

13 {!! $question->content !!}

14

15

16

17

18

19

20 @endsection

21

最后结果：