教你使用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渲染前端

猜你喜欢

转载自blog.csdn.net/tang05709/article/details/80897657