客户端（浏览器）----> 前端页面-----> 后端处理数据，并把数据以 json 形式发送到前端

online_app.py

from django.conf import settings

from django.http import HttpResponse

from django.conf.urls import url

from django.views.decorators.http import require_POST # 目前的 API 视图只能用于接收 POST 请求

from django.http import JsonResponse # 用于返回 JSON 数据

import subprocess

from django.views.decorators.csrf import csrf_exempt

setting = {

    'DEBUG':True,

    'ROOT_URLCONF':__name__

}

settings.configure(**setting)

# 主视图

def home(request):

    # 浏览器与服务器的内容交互都是以二进制流的方式进行的，所以正规的响应就应返回字节串

    with open('index.html','rb') as f:

        html = f.read()

    return HttpResponse(html)

# 执行客户端代码核心函数

def run_code(code):

    try:

        output = subprocess.check_output(['python','-c',code],

            universal_newlines=True,

            stderr=subprocess.STDOUT,

            timeout=30)

    except subprocess.CalledProcessError as e:

        output = e.output

    except subprocess.TimeoutExpired as e:

        output = '\r\n'.join(['Time Out!!!',e.output])

    return output

# API 请求视图

@csrf_exempt

@require_POST

def api(request):

    code = request.POST.get('code')

    output = run_code(code)

    return JsonResponse(data={'output':output})

# URL 配置

urlpatterns = [url('^api/$',api,name='api'),

               url('^$',home,name='home')]

if __name__ == '__main__':

    import sys

    from django.core.management import execute_from_command_line

    execute_from_command_line(sys.argv)

index.html

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>在线 Python 解释器</title>

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>

      #run {

          width: 20%; /*规定按钮的宽度*/

          margin-top: 10px; /*留出和输入框的间距*/

      }

      #code {

        font-size: 25px;

        resize: none;

      }

      #output {

        font-size: 25px;

        resize: none;

      }

    </style>

  </head>

  <body><!--在下面的注释中 bs 代表 bootstrap -->

  <div class="container"><!-- 页面的整体布局 -->

      <div class="row"> <!-- 这一行单独用来放标题 -->

        <div class="col-lg-12"> <!-- 根据 bs规定，所有内容应放在 col 中。这一列占满一行 -->

          <p class="text-center h1"> <!-- text-center 是 bs 中央排版类，h1 是 bs 一号标题类 -->

            在线 Python 解释器

          </p>

        </div>

      </div>

      <hr><!-- 标题和真正内容的分割线 -->

      <div class="row"><!-- 这一行用来放置主要内容 -->

        <div class="col-lg-6"><!-- 代码输入部分 -->

          <p class="text-center h3">

            在下面输入代码

          </p>

          <textarea id="code" placeholder="你的代码." class="form-control" ></textarea>

          <div class='text-right'><button id="run" type="button" class="btn btn-primary ">运行</button></div>

        </div>

        <div class="col-lg-6"><!-- 结果显示部分 -->

        <p class="text-center h3">运行结果</p>

        <div class="col-lg-12"><textarea id="output" disabled placeholder="输入代码并点击运行按钮" class="text-center form-control"></textarea></div>

        </div>

      </div>

  </div>

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script>

      // 动态大小函数

      function changeSize(ele){

        $(ele).css({'height':'auto','overflow-y':'hidden'}).height(ele.scrollHeight)

      }

      // 应用到输入框

      $('#code').each(function(){

          this.oninput = function(){

            changeSize(this)

          }

        })

      function getCode(){

        return $('#code').val()

      }

      //打印结果到输出框并改变输出框大小

      function print(data){

         var ele = document.getElementById('output')

         output.value = data['output']

         changeSize(output)

       }

       // 点击按钮发送代码

       $('#run').click(function(){

        $.ajax({

          url:'/api/', //代码发送的地址

          type:'POST', // 请求类型

          data: {'code':getCode()},//调用代码获取函数，获得代码文本

          dataType: 'json', //期望获取的响应类型为 json

          success: print // 在请求成功之后调用 pprint 函数，将结果打印到输出框

        })

       })

    </script>

  </body>

</html>

结果：

