django+highcharts+jquery+mysql

前端:

django+highcharts+jquery+mysql_第1张图片

后台请求:

django+highcharts+jquery+mysql_第2张图片

hcharts.html:发现jquery-1.8.3.min.js库,highstock.js库和exporting.js库的版本很重要,一定要选对应的


 
   
    51highchart
    



{% csrf_token %}
{% load staticfiles %}

django view.py处理文件,Django中比没有配置使用MySQL数据库,而是直接用pymysql调用而已

#coding=utf-8
from django.shortcuts import render
from django.http import HttpResponse, HttpResponseRedirect
from django.contrib import auth
from django.contrib.auth.decorators import login_required
from blog.models import Article

from django.http import JsonResponse
import pymysql as mysql
import json
con = mysql.connect(host='192.168.43.212',port=3306,user='test',passwd='test',db='test')
con.autocommit(True)
cur = con.cursor()
tmp_time = 0
# sql = 'select * from memory'
# cur.execute(sql)
# for line in cur.fetchall():
#     print line
# Create your views here.

def index(request):
    return render(request,"index.html")
#@login_required
def movie(request):
    return render(request,"movie.html")
#@login_required
def edindex(request):
    Articles = Article.objects.all()
    #print type(Articles)    
    return render(request,"edindex.html",{"Articles":Articles})


#@login_required
def mod(request):
    articles = Article.objects.all()  
    return render(request,"mod.html",{'articles':articles})


#@login_required
def articlelist(request,article_id): 
    #articles = Article.objects.all()  
    article = Article.objects.get(pk=article_id)
    return render(request,"articlelist.html",{'article':article})

#@login_required
def articleforeword(request):
    #articles = Article.objects.all()  
    return render(request,"articleforeword.html")


@login_required
def modtool(request):
    return render(request,"modtool.html")

@login_required
def echart1(request):
    return render(request,"hcharts1.html")

@login_required
def echart2(request):
    return render(request,"echarts2.html")

@login_required
def hcharts(request):
    return render(request,"hcharts.html")


@login_required
def data(request):
    # sql = 'select * from memory'
    # cur.execute(sql)
    # for line in cur.fetchall():
    #     print line
    global tmp_time
    if tmp_time>0:
        sql = 'select * from memory where time>%s'%(tmp_time/1000)
    else:
        sql = 'select * from memory'
    cur.execute(sql)
    arr = []
    for i in cur.fetchall():
        arr.append([i[1]*1000,i[0]])
    if len(arr)>0:
        tmp_time = arr[-1][0]
    print json.dumps(arr)
    print tmp_time
    # return JsonResponse(json.dumps(arr))
    # return JsonResponse(json.dumps(arr))
    # return json.dumps(arr)
    # return render(request,'hcharts.html',json.dumps(arr))
    # return HttpResponseRedirect(json.dumps(arr))
    return HttpResponse(json.dumps(arr))

@login_required
def login_action(request):
    if request.method == 'POST':
        username = request.POST.get('username', '')
        password = request.POST.get('password', '')
        user = auth.authenticate(username=username, password=password)
        if user is not None:
            auth.login(request, user) # 登录
            request.session['user'] = username # 将session 信息记录到浏览器
            response = HttpResponseRedirect('modtool/')
            return response
        else:
            return render(request,'index.html', {'error': 'username or password error!'})
    else:
        return render(request,'index.html', {'error': 'username or password error!'})

#@login_required
def event_manage(request):
    username = request.session.get('user', '') # 读取浏览器cookie
    #return render(request,"event_manage.html",{"user":username,"Articles":Article})
    return render(request,"event_manage.html",{"user":username})

注意highcharts接收的数据什么类型,用不同的response返回的数据类型是不一样的。用

@login_required
def data(request):
    # sql = 'select * from memory'
    # cur.execute(sql)
    # for line in cur.fetchall():
    #     print line
    global tmp_time
    if tmp_time>0:
        sql = 'select * from memory where time>%s'%(tmp_time/1000)
    else:
        sql = 'select * from memory'
    cur.execute(sql)
    arr = []
    for i in cur.fetchall():
        arr.append([i[1]*1000,i[0]])
    if len(arr)>0:
        tmp_time = arr[-1][0]
    print json.dumps(arr)
    print tmp_time
    # return JsonResponse(json.dumps(arr))
    # return JsonResponse(json.dumps(arr))
    # return json.dumps(arr)
    # return render(request,'hcharts.html',json.dumps(arr))
    # return HttpResponseRedirect(json.dumps(arr))
    return HttpResponse(json.dumps(arr))

url.py

from django.conf.urls import patterns,include, url
from django.contrib import admin
from blog import views
from django.conf.urls.static import static
#from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    #url(r'^ckeditor/', include(ckeditor.urls)),
    url(r'^ckeditor/', include('ckeditor_uploader.urls')),
    
    url(r'^$', views.index),
    url(r'^index/$', views.index),
    url(r'^logout/$', views.index), 
    url(r'^mod/logout/$', views.index),
    url(r'^event_manage/logout/$', views.index),
    url(r'^accounts/login/$', views.index),   
    url(r'^admin/', views.index),


    url(r'^mod/$', views.mod),
    url(r'^modtool/$', views.modtool),
    url(r'^login_action/modtool/$', views.modtool),
    url(r'^edindex', views.edindex),
    url(r'^login_action/$', views.login_action),
    url(r'^event_manage/$', views.event_manage),
    url(r'^movie/$',views.movie,name="movie"),
    url(r'^articlelist/(?P[0-9]+)$', views.articlelist,name='articlelist'),
    url(r'^articleforeword/$',views.articleforeword),


    url(r'^echart1/$', views.echart1), 
    url(r'^echart2/$', views.echart2), 
    url(r'^hcharts/$', views.hcharts), 
    #url(r'^hcharts/data/$', views.hcharts), 
    url(r'^hcharts/data$', views.data), 
    url(r'^data$', views.data), 
]

总结:Django与highcharts结合,难点在数据块格式。同时注意绘制图标要有相适应的js库;设置csrf;highcharts引入时大小中括号的闭合。

问题:后台tmp_time是一个全局变量,当同时打开多个窗口时,并发访问时会出现的问题

global tmp_time

django+highcharts+jquery+mysql_第3张图片

flask与highchart结合:https://blog.csdn.net/jackliu16/article/details/78944316

https://blog.csdn.net/jackliu16/article/details/78942638



你可能感兴趣的:(python,web前端)