b站视频演示效果：
效果图：
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后台管理系统</title>
<!-- 引入正确的 Vue.js 版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
<!-- 引入样式 -->
<style>
/* 原有样式保持不变 */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 20px;
}
#app {
max-width: 800px;
margin: 0 auto;
}
h1 {
text-align: center;
color: #333;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
text-align: left;
}
th {
background-color: #5a67d8;
color: white;
cursor: pointer; /* 添加鼠标指针样式 */
position: relative; /* 为排序箭头定位 */
}
th.sort-asc::after {
content: '▲';
position: absolute;
right: 10px;
}
th.sort-desc::after {
content: '▼';
position: absolute;
right: 10px;
}
button {
padding: 10px 15px;
margin: 5px;
background-color: #5a67d8;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #434190;
}
/* 弹框样式 */
.modal {
display: none; /* 默认隐藏 */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.5); /* 半透明背景 */
}
.modal.show {
display: block; /* 显示弹框 */
}
.modal-content {
background-color: #fefefe;
margin: 10% auto;
padding: 20px;
border: 1px solid #888;
width: 400px;
border-radius: 5px;
}
.modal-header h2 {
margin: 0;
}
.modal-footer {
text-align: right;
}
.input-group {
margin-bottom: 15px;
}
.input-group label {
display: block;
margin-bottom: 5px;
color: #333;
}
.input-group input, .input-group select {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="app">
<h1>后台管理系统</h1>
<div class="action-buttons">
<button @click="showAddModal">添加商品</button>
<button @click="exportTable">导出表格</button>
<input type="file" @change="importTable" style="display: inline-block; margin-left: 10px;" />
</div>
<table>
<thead>
<tr>
<th @click="sortBy('name')" :class="getSortClass('name')">名称</th>
<th @click="sortBy('price')" :class="getSortClass('price')">价格</th>
<th @click="sortBy('description')" :class="getSortClass('description')">描述</th>
<th @click="sortBy('category')" :class="getSortClass('category')">类别</th>
<th @click="sortBy('stock')" :class="getSortClass('stock')">库存</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in sortedItems" :key="index">
<td>{{ item.name }}</td>
<td>{{ item.price.toFixed(2) }}</td>
<td>{{ item.description }}</td>
<td>{{ item.category }}</td>
<td>{{ item.stock }}</td>
<td>
<button @click="showEditModal(index)">编辑</button>
<button @click="removeItem(index)">删除</button>
</td>
</tr>
</tbody>
</table>
<!-- 添加商品的模态框 -->
<div class="modal" :class="{ show: isAddModalVisible }">
<div class="modal-content">
<div class="modal-header">
<h2>添加商品</h2>
</div>
<div class="modal-body">
<div class="input-group">
<label>名称</label>
<input v-model="newItem.name" placeholder="请输入名称" />
</div>
<div class="input-group">
<label>价格</label>
<input v-model.number="newItem.price" placeholder="请输入价格" type="number" />
</div>
<div class="input-group">
<label>描述</label>
<input v-model="newItem.description" placeholder="请输入描述" />
</div>
<div class="input-group">
<label>类别</label>
<select v-model="newItem.category">
<option disabled value="">请选择类别</option>
<option>电子产品</option>
<option>服装</option>
<option>食品</option>
<option>书籍</option>
</select>
</div>
<div class="input-group">
<label>库存</label>
<input v-model.number="newItem.stock" placeholder="请输入库存数量" type="number" />
</div>
</div>
<div class="modal-footer">
<button @click="addItem">添加</button>
<button @click="isAddModalVisible = false">取消</button>
</div>
</div>
</div>
<!-- 编辑商品的模态框 -->
<div class="modal" :class="{ show: isEditModalVisible }">
<div class="modal-content">
<div class="modal-header">
<h2>编辑商品</h2>
</div>
<div class="modal-body">
<div class="input-group">
<label>名称</label>
<input v-model="editItemData.name" placeholder="请输入名称" />
</div>
<div class="input-group">
<label>价格</label>
<input v-model.number="editItemData.price" placeholder="请输入价格" type="number" />
</div>
<div class="input-group">
<label>描述</label>
<input v-model="editItemData.description" placeholder="请输入描述" />
</div>
<div class="input-group">
<label>类别</label>
<select v-model="editItemData.category">
<option disabled value="">请选择类别</option>
<option>电子产品</option>
<option>服装</option>
<option>食品</option>
<option>书籍</option>
</select>
</div>
<div class="input-group">
<label>库存</label>
<input v-model.number="editItemData.stock" placeholder="请输入库存数量" type="number" />
</div>
</div>
<div class="modal-footer">
<button @click="updateItem">更新</button>
<button @click="isEditModalVisible = false">取消</button>
</div>
</div>
</div>
</div>
<!-- 引入 Vue.js 脚本 -->
<script>
new Vue({
el: '#app',
data: {
items: [],
newItem: {
name: '',
price: 0,
description: '',
category: '',
stock: 0
},
editIndex: null,
editItemData: {
name: '',
price: 0,
description: '',
category: '',
stock: 0
},
isAddModalVisible: false,
isEditModalVisible: false,
sortKey: '', // 当前排序的列
sortOrders: { // 每列的排序顺序，1 为升序，-1 为降序
name: 1,
price: 1,
description: 1,
category: 1,
stock: 1
}
},
computed: {
sortedItems() {
let items = this.items.slice();
if (this.sortKey) {
items.sort((a, b) => {
let result = 0;
let aVal = a[this.sortKey];
let bVal = b[this.sortKey];
// 处理空值
if (aVal === undefined || aVal === null) aVal = '';
if (bVal === undefined || bVal === null) bVal = '';
// 数值排序
if (typeof aVal === 'number' && typeof bVal === 'number') {
result = aVal - bVal;
} else {
// 字符串排序，使用 localeCompare 支持中文
result = aVal.toString().localeCompare(bVal.toString(), 'zh-Hans-CN', {numeric: true});
}
return result * this.sortOrders[this.sortKey];
});
}
return items;
}
},
methods: {
showAddModal() {
// 重置 newItem 数据
this.newItem = {
name: '',
price: 0,
description: '',
category: '',
stock: 0
};
this.isAddModalVisible = true;
},
addItem() {
if (this.newItem.name && this.newItem.price >= 0 && this.newItem.category && this.newItem.stock >= 0) {
this.items.push({ ...this.newItem });
this.isAddModalVisible = false;
} else {
alert('请填写完整的商品信息');
}
},
removeItem(index) {
this.items.splice(index, 1);
},
showEditModal(index) {
this.editIndex = index;
this.editItemData = { ...this.items[index] };
this.isEditModalVisible = true;
},
updateItem() {
if (this.editItemData.name && this.editItemData.price >= 0 && this.editItemData.category && this.editItemData.stock >= 0) {
this.$set(this.items, this.editIndex, this.editItemData);
this.isEditModalVisible = false;
this.editIndex = null;
} else {
alert('请填写完整的商品信息');
}
},
exportTable() {
const headers = ['名称', '价格', '描述', '类别', '库存'];
const csvContent = "data:text/csv;charset=utf-8,"
+ headers.join(",") + "\n"
+ this.items.map(item =>
`${item.name},${item.price},${item.description},${item.category},${item.stock}`
).join("\n");
const encodedUri = encodeURI(csvContent);
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "data.csv");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
},
importTable(event) {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (e) => {
const text = e.target.result;
const rows = text.trim().split("\n").map(row => row.split(","));
const headers = rows[0];
const dataRows = rows.slice(1);
this.items = dataRows.map(row => ({
name: row[0],
price: parseFloat(row[1]),
description: row[2],
category: row[3],
stock: parseInt(row[4])
}));
};
reader.readAsText(file);
},
sortBy(key) {
if (this.sortKey === key) {
this.sortOrders[key] = -this.sortOrders[key]; // 切换排序顺序
} else {
this.sortKey = key;
}
},
getSortClass(key) {
if (this.sortKey === key) {
return this.sortOrders[key] === 1 ? 'sort-asc' : 'sort-desc';
}
return '';
}
}
});
</script>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
各位同学们：还有啥想看的功能或者特效不？欢迎在评论区留言哦！
本人承接网网站开发，如有需要，欢迎私信咨询！
如果您感觉文章对您有帮助~
那就打赏一下，请笔者喝杯咖啡吧~
给新手学习前端开发的建议：
-
了解基础知识：
- 学习HTML、CSS和JavaScript的基础知识。它们是前端开发的核心，构成了网页的基本结构和样式，以及交互功能。
- 掌握HTML的标签和语义化，了解CSS的选择器和布局技巧，熟悉JavaScript的基本语法和DOM操作。
-
实践项目：
- 不要仅仅停留在理论学习上，通过实践项目来巩固和应用所学知识。
- 可以从简单的静态页面开始，逐渐尝试添加交互效果和动态数据。
- 参与开源项目或自己动手创建一个个人网站，将所学知识应用到实际场景中。
-
学习工具和框架：
- 了解并学习前端开发中常用的工具和框架，如构建工具（Webpack、Gulp等）、版本控制工具（Git）、前端框架（React、Vue、Angular等）。
- 这些工具和框架能够提高开发效率，简化开发流程，是前端开发的重要组成部分。
-
关注前端趋势：
- 前端开发是一个快速发展的领域，新的技术和工具不断涌现。
- 关注前端社区、博客和会议，了解最新的技术趋势和发展方向，保持学习的热情和动力。
-
培养解决问题的能力：
- 前端开发常常会遇到各种问题和挑战，学会独立思考和解决问题是非常重要的。
- 遇到问题时，可以先尝试自己解决，通过查阅文档、搜索资料和社区讨论来找到答案。
- 如果实在无法解决，可以向同事或社区求助，但也要学会总结和分享自己的经验和教训。
-
不断学习和提升：
- 前端开发是一个不断学习和提升的过程，要保持对知识的渴望和追求。
- 可以通过阅读书籍、参加培训、参与开源项目等方式来不断提升自己的技能水平。
- 同时，也要关注自己的职业发展，了解行业的需求和趋势，规划自己的职业道路。
-
注重代码质量和可维护性：
- 编写高质量的代码是前端开发的基本要求之一。
- 学习并遵循代码规范，使用适当的命名和注释来提高代码的可读性。
- 注重代码的结构和逻辑，避免过度嵌套和复杂的逻辑。
- 考虑代码的可维护性，尽量编写可复用和可扩展的代码。
-
参与社区和交流：
- 加入前端开发的社区和论坛，与其他开发者进行交流和分享。
- 通过参与社区活动、回答问题、分享经验等方式，不仅可以提升自己的技能水平，还可以结识更多的同行和朋友。
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
加油吧！
