茨の道も一歩から

インフラ構築からプログラミング(Python・JavaScript)までITに関するブログです。

PHP+axiosの動作検証

PHP

はじめに

  • axiosのmethods[ GET | POST | PUT | DELETE ]動作を試したメモ

公式サイト

動作検証環境

検証用スクリプト

■ api.php 

<?php
session_start();

if(!$_SESSION['singleton']) {
    $_SESSION['users'] = array();
    $_SESSION['singleton'] = true;
    array_push($_SESSION['users'], array(id=>1, name=>'Test1'));
    array_push($_SESSION['users'], array(id=>2, name=>'Test2'));
    array_push($_SESSION['users'], array(id=>3, name=>'Test3'));
    array_push($_SESSION['users'], array(id=>4, name=>'Test4'));
}

function router()
{
    $req = array();
    switch ($_SERVER['REQUEST_METHOD']) {
    case 'GET':
        $res = $_SESSION['users'];
        break;
    case 'POST':
        $req = json_decode(file_get_contents('php://input'), $assoc= true);
        array_push($_SESSION['users'], $req);
        $res = $_SESSION['users'];
        break;
    case 'PUT':
        $_change = false;
        $req = json_decode(file_get_contents('php://input'), $assoc= true);
        foreach($_SESSION['users'] as $key => $user) {
            if($req['id'] == $_SESSION['users'][$key]['id']) {
                $_SESSION['users'][$key]['name'] = $req['name'];
                $_change = true;
                $res = $_SESSION['users'];
            }
        }
        if(!$_change) {
            echo 'User not found.';
        }
        break;
    case 'DELETE':
        $req = json_decode(file_get_contents('php://input'), $assoc= true);
        foreach($_SESSION['users'] as $key => $user) {
            if($req['id'] == $_SESSION['users'][$key]['id']) {
                unset($_SESSION['users'][$key]);
            }
        }
        $res = $_SESSION['users'];
        break;
    default:
        $res = "Not supprted methods.";
        break;
    }
    return $res;
}

echo json_encode(router());

■ index.html 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Python Web Server</title>
    </head>
    <body>
        <div id="contents">
            <ul>
                <li><button id="getTest">GET</button></li>
                <li><button id="postTest">POST</button></li>
                <li><button id="putTest">PUT</button></li>
                <li><button id="deleteTest">DELETE</button></li>
                <li><button id="patchTest">PATCH</button></li>
            </ul>
        </div>
        <script src="axios.min.js"></script>
        <script src="app.js"></script>
    </body>
</html>

■ app.js 

var getTest = document.getElementById('getTest');
var postTest = document.getElementById('postTest');
var putTest = document.getElementById('putTest');
var deleteTest = document.getElementById('deleteTest');
var patchTest = document.getElementById('patchTest');

getTest.onclick = function(e) {
    axios.get('./api.php')
    .then(function(res) {
        console.log(res);
    })
    .catch(function(e) {
        console.log(e);
    })
    .then(function() {
        console.log('The get method was done.');
    });
};

postTest.onclick = function(e) {
    axios({
        method: 'post',
        url: './api.php',
        data: {
            id: 10,
            name: 'Test10'
        }
    })
    .then(function(res) {
        console.log(res);
    })
    .catch(function(e) {
        console.log(e);
    })
    .then(function() {
        console.log('The post method was done.');
    });
};

putTest.onclick = function(e) {
    axios({
        method: 'put',
        url: './api.php',
        data: {
            id: 1,
            name: 'Test11'
        }
    })
    .then(function(res) {
        console.log(res);
    })
    .catch(function(e) {
        console.log(e);
    })
    .then(function() {
        console.log('The put method was done.');
    });
};

deleteTest.onclick = function(e) {
    axios({
        method: 'delete',
        url: './api.php',
        data: {
            id: 2
        }
    })
    .then(function(res) {
        console.log(res);
    })
    .catch(function(e) {
        console.log(e);
    })
    .then(function() {
        console.log('The delete method was done.');
    });
};

patchTest.onclick = function(e) {
    axios({
        method: 'patch',
        url: './api.php',
        data: {
            id: 2
        }
    })
    .then(function(res) {
        console.log(res);
    })
    .catch(function(e) {
        console.log(e);
    })
    .then(function() {
        console.log('The patch method was done.');
    });
};