[Day22] 第二十二章 - 使用token驗證使用者並且透過ajax來建立技能 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 22

永豐金融APIs

釋放你的潛能用技能交易吧!系列第 22 篇

[Day22] 第二十二章 - 使用token驗證使用者並且透過ajax來建立技能

13th鐵人賽永豐apis laravel ajax mvc

roni

2021-10-07 23:18:46

617 瀏覽

分享至

前言

昨天我們完成了登入
今天我們一樣登入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;
    }