django restful 1-在线Python编辑器的更多相关文章

  1. $Django 在线文本编辑器skindeditor

    简介 KindEditor是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富 ...

  2. python三大web框架Django,Flask,Flask，Python几种主流框架，13个Python web框架比较，2018年Python web五大主流框架

    Python几种主流框架 从GitHub中整理出的15个最受欢迎的Python开源框架.这些框架包括事件I/O,OLAP,Web开发,高性能网络通信,测试,爬虫等. Django: Python We ...

  3. python编辑器对比和推荐

    python编辑器对比和推荐   我先给一个初步的表格吧,大家如果有什么意见,或有补充,欢迎提出.有些我没有用过,先不写了.以下是我使用过的python IDE: 除了PythonWin, Visua ...

  4. Django+xadmin打造在线教育平台（二）

    三.xadmin后台管理 3.1.xadmin的安装 django2.0的安装(源码安装方式): https://github.com/sshwsfc/xadmin/tree/django2 把zip ...

  5. Django+xadmin打造在线教育平台（三）

    五.完成注册.找回密码和激活验证码功能 5.1.用户注册 register.html拷贝到templates目录 (1)users/views.py class RegisterView(View): ...

  6. Django+xadmin打造在线教育平台（一）

    目录 在线教育平台(一)      在线教育平台(二) 在线教育平台(三)      在线教育平台(四) 在线教育平台(五)      在线教育平台(六) 在线教育平台(七)      在线教育平台( ...

  7. 4种好用的python编辑器

    1.Sublime Text: 这是一个轻量级的代码编辑器,跨平台,支持几十种编程语言,包括Python,Java,C/C++等,小巧灵活,运行轻快,支持代码高亮.自动补全.语法提示,插件扩展丰富,是 ...

  8. Django RESTful Web Services, 此书学DRF不错

    全名为<Django RESTful Web Services: The easiest way to build Python RESTful APIs and web services wi ...

  9. Js的在线代码编辑器：CodeMirror

    github地址:https://github.com/codemirror/CodeMirror/tree/master/demo 里面包含需要的js.css文件以及大量的示例 官网:https:/ ...

随机推荐

  1. python爬取youtube视频 多线程 非中文自动翻译

    声明:我写的所有文章都是发在博客园的,我看到其他复制粘贴过去的 连个出处也不写,直接打上自己的水印...真是没的说了. 前言:前段时间搞了一些爬视频的项目,代码都写好了,这里写文章那就在来重新分析一遍 ...

  2. [Python爬虫]使用Selenium操作浏览器订购火车票

    这个专题主要说的是Python在爬虫方面的应用,包括爬取和处理部分 [Python爬虫]使用Python爬取动态网页-腾讯动漫(Selenium) [Python爬虫]使用Python爬取静态网页-斗 ...

  3. [JZOJ5522] 图

    题目大意: 一个有向图,图中有\(n\)个点\(m\)条边且无重边无自环, 每秒第\(i\)条边出现的概率是\(\frac{p[i]}{100}\), 一开始\(Samjia\)在\(1\)点,每一秒 ...

  4. HDU 1392 Surround the Trees（凸包）

    题面 懒得粘贴了... 大致题意:坐标系内有若干个点,问把这些点都圈起来的最小凸包周长. 题解 直接求出凸包,统计一遍答案即可 #include<iostream> #include< ...

  5. Codeforces Round #466 (Div. 2) 题解

    人生中第三次\(CF\)... 考试中切了\(A\)~\(E\) \(F\)题会做没时间写 题解 A:Points on the line 题意 给定一个数列,删最小的数,使最大差不大于一个定值 So ...

  6. 平面图转对偶图(Bzoj1001：狼抓兔子)

    如果只会用最小割做这道题那就太菜辣 引入 来自某学长 平面图:在平面上边不相交的图(边可以绕着画) 那么平面图的边与边就围成了许多个区域(这与你画图的方式有关) 定义对偶图:把相邻的两个区域连上边,形 ...

  7. 论文笔记（6）：Weakly-and Semi-Supervised Learning of a Deep Convolutional Network for Semantic Image Segmentation

    这篇文章的主要贡献点在于: 1.实验证明仅仅利用图像整体的弱标签很难训练出很好的分割模型: 2.可以利用bounding box来进行训练,并且得到了较好的结果,这样可以代替用pixel-level训 ...

  8. 微信退款 - tp5

    原文:http://www.upwqy.com/details/19.html 1 微信退款官方文档  https://pay.weixin.qq.com/wiki/doc/api/app/app.p ...

  9. wpf 研究之道 winform or wpf，u choose who?

    很久以前,我们用winform做过一个五子棋的程序,当时用winform的画图,先画出棋盘...后来项目的研究阶段,偶尔用winform做个小工具.闲暇之余,看到介绍wpf的资料,只知道它采用了xam ...

  10. RocketMQ与kafka对比（官方）

    淘宝内部的交易系统使用了淘宝自主研发的Notify消息中间件,使用Mysql作为消息存储媒介,可完全水平扩容,为了进一步降低成本,我们认为存储部分可以进一步优化,2011年初,Linkin开源了Kaf ...