使用Python Flask搭建Web问答应用程序并发布到公网远程访问

使用Python Flask搭建web问答应用程序框架,并发布到公网上访问

文章目录

  • 使用Python Flask搭建web问答应用程序框架,并发布到公网上访问
    • 前言
    • 1. 安装部署Flask并制作SayHello问答界面
    • 2. 安装Cpolar内网穿透
    • 3. 配置Flask的问答界面公网访问地址
    • 4. 公网远程访问Flask的问答界面

前言

Flask是一个Python编写的Web微框架,让我们可以使用Python语言快速实现一个网站或Web服务,本期教程我们使用Python Flask搭建一个web问答应用程序框架,并结合cpolar内网穿透工具将我们的应用程序发布到公共网络上,实现可多人远程进入到该web应用程序访问。

在操作上我们将使用HTML来创建网页的结构,然后使用css设计这个结构并且使其看起来更漂亮,此外还会利用Javascript与页面上的不同元素进行交互,最后使用python与web服务器(也成为后端)进行连接。

1. 安装部署Flask并制作SayHello问答界面

本篇文章代码使用 Python3 运行

安装环境:需要在电脑上安装 Python3 和 pip3。建议安装最新版本

检查是否有安装了pip的可用Python,查看Python和pip版本:

C:> py --version
Python 3.N.N
C:> py -m pip --version
pip X.Y.Z from ... (python 3.N.N)

使用pip安装和更新:

$ pip install -U Flask

创建环境:

conda create -n SAYHELLO python=3.10

激活环境:

conda activate SAYHELLO

创建项目目录:

mkdir SAYHELLO

进入到创建的目录:

cd SAYHELLO

在当前目录启动VS Code:

code .

SAYHELLO文件夹下新建两个附加文件夹,一个名为templates储存html文件的位置,

另一个名为static文件夹,下面新建一个名为css的文件夹。

css文件夹下新建一个名为main.css的文件,

body {text-align: center;background-color: SlateGrey;
}
p {color: white;font-family: Shanti;font-size: 1.2em;display: inline-block;margin:  20px;
}
img {margin: 60px 0 30px 0;width: 250px;
}
input {width: 300px;margin: 20px 20px;height: 50px;border: none;border-radius: 10px;font-family: Shanti;font-size: 1.3em;text-align: center;
}input:focus {outline: none;border: solid 5px #00FFCE;
}#greet {background-color: PaleVioletRed;border:  none;width:  200px;color: white;
}#greet:hover {background-color: MediumVioletRed;
}

templates文件夹里新建一个名为index.html的文件,

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Say Hello</title><link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<body><img src="https://images.cpolar.com/img/202311271456089.png"><br><form action="greet" method="post">{% for message in get_flashed_messages() %}<p>{{ message }}</p>{% endfor %}<br><input type="text" name="name_input"><br><input type="submit" value="GREET" id="greet"></form>
</body>
</html>

SAYHELLO文件下新建一个名为Procfile的文件,

web: gunicorn app:app

SAYHELLO文件下新建一个名为app.py的文件,

from flask import Flask, render_template, request, flashapp = Flask(__name__)
app.secret_key = "manbearpig_MUDMAN888"@app.route("/")
def index():flash("what's your name?")return render_template("index.html")@app.route("/greet", methods=['POST', 'GET'])
def greeter():flash("Hi " + str(request.form['name_input']) + ", great to see you!")return render_template("index.html")

SAYHELLO文件下新建一个名为requirements.txt的文件,

certifi==2021.5.30
click==7.1.2
Flask==1.1.2
gunicorn==20.0.4
itsdangerous==1.1.0
Jinja2==2.11.2
MarkupSafe==2.0.1
Werkzeug==1.0.1
wincertstore==0.2

在TERMINAL里启动Flask

flask run

image-20231127155003195

打开一个新的浏览器,输入http://127.0.0.1:5000,进入到刚才制作的SAY Hello的打招呼界面。

可以看到刚才创建的问题回答:what’s your name?

