首页 前端知识 完整代码与注释:Vue商品管理系统

完整代码与注释:Vue商品管理系统

2024-05-28 09:05:05 前端知识 前端哥 855 233 我要收藏

项目要求

这次我们将探讨一个实验项目,即“商品管理系统”实现。项目的主要目的在于完成一个基于 HTML、CSS 和 Vue.js 的商品管理界面,同时实现相关数据管理操作。这是一个初学者适用的项目。

项目核心目标

  1. 页面布局与交互: 通过 HTML 和 CSS,建立直观易用的商品管理界面,借助 Vue.js 实现用户友好的交互体验。

  2. Vue.js 数据绑定: 学习并应用 Vue.js 的数据绑定机制,以确保页面实时反映数据变化,提升用户体验。

  3. 数据管理操作: 使用 Vue.js 提供的方法,实现商品数据的增删改查操作,以保证商品信息的灵活管理。

项目关键词

  1. Vue.js
  2. 商品管理系统
  3. 前端开发
  4. 数据绑定
  5. HTML/CSS

效果展示

在这里插入图片描述

项目思路

项目结构:

首先,让我们来看一下整个项目的结构。我们将采用简洁而有层次感的布局,以提高代码的可读性和可维护性。主要的结构包括:

  • HTML 文件: 包含商品管理系统的主要页面结构,包括商品列表和添加/编辑表单等部分。

  • CSS 文件: 负责样式设计,使页面呈现出清晰的布局、美观的颜色搭配以及良好的用户交互体验。

  • Vue.js 组件文件: 将不同功能划分为组件,如商品列表组件、添加/编辑表单组件等,有助于代码模块化和复用。

功能实现:

现在,我们来了解一下如何通过 Vue.js 实现商品的各项功能。

  • 添加商品: 用户在表单中输入商品信息,点击提交按钮后,通过 Vue.js 的方法将商品信息添加到商品列表中。

  • 编辑商品: 用户点击商品列表中的“修改”链接后,Vue.js 将相关商品信息填充到表单中,用户可修改信息并提交,实现商品信息的编辑。

  • 删除商品: 用户点击商品列表中的“删除”链接,Vue.js 将识别出被选择的商品,并在商品列表中删除该商品。

数据管理:

Vue.js 的数据绑定机制是这个项目的核心。通过合理使用数据绑定,我们能够实时更新页面上的数据,确保用户界面和数据之间的同步。

  • 商品列表数据: 使用 Vue.js 的数据绑定,将商品列表与数据源关联,实现数据的动态更新。

  • 表单数据: 将表单中的输入框与 Vue.js 的数据绑定,使得用户在输入时,数据随之更新,为后续的提交和编辑提供便利。

交互逻辑:

最后,让我们来看一下用户与页面交互的逻辑。

  • 提交表单: 用户在填写完商品信息后,点击提交按钮,触发 Vue.js 的相关方法,完成商品的添加或编辑操作。

  • 清空表单: 提供“清空”按钮,用户点击后,Vue.js 将相关数据清空,表单恢复到初始状态。

  • 编辑和删除操作: 用户点击商品列表中的“修改”和“删除”链接,触发 Vue.js 中的相应方法,完成对商品信息的编辑和删除操作.

具体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /* CSS 样式 */
        .grid {
            margin: auto;
            width: 530px;
            text-align: center;
        }
        .grid table {
            border-top: 1px solid #C2D89A;
            width: 100%;
            border-collapse: collapse;
        }
        .grid th,td {
            padding: 10px;
            border: 1px dashed #F3DCAB;
            height: 35px;
            line-height: 35px;
        }
        .grid th {
            background-color: #F3DCAB;
        }
        .grid .film {
            padding-bottom: 10px;
            padding-top: 5px;
            background-color: #F3DCAB;
        }
    </style>
