如何从0构建一个flask项目,直接上实操!!!

项目结构

首先,创建一个项目目录,结构如下:

 

flask_app/

├── app.py                # Flask 应用代码
├── static/               # 存放静态文件(如CSS、JS、图片等)
│   └── style.css         # 示例CSS文件
└── templates/            # 存放HTML模板
    └── index.html        # HTML模板文件
 

1. 创建 app.py

flask_app 目录下创建 app.py 文件,内容如下:

from flask import Flask, render_template, requestapp = Flask(__name__)@app.route('/')
def home():return render_template('index.html')@app.route('/submit', methods=['POST'])
def submit():name = request.form.get('name')return render_template('index.html', name=name)if __name__ == '__main__':app.run(port=3000, debug=True)

2. 创建 HTML 模板 index.html

templates 目录下创建 index.html 文件,内容如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flask应用</title><link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body><form action="/submit" method="post"><label for="name">请输入你的名字:</label><input type="text" id="name" name="name" required><button type="submit">提交</button></form>{% if name %}<h2>你好啊, {{ name }}!</h2>{% endif %}
</body>
</html>

3. 创建 CSS 文件 style.css

static 目录下创建 style.css 文件,内容如下:

body {font-family: Arial, sans-serif;margin: 20px;
}form {margin: 20px 0;
}input[type="text"] {padding: 10px;margin-right: 10px;
}button {padding: 10px 15px;
}

4. 运行应用

在命令行中,导航到 flask_app 目录并运行以下命令:

python app.py

5. 访问应用

打开浏览器,输入以下地址访问你的 Flask 应用:http://127.0.0.1:3000/

总结

这里展示了一个简单的 Flask 应用,用户可以在表单中输入名字并提交,提交后页面会显示用户的名字。通过这个实例 ,相信你已经对flask有了一点点理解了,继续扩展的知识线吧!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/64667.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ubuntu下C语言操作kafka示例

目录 安装kafka&#xff1a; 安装librdkafka consumer Producer 测试运行 安装kafka&#xff1a; Ubuntu下Kafka安装及使用_ubuntu安装kafka-CSDN博客 安装librdkafka github地址&#xff1a;GitHub - confluentinc/librdkafka: The Apache Kafka C/C library $ apt in…

小红书关键词搜索采集 | AI改写 | 无水印下载 | 多维表格 | 采集同步飞书

小红书关键词搜索采集 | AI改写 | 无水印下载 | 多维表格 | 采集同步飞书 一、下载影刀&#xff1a; https://www.winrobot360.com/share/activity?inviteUserUuid595634970300317698 二、加入应用市场 https://www.yingdao.com/share/accede/?inviteKeyb2d3f22a-fd6c-4a…

WatchAlert - 开源多数据源告警引擎

概述 在现代 IT 环境中&#xff0c;监控和告警是确保系统稳定性和可靠性的关键环节。然而&#xff0c;随着业务规模的扩大和数据源的多样化&#xff0c;传统的单一数据源告警系统已经无法满足复杂的需求。为了解决这一问题&#xff0c;我开发了一个开源的多数据源告警引擎——…

单片机:实现HC-SR04超声波测距(附带源码)

使用单片机实现 HC-SR04 超声波测距模块 的功能&#xff0c;通常用于测量物体与超声波传感器之间的距离。HC-SR04 模块通过发射超声波信号并测量其返回时间来计算距离。单片机&#xff08;如 STM32、51 系列、Arduino 等&#xff09;可用来控制该模块的工作&#xff0c;并处理返…

Python langchain ReAct 使用范例

0. 介绍 ReAct: Reasoning Acting &#xff0c;ReAct Prompt 由 few-shot task-solving trajectories 组成&#xff0c;包括人工编写的文本推理过程和动作&#xff0c;以及对动作的环境观察。 1. 范例 langchain version 0.3.7 $ pip show langchain Name: langchain Ver…

selenium工作原理

原文链接&#xff1a;https://blog.csdn.net/weixin_67603503/article/details/143226557 启动浏览器和绑定端口 当你创建一个 WebDriver 实例&#xff08;如 webdriver.Chrome()&#xff09;时&#xff0c;Selenium 会启动一个新的浏览器实例&#xff0c;并为其分配一个特定的…

PDFMathTranslate 一个基于AI优秀的PDF论文翻译工具

PDFMathTranslate 是一个设想中的工具&#xff0c;旨在翻译PDF文档中的数学内容。以下是这个工具的主要特点和使用方法&#xff1a; 链接&#xff1a;https://www.modelscope.cn/studios/AI-ModelScope/PDFMathTranslate 功能特点 数学公式识别&#xff1a;利用先进的OCR&…

ChatGPT生成接口测试用例(二)

5.1.4 自动生成测试数据 测试数据的生成通常是接口测试的一个烦琐任务。ChatGPT可以帮助测试团队生成测试数据&#xff0c;包括各种输入和它们的组合。测试人员可以描述他们需要的数据类型和范围&#xff0c;ChatGPT可以生成符合要求的测试数据&#xff0c;从而减轻测试人员的负…

