serverless_flask

本文涉及的产品
函数计算FC,每月15万CU 3个月
简介: 【9月更文挑战第19天】

公共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。

相关实践学习
【文生图】一键部署Stable Diffusion基于函数计算
本实验教你如何在函数计算FC上从零开始部署Stable Diffusion来进行AI绘画创作,开启AIGC盲盒。函数计算提供一定的免费额度供用户使用。本实验答疑钉钉群:29290019867
建立 Serverless 思维
本课程包括: Serverless 应用引擎的概念, 为开发者带来的实际价值, 以及让您了解常见的 Serverless 架构模式
目录
相关文章
|
6月前
|
开发者 Python
Flask的一种启动方式和三种托管方式
本文介绍了 Flask 的四种启动方法:原生启动、gevent 启动、tornado 启动以及 waitress 启动。每种启动方法都有其优点和适用场景,除本文四种启动方式外,Flask还支持其他很多种启动方式和托管方式,开发者可以根据自己的需求进行选择。
387 1
|
7月前
|
监控 安全 数据库
Flask应用部署指南:从开发到生产环境
【4月更文挑战第16天】本文是Flask应用从开发到生产的部署指南,涵盖开发环境准备、应用开发、部署方案选择、生产环境配置、应用部署、监控与维护。确保安装Python、Flask及依赖库,使用文本编辑器或IDE编写代码,关注应用安全与性能。选择WSGI服务器、Docker或云服务平台部署,配置生产环境,确保安全性,然后部署应用并进行监控维护,定期更新修复问题,保证应用稳定运行。
|
IDE Java Serverless
通过部署流行Web框架掌握Serverless技术
本课程通过学习部署流行Web框架,如SpringBoot,Express,Web IDE,让你掌握Serverless函数计算架构和技术,领略弹性并发,高可用的好处。
|
应用服务中间件 Linux nginx
Python Flask Web框架服务部署
Python Flask Web框架服务部署
184 0
|
弹性计算 安全 JavaScript
零基础部署一个Django Blog到Serverless架构
本场景介绍如何将Django Blog项目部署到函数计算平台
|
NoSQL 前端开发 关系型数据库
flask框架中的一些常见问题
flask框架中的一些常见问题
|
机器学习/深度学习 前端开发 Python
Flask模型部署教程?
Flask模型部署教程?
319 0
|
存储 JavaScript 前端开发
Vue的Serverless应用开发
Vue的Serverless应用开发
|
运维 监控 安全
基于 Serverless一键体验FastAPI
基于 Serverless Devs搭建FastAPI以及 Serverless Devs基础介绍
基于 Serverless一键体验FastAPI
|
存储 开发框架 前端开发
使用Serverless 函数计算搭建一个Vue3的框架
使用Serverless 函数计算搭建一个Vue3的框架
使用Serverless 函数计算搭建一个Vue3的框架