改寫目錄的原因
既然使用的是前后端分離的寫法，就該徹底分離，我應(yīng)該將后臺管理頁面也寫在learn項目里面，現(xiàn)在這個結(jié)構(gòu)就顯得不合理了，進(jìn)入后臺管理頁面應(yīng)該是全新頁面，現(xiàn)在的結(jié)構(gòu)并不合理！
改寫步驟
1、新建一個admin目錄
添加頁面
admin.vue 用于管理后臺路由
adminlogin.vue 用于后臺管理員登錄
home.vue 用于后臺主頁顯示信息
mangeradmin.vue 用于管理管理員賬戶
mangeruser.vue 用于管理用戶賬戶
mangerprods.vue 用于管理商品操作
mangersends.vue 用于管理用戶發(fā)貨
2、重新編寫路由
打開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: [
{
// 這里用的動態(tài)路由，需要一個冒號：
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: '發(fā)貨管理', component: Send},
{path: '/manger/history', name: '發(fā)貨記錄', 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
}
]
})
3、改寫前端頁面代碼
這樣重寫路由之后會造成原來的導(dǎo)航菜單路由出錯，所以需要改寫前端導(dǎo)航的代碼，主要是2個地方，更重要的是要改寫前端結(jié)構(gòu)
我的目的是要前端和后端頁面是完全分離的，按原先的代碼我直接將header.vue和footer.vue直接寫在了APP.vue里面，這樣的話會讓我進(jìn)入后端頁面時也會渲染出頭部和底部，這和我的想法是不一樣的，所以首先改寫APP.vue
1、打開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>
2、打開home.vue
添加頭部和底部
<template>
<div class="section">
<!-- 頭部組件渲染 -->
<header-ly></header-ly>
<!-- 中間主要區(qū)域容器 -->
<!-- 添加一個element-ui內(nèi)置的過渡動畫 -->
<transition name="el-zoom-in-center">
<!-- 通過路由渲染不同內(nèi)容的頁面 -->
<router-view/>
</transition>
<!-- 底部 -->
<!-- 底部組件渲染 -->
<footer-ly></footer-ly>
</div>
</template>
<script>
// 導(dǎo)入組件
import HeaderLy from '@/components/header'
import FooterLy from '@/components/footer'
export default {
name: 'home',
components: {
HeaderLy,
FooterLy
}
}
</script>
3、新建一個con-home.vue來存放主頁也就是home頁面的內(nèi)容
con-home.vue
<template>
<div class="container">
<h1>home</h1>
</div>
</template>
4、改寫header.vue的菜單設(shè)置
因為我現(xiàn)在只要前端的路由，這里我想了2種方法
- 1、需要哪里的路由就找哪里的路由
只需要將原來的
v-for="route in $router.options.routes"
// 改為
v-for="route in $router.options.routes[0].children"
這樣的方法很簡單，但是有一個弊端，我相當(dāng)于把路由的順序?qū)懰懒耍苯泳驼襯outes的第一個object，如果后期在routes里面又加入新的路由，這樣很可能又需要改寫一次，這樣就很不靈活了，但很簡單??！
- 2、這個只是思路，我沒做
首先再header.vue被創(chuàng)建的時候?qū)outes用filter或者foreach的辦法找出需要的那部分路由,比如加個字段 type： 'client'來表明這是前端路由，然后就這些路由數(shù)據(jù)寫在data里面，再用來循環(huán)，這樣就很靈活了，但稍微麻煩一點！
4、測試
前端頁面
頭部的路由是正常的
后端頁面
后端路由
總結(jié)
還是經(jīng)驗太過欠缺了，要是一開始就有工程化思想的話，就不會有這些麻煩事了，接下來先把相關(guān)的后端頁面和邏輯寫好
github地址
learn：https://github.com/lyttonlee/learn
server： https://github.com/lyttonlee/express-server-for-learn
