使用laravel vue搭建一个前端cms之1

后端已经搭建好了

https://blog.csdn.net/tang05709/article/details/80897657

使用到的技术

vue： https://cn.vuejs.org/v2/guide/

vue-router： https://router.vuejs.org/zh/ 路由

vuex： https://vuex.vuejs.org/zh/guide/ 数据储存

axios https://github.com/axios/axios api数据获取

在做的过程中，遇到最大的问题就是全局组件和quan全局数据，在百度了很多都me没找到，最终还是bing找到了，在这里告诫自己，开发方面的难题，还是bing或google会好很多。

参考： https://appdividend.com/2018/05/08/vuex-axios-get-request-tutorial-with-example/

因为是基于laravel，所以首先我们先处理后端，后端我们需要一个文件渲染前端页面，即congroller，在Http/controllers下新建IndexController.php

扫描二维码关注公众号，回复： 2758483 查看本文章

class IndexController extends Controller
{
    public function __construct() {

    }

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

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

    public function article() {
        
    }

    public function products() {
        return view('product.index');
    }

    public function product() {
        
    }

    public function pictures() {
        return view('picture.index');
    }

    public function picture() {
        
    }

    public function jobs() {

    }

    public function job() {
        
    }

    public function page() {
        return view('page.show');
    }
}

我们还需要api，所以再在Http/controllers下建立api文件夹，并建立相应的api文件，如

class ArticleApiController extends BaseApiController {
 
    public function index($category = '') {
        $children = Category::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));
    }
}

同时加入l路由

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('pictures/{category?}', 'IndexController@pictures');
Route::get('picture/{id}', 'IndexController@picture');
Route::get('jobs/{category?}', 'IndexController@jobs');
Route::get('job/{id}', 'IndexController@job');
Route::get('pages/{category?}', 'IndexController@page');

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');
    $router->post('upimage', 'UploadApiController@upimage');
    $router->get('advert/{advert_type}', 'AdvertApiController@index');
    $router->get('initweb', 'InitwebApiController@index');
    
});

laravel已经有vue和axios，我们还需要加入vue-router和vuex，在package.json中加入这2个技术栈

"devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "popper.js": "^1.12",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.4",
        "vue": "^2.5.7",
        "vue-router": "^3.0.1",
        "vuex": "^3.0.0"
    }

通常一个企业网站，头部，尾部，是一样的，所以我们就需要把头部和尾部抽离出来

在js先新建pc文件夹，并建立applapplication.js，同时在webpack.mix.js中加入

.js('resources/assets/js/common/application.js', 'public/js')
    .sass('resources/assets/sass/front.scss', 'public/css')

使用laravel vue搭建一个前端cms之1

猜你喜欢