高枕无忧构建全栈项目之创建分类界面

2023-10-24 07:35:32







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

在前面的文章中，我们已经创建了一个基本的Node.js + Vue.js + MongoDB全栈项目，并添加了用户注册和登录功能。在这一部分，我们将继续完善我们的项目，创建一个用于管理分类的后台管理界面。

## 修改导航和菜单名称

首先，我们需要修改后台管理界面的导航和菜单名称，使其更加清晰和易于使用。

1. 打开`src/views/Dashboard.vue`文件，找到`<el-menu>`标签。
2. 在`<el-menu>`标签中，添加`router`属性，并将其值设置为`true`。
3. 修改`<el-menu-item index="1-1">`中'index'属性，将其改为要跳转的路由名称。

```html
<template>
  <div>
    <el-menu :router="true">
      <el-menu-item index="1-1" to="/dashboard">仪表盘</el-menu-item>
      <el-menu-item index="1-2" to="/users">用户</el-menu-item>
      <el-menu-item index="1-3" to="/categories">分类</el-menu-item>
      <el-menu-item index="1-4" to="/products">产品</el-menu-item>
      <el-menu-item index="1-5" to="/orders">订单</el-menu-item>
    </el-menu>
  </div>
</template>

创建分类管理界面

接下来，我们需要创建分类管理界面，包括分类列表、分类添加和分类编辑功能。

在src/views文件夹中，创建一个名为Categories.vue的新文件。
在Categories.vue文件中，添加以下代码：

<template>
  <div>
    <h1>分类管理</h1>
    <el-table :data="categories" style="width: 100%">
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="description" label=""></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="editCategory(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteCategory(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="addCategory">添加分类</el-button>
  </div>
</template>

<script>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { createCategory, getCategories, deleteCategory, updateCategory } from '@/api/category'

export default {
  setup() {
    const categories = ref([])

    const addCategory = () => {
      // 打开添加分类模态框
    }

    const editCategory = (category) => {
      // 打开编辑分类模态框
    }

    const deleteCategory = (category) => {
      deleteCategory(category._id).then(() => {
        ElMessage.success('删除成功')
        getCategories().then((res) => {
          categories.value = res.data
        })
      })
    }

    getCategories().then((res) => {
      categories.value = res.data
    })

    return {
      categories,
      addCategory,
      editCategory,
      deleteCategory
    }
  }
}
</script>

创建分类添加和编辑模态框

最后，我们需要创建分类添加和编辑模态框。

在src/components文件夹中，创建一个名为CategoryModal.vue的新文件。
在CategoryModal.vue文件中，添加以下代码：

<template>
  <el-dialog title="添加分类" :visible="visible" @close="close">
    <el-form :model="form" label-width="80px">
      <el-form-item label="名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input v-model="form.description"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { ref } from 'vue'
import { createCategory, updateCategory } from '@/api/category'
import { ElMessage } from 'element-plus'

export default {
  props: ['visible', 'category'],
  setup(props) {
    const form = ref({
      name: '',
      description: ''
    })

    const submit = () => {
      if (props.category) {
        updateCategory(props.category._id, form.value).then(() => {
          ElMessage.success('更新成功')
          props.close()
        })
      } else {
        createCategory(form.value).then(() => {
          ElMessage.success('添加成功')
          props.close()
        })
      }
    }

    const close = () => {
      props.visible = false
    }

    return {
      form,
      submit,
      close
    }
  }
}
</script>