帮我用代码制作一个可以网页 关于林俊杰 里面要有前后端交互 以紫色为主
时间: 2024-02-13 11:07:28 浏览: 22
好的,我可以为你提供一个简单的前后端交互的网页,并且使用紫色作为主题色。我们可以使用 HTML、CSS 和 JavaScript 来实现这个网页,并且使用一个简单的后端框架 Flask 来实现前后端的交互。
首先,我们需要创建一个 Flask 应用,并且设置一个路由来处理用户的请求。请注意,这里我们需要安装 Flask 库,你可以在终端中使用命令 `pip install Flask` 来安装。
```python
from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/about', methods=['POST'])
def about():
data = request.get_json()
name = data['name']
age = data['age']
message = f"Welcome to the about page, {name}! You are {age} years old."
return jsonify({'message': message})
if __name__ == '__main__':
app.run(debug=True)
```
在这个代码中,我们创建了一个 Flask 应用,并设置了 `/about` 路由来处理 POST 请求。当用户发送 POST 请求时,我们会从请求的 JSON 数据中提取用户的姓名和年龄,并返回一个包含欢迎信息的 JSON 响应。
接下来,我们可以在 HTML 中添加一个表单来让用户输入姓名和年龄,并使用 JavaScript 来处理表单的提交和响应。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About Lin Junjie</title>
<style>
body {
background-color: purple;
color: white;
font-family: sans-serif;
}
h1 {
text-align: center;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
input {
margin: 10px;
padding: 5px;
width: 200px;
border-radius: 5px;
border: none;
}
button {
padding: 10px;
border-radius: 5px;
border: none;
background-color: white;
color: purple;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
<h1>About Lin Junjie</h1>
<form id="about-form">
<input type="text" id="name-input" placeholder="Your Name">
<input type="number" id="age-input" placeholder="Your Age">
<button type="submit">Submit</button>
</form>
<script>
const form = document.getElementById('about-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const name = document.getElementById('name-input').value;
const age = document.getElementById('age-input').value;
const response = await fetch('/about', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({name, age})
});
const data = await response.json();
alert(data.message);
});
</script>
</body>
</html>
```
在这个 HTML 中,我们使用紫色作为背景色,并使用白色作为前景色。我们还添加了一个表单来让用户输入姓名和年龄,并在表单提交时使用 JavaScript 发送 POST 请求到我们的 Flask 应用中。当我们收到来自 Flask 应用的响应时,我们会弹出一个包含欢迎信息的对话框。
这是一个非常简单的前后端交互的网页,你可以根据你的需求和技能来进行修改和扩展。希望这可以帮助到你。