当前位置：首页 > news >正文

《从零搭建Vue3项目实战》（AI辅助搭建Vue3+ElemntPlus后台管理项目）零基础入门系列第十篇:商品管理功能实现

news 来源：原创 2025/6/21 13:53:54

🤟致敬读者

🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉

📘博主相关

🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息

文章目录

《从零搭建Vue3项目实战》（AI辅助搭建Vue3+ElemntPlus后台管理项目）零基础入门系列第十篇:商品管理功能实现
- 1. AI提示词
- 2. 代码更新
- 3. 页面效果

📃文章前言

🔷文章均为学习工作中整理的笔记。
🔶如有错误请指正，共同学习进步。

《从零搭建Vue3项目实战》（AI辅助搭建Vue3+ElemntPlus后台管理项目）零基础入门系列第十篇:商品管理功能实现

从零搭建Vue3项目实战，借助AI工具辅助学习和代码生成，零基础小白亦可轻松上手实现。

以下为系列篇所有文章：
《从零搭建Vue3项目实战》零基础入门系列第一篇:开发环境准备
《从零搭建Vue3项目实战》零基础入门系列第二篇:项目创建和初始化
《从零搭建Vue3项目实战》零基础入门系列第三篇:ElementPlus引入和应用
《从零搭建Vue3项目实战》零基础入门系列第四篇:登录页面实现
《从零搭建Vue3项目实战》零基础入门系列第五篇:登录页面优化及使用AI学习代码
《从零搭建Vue3项目实战》零基础入门系列第六篇:页面跳转功能实现（Router的引入和使用）
《从零搭建Vue3项目实战》零基础入门系列第七篇:菜单栏实现
《从零搭建Vue3项目实战》零基础入门系列第八篇:菜单栏优化和阶段项目源码
《从零搭建Vue3项目实战》零基础入门系列第九篇:用户管理功能实现
《从零搭建Vue3项目实战》零基础入门系列第十篇:商品管理功能实现
《从零搭建Vue3项目实战》零基础入门系列第十一篇:订单管理功能实现
《从零搭建Vue3项目实战》零基础入门系列第十二篇（完结篇）:数据统计功能实现
《从零搭建Vue3项目实战》零基础入门一篇通关（AI辅助搭建Vue3+ElemntPlus后台管理项目）

系列文章均收录在前端vue3入门实战专栏中，可订阅专栏了解更多内容

1. AI提示词

接下来就是跟前面一样，让ai生成各个组件对应的功能代码
提问ai

你是一名资深的前端开发，已经使用vue3和elemetPlus搭建了项目的基础框架，现在需要实现商品管理菜单对应组件ProductsView.vue页面的相关功能，请在该组件页面实现商品管理数据表格，其中列名包含id、名称、分类、价格、库存、状态、操作，在操作列中有编辑、上架、下架、删除的图标按钮，模拟100条数据并实现分页功能，页面尽量美观，表格宽度占满页面

2. 代码更新

使用ai生成的代码，应用到项目对应的ProductsView.vue文件中
scr/views/ProductsView.vue

<template>
    <div>
        <el-table :data="paginatedProducts" style="width: 100%">
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="name" label="名称" width="180"></el-table-column>
            <el-table-column prop="category" label="分类" width="120"></el-table-column>
            <el-table-column prop="price" label="价格" width="100"></el-table-column>
            <el-table-column prop="stock" label="库存" width="100"></el-table-column>
            <el-table-column prop="status" label="状态" width="100"></el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-button type="text" @click="editProduct(scope.row)">编辑</el-button>
                    <el-button type="text" @click="toggleStatus(scope.row, '上架')">上架</el-button>
                    <el-button type="text" @click="toggleStatus(scope.row, '下架')">下架</el-button>
                    <el-button type="text" @click="deleteProduct(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="products.length"
            layout="prev, pager, next"
            style="margin-top: 20px; text-align: center;"
        ></el-pagination>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ElTable, ElTableColumn, ElPagination, ElButton } from 'element-plus';

// 模拟100条商品数据
const products = ref(Array.from({ length: 100 }, (_, index) => ({
    id: index + 1,
    name: `商品${index + 1}`,
    category: `分类${index % 5 + 1}`,
    price: (Math.random() * 1000).toFixed(2),
    stock: Math.floor(Math.random() * 100),
    status: Math.random() > 0.5 ? '上架' : '下架',
})));

// 分页相关数据
const currentPage = ref(1);
const pageSize = 10;

// 分页计算属性
const paginatedProducts = computed(() => {
    const start = (currentPage.value - 1) * pageSize;
    const end = start + pageSize;
    return products.value.slice(start, end);
});

// 处理页码变化
const handleCurrentChange = (page) => {
    currentPage.value = page;
};

// 操作列按钮事件
const editProduct = (product) => {
    console.log('编辑商品:', product);
};

const toggleStatus = (product, status) => {
    product.status = status;
    console.log('状态切换:', product);
};

const deleteProduct = (product) => {
    const index = products.value.indexOf(product);
    if (index !== -1) {
        products.value.splice(index, 1);
    }
    console.log('删除商品:', product);
};
</script>

<style scoped>

</style>