编写代码,基于flask的校园音乐网的新模块,该模块为点歌模块,使用者需要提交歌曲网易云链接,填写点歌人信息,被点歌人信息,以及留言,提交成功后弹窗提示,在原界面生成播放器,播放该歌曲,要求有详细的提示信息
时间: 2024-06-09 12:05:13 浏览: 111
首先,需要安装 Flask 和 requests 库,可以使用以下命令进行安装:
```
pip install Flask requests
```
接下来,我们可以创建一个名为 `app.py` 的文件,并编写以下代码:
```python
from flask import Flask, render_template, request, jsonify
import requests
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/submit', methods=['POST'])
def submit():
song_url = request.form.get('song_url')
from_name = request.form.get('from_name')
to_name = request.form.get('to_name')
message = request.form.get('message')
# 发送请求到服务器
response = requests.post(
'http://api.example.com/submit_song',
json={
'song_url': song_url,
'from_name': from_name,
'to_name': to_name,
'message': message
}
)
if response.status_code == 200:
# 返回成功信息
return jsonify({'status': 'success', 'message': '点歌成功!'})
else:
# 返回失败信息
return jsonify({'status': 'error', 'message': '点歌失败,请稍后重试!'})
if __name__ == '__main__':
app.run(debug=True)
```
在这个代码中,我们首先导入了 Flask 和 requests 库,创建了一个名为 `app` 的 Flask 实例,并定义了两个路由。
在 `/` 路由中,我们渲染了一个名为 `index.html` 的模板,这个模板包含了点歌表单,用户可以在表单中填写信息并提交。
在 `/submit` 路由中,我们首先获取用户提交的表单数据,然后将这些数据打包成 JSON 格式,通过 POST 请求发送到服务器端的 API,等待服务器端的响应,如果响应的状态码为 200,则返回一个包含成功信息的 JSON 格式数据,否则返回一个包含失败信息的 JSON 格式数据。
接下来,我们可以创建一个名为 `index.html` 的模板,并编写以下代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>点歌模块</title>
<meta charset="utf-8">
</head>
<body>
<h1>点歌模块</h1>
<form action="/submit" method="post">
<label for="song_url">歌曲链接:</label>
<input type="text" name="song_url" id="song_url" required><br>
<label for="from_name">点歌人姓名:</label>
<input type="text" name="from_name" id="from_name" required><br>
<label for="to_name">被点歌人姓名:</label>
<input type="text" name="to_name" id="to_name" required><br>
<label for="message">留言:</label>
<textarea name="message" id="message"></textarea><br>
<input type="submit" value="提交">
</form>
<div id="result"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('form').submit(function(event) {
event.preventDefault();
$.ajax({
url: '/submit',
method: 'POST',
data: $('form').serialize(),
success: function(response) {
if (response.status === 'success') {
alert(response.message);
$('#result').html('<iframe src="' + $('input[name="song_url"]').val() + '" width="100%" height="auto" frameborder="no" border="0"></iframe>');
} else {
alert(response.message);
}
}
});
});
</script>
</body>
</html>
```
在这个模板中,我们首先渲染了一个包含点歌表单的页面,用户可以在表单中填写信息并提交,提交后会通过 AJAX 请求将数据发送给服务器端的 API。在表单下方,我们创建了一个 `result` 的区域,用于显示点歌成功后的播放器。
在 AJAX 请求成功后,我们首先判断返回的状态是否为成功,如果是,则弹出一个成功提示框,并在 `result` 区域中生成一个新的 iframe,用于播放用户点歌的歌曲;否则,弹出一个失败提示框。
注意:在实际开发中,需要将 API 的地址和 iframe 的 src 地址替换成实际的地址。另外,需要注意安全问题,例如对用户提交的数据进行验证和过滤,防止 XSS 等安全漏洞。
阅读全文