初学前后端分离

在上一个项目中，采用了前后端分离，感觉比以前的前后端混在一起清爽许多。前后端分离，使得前端和后端之间分开，各自互不干扰。后端负责逻辑的交互，与数据库的连接以及提供好一个接口。前端负责从接口获取数据，控制视图。
以下是一个小的demo代码：

后端接口
/**   请求数据，返回json
     * @return string
     * @throws \think\db\exception\DataNotFoundException
     * @throws \think\db\exception\ModelNotFoundException
     * @throws \think\exception\DbException
     */
    public function indexMap(){
        if(request()->isGet()){
            $ship_name = Request::instance()->param('ship_name');
            $start_time = Request::instance()->param('start_time');
            $end_time = Request::instance()->param('end_time');
            //条件查询
            $map['cmf_ship.name'] = ['=',"$ship_name"];
            $map['cmf_locus.time'] = array('between',array("$start_time","$end_time"));
            $map['cmf_locus.position'] = ['=',"定位"];
            $map['cmf_locus.alarm'] = ['=',"一切正常"];
            $data = Db::name('locus')
                ->alias('a')
                ->join('cmf_ship b','a.ship_id = b.id','left')
                ->field('a.id,a.time,a.ship_id,a.latitude,a.longitude,a.speed,a.height,a.direction,b.id,b.phone,b.captain,b.name')
                ->where($map)
                ->order('time' )
                ->select();
            return json_encode($data );

        }
    }

前端通过接口接收数据来控制视图