html网页调用后端python代码方法

news2024/11/19 16:57:22

当我们利用html代码制作网页时,可以用以下方法进行python代码的调用:

1.简单的python代码例如输出‘hello world’时,可以选择直接在网页写入python代码的方式调用,这时候我们就需要了解Pyscript了。以下是在网页里直接运行简易python语段的代码:

 <html>
		<head>  
			<meta charset="utf-8">  
		  </head>  
        <body>
		   <pyscript> print('Hello world') </pyscript>
        </body>
     </html>

2.当python代码稍微比较复杂,且处于网页构建初期时,我们可以考虑用flask框架对网页的按钮进行整体布局。

方法 1)

当网页代码较为简单时,可以直接用html代码代替render_template:

test1.py

def run():
  print('hello world')
run()

test.py(含flask包)

from flask import(
    Flask, render_template, request, redirect, globals
)
import test1

app= Flask(__name__)

@app.route("/",methods=['GET', 'POST'])
def index():
     return '<form action = "http://localhost:5000/b" method = "post"></form><a href="/test"><button onclick="">进入测试</button></a><a href="/test1">
    

@app.route("/test",methods=['GET', 'POST'])
def test():
    test1.run()
    return '<form action = "http://localhost:5000/b" method = "post"></form><a href="/test"><button onclick="">进入测试</button></a>
if __name__ == '__main__':
    app.run(debug=True)

运行test1.py,ctrl+单击点开下图终端中出来的网址:

 

点击按钮运行即可出现hello word字样。

方法 2) 

当网页代码较为复杂且长时,可以使用render_template来进行前后端交互。此时我们需要在包含flask的python代码同文件夹下新建一个template文件夹:

test.py代码同上,

b.html

<html>
		<head>  
			<meta charset="utf-8">  
		  </head>  
        <body>   
           <form action = "http://localhost:5000/" method = "post">
           </form>
		   <a href="/test"><button onclick="">进入测试</button></a>
        </body>
     </html>

 test1.py

from flask import(
    Flask, render_template, request, redirect, globals
)
import test1

app= Flask(__name__)

@app.route("/",methods=['GET', 'POST'])
def index():
     return  render_template(
        "b.html"
     )
    

@app.route("/test",methods=['GET', 'POST'])
def test():
    test1.run()
    return render_template(
         "b.html"
     )

if __name__ == '__main__':
    app.run(debug=True)

 测试的方式同方法1),这里不多赘述。

3.网页设计初期,以上两种方法足以,但是博主在设计网页时是设计到一半才发现,在前期写纯Html文件后再使用flask框架设计按钮响应python脚本,会出现网页不稳定的情况,博主的图啊网页跳转都不见了。经过研究之后,博主又发现了一个不管在网页设计前期中期都可以使用的python脚本调用方法!那就是ActiveX控件。

这个控件只有IE浏览器中有(至少博主在熟悉的其他浏览器中没有找到这个控件),在我们想要使用它之前需要检查我们的IE浏览器是否已经启用ActiveX控件。手动打开IE的ActiceX控件需要如下几步:打开设置-Internet选项-安全-自定义级别-把和ActiveX有关的选项全部点启用或者提示。

 然后我们运行一下代码进行测试。

a.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="gb2312">
    <title>ceshi</title>
<script language="javascript">   
function exec1 (command) {   
  var ws = new ActiveXObject("WScript.Shell");   
  ws.exec(command);   
}   
</script> 
  </head>
  <body>
    <button class='button1' onclick="exec1('python  D:/xgcs/test1.py')">执行程序</button></p>
  </body>
</html>

利用IE浏览器打开网址,点击按钮运行即可。

 运行前会出现弹窗如下所示,点是和允许即可。 

 由于是输出,所以黑框一闪而逝很正常,要想看到print出来的hello world字样,得再加个输入input()。或者你的python运行出来是个ui窗口,那也会停留很久,别把黑框点叉叉即可。

希望以上博主的经验对大家有帮助,嘻嘻。

 

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

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