</head>
<body>
    <!-- Vue 应用的根节点 -->
    <div id="app">
        <div class="grid">
            <div>
                <!-- 商品管理标题 -->
                <h1>商品管理</h1>
                <div class="film">
                    <div>
                        <!-- 商品信息输入表单 -->
                        <label for="id">编号:</label>
                        <input type="text" id="id" v-model="id" :disabled="flag"  style="margin-top: 20px;"><br>
                        <label for="name">名称:</label>
                        <input type="text" id="name" v-model="name"><br>
                        <label for="price">价格:</label>
                        <input type="text" id="price" v-model="price"  style="margin-bottom: 20px;"><br>
                        <!-- 提交和清空按钮 -->
                        <button @click="handle">提交</button>
                        <button @click="clearForm" style="margin-right: -54px; margin-left: 44px;">清空</button>
                    </div>
                </div>
            </div>
            <!-- 商品信息展示表格 -->
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>价格</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 商品数据循环展示 -->
                    <tr :key="item.id" v-for="item in films">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.price}}</td>
                        <td>
                            <!-- 修改和删除操作链接 -->
                            <a href="" @click.prevent="toEdit(item.id)">修改</a>
                            <span>|</span>
                            <a href="" @click.prevent="deleteFilm(item.id)">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- 引入 Vue.js -->
    <script type="text/javascript" src="js/vue3.js"></script>
    <!-- Vue 实例和相关方法 -->
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false,
                id: '',
                name: '',
                price: '',
                films: [{
                    id: 1,
                    name: '康师傅方便面',
                    price: '6'
                },{
                    id: 2,
                    name: '百岁山矿泉水',
                    price: '3'
                },{
                    id: 3,
                    name: '德芙巧克力',
                    price: '10'
                },{
                    id: 4,
                    name: '酱福猪肘子',
                    price: '40'
                }]
            },
            methods: {
                // 处理提交和编辑逻辑的方法
                handle: function(){
                    if(this.flag) {
                        // 编辑商品
                        this.films.some((item) => {
                            if(item.id == this.id) {
                                item.name = this.name;
                                item.price = this.price;
                                return true;
                            }
                        });
                        this.flag = false;
                    } else {
                        // 添加商品
                        var film = {};
                        film.id = this.id;
                        film.name = this.name;
                        film.price = this.price;
                        this.films.push(film);
                        this.clearForm(); // 清空表单
                    }
                },
                // 进入编辑状态的方法
                toEdit: function(id){
                    this.flag = true;
                    var film = this.films.find(function(item){
                        return item.id == id;
                    });
                    this.id = film.id;
                    this.name = film.name;
                    this.price = film.price;
                },
                // 删除商品的方法
                deleteFilm: function(id){
                    var index = this.films.findIndex(function(item){
                        return item.id == id;
                    });
                    this.films.splice(index, 1);
                },
                // 清空表单的方法
                clearForm: function(){
                    this.id = '';
                    this.name = '';
                    this.price = '';
                }
            }
        });
    </script>
</body>
</html>

代码解释:

  • CSS 样式: 设置页面元素的样式,包括外边距、表格样式等,以实现良好的页面布局。
  • HTML 结构: 通过HTML定义了页面的基本结构,包括商品管理标题、商品信息输入表单、提交和清空按钮、商品信息展示表格以及商品数据循环展示。
  • Vue.js 部分: 创建了一个Vue实例,通过data属性定义了页面所需的数据(id、name、price、films等)和一些标识变量(flag),methods属性中定义了处理提交、编辑、删除等逻辑的方法。
  • Vue 数据绑定: 利用Vue.js的数据绑定机制,将输入框和数据模型绑定,实现实时更新。
  • Vue 事件绑定: 使用Vue指令@绑定按钮的点击事件,触发相应的Vue方法。
  • Vue 数据循环: 使用v-for指令循环展示商品数据。

项目链接

GitHub:https://github.com/Olivia-account/VueCommerceManagementSystem

后记

如果觉得有帮助的话,求 关注、收藏、点赞、星星 哦!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9828.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!