全栈开发学习(Node+Vue+Mongodb)(二)——后台管理界面的搭建

1 用ElementUI搭建基本的后台界面框架

• 准备工作：在admin文件夹安装：vue add element

  ​ 安装路由用于界面跳转：vue add router

• 左侧导航：在Main.vue中粘贴ElementUI官方文档里的导航写法，根据需求修改导航 ，需求如下所示：

  • 内容管理
    • 物品：新建物品、物品列表
    • 英雄：新建英雄、英雄列表
    • 文章：新建文章、文章列表
  • 运营管理
    • 广告位：新建广告位、广告位列表
  • 系统设置
    • 分类：新建分类、分类列表
    • 管理员：新建管理员、管理员列表

• 右侧 router-view:

  <el-main>
       <router-view :key="$route.path"></router-view>
  </el-main>

• 组件：完成上述导航对应跳转组件的搭建

• 路由：在index.js中完善路由跳转对应的路径和相关组件的引入，引入方式如下：

   { path: '/categories/create', component: CategoryEdit },
   /* 注意带参数跳转 props: true */
   { path: '/categories/edit/:id', component: CategoryEdit, props: true },
   { path: '/categories/list', component: CategoryList },

  ps:注意分清子路由

2 新建页面

不同类型的新建页面在组件的使用上有所不同，有以下几类：

• 纯文本框input/textarea
• 图片上传
• 选择下拉框
• 星型评级
• 富文本编辑框：npm官网搜索 vue2-editor,安装后引入即可

在新建英雄页面，由于英雄属性的复杂性，需要用到Tabs标签页对英雄属性做一个分类，分为基本信息/技能/最佳搭档

3 编辑页面

在新建页面的基础上修改标题复用组件，其他部分基本和新建页面相同

  <h1>{{id ? '编辑':'新建'}}文章</h1>

4 列表页面

列表页面比较简单，就是简单的表格形式，根据内容不同选择在列表上展示的内容（文字、分类、图标等）

公共内容都包含_id、编辑/删除按钮，可以套用文档中的内容

    <h1>XX列表</h1>
    <el-table :data="items">
        <el-table-column prop="_id" label="ID" width="240"></el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
            <el-button type="text" size="small" 
            @click="$router.push(`/articles/edit/${scope.row._id}`)">编辑</el-button>
            <el-button type="text" size="small" 
            @click="remove(scope.row)">删除</el-button>
            </template>
    </el-table-column>

5 其他细节问题

• 页面整体撑满屏幕处理

  <el-container style="height: 100vh">

• 菜单的高亮问题

  浏览器刷新后，这样设置使得菜单仍然可以定位到之前选中的路由

  <el-menu router :default-active="$route.path">

• 阻止默认提交

  <el-form label-width="120px" @submit.native.prevent="save">