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。

相关实践学习
【AI破次元壁合照】少年白马醉春风,函数计算一键部署AI绘画平台
本次实验基于阿里云函数计算产品能力开发AI绘画平台,可让您实现“破次元壁”与角色合照,为角色换背景效果,用AI绘图技术绘出属于自己的少年江湖。
从 0 入门函数计算
在函数计算的架构中,开发者只需要编写业务代码,并监控业务运行情况就可以了。这将开发者从繁重的运维工作中解放出来,将精力投入到更有意义的开发任务上。
目录
相关文章
|
前端开发
react hooks 使用小技巧—useState传值函数
当使用useState时,传入一个函数作为初始状态值的参数和传入一个值的参数的效果是一样的,都会在组件渲染时被调用,但它们的使用场景略有不同。
830 1
|
前端开发 关系型数据库 数据库
使用 Flask 连接数据库和用户登录功能进行数据库的CRUD
使用 Flask 连接数据库和用户登录功能进行数据库的CRUD
489 0
|
JavaScript 前端开发 数据安全/隐私保护
VUE3实现全局水印功能
watermark-js-plus 是一个用于给图片添加水印的 JavaScript 库。它提供了一个简单的方式来在图片上添加文字水印、图片水印或自定义水印。
976 0
|
JavaScript
echarts_自定义graph关系图
echarts_自定义graph关系图
555 0
|
12月前
|
前端开发 JavaScript API
2025年前端框架是该选vue还是react?有了大模型-例如通义灵码辅助编码,就不用纠结了!vue用的多选react,react用的多选vue
本文比较了Vue和React两大前端框架,从状态管理、数据流、依赖注入、组件管理等方面进行了详细对比。当前版本和下载量数据显示React更为流行,但Vue在国内用户量增长迅速。Vue 3通过组合式API提供了更灵活的状态管理和组件逻辑复用,适合中小型项目;React则更适合大型项目和复杂交互逻辑。文章还给出了选型建议,强调了多框架学习的重要性,认为技术问题已不再是选型的关键,熟悉各框架的最佳实践更为重要。
6853 1
|
云安全 存储 运维
阿里云的ACE认证含金量高不高?考试内容是什么?
作为目前市场上占比最大的云计算,阿里云旗下的认证是相当具有含金量的。
|
运维 Serverless Shell
Serverless 应用引擎产品使用合集之如何完成Python依赖环境配置
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
|
存储 安全 Cloud Native
阿里云企业扶持计划最低3500元、最高100万元申请流程及常见问题解答
阿里云创业者计划是专为初创企业设计的一项扶持计划,旨在帮助初创企业快速构建智能时代的核心竞争力,同时聚合多方资源,为初创企业提供全方位的赋能与服务。成功加入该计划后,阿里云将提供最低3500元、最高100万元的上云抵扣金,让初创企业以零成本享受云资源和技术服务,开启智能时代创业新范式。
阿里云企业扶持计划最低3500元、最高100万元申请流程及常见问题解答