相关文章

AJAX中的跨域(CORS) 问题 (更新于2023.02.04)

目录​​​​​​​ 预检请求 实例讲解 2023.02.04 更新 此文章在介绍跨域加载的同时&#xff0c;也解决了在使用axios.post()时如下跨域加载失败问题&#xff1a; from origin null has been blocked by CORS policy: Response to preflight request doesnt pass access c…

element-ui实现图片上传功能(前台部分)

文章目录前言一、 template 部分二、script部分1、导入token2、在data中注册以下3、method中的方法4、style前言 最近做的项目中需要实现图片上传功能&#xff0c;一开始也不懂&#xff0c;经过一段时间的学习后&#xff0c;终于实现了图片上传功能。我将分为前台与后台两部分…

vue 基于axios封装request接口请求——request.js文件

目录 了解几个Content-type类型 第一种&#xff1a;application/json;charsetUTF-8 第二种&#xff1a;multipart/form-data 第三种&#xff1a; application/x-www-form-urlencoded 第一步新建request.js文件 第二步新建services/apiUrl文件 第三步新建services/index.…

【前端】深入浅出缓存原理

缓存的基本原理 对于前端来说&#xff0c;缓存主要分为浏览器缓存&#xff08;比如 localStorage、sessionStorage、cookie等等&#xff09;以及http缓存&#xff0c;也是本文主要讲述的。 当然叫法也不一样&#xff0c;比如客户端缓存大概包括浏览器缓存和http缓存 所谓htt…

手撕前端面试题【javascript~文件扩展名、分隔符、单向绑定、判断版本、深浅拷贝、内存泄露等】

前端的那些基本标签&#x1f353;&#x1f353; 直角三角形&#x1f353;&#x1f353;文件扩展名&#x1f353;&#x1f353;分隔符&#x1f353;&#x1f353;单向绑定&#x1f353;&#x1f353;创建数组&#x1f353;&#x1f353;判断版本&#x1f353;&#x1f353;什么是…

四、nginx静态文件的配置

1. 根据上节内容的提示&#xff0c;我们知道如何进行nginx的信号控制和命令行控制了。 2. 这节主要是学习nginx的静态文件、缓存、静态文件压缩等相关内容。 一、 配置并访问nginx静态文件 1.1 root配置nginx静态文件地址 在nginx.conf 配置文件中默认使用root配置了nginx静态…

vue项目使用svg图片

&#xff08;svg-sprite-loader以及vue2-svg-icon的使用&#xff09; 第一种方式&#xff1a; 1、安装svg-sprite-loader npm install svg-sprite-loader --save-dev 2、webpack 配置&#xff08;build/webpack.base.conf.js&#xff09; { test: /\.svg$/, loader: svg-spr…

小程序表单校验uni-forms正确使用方式及避坑指南

小程序表单校验uni-forms正确使用方式及避坑指南一、前言二、成果展示三、uni-forms即时校验四、uni-forms自定义校验规则五、uni-forms异步校验六、完整示例源码七、最后&#xff0c;点个赞一、前言 小程序上使用表单理应是很常用&#xff0c;也很必须的功能&#xff0c;因为…

【微信小程序】自定义组件

组件的创建与引用 1.1、创建组件 &#xff08;1&#xff09;在项目的根目录中&#xff0c;鼠标右键&#xff0c;创建 components > test 文件夹 &#xff08;2&#xff09;在新建的 components > test 文件夹中&#xff0c;鼠标右键&#xff0c;点击“新建 Component” …

通过JavaScript、css、H5 实现简单的tab栏的切换和复用

目录 一、效果展示 二、实现的大致原理 三、H5的布局 四、CSS样式 五、JS代码内容 六、完整代码 一、效果展示 二、实现的大致原理 1.我们先通过css 和h5布局得到最基本的tab栏样式&#xff08;有代码参考&#xff09; 2.在获得样式&#xff0c;给我们所需要点击的目标设…

yolov5部署+微信小程序前端展示

