之前做自己的网站中，前端和后端的代码高度耦合，导致后来的修改和维护变得越来越困难。同时，由于使用的技术老旧，使得代码的运行效率和质量都较为低下。

学习了react和vue等框架后，我对工程化、模块化、组件化有了一定的实践和理解，但这并不能完全解决前后端耦合的问题。

解决前后端耦合的方法就是“前后端分离”，我对它的理解是，前后端完全隔开，前端中没有后端的代码，反之亦然。呢么实现前后端分离，又要前后端相互联系的灵魂就是API接口。前端给后端发送请求，后端根据请求的URL和载荷返回相应的结果，前端调用返回的结果。

经过之前的学习实践和实习的积累，我有了开发一个自己的API的想法和能力。这是我之后写工程化、模块化、组件化、前后端分离项目、跟上时代步伐的基础

下面我使用PHP+apache+MySQL来做API接口：

首先，数据库中要有数据：

然后，PHP连接数据库：

header('Content-Type:application/json');
$link = mysqli_connect('localhost:3306', 'guess', 'guess');
mysqli_query($link,'use games');
$game_details_db = mysqli_query($link,'select * from users');
$game_details=[];
while($res = mysqli_fetch_object($game_details_db)) $game_details[] = $res;
echo (json_encode($game_details));

这里加上Content-Type:application/json是为了方便返回数据的格式

返回的数据推荐使用echo来输出，return不行（蛮奇怪的，这一点和我预想的不一样），var dump和printr都不推荐

json_encode()可以将关联数组转换成对象（很方便，我之前还用正则替换了半天，真是大怨种啊）

接下来，就是发送Ajax请求啦！axios什么的都可以

大家如果控制台调试的话，需要使用下面的代码先引入jQuery哦~

var importJs=document.createElement('script');
importJs.setAttribute("type","text/javascript");
importJs.setAttribute("src", 'https://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js');
document.getElementsByTagName("head")[0].appendChild(importJs);

发送请求：

(() => {
  let data;
  $.ajax({
        async: false,
        crossDomain: true,
        url: 'http://www.reviewlyd.com/index.php',
        type: "GET",
        headers:{
          'Content-Type':'application/json'
        },
        success: function (res) {
          data = res
        }
    });
  return data;
})();

哈哈，其实很简单，可以愉快的写前后端分离咯~