如何使用Flask在html中编写html / javascript来制作Web应用程序？

Question

我已经写了一个JavaScript文件

<!DOCTYPE html>
<html>
<body>
  <canvas id="canvas" width=300 height=300>
  <script >
     var canvas=document.getElementById("canvas");
     var ctx=canvas.getContext("2d");
     var cw=canvas.width;
     var ch=canvas.height;

     var PI=Math.PI;
     var PI2=PI*2;
     var cx=150;
     var cy=150;
     var r=80;
     var min=PI*.60;
     var max=PI2+PI*.40;
     var percent=50;

     ctx.lineCap='round';
     ctx.font='24px verdana';
     ctx.textAlign='center';
     ctx.textBaseline='middle';
     ctx.fillStyle='gray';

     drawGuage();

     function drawGuage(){
       ctx.clearRect(0,0,cw,ch);
       // draw full guage outline
       ctx.beginPath();
       ctx.arc(cx,cy,r,min,max);
       ctx.strokeStyle='lightgray';
       ctx.lineWidth=15;
       ctx.stroke();
       // draw percent indicator
       ctx.beginPath();
       ctx.arc(cx,cy,r,min,min+(max-min)*percent/100);
       ctx.strokeStyle='red';
       ctx.lineWidth=6;
       ctx.stroke();
       ctx.fillText(percent+'%',cx,cy);
     }
  </script>
  </body>
</html>

它给了我这样的输出

该值将更改，并且我可以使用pandas数据框在返回我的值的情况下返回该值。

var percent=50;

我想在我正在使用flask和var percent的python中编写相同的代码，而var percent应该采用我的pandas dataframe返回值。

我是python中的javascript的新手，我无法理解如何使用HTML和javascript以及调用我的py文件的flask在python中编写相同的代码。

Answer 1

可以使用Python Flask应用程序呈现HTML模板。 您需要在父目录（python flask应用程序所在的目录），模板（对于html）和静态（对于js文件）中维护2个文件夹。

将您的JavaScript代码包含在html模板中，或者将其放在单独的静态文件夹中。 您需要有一个Jinja模板，该模板将替换为百分比值。 然后将数据框返回的百分比值传递给render_template（'index.html'，value = value）。

我发现这篇文章非常有用。 http://www.patricksoftwareblog.com/tag/javascript/

如何使用Flask在html中编写html / javascript来制作Web应用程序？

问题描述

1 个解决方案

解决方案1
0 2018-07-04 07:43:30

如何使用Flask在html中编写html / javascript来制作Web应用程序？

问题描述

1 个解决方案

解决方案1 0 2018-07-04 07:43:30

解决方案1
0 2018-07-04 07:43:30