node-vue-mongodb全栈项目-创建后台管理界面-分类列表（四）

新建后台管理项目的分类列表界面

在admin->src->views文件夹下新建文件CategoriesList.vue，先输入vue的基本结构：

// CategoriesList.vue
<template>
  <div>
      <h1>分类列表</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

给新建页面配置路由

在admin->src->route/index.js中引入新建页面并配置路由：

启动mongodb,运行serve,再运行admin,在浏览器上点击左侧导航栏就能看到新建的页面了。

补充分类列表页面

在分类列表页面添加一个展示数据的表格和获取数据的方法:

// CategoriesList.vue
<template>
  <div>
      <h1>分类列表</h1>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="_id" label="ID" width="180">
        </el-table-column>
        <el-table-column prop="cateName" label="分类名称" width="180">
        </el-table-column>
      </el-table>
  </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: []
        }
    },
    methods: {
        async fecth() {
            // 从服务端接口获取数据
            // this.$_http.get('path')
        }
    },
    created() {

    }

}
</script>

<style>

</style>

编写分类列表的服务端接口

在serve->router->admin/index.js中：

在分类列表界面编写axios请求

在浏览器上先新建分类，试验一下，一切正常。。。

通过浏览器新建分类：