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

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

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

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

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

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

• 右侧 router-view:

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

• 路由：在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 编辑页面

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

  
{{id ? '编辑':'新建'}}文章

4 列表页面

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

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

    
XX列表
    
        
        
        
            
    

5 其他细节问题

• 页面整体撑满屏幕处理

• 菜单的高亮问题

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