公共IP地址。您的服务似乎已经返回了一个简单的“Hello, World!”消息,这意味着基础的服务已经运行起来了。
为了添加短连接生成的功能,您需要在服务端代码中实现短连接生成的逻辑,并提供一个API端点供前端调用。以下是一个简单的服务端代码示例,使用Python Flask框架:
serverless_flask.py:
from flask import Flask, request, jsonify
import uuid
app = Flask(__name__)
# 短连接生成逻辑
@app.route('/shorten', methods=['POST'])
def shorten():
original_url = request.json.get('url')
if not original_url:
return jsonify({
'error': 'URL is required'}), 400
# 生成短连接ID
short_id = uuid.uuid4().hex
# 构建短连接
short_url = f"http://{request.host}/{short_id}"
# 这里可以将short_id和original_url存储在数据库中
# 例如: db.insert({'short_id': short_id, 'original_url': original_url})
return jsonify({
'original_url': original_url, 'short_url': short_url})
if __name__ == '__main__':
app.run(host='0.0.0.0', port=8080)
在前端页面,您可以创建一个简单的HTML表单,允许用户输入链接,并提交到后端服务。以下是一个前端页面的示例代码:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>URL Shortener</title>
</head>
<body>
<h1>URL Shortener</h1>
<form id="shortenForm">
<input type="text" id="urlInput" placeholder="Enter URL here" required>
<button type="submit">Shorten</button>
</form>
<div id="result"></div>
<script>
document.getElementById('shortenForm').addEventListener('submit', function(event) {
event.preventDefault();
const url = document.getElementById('urlInput').value;
fetch('/shorten', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
url: url })
})
.then(response => response.json())
.then(data => {
if (data.error) {
document.getElementById('result').innerHTML = `Error: ${
data.error}`;
} else {
document.getElementById('result').innerHTML = `
<p>Original URL: <a href="${
data.original_url}" target="_blank">${
data.original_url}</a></p>
<p>Short URL: <a href="${
data.short_url}" target="_blank">${
data.short_url}</a></p>
`;
}
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result').innerHTML = `Error: ${
error}`;
});
});
</script>
</body>
</html>
在这个前端页面中,当用户提交表单时,JavaScript会拦截提交事件,然后使用fetch
API将用户输入的URL发送到后端的/shorten
端点。然后,它会处理响应并显示原始URL和生成的短连接URL。