客户端（浏览器）----> 前端页面-----> 后端处理数据，并把数据以 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. 浅谈MySQL的优化

    平时在开发中大多在写业务逻辑,很少关注于底层sql的执行效率,大多能交给batis的mapper做的就交给它去做. 然而这些天越来越发现,大家还是很愿意手写sql的,往往一段业务逻辑,可以用稍微复杂一 ...

  2. 【Luogu3041】视频游戏的连击（AC自动机，动态规划）

    题面链接 题解 首先构建出AC自动机 然后在AC自动机上面跑DP 转移很显然从Trie树的节点跳到他的儿子节点 但是要注意一个问题, 在计算的时候,每一个节点加入后能够 造成的贡献 要加上他的子串的贡 ...

  3. [HNOI2008]水平可见直线

    按斜率排序后画个图,用单调栈维护这个半平面交 # include <bits/stdc++.h> # define IL inline # define RG register # def ...

  4. java把集合数据写入txt文档

    List<String> list= bs.findJson(); try { BufferedWriter bw = new BufferedWriter(new FileWriter( ...

  5. 设置ImageView显示的图片铺满全屏

    转自:http://m.blog.csdn.net/blog/wjwj1203/32334459   为适应不同屏幕的手机,ImageView显示的图片可能不铺满屏幕,如果定高的话,两边可能会出现空白 ...

  6. 快速了解react

    概况: 通过本篇文章你可以对react的重点有个整体的认识. 关于react是什么,优点,解决什么问题等,网上一大推就不啰嗦了. 了解虚拟DOM的实现,参考这篇文章 [虚拟DOM](https://w ...

  7. [转]Thunderbird 使用 Exchange 邮箱

    [转]Thunderbird 使用 Exchange 邮箱 http://my.oschina.net/MaTech/blog/295238#OSC_h3_1 公司最近邮箱只支持Exchange模式, ...

  8. spring之事务

    1.编程式事务 2.声明式事务:aop

  9. 使用外置无线网卡来切换mac地址

    mac地址被別人過濾了!小樣,既然內置網卡不能修改mac,那我就用外置usb無線網卡,你以為你很厲害嗎,看我怎麼破解了你.

  10. 【Unity3D与23种设计模式】游戏的主循环——Game Loop

    游戏与其他软件最大的不同 就是游戏有Update逻辑 一般的软件是由"事件"驱动 因为它不会突然跑出来一只"兔子" 因此,只有游戏才有"帧" ...