客户端（浏览器）----> 前端页面-----> 后端处理数据，并把数据以 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. 初学者第二节之HelloWorld

    ava具有简单性.面向对象.分布式.健壮性.安全性.平台独立与可移植性.多线程.动态性等特点.Java可以编写桌面应用程序.Web应用程序.分布式系统和嵌入式系统应用程序等. 一.首先创建一个Hell ...

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

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

  3. Git知识总览(六) Git分支中的远程操作实践

    前几篇博客陆陆续续的讲了好多关于Git操作的内容,本篇博客仍然也不例外,不过本篇博客的主题是关于git的远程操作的.依照之前博客的风格,我们依然依托于LearningGitBranch中的相关内容来探 ...

  4. angular路由详解六（路由守卫）

    路由守卫 CanActivate: 处理导航到某个路由的情况. CanDeactivate:处理从当前路由离开的情况. Resole:在路由激活之前获取路由数据. 1.CanActivate: 处理导 ...

  5. 读 《 Web 研发模式的演变 》与《Javascript:世纪机器语言》

       读了两篇文章,内心还是很震撼的,在这之前,我学习知识都是直接找教程,翻阅资料,写几个小demo,没有去了解我所学的东西的发展历程,<Web研发模式的演变>这篇文章讲述了web的前世今 ...

  6. IIS前端页面不显示详细错误解决方法

    要想解决这个问题,有三种方法可以考虑: 1.Internet信息服务(IIS)管理器 2.Web.config文件 3. 命令行 在IIS的"错误页"右边的"编辑功能设置 ...

  7. Socket之心跳包实现思路

    由于最近要做一个客户端,但是要求有一个掉线检测的功能,下面让我们看看使用自定义的HeartBeat方式来检测客户端的连接情况. 心跳包的实现思路: 客户端连接上服务端后,在服务端会维护一个在线客户端列 ...

  8. 制作centos的启动盘

    制作centos的U盘启动盘 author:headsen chen    2017-10-13   10:24:50  个人原创,允许转载,请注明作者,出处,否则依法追究法律责任! 1,下载Ultr ...

  9. Java 小记 — Spring Boot 注解

    前言 本篇随笔将对 Spring Boot 中的常用注解做一个简单的整理归档,写作顺序将从启动类开始并逐步向内外扩展,目的即为了分享也为了方便自己日后的回顾与查阅. 1. Application 启动 ...

  10. CSS( Cascading Style Sheets )简书

    (注:带*号的属性是CSS3新增属性)一.基本规则1.css通常存储在样式表(style)中,用于定义如何显示HTML元素:2.css主要由两个部分构成:选择器和一条或多条声明. 选择器通常是需要改变 ...