分为yolov5项目部署和微信小程序两部分&#xff0c;先介绍微信小程序前端展示flask后端&#xff0c;之后介绍项目部署这部分。 一、先上效果图 1. 点击选择图片&#xff0c;调用摄像头选择图片 2.选择图片之后&#xff0c;点击开始检测&#xff0c;然后返回结果 ​​​​​​…

CTF----Web真零基础入门

目录 前置知识导图&#xff1a; ​TCP/IP体系结构&#xff08;IP和端口&#xff09;&#xff1a; IP是什么&#xff1a;是计算机在互联网上的唯一标识&#xff08;坐标&#xff0c;代号&#xff09;&#xff0c;用于在互联网中寻找计算机。 内网&#xff08;局域网&#xf…

JSONP解决跨域问题

一、什么是同源 概念&#xff1a;如果两个页面的协议、域名和端口都相同&#xff0c;则这两个页面具有相同的源。 二、什么是同源策略 概念&#xff1a;是浏览器提供的一个安全功能。 三、什么是跨域 概念&#xff1a;同源指的是两个URL的协议、域名、端口号一致&#xff0c…

前端开发调式必备技能F12开发者工具之Elements(元素)面板,详细图解带流程【第一部分】

目录 一、进入浏览器开发工具的几种方式 二、Elements&#xff08;元素&#xff09;面板 左侧区域 右侧区域 计算样式 事件监听器 大家好&#xff01;我是爷爷的茶七里香&#xff0c;这个名字有没有让你想起周董的歌捏&#xff1f;好了&#xff0c;废话不多说&#xff0c;开始今…

项目实训记录(十二)——el-table-column根据条件修改字体颜色

目录 一、干了什么&#xff1f; 二、问题和解决方法 1. el-table-column根据条件修改字体颜色 2.问题 总结 一、干了什么&#xff1f; 本周要完成数据去重工作和前端的完善。 清理工作 主要是来删除用户插入的重复数据。由管理员决定表是否允许重复数据。如果用户上传的表不允…

vue3 自定义全局loading组件 (PC和移动端都非常适用)

前言 在开发的过程中&#xff0c;点击提交按钮&#xff0c;或者是一些其它场景总会遇到loading加载框&#xff0c;PC的一些ui库也没有这样的加载框&#xff0c;无法满足业务需求&#xff0c;因此可以自己自定义一个&#xff0c;实现过程如下。 效果图&#xff08;loading样式…

个人博客小程序

文章目录1.前言2.首页博客数据展示3.用data中的数据渲染博客展示4.使用云数据库创建集合blogs5.读取数据库中的数据6.创建添加博客页面1.前言 这篇文章详细的介绍了个人博客小程序的云开发流程&#xff0c;包括博客展示页面&#xff0c;添加博客页面的创建&#xff0c;以及云函…

pm2基本使用

1.pm2的基本介绍 pm2是node的进程管理器&#xff0c;利用它可以简化node任务的管理,且内置了许多功能,常用于后台脚本管理。 pm2特性 自带热部署 - - - 当源文件更新 线上项目也会自动重启后台运行 - - - 不会占用实时窗口 会在后台运行服务信息查看 - - - 查看运行中程序的…

Vue权限控制

此文章根据视频教程进行整理前端面试官必问系列-后台系统的权限控制与管理&#xff0c;建议搭配视频教程一起食用效果更佳 目录 1、权限相关概念 1.1、权限的分类 后端权限 前端权限 1.2 、前端权限的意义 降低非法操作的可能性 尽量减少不必要请求&#xff0c;减轻服务…

VUE跨域、常用解决跨域的方法

当我们遇到请求后台接口遇到 Access-Control-Allow-Origin 时&#xff0c;那说明跨域了。 跨域是因为浏览器的同源策略所导致&#xff0c;同源策略&#xff08;Same origin policy&#xff09;是一种约定&#xff0c;它是浏览器最核心也最基本的安全功能&#xff0c;同源是指&…