image-20231127155252049

点击GREET后,弹出:HI wang,greet to see you!

image-20231127155443924

这样我们使用Flask搭建的一个基本的带有问答形式的界面就搭建完成了,接下来我们要把这个问答界面发布到公网,分享给别人并且在web进行前端与后端的互动。

2. 安装Cpolar内网穿透

上面在本地成功部署了Flask,并局域网访问成功,下面我们安装Cpolar内网穿透工具,通过cpolar 转发本地端口映射的http公网地址,我们可以很容易实现远程访问,而无需自己注册域名购买云服务器.下面是安装步骤:

cpolar官网地址: https://www.cpolar.com

  • 使用一键脚本安装命令
curl -L https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bash
  • 向系统添加服务
sudo systemctl enable cpolar
  • 启动cpolar服务
sudo systemctl start cpolar

cpolar安装成功后,在外部浏览器上访问9200端口 即:【http://局域网ip:9200】,使用cpolar账号登录(如没有账号,可以点击下面免费注册),登录后即可看到cpolar web 配置界面,结下来在web 管理界面配置即可

image-20230831171159175

3. 配置Flask的问答界面公网访问地址

点击左侧仪表盘的隧道管理——创建隧道,创建一个Flask的cpolar公网地址隧道:

  • 隧道名称:可自定义命名,注意不要与已有的隧道名称重复
  • 协议:选择http
  • 本地地址:5000 (局域网访问的端口)
  • 域名类型:免费选择随机域名
  • 地区:选择China Top
  • 点击创建

image-20231127160128962

隧道创建成功后,点击左侧的状态——在线隧道列表,查看所生成的公网访问地址,有两种访问方式,一种是http 和https

image-20231127160236923

4. 公网远程访问Flask的问答界面

使用上面的cpolar https公网地址在任意设备的浏览器访问,即可成功看到Flask的web界面,这样一个公网地址且可以远程访问就创建好了,无需自己购买云服务器,即可发布到公网访问。

image-20231127160540688

由于以上使用cpolar所创建的隧道使用的是随机公网地址,24小时内会随机变化,不利于长期远程访问。

我一般会使用固定二级子域名,因为我希望将网址发送给别人进行问卷调查时候,就可以直接使用固定的公网地址进行填写了。它是一个固定、易记的公网地址(例如:SayHello.cpolar.cn)因此我们可以为其配置二级子域名,该地址为固定地址,不会随机变化【ps:cpolar.cn已备案】

注意需要将cpolar套餐升级至基础套餐或以上,且每个套餐对应的带宽不一样。【cpolar.cn已备案】

登录cpolar官网,点击左侧的预留,选择保留二级子域名,设置一个二级子域名名称,点击保留,保留成功后复制保留的二级子域名名称。

image-20231127160930144

保留成功后复制保留成功的二级子域名的名称

image-20231127160950732

返回登录cpolar web UI管理界面,点击左侧仪表盘的隧道管理——隧道列表,找到所要配置的隧道,点击右侧的编辑

image-20231127161016574

修改隧道信息,将保留成功的二级子域名配置到隧道中

  • 域名类型:选择二级子域名
  • Sub Domain:填写保留成功的二级子域名

点击更新(注意,点击一次更新即可,不需要重复提交)

image-20231127161143781

更新完成后,打开在线隧道列表,此时可以看到公网地址已经发生变化,地址名称也变成了固定的二级子域名名称的域名

image-20231127161212877

最后,我们使用固定的公网地址访问,可以看到访问成功,这样一个固定且永久不变的公网地址就设置好了。

配置到隧道中

  • 域名类型:选择二级子域名
  • Sub Domain:填写保留成功的二级子域名

点击更新(注意,点击一次更新即可,不需要重复提交)

更新完成后,打开在线隧道列表,此时可以看到公网地址已经发生变化,地址名称也变成了固定的二级子域名名称的域名

最后,我们使用固定的公网地址访问,可以看到访问成功,这样一个固定且永久不变的公网地址就设置好了。

