项目要求
这次我们将探讨一个实验项目，即“商品管理系统”实现。项目的主要目的在于完成一个基于 HTML、CSS 和 Vue.js 的商品管理界面，同时实现相关数据管理操作。这是一个初学者适用的项目。
项目核心目标
-
页面布局与交互： 通过 HTML 和 CSS，建立直观易用的商品管理界面，借助 Vue.js 实现用户友好的交互体验。
-
Vue.js 数据绑定： 学习并应用 Vue.js 的数据绑定机制，以确保页面实时反映数据变化，提升用户体验。
-
数据管理操作： 使用 Vue.js 提供的方法，实现商品数据的增删改查操作，以保证商品信息的灵活管理。
项目关键词
- Vue.js
- 商品管理系统
- 前端开发
- 数据绑定
- 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
后记
如果觉得有帮助的话，求 关注、收藏、点赞、星星 哦！
