如何使用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, flash

app = 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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

C++多线程1(复习向笔记)

C++多线程1(复习向笔记)

创建线程以及相关函数 当用thread类创建线程对象绑定函数后&#xff0c;该线程在主线程执行时就已经自动开始执行了,join起到阻塞主线程的作用 #include <iostream> #include <thread> #include <string> using namespace std; //测试函数 void printStrin…
阅读更多...
Java强训day10（选择题编程题）

Java强训day10（选择题编程题）

选择题 public class Test01 {public static void main(String[] args) {try{int i 100 / 0;System.out.print(i);}catch(Exception e){System.out.print(1);throw new RuntimeException();}finally{System.out.print(2);}System.out.print(3);} }编程题 题目1 import jav…
阅读更多...
day 59 503.下一个更大元素II 42. 接雨水

day 59 503.下一个更大元素II 42. 接雨水

vector的扩充要熟悉 vector<int> numsT(nums.begin(),nums.end()); nums.insert(nums.end(),numsT.begin(),numsT.end()); class Solution { public:vector<int> nextGreaterElements(vector<int>& nums) {stack<int> st;vector<int> nums…
阅读更多...
C++入门（一）— 使用VScode开发简介

C++入门（一）— 使用VScode开发简介

文章目录 C 介绍C 擅长领域C 程序是如何开发编译器、链接器和库编译预处理编译阶段汇编阶段链接阶段 安装集成开发环境 &#xff08;IDE&#xff09;配置编译器&#xff1a;构建配置配置编译器&#xff1a;编译器扩展配置编译器&#xff1a;警告和错误级别配置编译器&#xff1…
阅读更多...
自动驾驶代客泊车AVP决策规划详细设计

自动驾驶代客泊车AVP决策规划详细设计

背景 随着产品的不断迭代&#xff0c;外部停车场的铺开&#xff0c;PAVP车辆需要应对的场景将越来越复杂&#xff0c;因此整体算法泛化能力的提升显得尤为关键。为了打磨巡航规划的能力&#xff0c;算法架构应当设计的更为灵活&#xff0c;可以针对使用场景迁入更为先进有效的算…
阅读更多...
Springboot 快速集成 ES

Springboot 快速集成 ES

1、Springboot 官网给出的版本选择标准 2、选择版本依赖 我的 elasticsearch 服务版本为 7.17.13&#xff0c;所以 springboot 版本我选用 2.7.10 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-dependencies<…
阅读更多...
电脑上如何压缩图片？这个方法简单又方便

电脑上如何压缩图片？这个方法简单又方便

电脑上如何压缩图片&#xff1f;我们在需要压缩图片大小的时候&#xff0c;最经常使用的就是下载安装一些图片处理软件&#xff0c;这样的方法不仅耽误时间&#xff0c;有些软件的操作步骤还特别繁琐&#xff0c;对新手小白非常不友好&#xff0c;所以小编今天就给大家介绍一个…
阅读更多...
巴厘行记（四）——乌布漫游

巴厘行记（四）——乌布漫游

欢迎览阅《巴厘行记》系列文章 巴厘行记巴厘行记&#xff08;一&#xff09;——海神庙 巴厘行记&#xff08;二&#xff09;——乌布之夜 巴厘行记&#xff08;三&#xff09;——Auntie和Mudi 巴厘行记&#xff08;四&#xff09;——乌布漫游 巴厘行记&#xff08;五&a…
阅读更多...
Spring MVC 基本知识

Spring MVC 基本知识

知识回顾 Tomcat 是 Servlet 容器&#xff0c;会解析 Java Web 应用下的 WEB-INF/web.xml 文件&#xff0c;得到相关的 Servlet 组件。 原理解析 Spring MVC 实际是定义了一个 DispatcherSevlet 来统一管理当前 Web 应用下的 Path 路径。在 DispatchSevlet 中持有了一个 Spr…
阅读更多...
Mybatis-plus原生pages分页未生效的解决方案

Mybatis-plus原生pages分页未生效的解决方案

文章目录 前言原因1、Mybatis Plus版本的问题2、Mapper.xml文件中SQL语句格式问题3、Mybatis Plus默认分页拦截器问题4、分页参数传参问题5、分页配置的问题 解决方案1、升级对应的Mybatis-plus版本分页插件配置问题3、自定义分页拦截器4、正确的参数5、不同版本的配置文件3.4.…
阅读更多...
笨蛋总结JVM

笨蛋总结JVM

笨蛋总结JVM 由于Java语言将自己的内存控制权交给了虚拟机&#xff0c;所以需要了解虚拟机的运行机制 &#xff08;主要用于回顾JVM&#xff09; 笨蛋总结JVM 笨蛋总结JVM1.运行时数据区域线程私有区域程序计数器Java虚拟机栈本地方法栈 线程共享区域堆方法区 1.2程序计数器…
阅读更多...
Jmeter学习系列之二：工具面板必知必会

Jmeter学习系列之二：工具面板必知必会

目录 前言 一、菜单栏 二、功能区 ​编辑 2.读入数据 总结 前言 Jmeter面板一共分为4个区域&#xff0c;分别是菜单栏、功能区、视图区和内容区。 菜单栏&#xff1a;主要功能包括新建测计划&#xff0c;添加线程组、测试脚本&#xff0c;分布式运行相关&#xff0c;查看…
阅读更多...
腾讯云4核16G服务器价格，用于幻兽帕鲁Palworld专用

腾讯云4核16G服务器价格，用于幻兽帕鲁Palworld专用

腾讯云幻兽帕鲁服务器4核16G、8核32G和16核64G配置可选&#xff0c;4核16G14M带宽66元一个月、277元3个月&#xff0c;8核32G22M配置115元1个月、345元3个月&#xff0c;16核64G35M配置580元年1个月、1740元3个月、6960元一年&#xff0c;腾讯云百科txybk.com分享腾讯云幻兽帕鲁…
阅读更多...
基于JAVA+SpringBoot+Vue的前后端分离的美食分享推荐平台2

基于JAVA+SpringBoot+Vue的前后端分离的美食分享推荐平台2

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 在当今社会&#xff0…
阅读更多...
专注力训练+番茄工作法，拯救工作学习的效率

专注力训练+番茄工作法，拯救工作学习的效率

文章目录 1.丢失的专注力1.1.谁偷走了我的专注力1.2.是时候夺回我的专注力了 2.番茄工作法2.1.历史2.2.使用方式2.3.一些问题和思考 3.总结 1.丢失的专注力 不知道大家有没有遇到过一些无法专注的情况&#xff0c;在学习和工作的时候总是在被各种各样的事情打断&#xff0c;简…
阅读更多...
使用WAF防御网络上的隐蔽威胁之反序列化攻击

使用WAF防御网络上的隐蔽威胁之反序列化攻击

​ 什么是反序列化 反序列化是将数据结构或对象状态从某种格式转换回对象的过程。这种格式通常是二进制流或者字符串&#xff08;如JSON、XML&#xff09;&#xff0c;它是对象序列化&#xff08;即对象转换为可存储或可传输格式&#xff09;的逆过程。 反序列化的安全风险 反…
阅读更多...
机器学习算法实战案例：使用 Transformer 模型进行时间序列预测实战（升级版）

机器学习算法实战案例：使用 Transformer 模型进行时间序列预测实战（升级版）

时间序列预测是一个经久不衰的主题&#xff0c;受自然语言处理领域的成功启发&#xff0c;transformer模型也在时间序列预测有了很大的发展。 本文可以作为学习使用Transformer 模型的时间序列预测的一个起点。 文章目录 机器学习算法实战案例系列答疑&技术交流数据集数据…
阅读更多...
Kotlin快速入门系列7

Kotlin快速入门系列7

Kotlin的数据类、密封类、枚举类 数据类 与Java等语言不同&#xff0c;kotlin创建只包含数据的类时&#xff0c;需要在类名前声明关键字&#xff1a;data。 data class KotlinBean (val brand : String) 在kotlin中&#xff0c;编译器会自动的从主构造函数中根据所有声明的…
阅读更多...
[C++]c++判断CPU的类型及支持的指令集

[C++]c++判断CPU的类型及支持的指令集

1、利用cpui判断cpu的类型及支持的指令集&#xff0c;可以进行条件编程&#xff1a;&#xff08;InstructionSet.h&#xff09; #pragma once// InstructionSet.cpp // Compile by using: cl /EHsc /W4 InstructionSet.cpp // processor: x86, x64 // Uses the __cpuid intrin…
阅读更多...
Node.js-express

Node.js-express

1.了解Ajax 1.1 什么是ajax Ajax的全称是Asynchronous Javascript And XML&#xff08;异步Js和XML&#xff09;. 通俗的理解&#xff1a;在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式&#xff0c;就是Ajax 1.2 为什么要学习Ajax 之前所学的技术&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023