用100行以内代码实现CRUD操作，优雅展现前端设计之美

2024-01-10 15:44:34

前言

在现代软件开发中，CRUD（创建、读取、更新和删除）操作是必不可少的。这些基本操作允许用户与数据库交互，从而实现数据的增删改查。随着前端技术的发展，CRUD操作也变得更加复杂和多样化，要求开发人员不仅要关注功能的实现，还要注重代码的设计和用户体验。

优雅的前端代码设计原则

在设计前端代码时，我们应该遵循以下原则：

可读性： 代码应该易于阅读和理解，以便于维护和修改。
可重用性： 代码应该可以被重用，以避免重复劳动。
可扩展性： 代码应该能够轻松地扩展，以满足未来的需求。
性能： 代码应该高效，以确保应用程序的快速响应和流畅运行。
可维护性： 代码应该易于维护，以减少维护成本。

使用100行以内代码实现CRUD操作

接下来，我们将使用100行以内代码实现CRUD操作，并展示如何遵循上述设计原则。

HTML结构

<div class="container">
  <div class="table-responsive">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th></th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- 动态加载数据 -->
      </tbody>
    </table>
  </div>

  <div class="row">
    <div class="col-md-6">
      <form id="search-form">
        <div class="form-group">
          <label for="search-input">搜索：</label>
          <input type="text" class="form-control" id="search-input">
        </div>
        <button type="submit" class="btn btn-primary">搜索</button>
        <button type="reset" class="btn btn-default">重置</button>
      </form>
    </div>

    <div class="col-md-6">
      <button type="button" class="btn btn-success" id="add-button">新增</button>
      <button type="button" class="btn btn-danger" id="delete-button">删除</button>
      <button type="button" class="btn btn-info" id="import-button">导入</button>
      <button type="button" class="btn btn-warning" id="export-button">导出</button>
    </div>
  </div>
</div>

JavaScript代码

// 获取元素
const tableBody = document.querySelector('tbody');
const searchForm = document.getElementById('search-form');
const searchInput = document.getElementById('search-input');
const addButton = document.getElementById('add-button');
const deleteButton = document.getElementById('delete-button');
const importButton = document.getElementById('import-button');
const exportButton = document.getElementById('export-button');

// 数据源（模拟）
const data = [
  { id: 1, name: 'John Doe', description: 'Lorem ipsum dolor sit amet.' },
  { id: 2, name: 'Jane Smith', description: 'Lorem ipsum dolor sit amet.' },
  { id: 3, name: 'Michael Jones', description: 'Lorem ipsum dolor sit amet.' },
];

// 渲染数据
const renderData = (data) => {
  tableBody.innerHTML = '';
  data.forEach((item) => {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td>${item.id}</td>
      <td>${item.name}</td>
      <td>${item.description}</td>
      <td>
        <button type="button" class="btn btn-primary" data-id="${item.id}">编辑</button>
        <button type="button" class="btn btn-danger" data-id="${item.id}">删除</button>
      </td>
    `;
    tableBody.appendChild(row);
  });
};

// 搜索
searchForm.addEventListener('submit', (e) => {
  e.preventDefault();
  const searchTerm = searchInput.value;
  const filteredData = data.filter((item) => {
    return item.name.toLowerCase().includes(searchTerm.toLowerCase());
  });
  renderData(filteredData);
});

// 重置
searchForm.addEventListener('reset', (e) => {
  e.preventDefault();
  renderData(data);
});

// 新增
addButton.addEventListener('click', () => {
  // 打开模态框（省略）
});

// 删除
deleteButton.addEventListener('click', () => {
  // 获取选中的行
  const selectedRows = tableBody.querySelectorAll('tr.selected');
  // 删除选中的数据（省略）
  renderData(data);
});

// 导入
importButton.addEventListener('click', () => {
  // 打开文件选择器（省略）
});

// 导出
exportButton.addEventListener('click', () => {
  // 导出数据（省略）
});

// 初始化
renderData(data);

CSS样式

/* 表格样式 */
.table {
  width: 100%;
}

/* 表头样式 */
thead {
  background-color: #f9f9f9;
}

/* 表格主体样式 */
tbody {
  background-color: #ffffff;
}

/* 表格行样式 */
tr {
  border-bottom: 1px solid #dddddd;
}

/* 表格单元格样式 */
td, th {
  padding: 8px;
}

/* 按钮样式 */
button {
  margin-right: 8px;
}

/* 搜索表单样式 */
.form-group {
  margin-bottom: 8px;
}

/* 搜索输入框样式 */
.form-control {
  width: 100%;
}