给出前后端分离的通讯录代码
时间: 2024-10-13 21:01:54 浏览: 1
前后端分离的通讯录应用通常涉及两个部分:前端(用户界面)和后端(数据处理)。这里是一个简单的概述:
**前端(HTML, JavaScript, React/Angular/Vue等)**
```javascript
// 假设我们使用React.js
import axios from 'axios';
class ContactsList {
state = { contacts: [] };
componentDidMount() {
this.fetchContacts();
}
fetchContacts = async () => {
try {
const response = await axios.get('/api/contacts');
this.setState({ contacts: response.data });
} catch (error) {
console.error('Error fetching contacts:', error);
}
}
// 显示、添加、删除联系人等功能的事件处理器...
}
function App() {
return <ContactsList />;
}
```
**后端(Node.js, Express, Python Flask等)**
```python
# 使用Flask作为示例
from flask import Flask, jsonify
from flask_restful import Api, Resource
app = Flask(__name__)
api = Api(app)
class ContactsResource(Resource):
def get(self):
# 从数据库获取联系人数据并返回
contacts = get_contacts_from_database()
return jsonify(contacts), 200
api.add_resource(ContactsResource, '/api/contacts')
if __name__ == '__main__':
app.run()
```
在这个例子中,前端通过AJAX请求向`/api/contacts`发送GET请求,获取到后端提供的联系人数据。后端负责处理数据查询、存储以及响应。