用html,css,js实现地址管理,有添加地址,修改地址和删除地址的功能
时间: 2024-03-23 12:42:55 浏览: 12
好的,这是一个比较复杂的项目,需要设计数据库、后端接口和前端页面。我将简单介绍一下实现思路,具体实现可以根据自己的需求进行修改和完善。
首先,需要设计一个包含地址信息的表格,例如:
```
CREATE TABLE address (
id INT NOT NULL AUTO_INCREMENT,
name VARCHAR(50) NOT NULL,
phone VARCHAR(20) NOT NULL,
address VARCHAR(100) NOT NULL,
PRIMARY KEY (id)
);
```
然后,需要编写后端接口,提供添加、修改和删除地址的功能。这里以 Node.js 和 Express 为例,示例代码如下:
```
const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;
const conn = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'password',
database: 'address',
});
app.use(bodyParser.json());
app.get('/api/address', (req, res) => {
const sql = 'SELECT * FROM address';
conn.query(sql, (err, result) => {
if (err) throw err;
res.send(result);
});
});
app.post('/api/address', (req, res) => {
const { name, phone, address } = req.body;
const sql = 'INSERT INTO address (name, phone, address) VALUES (?, ?, ?)';
conn.query(sql, [name, phone, address], (err, result) => {
if (err) throw err;
res.send(result);
});
});
app.put('/api/address/:id', (req, res) => {
const { name, phone, address } = req.body;
const { id } = req.params;
const sql = 'UPDATE address SET name = ?, phone = ?, address = ? WHERE id = ?';
conn.query(sql, [name, phone, address, id], (err, result) => {
if (err) throw err;
res.send(result);
});
});
app.delete('/api/address/:id', (req, res) => {
const { id } = req.params;
const sql = 'DELETE FROM address WHERE id = ?';
conn.query(sql, [id], (err, result) => {
if (err) throw err;
res.send(result);
});
});
app.listen(port, () => console.log(`Listening on port ${port}...`));
```
最后,需要编写前端页面,使用 HTML、CSS 和 JavaScript 实现添加、修改和删除地址的功能。这里以 jQuery 为例,示例代码如下:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Address Management</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Address Management</h1>
<form id="add-form">
<h2>Add Address</h2>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="phone">Phone:</label>
<input type="text" id="phone" name="phone" required>
<label for="address">Address:</label>
<input type="text" id="address" name="address" required>
<button type="submit">Add</button>
</form>
<table id="address-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Phone</th>
<th>Address</th>
<th>Actions</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
const $table = $('#address-table tbody');
const refreshTable = () => {
$.get('/api/address', data => {
$table.empty();
data.forEach(({ id, name, phone, address }) => {
const $tr = $('<tr></tr>');
$('<td></td>').text(id).appendTo($tr);
$('<td></td>').text(name).appendTo($tr);
$('<td></td>').text(phone).appendTo($tr);
$('<td></td>').text(address).appendTo($tr);
$actions = $('<td></td>').appendTo($tr);
$('<button></button>').text('Edit').click(() => {
const newName = prompt('Enter new name:', name);
const newPhone = prompt('Enter new phone:', phone);
const newAddress = prompt('Enter new address:', address);
if (newName && newPhone && newAddress) {
$.ajax({
url: `/api/address/${id}`,
method: 'PUT',
contentType: 'application/json',
data: JSON.stringify({ name: newName, phone: newPhone, address: newAddress }),
success: () => refreshTable(),
});
}
}).appendTo($actions);
$('<button></button>').text('Delete').click(() => {
if (confirm('Are you sure to delete this address?')) {
$.ajax({
url: `/api/address/${id}`,
method: 'DELETE',
success: () => refreshTable(),
});
}
}).appendTo($actions);
$tr.appendTo($table);
});
});
};
$('#add-form').submit(e => {
e.preventDefault();
const name = $('#name').val();
const phone = $('#phone').val();
const address = $('#address').val();
if (name && phone && address) {
$.post('/api/address', { name, phone, address }, () => {
$('#name').val('');
$('#phone').val('');
$('#address').val('');
refreshTable();
});
}
});
refreshTable();
});
</script>
</body>
</html>
```
这个页面包含一个添加地址的表单和一个地址列表,点击表格中的“Edit”按钮可以修改地址,点击“Delete”按钮可以删除地址。需要注意的是,这里使用了 jQuery 的 AJAX 方法调用后端接口,因此需要在 HTML 页面中引入 jQuery 库。