vue vue-router vuex element-ui axios的學習筆記（十七）改寫learn目錄

改寫目錄的緣由

既然使用的是先後端分離的寫法，就該完全分離，我應該將後臺管理頁面也寫在learn項目裏面，如今這個結構就顯得不合理了，進入後臺管理頁面應該是全新頁面，如今的結構並不合理！

改寫步驟

一、新建一個admin目錄

添加頁面
admin.vue 用於管理後臺路由
adminlogin.vue 用於後臺管理員登陸
home.vue 用於後臺主頁顯示信息
mangeradmin.vue 用於管理管理員帳戶
mangeruser.vue 用於管理用戶帳戶
mangerprods.vue 用於管理商品操做
mangersends.vue 用於管理用戶發貨

二、從新編寫路由

打開route/index.js

import Vue from 'vue'
import Router from 'vue-router'
// 引入前端組件
import Home from '@/components/home'
import ConHome from '@/components/con-home'
import Login from '@/components/login'
import Regin from '@/components/regin'
import Page404 from '@/components/404'
import Products from '@/components/page/products'
import FAQ from '@/components/page/FAQ'
import Manger from '@/components/page/manger'
import My from '@/components/page/manger/my'
import Send from '@/components/page/manger/send'
import MyHistory from '@/components/page/manger/history'
import ProductList from '@/components/page/product/productlist'
import ProductContent from '@/components/page/product/productcontent'
// 引入後端管理組件
import Admin from '@/admin/admin'
import AdminLogin from '@/admin/views/adminlogin'
import AdminHome from '@/admin/views/adminhome'
import MangerAdmin from '@/admin/views/mangeradmin'
import MangerProds from '@/admin/views/mangerprods'
import MangerSends from '@/admin/views/mangersends'
import MangerUser from '@/admin/views/mangeruser'

Vue.use(Router)

export default new Router({
  // 配置路由
  routes: [
    // 前段頁面路由
    {
      path: '/',
      hidden: true,
      type: 'client',
      component: Home,
      children: [
        {
          path: '/',
          hidden: true,
          component: ConHome
        },
        {
          path: '/products',
          name: '商品',
          class: 'el-icon-goods',
          component: Products,
          redirect: '/product/all',
          children: [
            {
              // 這裏用的動態路由，須要一個冒號：
              path: '/product/:class',
              component: ProductList
            }
          ]
        },
        {
          path: '/product/:class/:productname',
          hidden: true,
          component: ProductContent
        },
        {
          path: '/FAQ',
          name: '文檔',
          component: FAQ
        },
        {
          path: '/manger',
          name: '工做臺',
          redirect: '/manger/my',
          component: Manger,
          hasChild: true,
          children: [
            {path: '/manger/my', name: '個人信息', component: My},
            {path: '/manger/send', name: '發貨管理', component: Send},
            {path: '/manger/history', name: '發貨記錄', component: MyHistory}
          ]
        }
      ]
    },
    // 後端頁面路由
    {
      path: '/admin',
      component: Admin,
      type: 'admin',
      hidden: true,
      children: [
        {
          path: '/admin',
          component: AdminHome,
          name: '管理首頁'
        },
        {
          path: '/admin/mangeprods',
          name: '商品管理',
          component: MangerProds
        },
        {
          path: '/admin/mangesends',
          name: '訂單管理',
          component: MangerSends
        },
        {
          path: '/admin/mangeuser',
          name: '用戶管理',
          component: MangerUser
        },
        {
          path: '/admin/mangeadmin',
          name: '管理員帳戶',
          component: MangerAdmin
        }
      ]
    },
    // 登陸註冊以及404頁面路由
    {
      path: '/admin/login',
      hidden: true,
      component: AdminLogin
    },
    {
      path: '/login',
      name: '',
      hidden: true,
      component: Login
    },
    {
      path: '/regin',
      name: '',
      hidden: true,
      component: Regin
    },
    {
      path: '*',
      hidden: true,
      component: Page404
    }
  ]
})

三、改寫前端頁面代碼

這樣重寫路由以後會形成原來的導航菜單路由出錯，因此須要改寫前端導航的代碼，主要是2個地方，更重要的是要改寫前端結構

個人目的是要前端和後端頁面是徹底分離的，按原先的代碼我直接將header.vue和footer.vue直接寫在了APP.vue裏面，這樣的話會讓我進入後端頁面時也會渲染出頭部和底部，這和個人想法是不同的，因此首先改寫APP.vue

一、打開APP.vue
將頭部和底部抽離出來，放在home.vue裏面

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.container {
  width: 100%;
  max-width: 1366px;
  margin: 80px auto;
}
</style>

二、打開home.vue
添加頭部和底部

<template>
  <div class="section">
    <!-- 頭部組件渲染 -->
    <header-ly></header-ly>
    <!-- 中間主要區域容器 -->
    <!-- 添加一個element-ui內置的過渡動畫 -->
    <transition name="el-zoom-in-center">
      <!-- 經過路由渲染不一樣內容的頁面 -->
      <router-view/>
    </transition>
    <!-- 底部 -->
    <!-- 底部組件渲染 -->
    <footer-ly></footer-ly>
  </div>
</template>
<script>
  // 導入組件
import HeaderLy from '@/components/header'
import FooterLy from '@/components/footer'
export default {
    name: 'home',
    components: {
      HeaderLy,
      FooterLy
    }
}
</script>

三、新建一個con-home.vue來存放主頁也就是home頁面的內容
con-home.vue

<template>
  <div class="container">
    <h1>home</h1>
  </div>
</template>

四、改寫header.vue的菜單設置

由於我如今只要前端的路由，這裏我想了2種方法

• 一、須要哪裏的路由就找哪裏的路由

只須要將原來的

v-for="route in $router.options.routes"
// 改成
v-for="route in $router.options.routes[0].children"

這樣的方法很簡單，可是有一個弊端，我至關於把路由的順序寫死了，直接就找routes的第一個object，若是後期在routes裏面又加入新的路由，這樣極可能又須要改寫一次，這樣就很不靈活了，但很簡單！！

• 二、這個只是思路，我沒作

首先再header.vue被建立的時候將routes用filter或者foreach的辦法找出須要的那部分路由,好比加個字段 type： 'client'來代表這是前端路由，而後就這些路由數據寫在data裏面，再用來循環，這樣就很靈活了，但稍微麻煩一點！

四、測試

前端頁面

頭部的路由是正常的

後端頁面

後端路由

總結

仍是經驗太過欠缺了，要是一開始就有工程化思想的話，就不會有這些麻煩事了，接下來先把相關的後端頁面和邏輯寫好

github地址

learn：https://github.com/lyttonlee/...
server： https://github.com/lyttonlee/...