image-20231127161237988

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

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

相关文章

人员备岗与能力备份

去成为那种具备能力备份的人&#xff0c;不简单是人员备岗。 11月面临多名人员请假&#xff0c;人员请假过程中不停的问自己一个问题&#xff1f;是否做好了备份。 1. 人员备份 当一个人A离开工作岗位&#xff0c;需要找B继续接上去推广系统。 实际情况是抽调B过来&#xf…

打开游戏提示缺少(或找不到)XINPUT1_3.DLL怎么解决

在电脑使用过程中&#xff0c;我们可能会遇到一些错误提示&#xff0c;其中之一就是xinput1_3.dll丢失。那么&#xff0c;xinput1_3.dll是什么文件&#xff1f;它对电脑有什么影响&#xff1f;本文将详细介绍xinput1_3.dll丢失的原因以及五个详细的解决方法&#xff0c;帮助大家…

linux 应用层同步与互斥机制之条件变量

2、条件变量 互斥量防止多个线程同时访问同一共享变量。&#xff08;我们称为互斥&#xff09; 有一种情况&#xff0c;多个线程协同工作。一个线程的消费需要等待另一个线程的产出。必须线程B完成了应有的任务&#xff0c;满足了某一个条件&#xff0c;线程A才能继续执行。&…

帮企多城市分站系统源码+关键词排名优化推广 附带完整的搭建教程

随着市场竞争的加剧&#xff0c;企业对于网络营销的需求越来越多元化。传统的单一网站已经无法满足企业在网络营销方面的需求&#xff0c;因此我们需要开发一套多城市分站系统&#xff0c;以满足企业在不同地区、不同行业的需求。同时&#xff0c;我们还结合了关键词排名优化推…

外包干了2个月,技术明显退步了...

先说一下自己的情况&#xff0c;大专生&#xff0c;19年通过校招进入广州某软件公司&#xff0c;干了接近5年的功能测试&#xff0c;今年11月份&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测…

UE4 双屏分辨率设置

背景&#xff1a; 做了一个UI 应用&#xff0c;需要在双屏上进行显示。 分辨率如下&#xff1a;3840*1080&#xff1b; 各种折腾&#xff0c;其实很简单&#xff1a; 主要是在全屏模式的时候 一开始没有选对&#xff0c;双屏总是不稳定。 全屏模式改成&#xff1a;Windows 之…

JS加密/解密之HOOK实战

之前的章节有介绍过Javascript的Hook相关的基础知识&#xff0c;相信大部分人也知道了什么是Hook&#xff0c;今天我们来讲一下Hook实战&#xff0c;实际的运用。 0x1.事上练 // 程序员们基本都喜欢简单精辟 直入主题 不喜欢咬文嚼字 我们先直接上代码 var _log console.log…

WEPY框架的小程序的坑

在WEPY框架开发小程序时&#xff0c;可能会遇到一些常见的坑点&#xff0c;以下是一些需要注意的地方&#xff1a; 组件使用不当&#xff1a;WEPY框架的组件使用方式和原生小程序有所不同&#xff0c;如果使用不当可能会导致性能 问题或者逻辑错误。因此&#xff0c;需要仔细阅…

深度学习推理(Inference)

深度学习推理&#xff08;Inference&#xff09;是指已经训练好的深度学习模型在新的、未见过的数据上进行预测或分类的过程。在训练阶段&#xff0c;模型通过学习输入数据的模式和特征来调整参数&#xff0c;而在推理阶段&#xff0c;模型将这些学到的知识应用于新的输入数据&…

23、什么是卷积的 Feature Map?

这一节介绍一个概念&#xff0c;什么是卷积的 Feature Map&#xff1f; Feature Map, 中文称为特征图&#xff0c;卷积的 Feature Map 指的是在卷积神经网络&#xff08;CNN&#xff09;中&#xff0c;通过卷积这一操作从输入图像中提取的特征图。 上一节用示意动图介绍了卷积算…

web自动化 -- pyppeteer

