苍穹外卖-【day03】-【公共字段自动填充】-【新增】-【分页】-【删除】-【修改】

**苍穹外卖-【Day03】**

### 公共字段自动填充在前两天，我们已经完成了基本的 CRUD 操作。今天，我们将重点讨论公共字段的自动填充功能。

#### 需求分析在实际业务中，很多表单都有公共字段，如用户信息、地址等，这些字段通常需要在多个地方填写。为了提高工作效率和减少重复输入，我们可以实现公共字段的自动填充功能。

#### 实现方案我们将使用 JavaScript 的 `localStorage` API 来存储公共字段的值，然后在需要填充这些字段的地方，动态地从 `localStorage` 中读取并填充相应的表单项。

####代码示例

javascript// 公共字段自动填充函数function autoFillPublicFields() {
 // 从 localStorage 中读取公共字段的值 const publicFields = JSON.parse(localStorage.getItem('publicFields'));
 // 根据需要填充的表单项，动态地从 publicFields 中读取并填充相应的值 if (publicFields && publicFields.name) {
 document.getElementById('name').value = publicFields.name;
 }
 if (publicFields && publicFields.address) {
 document.getElementById('address').value = publicFields.address;
 }
}

// 在页面加载时，自动填充公共字段window.addEventListener('load', autoFillPublicFields);

####代码注释* `autoFillPublicFields` 函数负责从 `localStorage` 中读取公共字段的值，然后根据需要填充的表单项，动态地从 `publicFields` 对象中读取并填充相应的值。
* 在页面加载时，我们使用 `window.addEventListener('load', autoFillPublicFields);` 来自动填充公共字段。

### 新增在前两天，我们已经完成了基本的 CRUD 操作。今天，我们将重点讨论新增功能。

#### 需求分析在实际业务中，新增功能是指创建新的记录或数据。在我们的案例中，我们需要实现一个可以添加新用户、订单等功能的界面。

#### 实现方案我们将使用 JavaScript 的 DOM API 来操作 HTML 元素，然后使用后端接口来保存新增的数据。

####代码示例

javascript// 新增函数function addNewData() {
 // 获取需要填充的表单项 const name = document.getElementById('name').value;
 const address = document.getElementById('address').value;
 // 使用后端接口保存新增的数据 fetch('/api/add', {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json'
 },
 body: JSON.stringify({
 name,
 address })
 })
 .then(response => response.json())
 .then(data => console.log(data))
 .catch(error => console.error(error));
}

// 在页面加载时，绑定新增事件document.getElementById('add-btn').addEventListener('click', addNewData);

####代码注释* `addNewData` 函数负责获取需要填充的表单项，然后使用后端接口保存新增的数据。
* 在页面加载时，我们使用 `document.getElementById('add-btn').addEventListener('click', addNewData);` 来绑定新增事件。

### 分页在前两天，我们已经完成了基本的 CRUD 操作。今天，我们将重点讨论分页功能。

#### 需求分析在实际业务中，数据量通常非常大。在我们的案例中，我们需要实现一个可以分页显示用户、订单等数据的界面。

#### 实现方案我们将使用 JavaScript 的 DOM API 来操作 HTML 元素，然后使用后端接口来获取分页数据。

####代码示例

javascript// 分页函数function pagination() {
 // 获取当前页数 const currentPage = parseInt(document.getElementById('currentPage').value);
 // 使用后端接口获取分页数据 fetch(`/api/pagination?page=${currentPage}`)
 .then(response => response.json())
 .then(data => {
 // 清空原有的表格内容 document.getElementById('table-content').innerHTML = '';
 // 动态地创建表格行 data.forEach(item => {
 const row = document.createElement('tr');
 row.innerHTML = `
 <td>${item.name}</td>
 <td>${item.address}</td>
 `;
 document.getElementById('table-content').appendChild(row);
 });
 })
 .catch(error => console.error(error));
}

// 在页面加载时，绑定分页事件document.getElementById('pagination-btn').addEventListener('click', pagination);

####代码注释* `pagination` 函数负责获取当前页数，然后使用后端接口获取分页数据。
* 在页面加载时，我们使用 `document.getElementById('pagination-btn').addEventListener('click', pagination);` 来绑定分页事件。

### 删除在前两天，我们已经完成了基本的 CRUD 操作。今天，我们将重点讨论删除功能。

#### 需求分析在实际业务中，删除功能是指移除已有的记录或数据。在我们的案例中，我们需要实现一个可以删除用户、订单等数据的界面。

#### 实现方案我们将使用 JavaScript 的 DOM API 来操作 HTML 元素，然后使用后端接口来保存删除的数据。

####代码示例

javascript// 删除函数function deleteData() {
 // 获取需要删除的表单项 const id = document.getElementById('id').value;
 // 使用后端接口保存删除的数据 fetch(`/api/delete/${id}`, {
 method: 'DELETE'
 })
 .then(response => response.json())
 .then(data => console.log(data))
 .catch(error => console.error(error));
}

// 在页面加载时，绑定删除事件document.getElementById('delete-btn').addEventListener('click', deleteData);

####代码注释* `deleteData` 函数负责获取需要删除的表单项，然后使用后端接口保存删除的数据。
* 在页面加载时，我们使用 `document.getElementById('delete-btn').addEventListener('click', deleteData);` 来绑定删除事件。

### 修改在前两天，我们已经完成了基本的 CRUD 操作。今天，我们将重点讨论修改功能。

#### 需求分析在实际业务中，修改功能是指更新已有的记录或数据。在我们的案例中，我们需要实现一个可以修改用户、订单等数据的界面。

#### 实现方案我们将使用 JavaScript 的 DOM API 来操作 HTML 元素，然后使用后端接口来保存修改的数据。

####代码示例

javascript// 修改函数function updateData() {
 // 获取需要修改的表单项 const id = document.getElementById('id').value;
 const name = document.getElementById('name').value;
 const address = document.getElementById('address').value;
 // 使用后端接口保存修改的数据 fetch(`/api/update/${id}`, {
 method: 'PUT',
 headers: {
 'Content-Type': 'application/json'
 },
 body: JSON.stringify({
 name,
 address })
 })
 .then(response => response.json())
 .then(data => console.log(data))
 .catch(error => console.error(error));
}

// 在页面加载时，绑定修改事件document.getElementById('update-btn').addEventListener('click', updateData);

####代码注释* `updateData` 函数负责获取需要修改的表单项，然后使用后端接口保存修改的数据。
* 在页面加载时，我们使用 `document.getElementById('update-btn').addEventListener('click', updateData);` 来绑定修改事件。