Django实战：传递数据到ECharts

创建项目

django-admin startproject mycharts

cd mycharts

创建应用

python manage.py startapp aboutApp

注册应用

mycharts/settings.py


INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'aboutApp',
]

建立前端文件夹

在mycharts文件夹内，

建立一个文件夹：frontend

frontend:存放前端文件，包括html,css,js和img文件等

编写视图函数

aboutApp/views.py:

from django.http import HttpResponse

def home(request):
    return HttpResponse('Hello World')

添加路由

mycharts/urls.py:

from django.contrib import admin
from django.urls import path
from aboutApp.views import home

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',home,name='home'),
]

运行项目

python manage.py runserver

打开浏览器访问http://127.0.0.1:8000 看是否输出字符串”Hello World".

前端开发

引用百度开源的Echarts图形库，

进行前端页面的开发，设计一个柱形图。

效果图

源代码

frontend/index.html:

<!DOCTYPE html>

<html lang="en">

<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>Title</title>

</head>

<body>
    <div id="main" style="width: 600px;height:400px;"></div>
</body>


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

<script src="echarts.js"></script>

<script type="text/javascript">

        // 柱状图

    function barSimple(data) {

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '我的第一幅ECharts可视化图'
            },
            tooltip: {},
            legend: {
                data:['各产品销量情况']
            },
            xAxis: {
                data: ["产品A","产品B","产品C","产品D","产品E"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: data
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    }


    window.onload =  barSimple([450, 300, 250, 500, 100]);
</script>

</html>

前端请求接口

如果要实现前后端的通信，

需要将之前index.html中的

window.onload =  barSimple([450, 300, 250, 500, 100]);

替换为如下代码：


    window.onload = function () {

            $.ajax({

                url: "/test/",

                type:"POST",

                data: {"k1": "v1"},

                success: function (data) {

                    // 饼图

                   // Pie1(data['obj']);

                    // 柱状图

                    barSimple(data['bar']);

                    console.log(data)

                }

            })

    }

后端开发

静态文件服务

一般情况下，采用前后端分离机制后，前端静态资源（html,css,jpg)会采用额外的前端服务器来提供静态文件服务。

这里为了简化服务器的搭建与使用，依然使用django来提供静态文件服务，

将所有的静态资源（html,css,jpg)等按照文件夹路径创建对应的视图处理函数。

在aboutApp/views.py中添加代码：

def read_css(request, filename):
    with open('frontend/css/{}'.format(filename), 'rb') as f:
        css_content = f.read()
    print('css文件')
    return HttpResponse(content=css_content, content_type='text/css')


def read_js(request, filename):
    with open('frontend/js/{}'.format(filename), 'rb') as f:
        js_content = f.read()
    print('js文件')
    return HttpResponse(content=js_content,
                        content_type='application/JavaScript')


def read_img(request, filename):
    with open('frontend/img/{}'.format(filename), 'rb') as f:
        img_content = f.read()
    print('img文件')
    return HttpResponse(content=img_content, content_type='image/jpeg')

上述代码分别创建js,css 和jpg文件访问的视图处理函数。

同时，重写home函数：

def home(request):
    with open('frontend/index.html', 'rb') as f:
        html = f.read()
    return HttpResponse(html)

设置访问路由

urls.py:

from django.contrib import admin
from django.urls import path
from aboutApp.views import home
from aboutApp.views import read_css, read_js, read_img

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',home,name='home'),
    path('css/<str:filename>', read_css, name='read_css'),
    path('js/<str:filename>', read_js, name='read_js'),
    path('img/<str:filename>', read_img, name='read_img'),
]

保存所有修改后启动项目。

输入网址：http://127.0.0.1:8000

后端接口编写