Vue-CRUD: 管理员界面快速开发指南

卢迁铎Renee

于 2024-08-10 08:20:36 发布

阅读量287

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00177/article/details/141082817

版权

Vue-CRUD: 管理员界面快速开发指南

vue-crudVue.js based REST-ful CRUD system项目地址:https://gitcode.com/gh_mirrors/vu/vue-crud

项目介绍

Vue-CRUD 是一款基于 Vue.js 的 RESTful CRUD（创建、读取、更新、删除）系统框架，旨在简化应用程序中常见的 CRUD 功能实现。它不仅支持单个表的数据管理机制构建，更能够扩展至完整的 CMS 或者 CRM 系统的搭建。本项目充分利用了 Vue.js 生态系统中的各种资源，例如 Vuex 和 Vuetify，让用户充分享受全球最受欢迎的前端框架所带来的优势。

项目快速启动

预备知识

在开始之前，确保你已经安装了以下软件：

Node.js 和 NPM (Node Package Manager)
Vue CLI

创建并设置项目

首先，在命令行终端中运行以下命令以创建一个新的 Vue.js 项目:

# 使用 Vue CLI 创建新项目
vue create vue-crud-app

# 切换到项目目录
cd vue-crud-app

# 添加 Axios 库以便进行HTTP请求
npm install axios

接下来，我们将安装 Vue-CRUD 库作为你的项目依赖之一:

# 在项目中添加 Vue-CRUD 依赖项
npm install https://github.com/what-crud/vue-crud.git --save

初始化和运行项目

将 Vue-CRUD 相关文件引入到你的主入口文件 main.js 中：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

// 引入 Vue-CRUD
import VueCrud from 'vue-curd';

const app = createApp(App);
app.use(router);
app.use(VueCrud); // 使用 Vue-CRUD 插件

app.mount('#app');

现在可以运行你的 Vue-CRUD 项目了：

npm run serve

访问 http://localhost:8080 ，你应该可以看到一个基于 Vue-CRUD 构建的基础应用页面。

样例代码：使用 Crud-Vue 编写列表组件

下面展示如何使用 Crud-Vue 库来快速搭建一个带数据列表功能的组件实例：

<template>
    <div>
        <!-- 列表渲染 -->
        <el-table :data="tableData">
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column>
                <template #default="scope">
                    <el-button type="primary" @click="editRow(scope.row)">编辑</el-button>
                    <el-button type="danger" @click="removeRow(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 编辑模态框 -->
        <el-dialog title="编辑信息" :visible.sync="dialogFormVisible">
            <el-form ref="form" :model="currentRow">
                <!-- 根据实际需求填写具体表单项 -->
                <el-form-item label="名称" label-width="120px">
                    <el-input v-model="currentRow.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelEdit()">取消</el-button>
                <el-button type="primary" @click="updateRow()">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
        return {
            tableData: [], // 表格数据
            currentRow: {}, // 当前操作行数据
            dialogFormVisible: false, // 编辑对话框是否可见
        }
    },
    methods: {
        // 获取数据的方法
        fetchData () {
            axios.get('/api/data') // 这里应替换为你自己的API路径
                .then(response => {
                    this.tableData = response.data;
                });
        },

        // 编辑行方法
        editRow(row){
            this.currentRow = Object.assign({}, row);
            this.dialogFormVisible = true;
        },

        // 删除行方法
        removeRow(row){
            axios.delete(`/api/data/${row.id}`)
                .then(() => {
                    const index = this.tableData.indexOf(row);
                    if(index > -1){
                        this.tableData.splice(index, 1);
                    }
                });
        },

        // 更新行方法
        updateRow(){
            axios.put(`/api/data/${this.currentRow.id}`, this.currentRow)
                .then(() => {
                    this.fetchData();
                    this.dialogFormVisible = false;
                });
        },

        // 取消编辑方法
        cancelEdit(){
            this.dialogFormVisible = false;
            this.$refs.form.resetFields(); // 清空表单
        },
    },
    created(){
        this.fetchData(); // 页面加载时获取初始数据
    }
};
</script>

这段代码演示了如何在一个 Vue 组件中利用 Crud-Vue 的功能进行数据的展示、编辑以及删除等操作。我们通过调用相应的API接口实现了CRUD流程，并通过模板语法将数据显示在页面上。