客户端（浏览器）----> 前端页面-----> 后端处理数据，并把数据以 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. C#图解教程 第二十一章 命名空间和程序集

    命名空间和程序集 引用其他程序集 mscorlib库 命名空间 命名空间名称命名空间的补充命名空间跨文件伸展嵌套命名空间 using 指令 using命名空间指令using别名指令程序集的结构 程序集 ...

  2. html点小图看大图最快捷的方法

    方法一: <td> <a href="{$vo.show_img}" target="_blank"><img style=&qu ...

  3. 【BZOJ1004】Cards（组合数学，Burnside引理）

    [BZOJ1004]Cards(组合数学,Burnside引理) 题面 Description 小春现在很清闲,面对书桌上的N张牌,他决定给每张染色,目前小春只有3种颜色:红色,蓝色,绿色.他询问Su ...

  4. 【CJOJ P2226】[省常中2011S4] 圣诞节

    Description 圣诞节到了,FireDancer准备做一棵大圣诞树.下图为圣诞树的一个简单结构. 这棵树被表示成一组被编号的结点和一些边的集合.结点从1到n编号.树的根永远是1.每个结点都有一 ...

  5. 如何巧妙的利用selenium和requests组合来进行操作需要登录的页面

    一.在这里selenium的作用 (1)模拟的登录. (2)获取登录成功之后的cookies 代码 def start_login(self): chrome_options = Options() ...

  6. 论文学习：Fully Convolutional Networks for Semantic Segmentation

    发表于2015年这篇<Fully Convolutional Networks for Semantic Segmentation>在图像语义分割领域举足轻重. 1 CNN 与 FCN 通 ...

  7. WPF之DataContext（转）

    WPF之DataContext(转) 有时候不是你不够聪明,而是别人教给你的东西太烂!相信自己! 这是我认为,目前网络上对“DataContext”解释最好的一篇文章,跟大家分享. 原文地址:http ...

  8. angular何时触发脏检查机制

    ng只有在指定事件触发后,才进入$digest cycle: DOM事件,譬如用户输入文本,点击按钮等.(ng-click) XHR响应事件 ($http) 浏览器Location变更事件 ($loc ...

  9. 在hive下使用dual伪表

    [hive@nn1 ~]$ touch dual.txt[hive@nn1 ~]$ echo 'X' >dual.txt hive> load data local inpath '/ho ...

  10. 关于JDK和eclipse的安装和汉化

    参考网址:http://jingyan.baidu.com/article/f96699bb8b38e0894e3c1bef.html http://titanseason.iteye.com/blo ...