【零基础专属方法】html调用本地python程序进行交互 前后端交互

倔强的项目界面展示

  • 前后端交互python文件咸鱼版!
    • 前后端交互思路
    • 直接上图展示成果
    • 漂亮的代码
    • 谢谢点赞交流!(❁´◡`❁)

前后端交互python文件咸鱼版!

你好!
这里是一个普通C9在读硕士生
近期为了项目的界面展示操碎了心

老师:界面就是几行代码的事,一天就学会了。。。
老师:和python程序交互也不会太难吧,不需要前后端集成,基本需求达到就行。。。
我:好的老师,我去学

理清思绪,从头开始学了!

前后端交互思路

  • 必要的技术点:
  1. HTML ,搭建前端代码框架
  2. CSS , 为你的前端代码布局
  3. JS,实现前端的点击保存、写文件等操作
  4. PYTHON,自己项目的可执行程序(需要实现输出-实时输入-输出:前后端交互功能
    比如:python文件1. 输出1到10,在2. 输出为6时(交互点),程序3.等待前端输入,接收到输入后4. 对输入进行处理,最后5. 输出交互后的结果。
  • 重难点:
  1. 实现前端调用python?

    • 前后端框架flask
      说笑了学不会。。。
    • JS调用命令行cmd执行python文件
      666就是你了
  2. 实现python读取前端数据?

    • 打包数据流
      说笑了还是学不会。。。
    • JS保存txt文件,python读取txt文件
      666就是你了

直接上图展示成果

  • 整体界面布局(可以自己添加图片、文字)
  • 只能IE内核下的浏览器打开(交互需要 ACTIVEX插件只有IE内核:保证安全性)

【零基础专属方法】html调用本地python程序进行交互 前后端交互_第1张图片

  • 下拉框介绍自己的项目

【零基础专属方法】html调用本地python程序进行交互 前后端交互_第2张图片

  • 点击执行按钮(调用cmd执行python文件)
  • 程序执行到设置好的交互点输出值 == 6),进入循环读取交互txt文件(文件不为空时跳出循环

【零基础专属方法】html调用本地python程序进行交互 前后端交互_第3张图片

  • cmd可以最小化,不要关掉(关了 = 杀死进程
  • 如果cmd闪一下就结束:
  1. 代表程序执行完毕
  2. 程序报错(如果调试没问题,多半是文件路径的问题)
  • 点击continue,显示交互前的python输出

【零基础专属方法】html调用本地python程序进行交互 前后端交互_第4张图片

  • 前端输入交互值,点击finished(将输入值写进txt文件)

【零基础专属方法】html调用本地python程序进行交互 前后端交互_第5张图片

  • python程序读取到交互txt文件中的值,经处理后返回显示

【零基础专属方法】html调用本地python程序进行交互 前后端交互_第6张图片

漂亮的代码

DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>interfacetitle>
	<link rel="stylesheet" type="text/css" href="starbuzz.css">
head>
<body>
	<header class="top">
		<div>
			<span>© 项目编号:
			span>
			<br>
			<span>© 项目名称:span>
		div>
	header>

	<div id="tableContainer">
		<section id="drinks">
			<div>
				<h1>项目名称
					<select id="sel">
						<option value="" selected disabled hidden>模式选择option>
						<option value="模式1">模式1option>
						<option value="模式2">模式2option>
						<option value="模式3">模式3option>
					select>
					<p id='moshi'>模式选择:   p>
				h1>
				<br>

				<h2>功能描述:h2>
				<p id="func">p>
			div>
			<div class="task">
				<h1>详细介绍h1>
				<br>
				
			div>

		section>

		<section id="blog">

			<div id="result">
				<button class='button4' onclick="exec1('python  C:/Users/GZH/Desktop/HTML/python.py')">执行
					后端程序button>p>
				<iframe name="result" width="500" height="300" scrolling="no" frameborder="3" id="task1">
				iframe>
				<p>程序输出信息:p>
				<iframe class="ifr1" name="result1" width="500" height="170" scrolling="no" frameborder="3" id="task2">
				iframe>
				<a href="C:/Users/GZH/Desktop/HTML/res1.txt" target="result" class="tar">a>
				<a href="C:/Users/GZH/Desktop/HTML/res2.txt" target="result1" class="tar">a>
				<p><button class="btn">Continuebutton>p>
			div>

		section>
		<section id="blog1">
			<h1 class="people">前后端交互h1>
			<br>
			<div id="input">
				<textarea id="data" rows="3" cols="40" background:transparent>textarea>
				<button class="btn2" onclick="input()">Finishedbutton>
			div>
		section>
	div>
	<script type="text/javascript">
		'点击continue显示内容'
		window.onload = function () {
			var doc = document.getElementById("task1").contentDocument || document.frames["result"].document;
			var doc1 = document.getElementById("task2").contentDocument || document.frames["result1"].document;
			var tex1 = document.querySelector('#data')
			var sel = document.querySelector('#sel');
			sel.options[0].selected = true;
			tex1.value = '';
			doc.body.innerHTML = '';
			doc1.body.innerHTML = '';
			var btn = document.querySelector('.btn');
			btn.onclick = function () {
				// console.log(1111);
				document.querySelectorAll('.tar')[0].click();
				document.querySelectorAll('.tar')[1].click();
				input2();
			}
		
			var func = document.getElementById('func');

			//首先获得下拉框的节点对象;
			var select = document.getElementById("sel");
			select.onchange = function () {
				//1.如何获得当前选中的值?
				var value = select.value;
				if (value === '模式1') {
					func.innerHTML = '功能1'
				}
				if (value === '模式2') {
					func.innerHTML = '功能2'
				}
				if (value === '模式3') {
					func.innerHTML = '功能3'
				}
			}
		}
	script>
	<script language="JavaScript">
		'执行python程序'
		function exec1(command) {
			var ws = new ActiveXObject("WScript.Shell");
			ws.run(command);           //exec 和 run
			ws = null;
		}
		'前端输入'
		function input() {
			text = document.getElementById("data").value;  //获得网页文本框的值
			var strFile = "C:/Users/GZH/Desktop/HTML/human.txt";	//定义文件保存的路径
			var objFSO = new ActiveXObject("Scripting.FileSystemObject");
			var objStream = objFSO.CreateTextFile(strFile, true);
			objStream.WriteLine(text);  //写值
			objStream.Close();
		}
	  	console.log(str);
	script>
body>
html>
  • 以上代码可以参考JS的功能实现,其他的不能直接使用

详情代码请查看: gitee主页:https://gitee.com/GZHzzz
博客主页:CSDN:https://blog.csdn.net/gzhzzaa

交流联系vx:【零基础专属方法】html调用本地python程序进行交互 前后端交互_第7张图片

  • Fighting!

在这里插入图片描述

while True:
	Go life

在这里插入图片描述

谢谢点赞交流!(❁´◡`❁)

你可能感兴趣的:(model,python,javascript,css,html)