客户端（浏览器）----> 前端页面-----> 后端处理数据，并把数据以 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. 【原】如何获取Java动态生成类？

    写作目的:Java大部分框架,如Spring,Hibernate等都会利用动态代理在程序运行的时候生成新的类, 有的时候为了学习,或者深入了解动态代理,想查看动态生成类的源代码究竟长怎么个样子, 通过 ...

  2. 【NOI2008】假面舞会（图论，搜索）

    题面 Description 一年一度的假面舞会又开始了,栋栋也兴致勃勃的参加了今年的舞会.今年的面具都是主办方特别定制的.每个参加舞会的人都可以在入场时选择一个自己喜欢的面 具.每个面具都有一个编号 ...

  3. 洛谷 P1564 膜拜

    题目出处 s[i]表示前i个人对神牛的膜拜情况,如果膜拜神牛甲则s[i]=s[i-1]+1否则s[i]=s[i-1]-1.那么如果|s[i]-s[j]|<=m或者=i-j+1(也就是人数差不超过 ...

  4. 使用Python解析豆瓣上Json格式数据

    现在的API接口多为xml或json,json解析更简洁相对xml来说 以豆瓣的API接口为例,解析返回的json数据: https://api.douban.com/v2/book/1220562 ...

  5. MySQL多数据源笔记5-ShardingJDBC实战

    Sharding-JDBC集分库分表.读写分离.分布式主键.柔性事务和数据治理与一身,提供一站式的解决分布式关系型数据库的解决方案. 从2.x版本开始,Sharding-JDBC正式将包名.Maven ...

  6. 关于 Touchjs 手势识别事件库 this 关键字与选择器不对称情况

    Touchjs 版本 v0.2.14 废话不多,直接看代码,一个拖动实例 <div id="touch-drag"></div> <script ty ...

  7. The summary of Interview

    面试汇总 运维工程师日常工作内容 自我介绍对公司的了解 系统管理员的职责 进行系统资源管理.设备管理.系统性能管理.安全管理和系统性能监测: 管理的对象 服务器.用户.服务器的进程及系统的各种资源等. ...

  8. 1-2 Spring 的基本使用

    1.Spring容器的配置文件applicationContext.xml的引入 名称可以自己定义 <?xml version="1.0" encoding="UT ...

  9. jsp页面集成xhEditor文本编辑器

    经常写博客的都应该接触文本编辑器,现在大多数都是使用Markdown,Markdown是一种可以使用普通文本编辑器编写的标记语言,在文章中通过简单的语法标记就可以实现文字的不同格式,对于Markdow ...

  10. Http最常见的错误代码

    1XX 表示消息 2XX 表示成功 3XX 表示重定向 4XX 表示请求错误 5XX 表示服务器端错误 我们最常见的就是: 404(页面找不到),这个错误代码是由于我们输入的网址不对造成的,浏览器找不 ...