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

然后我们就要做内页了，

基于laravel的模板，我们建立各个页面

layout

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,minmum-scale=1,maxmum-scale=1,user-scalable=no">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Laravel-@yield('title')</title>
    <link rel="stylesheet" type="text/css" href="{{ URL::asset('/') }}css/fontawesome/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="{{ URL::asset('/') }}css/front.css" />
  </head>
  <body>
    <div class="app" id="app">
      <header-box></header-box>
      <router-view></router-view>
      <footer-box></footer-box>
    </div>
    <script src="{{ URL::asset('/') }}js/application.js"></script>
  </body>
</html>

其他内容页面我们只需要继承模板就可以了

如articles/index.blade.php

@extends('layout.default')

@section('title', '首页')

首先在components文件夹下建立Articles.vue和ArticleItem.vue

ArticleItem用于文章列表，抽离出来也许其他地方可以用得到

同时可能还有其它页面，如侧边栏，分页，面包屑导航等，都可以抽离出来放在components下

Articles.vue

<template>
    <div class="container main">
        <div class="row">
            <sidebar></sidebar>
            <div class="col-lg-9 col-md-9 main-content">
                <contentMenu></contentMenu>
                <div class="articles-list">
                    <articleItem :articles="results"></articleItem>
                </div>
                <pagination></pagination>
            </div>
        </div>
   </div>
</template>

<script>
    import sidebar from './Sidebar'
    import contentMenu from './ContentMenu'
    import pagination from './Pagination'
    import articleItem from './ArticleItem'
    export default {
        name: 'articles',  
        data () {  
            return {  
                results: ''
            }  
        }, 
        mounted() {
            var that = this
            var page = this.$route.params.page
            axios.get('/api/articles/' + page)
            .then(r => r.data)
            .then(response => {
                that.results = response.data
            })
        },
        components : {
            'sidebar': sidebar,
            'contentMenu': contentMenu,
            'pagination': pagination,
            'articleItem': articleItem
        }
    }
</script>

ArticleItem.vue

<template>
    <ul>
        <li v-for="article in articles" :key="article.id" class="row" >
            <div class="col-sm-3 img">
                <a href="#"><img :src="'../uploads/'+article.image" /></a>
            </div>
            <div class="col-sm-9 info">
                <a href="#">{{ article.title }}</a>
                <p><i class="fa fa-clock-o"></i> 2018-08-28</p>
            </div>
        </li>
    </ul>
</template>

<script>
    export default {
       props: ['articles']
    }
</script>

这里需要注意的是父组件向子组件传值

 <articleItem :articles="results"></articleItem>

子组件接收数据

export default {
       props: ['articles']
    }

以及获取router参数

this.$route.params

然后再application.js中引入Articles.vue

 import articles from '../components/Article'

建立vue-router路由

 import products from '../components/Product'
 import articles from '../components/Article'
 import pictures from '../components/Picture'

 // 路由
const router = new VueRouter({
    mode: 'history',
    routes: [
      { path: '/' },
      { path: '/pages/:category?', name: "pages" },
      { path: '/products/:category?', name: 'products', component: products },
      { path: '/product/:id', name: 'product' },
      { path: '/articles/:category?', name: 'articles', component: articles },
      { path: '/article/:id', name: 'article' },
      { path: '/pictures/:category?', name: 'pictures', component: pictures },
      { path: '/pictrue/:id', name: 'case' }
    ]
})

差不多就这些了，由于只作学习用，首页和分页没做，之前抽离ArticleItem.vue，也是因为首页也用到了，完整的Application.js

require('../bootstrap')

window.Vue = require('vue')
import VueRouter from 'vue-router'
import Vuex from 'vuex'
Vue.use(VueRouter)
Vue.use(Vuex)


/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

 import products from '../components/Product'
 import articles from '../components/Article'
 import pictures from '../components/Picture'

 // 路由
const router = new VueRouter({
    mode: 'history',
    routes: [
      { path: '/' },
      { path: '/pages/:category?', name: "pages" },
      { path: '/products/:category?', name: 'products', component: products },
      { path: '/product/:id', name: 'product' },
      { path: '/articles/:category?', name: 'articles', component: articles },
      { path: '/article/:id', name: 'article' },
      { path: '/pictures/:category?', name: 'pictures', component: pictures },
      { path: '/pictrue/:id', name: 'case' }
    ]
})

const state = {
    categories: '',
    productTree: '',
    config: ''
}

const mutations = {
    SET_CATEGORIES(state, categories){
       state.categories = categories
    },
    SET_CONFIG(state, config){
        state.config = config
    },
    SET_PRODUCT_TREE(state, productTree){
        state.productTree = productTree
    }
}
  
const actions = {
    loadInit ({ commit }) {
        axios.get('/api/initweb')
            .then(r => r.data)
            .then(coins => {
                commit('SET_CONFIG', coins.data.config)
                commit('SET_CATEGORIES', coins.data.categories)
                commit('SET_PRODUCT_TREE', coins.data.product_tree)
            })
    }
}

const store = new Vuex.Store({
    state: state,
    mutations: mutations,
    actions: actions
})

Vue.component('header-box', require('../components/Header.vue'))
Vue.component('footer-box', require('../components/Footer.vue'))

new Vue({
    router,
    store
}).$mount('#app')

项目地址：

https://github.com/tang05709/laravel-vue

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

猜你喜欢