如何轻松创建单页 Web 应用程序？

Question

制作单页 Web 应用程序的最简单方法是什么，其中将有两个输入文本，其中输入变量 a、b 和一个用于访问 python 脚本以在接收到的 URL 处显示图像的按钮

def get_pic(a,b):
    *magic*
    return *pic url*

我试过 Django，但由于我是初学者，我不明白如何将 python 函数调用分配给按钮。也许有尽可能简单又没有不必要麻烦的方法，我需要一个基本的界面，如附图

---

附言在那之前，我曾在 PyQt 中创建桌面应用程序，在那里要容易得多，您只需在编辑器中拖放必要的按钮、文本块，然后在 Python 中将函数绑定到它们，但对于 Web 应用程序，如我明白了，这行不通

Answer 1

如果您需要简单的示例，如何从 2 个输入中获取值，然后将它们发送到此处……

var btn = document.querySelector('button') ;
var in1 = document.querySelector('#nr1') ;
var in2 = document.querySelector('#nr2') ;
var img = document.querySelector('img') ;
// event on button click
btn.addEventListener( 'click', function() {
  // bails. ..todo, security ?..?
  if( !parseInt(in1.value) || !parseInt(in2.value) ) return;
  // take values from input1 and input2 and replace attribute, browser will do ajax for you and render it
  img.setAttribute( 'src', "https://placehold.it/" + in1.value + "x" + in2.value )
});

.img, .frm{
  float: left; 
  width: 49%;
  padding-left: 1%
}

<div class="img">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" />
</div>

<div class="frm">
  <input id="nr1"> <p>&nbsp;</p>
  <input id="nr2"> <p>&nbsp;</p>
  <button>Render</button>
</div>

此示例将在两个字段中选择整数并将它们发送到将返回图像的免费后端服务。

你必须用你的后端服务 url 替换

https://placehold.it/

，并像我所做的那样发送 args 像 url 参数。您的服务需要返回图像的 url 或我的类型

image/png

等..，处理安全性、边缘情况、后备图像等是脚本的责任..