由于Selenium流行已久&#xff0c;现在稍微有点反爬的网站都会对selenium和webdriver进行识别&#xff0c;网站只需要在前端js添加一下判断脚本&#xff0c;很容易就可以判断出是真人访问还是webdriver。虽然也可以通过中间代理的方式进行js注入屏蔽webdriver检测&#xff0c;但…

MySQL笔记-第04章_运算符

视频链接&#xff1a;【MySQL数据库入门到大牛&#xff0c;mysql安装到优化&#xff0c;百科全书级&#xff0c;全网天花板】 文章目录 第04章_运算符1. 算术运算符2. 比较运算符3. 逻辑运算符4. 位运算符5. 运算符的优先级拓展&#xff1a;使用正则表达式查询 第04章_运算符 …

​ 海外服务器创新高地:亚马逊云科技树立云计算韧性标杆

云计算的大潮中&#xff0c;众多企业对云服务器的需求与日俱增。但随之而来的就是云服务器的运行对于企业的业务的重要性也越来越高。想象一下&#xff0c;如果在全球范围内运行的服务和应用程序遭遇意外中断&#xff0c;从而产生的重大影响可能会给一些企业带来严重损失。因此…

如何将整个文件内容加载到富文本控件?

众所周知&#xff0c;富文本控件&#xff0c;Rich Text Control&#xff0c;用来呈现文本内容的一个控件&#xff0c;功能上相对记事本来说更加丰富&#xff0c;但又不及 Word。 但&#xff0c;我们的目标又不是开发另外一个 Word。 我们可以使用 EM_STREAMIN 消息将整个文件…

ubuntu安装tomcat并配置前端项目

1.1查找 # 先更新 sudo apt update # 查找 apt search jdk1.2安装 sudo apt install openjdk-8-jdk1.3验证 java -version 2.安装tomcat 下载链接&#xff1a;Apache Tomcat - Apache Tomcat 8 Software Downloadshttps://tomcat.apache.org/download-80.cgi下载这个&…

LeetCode [中等]最大子数组和-动态规划

53. 最大子数组和 - 力扣&#xff08;LeetCode&#xff09; 贪心算法&#xff1a;若当前指针所指元素之前的和小于0&#xff0c;则丢弃当前元素之前的数列 动态规划&#xff1a;若下一个元素大于0&#xff0c;则将其加到当前元素上 思路&#xff1a; n 为数组长度&#xff…

vue+electron问题汇总

1. Vue_Bug Failed to fetch extension, trying 4 more times 描述&#xff1a;项目启动时报错 解决&#xff1a;注释图片中内容 2. Module not found: Error: Can’t resolve ‘fs’ in 描述&#xff1a;项目启动报错 解决&#xff1a;vue.config.js中添加图中数据 3.导入…

PTA 7-231 买文具

某小学要购置文具。批发市场中 A 牌的铅笔卖 5 元一支&#xff0c;C 牌的铅笔卖 2 元一支&#xff0c;D 牌的简易铅笔卖1元2只&#xff08;捆绑销售&#xff0c;只能买偶数只&#xff09;。 如果想用n元买n支笔&#xff0c;问有多少种买法&#xff1f;&#xff08;题目保证 n …

【单片机】单片机裸机实现多任务调度

RTOS vs 裸机多任务调度 实时操作系统RTOS的优点不必多说了&#xff0c;但是对于一些简单的业务需求&#xff0c;移植一个操作系统显得非常麻烦&#xff0c;并且占用系统资源&#xff0c;此时就可以考虑利用SysTick裸机实现多任务调度。 单片机裸机实现多任务调度的优点有 1、…

Vue2虚拟列表,umy-ui封装

一、起因 1、需求&#xff1a; 由于业务需求在页面一次性展示较多数据&#xff0c;不低于上千&#xff0c;但是每条数据涉及样式较多&#xff0c;数据渲染过多就会导致页面卡顿 2、满足&#xff1a; 大量数据加载&#xff1b;表格功能&#xff1a;列显隐、列顺序调整、固定、筛…