项目管理工具Maven(一)

Maven的概念 什么是Maven 翻译为“专家”&#xff0c;“内行”Maven是跨平台的项目管理工具。主要服务于基于Java平台的项目构建&#xff0c;依赖管理和项目信息管理。什么是理想的项目构建&#xff1f; 高度自动化&#xff0c;跨平台&#xff0c;可重用的组件&#xff0c;标准…

ElasticSearch 自动补全

1、前言 当用户在搜索框输入字符时&#xff0c;我们应该提示出与该字符有关的搜索项&#xff0c;根据用户输入的字母&#xff0c;提示完整词条的功能&#xff0c;就是自动补全。 2、安装拼音分词器 Github地址&#xff1a;https://github.com/infinilabs/analysis-pinyin 插件…

UML 建模实验

文章目录 实验一 用例图一、安装并熟悉软件EnterpriseArchitect16二、用例图建模 实验二 类图、包图、对象图类图第一题第二题 包图对象图第一题第二题 实验三 顺序图、通信图顺序图银行系统学生指纹考勤系统饮料自动销售系统“买到饮料”“饮料已售完”“无法找零”完整版 通信…

Linux环境下 搭建ELk项目 -单机版练习

前言 ELK 项目是一个由三个开源工具组成的日志处理和分析解决方案&#xff0c;ELK 是 Elasticsearch、Logstash 和 Kibana 的首字母缩写。这个项目的目标是帮助用户采集、存储、搜索和可视化大量的日志和事件数据&#xff0c;尤其是在分布式系统中。下面是每个组件的概述&…

day14-16系统服务管理和ntp和防火墙

一、自有服务概述 服务是一些特定的进程&#xff0c;自有服务就是系统开机后就自动运行的一些进程&#xff0c;一旦客户发出请求&#xff0c;这些进程就自动为他们提供服务&#xff0c;windows系统中&#xff0c;把这些自动运行的进程&#xff0c;称为"服务" window…

js进阶语法详解

文章目录 js进阶语法详解一、引言二、闭包与作用域1、闭包1.1、示例代码 2、作用域2.1、示例代码 三、this关键字与函数调用1、this的指向1.1、示例代码 2、apply和call方法2.1、示例代码 四、异步编程1、Promise1.1、示例代码 五、JS的面向对象封装1、封装的概念1.1、构造函数…

Qt WORD/PDF(一)使用 QtPdfium库实现 PDF 预览

文章目录 一、简介二、下载 QtPdfium三、加载 QtPdfium 动态库四、Demo 使用 关于QT Widget 其它文章请点击这里: QT Widget 国际站点 GitHub: https://github.com/chenchuhan 国内站点 Gitee : https://gitee.com/chuck_chee 姊妹篇: Qt WORD/PDF&#x…

.Net WebAPI(一)

文章目录 项目地址一、WebAPI基础1. 项目初始化1.1 创建简单的API1.1.1 get请求1.1.2 post请求1.1.3 put请求1.1.4 Delete请求 1.2 webapi的流程 2.Controllers2.1 创建一个shirts的Controller 3. Routing3.1 使用和创建MapControllers3.2 使用Routing的模板语言 4. Mould Bind…

Java操作Redis-Jedis

介绍 前面我们讲解了Redis的常用命令&#xff0c;这些命令是我们操作Redis的基础&#xff0c;那么我们在 java程序中应该如何操作Redis呢&#xff1f;这就需要使用Redis的Java客户端&#xff0c;就如同我们使 用JDBC操作MySQL数据库一样。 Redis 的 Java 客户端很多&#xff0…

Vue3 + Element-Plus + vue-draggable-plus 实现图片拖拽排序和图片上传到阿里云 OSS 父组件实现真正上传(最新保姆级)

Vue3 Element-Plus vue-draggable-plus 实现图片拖拽排序和图片上传到阿里云 OSS&#xff08;最新保姆级&#xff09;父组件实现真正上传 1、效果展示2、UploadImage.vue 组件封装3、相关请求封装4、SwiperConfig.vue 调用组件5、后端接口 1、效果展示 如果没有安装插件&…

将 Ubuntu 22.04 LTS 升级到 24.04 LTS

Ubuntu 24.04 LTS 将支持 Ubuntu 桌面、Ubuntu 服务器和 Ubuntu Core 5 年&#xff0c;直到 2029 年 4 月。 本文将介绍如何将当前 Ubuntu 22.04 系统升级到最新 Ubuntu 24.04 LTS版本。 备份个人数据 以防万一&#xff0c;把系统中的重要数据自己备份一下~ 安装配置SSH访问…

宝塔SSL证书申请失败,报错:申请SSL证书错误 module ‘OpenSSL.crypto‘ has no attribute ‘sign‘(已解决)

刚安装宝塔申请SSL就报错&#xff1a;申请SSL证书错误 module OpenSSL.crypto has no attribute sign 面板、插件版本&#xff1a;9.2.0 系统版本&#xff1a;Alibaba Cloud Linux 3.2104 LTS 问题&#xff1a;申请SSL证书错误 module OpenSSL.crypto has no attribute sign…