node-vue-mongodb全栈项目-创建后台管理界面-物品（八）

修改后台管理界面

添加物品菜单

实现点击菜单页面跳转

在标签中 加上router属性，并修改中'index'属性，改为要跳转的路径，实现点击跳转。

<!-- 物品菜单 -->
                <el-menu-item-group>
                <template slot="title">物品</template>
                <el-menu-item index="/items/create">新建物品</el-menu-item>
                <el-menu-item index="/items/list">物品列表</el-menu-item>
                </el-menu-item-group>

开发新建物品页面

新建物品页面

admin->src->views->新建ItemEdit.vue

<template>
    <div>
        <!-- 通过是否带有id判断是编辑还是新增 -->
        <h1>{{id ? '编辑' : '新建'}}分类</h1>
        <el-form :model="form"  label-width="120px">
          <el-form-item label="名称">
              <el-input v-model="form.cateName"></el-input>
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
          </el-form-item>
          <el-form-item label="图标">
              <el-input v-model="form.icon"></el-input>
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
          </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    data(){
        return {
            form: {
                cateName:''
            },
            id: this.$route.params.id
        }
    },
    methods: {
        async onSubmit(){
            let res
            // 判断是新建分类还是编辑分类
            if (this.id) {
                // 请求接口 提交数据
                res = await this.$_http.put(`rest/items/${this.id}`, this.form)
            } else {
                // 请求接口 提交数据
                res = await this.$_http.post('rest/items', this.form)
                
            }
            // 调转到分类列表页面
            this.$router.push('/items/list')
            // 使用elementUI的message组件提示保存成功
            this.$message({
                type: 'success',
                message: '提交成功!'
            })
            console.log(res);
        },
        // 获取“编辑分类”时的该条数据信息
        async fetch() {
            const res = await this.$_http.get(`rest/items/${this.id}`)
            this.form.cateName = res.data.cateName
            console.log(res.data);
        }
    },
    created() {
        // 当有this.id时才执行this.fetch()
        this.id && this.fetch()
    }

}
</script>

<style>

</style>

admin->src->views->新建ItemList.vue

<template>
  <div>
      <h1>物品列表</h1>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="_id" label="ID" width="220">
        </el-table-column>
        <el-table-column prop="cateName" label="名称" >
        </el-table-column>
        <el-table-column prop="icon" label="图标地址" >
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope" width="100">
                <!-- 点击编辑之后跳转页面，同时携带id参数 -->
                <el-button @click="$router.push(`/items/edit/${scope.row._id}`)" type="primary" size="small">编辑</el-button>
                <el-button type="danger" size="small" @click="deleteSub(scope.row)">删除</el-button>
            </template>
        </el-table-column>
        
      </el-table>
  </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: []
        }
    },
    methods: {
        async fecth() {
            // 从服务端接口获取数据
         const res =  await this.$_http.get('rest/items')
         this.tableData = res.data
         console.log(this.tableData);
        },
        // 根据父级分类ID获取父级分类名称
        // async parentFech(id) {
        //     const res = await this.$_http.get(`catergories/${}`,)
        // },
        // 点击删除按钮
        deleteSub(row) {
            this.$confirm(`此操作将删除物品${row.cateName}, 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                // 发送删除请求
                const res =  await this.$_http.delete(`rest/items/${row._id}`)
                this.fecth()
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                console.log(res);
            })
        }
    },
    created() {
        this.fecth()
    }

}
</script>

<style>

</style>

配置页面路由

按照分类引用页面并配置路由

src\router\index.js 中：

import ItemEdit from '../views/ItemEdit.vue'
import ItemList from '../views/ItemList.vue'

      {
        path: '/items/create',
        name: 'ItemEdit',
        component: ItemEdit
      },
      {
        path: '/items/list',
        name: 'ItemList',
        component: ItemList
      },
      {
        // 使用/:id,会自动将id放入this.$route.param当中（route而不是router）
        // 与新建分类公用一个页面组件
        path: '/items/edit/:id',
        name: 'ItemEdit',
        component: ItemEdit
      }

此时，浏览器中就实现了物品两个页面的点击跳转。

开发服务端模型与接口

新建物品模型

const mongoose = require('mongoose')

const schema = new mongoose.Schema({
    cateName: String,
    icon: String
})

module.exports = mongoose.model('Item', schema)

在浏览器中尝试，一切正常。。。。。。。