使用jax前后端连接交互代码
时间: 2023-07-22 16:51:42 浏览: 161
通过ajax进行前后台交互
下面是使用 JAX 进行前后端连接交互的示例代码:
前端代码:
```javascript
import axios from 'axios';
import {jax} from 'jax';
const api = jax.create({
baseURL: 'http://localhost:8000/api',
headers: {
'Content-Type': 'application/json',
},
});
const fetchUser = async (id) => {
try {
const response = await api.get(`/users/${id}`);
return response.data;
} catch (error) {
console.error(error);
}
};
const createUser = async (user) => {
try {
const response = await api.post('/users', user);
return response.data;
} catch (error) {
console.error(error);
}
};
export {fetchUser, createUser};
```
后端代码:
```python
from flask import Flask
from flask import jsonify, request
app = Flask(__name__)
users = [
{'id': 1, 'name': 'Alice'},
{'id': 2, 'name': 'Bob'},
{'id': 3, 'name': 'Charlie'},
]
@app.route('/api/users/<int:id>', methods=['GET'])
def get_user(id):
for user in users:
if user['id'] == id:
return jsonify(user)
return jsonify({'error': 'User not found'})
@app.route('/api/users', methods=['POST'])
def create_user():
user = request.json
user_id = len(users) + 1
user['id'] = user_id
users.append(user)
return jsonify(user)
if __name__ == '__main__':
app.run(port=8000)
```
在上面的示例中,前端使用 axios 库进行 HTTP 请求,并使用 JAX 库创建了一个 API 实例,该实例基于 Flask 框架开发的后端应用提供的 RESTful API 进行通信。后端应用接收请求并返回 JSON 格式的数据。在后端应用中,使用 Flask 框架创建了两个路由,分别用于获取和创建用户数据。
阅读全文