[Laravel] Json 데이터 통신으로 회원가입 구현 -(1)

프론트엔드에서 Ajax으로 json 형식의 데이터를 백엔드로 넘겨주면 백엔드에선 해당 json DB에 추가 하는 것 까지 하겠습니다.

Laravel의 쿼리빌더를 사용하였습니다.

 

routes/web.php

use Illuminate\Support\Facades\Route;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;

Route::get('/', function () {
    return view('welcome');
});

Route::post('/post/signup', function(Request $request)
{
	$params = $request -> post();
    if (!(isset($params['id']) && isset($params['level'] && isset($params['pwd']))
    	return json_encode(array('code'=> 400, 'description' => 'Bad request'))
    
    // 	존재하는 아이디 인지 확인
    $user = DB::table('users') -> select('user_id')
    	-> where([
        	['user_id', '=', params['id']
           	]) -> get();
    
    if (count($user) != 0)
    {
    	return json_encode(array('code'=> 601, 'description' => 'User already exist'));
    }
    
    // user password 암호화
    $user_password = password_hash($params['pwd'],PASSWORD_BCRYPT)
	
    DB::table('users') -> insert([
    	[
        	'user_id' => $params['id'],
            'user_level' => $params['level'],
            'user_pw' => $user_password
		]
    ]);
    
    return json_encode(array('code'=> 200, 'description' => 'Success'));

}

 

register.js

!function($) {
	/*------------------------------------------------------------------

	Signin Module

	-------------------------------------------------------------------*/

	var Signup = function() {
		var _this = this;
	}

	Signup.prototype.signupHandler = function() {
		$('#signUp').click(function(){
			var user_name=$('#user_id').val();
			var user_level=$('#user_level').val();
            var user_pwd = $('#user_pw').val();
            var user_pwd_check = $('#user_pw_check').val();
			// // if (user_name != ''  && user_pwd != '' && user_level != '')
            // {
                $.ajax({
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
                        },
                    type:"post",
                    url:"https://e-mon.kro.kr/post/signup",
                    dataType:"json",
                    data: {
                        id : user_name,
                        level : user_level,
                        pwd : user_pwd
                    },
                    success: function(data){
                        if (data.code == 200)
                            alert("성공적으로 회원가입 되었습니다!");
                        else
                            alert(data.description);
                    },
                    error: function(){
                        alert("에러 발생, 관리자 문의");
                    }
                });
			// }
            // else
            // {
            //     alert("오류가 있습니다");
            // }
		});

	}

	/*------------------------------------------------------------------

	Init Signin

	-------------------------------------------------------------------*/

	Signup.prototype.init = function () {
		_this = this;
		var submitAction = function(e){
            e.preventDefault();
            e.stopPropagation();
        };
        $('#register_form').bind('submit', submitAction);
		_this.signupHandler();
	}

	window.signup = new Signup();

	$(window).on('load', function() {
 		$.ajaxSetup
		(
			{
				headers: {
					"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
				}
			}
		)
		signup.init();
	});
}(jQuery)

 

welcome.blade php 에는

#register_form , #signUp ID를 가진 폼과 버튼을 만들어주시면 됩니다.