ホームページ > 記事 > バックエンド開発 > Laravel がフロントエンド Ajax からデータを受け取る共有例

Laravel がフロントエンド Ajax からデータを受け取る共有例

小云云オリジナル: 2018-02-06 09:42:472751ブラウズ

現在、あるプロジェクトについてメモを取っているところです。vue.js + laravel + mongodb というものです。まず、昨夜のプロジェクトの後で、次のことをまとめておきます。プロジェクト全体で使用されているテクノロジーと私が遭遇した落とし穴、今日はフロントエンドがバックエンドにデータを送信し、laravelがそれを受信する例を記録します。

私はフロントエンドの ajax プラグインに vue-resource を使用しませんでしたが、使用中に落とし穴に遭遇したため、vue-resource よりも使いやすく小さい axios.js を使用しました。

フロントエンドコードを見てみましょう (vue ロジック部分は省略します):

axios.post(&#39;index.php/login&#39;,{
    email:this.email,
    pass:this.pass
  }).then(function(res){
    console.log(res)
  }).then(function(){
    console.log(321)
  })

this.email と this.pass は、このメソッドを実行するためにユーザーが入力したフォームデータです (データ形式が正しいことを確認した後)。

Laravel がこれら 2 つの値をどのように受け取るかを見てみましょう:

次の内容を含む GUser.php モデルファイルを app フォルダーの下に作成します:

<?php
namespace App;
use Mongodb;
use DB;
 
class GUser extends Mongodb {
  public static function login($email) {
 
    $mongo = DB::connection(&#39;mongodb&#39;);
    $res = $mongo->collection(&#39;user&#39;)->where(&#39;email&#39;,$email)->first();
    return $res;
 
  }
}

次に、app/Http/Controllers の下に GUserController を作成します。、内容は次のとおりです:

<?php
namespace App\Http\Controllers;
 
use App\Http\Controllers\Controller;
use App\GUser;
use Illuminate\Http\Request;
 
class GUserController extends Controller{
 
  protected function login(Request $request) {
    $email = $request->input(&#39;email&#39;);
    $pass = $request->input(&#39;pass&#39;);
    $res = GUser::login($email);
    return $res;
  }
}

もちろん、ここではパス値は使用されておらず、ログイン検証ロジックもここでは省略しています。

次にルーティングファイル web.php で設定します:

Route::any(‘/login&#39;,&#39;GUserController@login&#39;);

Laravel がフロントエンド Ajax からデータを受け取る共有例

関連記事