[Day22] 第二十二章 - 使用token验证使用者并且透过ajax来建立技能

前言

昨天我们完成了登入
今天我们一样登入roni来建立roni的技能吧!!

目标

ajax应用
验证使用者
复习model fillable

实作

由於路由我们在skills之前已经设定过resource了所以不用额外设定

laravel 好棒棒

如果是新同学我贴一下给参考

Route::resource('skills', 'SkillController');

接者根据laravle的resource表
我们skills/create是对应GET也就是我们需要一个create的前端介面

我们先在views/skill底下新增一个create.blade.php

接者来到controller来控制view要导向哪个blade.php吧!!

1.SkillController.php

之前我们已经见过skill的contorller了
我们先把return的view导向create.blade.php吧

    public function create()
    {
        //
        return view('skill.create');
    }

就是这样啦很简单吧!!

这样我们就可以透过在网址上打
http://127.0.0.1:8000/skills/create
看到我们要建的前端画面
画面先给各位看，待会来解释我们的程序码

2. create.blade.php

废话不多说先上程序码

<head>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"> </script>
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<body class="text-center">
    <form class="form-signin" method="POST">
        <!-- @csrf -->


        <label for="inputTitle" class="sr-only">技能名称</label>
        <input type="text" id="inputTitle" name="title" class="form-control" placeholder="title name" required autofocus>
        <button class="btn btn-lg btn-primary btn-block" type="button" id="createskill">建立技能</button>
        <p class="mt-5 mb-3 text-muted">&copy; 2021 iThome 铁人赛</p>
    </form>

    <script>
        $(document).ready(function() {
            $("#createskill").on('click', function() {
                var data = {
                    title: $('#inputTitle').val(),
                }
                $.ajax({
                        method: "POST",
                        url: "/skills",
                        dataType: 'json',
                        data
                    })
                    .done(function(msg) {
                        window.location.href = '/skills';
                    });
            });
        });
    </script>
</body>

我们可以copy前面user登入的介面修改

别忘了下方使用#的选择器选择的是html的id 喔!!
我们这边只要把title传过去後端就好，使用者会透过前面建立好的cookie来验证使用者身分
这边我们要注意的是路径是skills喔!!而非 skills/create
原因是resource会自动帮我们对应controller的store方法，HTTP动作是POST

3.小插曲修改Model skill.php

我们这边为了可以资料可以mass assignment
我们先修改下models/Skill.php

整个Class 长这样!! 但实际上我们只要加fillable的属性就好

这边只要新增title跟user_id就好

class Skill extends Model
{
    use HasFactory;
    protected $fillable = [
        'title', 'user_id'
    ];
    public function user()
    {
        return $this->belongsTo(User::class);
    }
}

4. 回到SkillContorller (真正建立技能并塞入资料库)

先废话不多说上code

建立是使用store的function

public function store(Request $request)
    {
        //
        $user = Auth::user();
        $data = $request->all();
        $data['user_id'] = $user->id;
        $skill = Skill::create($data);
        dd($data);
        return response($skill);
        // return $user_id;
    }