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/...