教你使用laravel vue30分钟搭建一个前端cms之api

laravel5.5 可以使用eloquent API Resources轻松构建api

https://laravel.com/docs/5.5/eloquent-resources

首先按照文档，我们新建article resource和article collection

php artisan make:resource ArticleResource

php artisan make:resource ArticleCollection

运行命令后会在Http目录下新建Resources目录，并新建ArticleResource.php和ArticleCollection.php

ArticleResource.php

public function toArray($request)
    {
        return [
            'id'    => $this->id,
            'title' => $this->title,
            'image' => $this->image,
            'keywords' => $this->keywords,
            'description' => $this->description,
            'content' => $this->content,
        ];
    }

可以根据api自主显示字段

ArticleCollection.php

public function toArray($request)
    {
        return [
            'data'    => $this->collection
        ];
    }

在Http的Controlles目录下新建Api目录，并建立ArticleApiController.php

在这里，我们需要用到帮助函数，在App目录下新建Helpers目录，并建立functions.php文件， 然后再composer.json中添加自动加载

在autoload节点下添加

"autoload": {
        "classmap": [
            "database/seeds",
            "database/factories"
        ],
        "psr-4": {
            "App\\": "app/"
        },
        "files": [
            "app/Helpers/functions.php"
        ]
    
    },

这样就可以自动加载了

我们需要在帮助文件中获取子栏目的id

我这里只考虑二级栏目

// 获取子栏目
function getChildrenIds($parent_id) {
    $children = App\Models\Category::select('id')->where('parent_id', $parent_id)->orderBy('order')->orderBy('id')->get();
    $children_arr = [];
    foreach($children  as $key => $val) {
        $children_arr[] = $val['id'];
    }
    return $children_arr;
}

帮助文件建立好后在回到ArticleApiController.php

常规的我们就只需要列表和详情就可以了

public function index($category = '') {
        $children = getChildrenIds($category);
        if (empty($children)) {
            return new ArticleCollection(Article::select(['id', 'category_id', 'title', 'image'])->where('category_id', $category)->paginate());
        } else {
            $category_id = $children;
            return new ArticleCollection(Article::select(['id', 'category_id', 'title', 'image'])->whereIn('category_id', $children)->paginate());
        }  
    }

public function show($id) {
        return new ArticleResource(Article::find($id));
    }

然后添加路由

Route::group([
    'prefix'        => 'api',
    'namespace'     => "Api",
], function (Router $router) {

    $router->get('articles/{category?}', 'ArticleApiController@index');
    $router->get('article/{id}', 'ArticleApiController@show');
    $router->get('products/{category?}', 'ProductApiController@index');
    $router->get('product/{id}', 'ProductApiController@show');
    $router->get('jobs/{category?}', 'JobApiController@index');
    $router->get('job/{id}', 'JobApiController@show');
    $router->get('pages/{category}', 'PageApiController@index');
    $router->get('categories', 'CategoryApiController@tree');
    $router->get('category/{id}', 'CategoryApiController@show');
    $router->get('children/{id}', 'CategoryApiController@children');
    $router->get('config', 'ConfigApiController@config');
    
});

其他的页面跟article一样

接下来就是建立前端页面，pc端直接在Controllers目录下新建IndexController.php，手机端在Controllers目录下建立Mobile目录，并建立IndexController.php，内容大同小异

 public function articles() {
       return view('article.index');
    }

    public function article() {
        
    }

在resource目录下的view目录下新建article目录和mobile/article目录，并建立index.blade.php和show.blade.php

输出内容随意可以，只有能显示出来就好，

为前端页面建立路由

Route::get('/', 'IndexController@index');
Route::get('articles/{category?}', 'IndexController@articles');
Route::get('article/{id}', 'IndexController@article');
Route::get('products/{category?}', 'IndexController@products');
Route::get('product/{id}', 'IndexController@product');
Route::get('jobs/{category?}', 'IndexController@jobs');
Route::get('job/{id}', 'IndexController@job');
Route::get('pages/{category?}', 'IndexController@page');

Route::group([
    'prefix'        => 'mobile',
    'namespace'     => "Mobile",
], function (Router $router) {

    $router->get('/', 'IndexController@index');
    $router->get('articles/{category?}', 'IndexController@articles');
    $router->get('article/{id}', 'IndexController@article');
    $router->get('products/{category?}', 'IndexController@products');
    $router->get('producte/{id}', 'IndexController@product');
    $router->get('jobs/{category?}', 'IndexController@jobs');
    $router->get('job/{id}', 'IndexController@job');
    $router->get('pages/{category?}', 'IndexController@page');
});

这样api和前端页面就好了，下一步我们将使用vue渲染前端