改写目录的原因
既然使用的是前后端分离的写法，就该彻底分离，我应该将后台管理页面也写在learn项目里面，现在这个结构就显得不合理了，进入后台管理页面应该是全新页面，现在的结构并不合理！
改写步骤
1、新建一个admin目录
添加页面
admin.vue 用于管理后台路由
adminlogin.vue 用于后台管理员登录
home.vue 用于后台主页显示信息
mangeradmin.vue 用于管理管理员账户
mangeruser.vue 用于管理用户账户
mangerprods.vue 用于管理商品操作
mangersends.vue 用于管理用户发货
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: [
{
// 这里用的动态路由，需要一个冒号：
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
}
]
})
3、改写前端页面代码
这样重写路由之后会造成原来的导航菜单路由出错，所以需要改写前端导航的代码，主要是2个地方，更重要的是要改写前端结构
我的目的是要前端和后端页面是完全分离的，按原先的代码我直接将header.vue和footer.vue直接写在了APP.vue里面，这样的话会让我进入后端页面时也会渲染出头部和底部，这和我的想法是不一样的，所以首先改写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>
<!-- 中间主要区域容器 -->
<!-- 添加一个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>
3、新建一个con-home.vue来存放主页也就是home页面的内容
con-home.vue
<template>
<div class="container">
<h1>home</h1>
</div>
</template>
4、改写header.vue的菜单设置
因为我现在只要前端的路由，这里我想了2种方法
- 1、需要哪里的路由就找哪里的路由
只需要将原来的
v-for="route in $router.options.routes"
// 改为
v-for="route in $router.options.routes[0].children"
这样的方法很简单，但是有一个弊端，我相当于把路由的顺序写死了，直接就找routes的第一个object，如果后期在routes里面又加入新的路由，这样很可能又需要改写一次，这样就很不灵活了，但很简单！！
- 2、这个只是思路，我没做
首先再header.vue被创建的时候将routes用filter或者foreach的办法找出需要的那部分路由,比如加个字段 type： 'client'来表明这是前端路由，然后就这些路由数据写在data里面，再用来循环，这样就很灵活了，但稍微麻烦一点！
4、测试
前端页面
头部的路由是正常的
后端页面
后端路由
总结
还是经验太过欠缺了，要是一开始就有工程化思想的话，就不会有这些麻烦事了，接下来先把相关的后端页面和逻辑写好
github地址
learn：https://github.com/lyttonlee/learn
server： https://github.com/lyttonlee/express-server-for-learn
