【小白适用】Django+Echarts+Mysql
Django+Echarts+Mysql项目Demo!
- 一、Django框架
-
- 1、创建Django项目
- 2、文件结构
- 二、链接mysql
-
- 1.引入库
- 2.读入数据
- 三、使用echarts可视化展示
-
- 1、设置静态文件目录（即 static 目录）
-
- （1）地址设置
- （2）js文件下载
- （3）css设置
- （4）static目录结构
- 2、可视化页面(templates文件夹）
-
- （1）index.html页面测试
- （2）将数据库中的数据传到前端页面
- (3)引用数据库中的信息
- (4) 配置路径
- 3、执行项目
提示：以下是本篇文章正文内容，案例仅供参考
一、Django框架
1、创建Django项目
1、选择Django，创建项目
2、输入本地地址
3、选择配置python编译器
4、选择More Settings，配置app！！！（现在配置省很多事情噢）
2、文件结构
二、链接mysql
1.引入库
settings.py
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'ed', #数据库名称
'USER':'root', #用户名
'PASSWORD':'**', #密码
'HOST':'localhost',
'PORT':'3306',
}
}
2.读入数据
models.py
from django.db import models
class MajorCount(models.Model):
major = models.CharField(max_length=255, blank=True, null=True)
m_count = models.CharField(max_length=255, blank=True, null=True)
class Meta:
managed = False
db_table = 'major_count'
class SchoolCount(models.Model):
school = models.CharField(max_length=255, blank=True, null=True)
s_count = models.CharField(max_length=255, blank=True, null=True)
class Meta:
managed = False
db_table = 'school_count'
这里放入一个特别特别特别省事儿的方法（tip:数据库中数据存在噢
python manage.py inspectdb > models.py
数据库截图放在下面啦：
三、使用echarts可视化展示
1、设置静态文件目录（即 static 目录）
（1）地址设置
settings.py
#添加到最后
STATICFILES_DIRS=(os.path.join(BASE_DIR,'static'),)
（2）js文件下载
echarts.min.js: link
下载完毕放到static/js中
（3）css设置
index.css
#chart{
height: 500px;
width: 500px;
}
把该文件放到static/css中
（4）static目录结构
2、可视化页面(templates文件夹）
（1）index.html页面测试
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个django展示页面title>
<link rel="stylesheet" href="../static/css/index.css">
<script src="../static/js/echarts.min.js">script>
head>
<body>
<h1>学生成绩简单可视化h1>
<div id="chart">div>
<script>
var mychart = echarts.init(document.getElementById('chart'));
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
mychart.setOption(option);
script>
body>
html>
看一下你的页面是不是下面这样：
如果是上面这样，恭喜你！下一步！
（2）将数据库中的数据传到前端页面
views.py
from django.shortcuts import render
from .models import Person
def index(request):
objs = Person.objects.all()
return render(request,'index.html',locals())
(3)引用数据库中的信息
index.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个django展示页面title>
<link rel="stylesheet" href="../static/css/index.css">
<script src="../static/js/echarts.min.js">script>
head>
<body>
<h1>学生成绩简单可视化h1>
<div id="chart">div>
<script>
var mychart = echarts.init(document.getElementById('chart'));
var series_data = [];
var xAxis_data = [];
{% for stu in objs %}
series_data.push({{ stu.score }})
{#注意这里的双引号#}
xAxis_data.push("{{ stu.name}}")
{% endfor %}
{#可视化展示选项#}
var option = {
xAxis: {
type: 'category',
data: xAxis_data
},
yAxis: {
type: 'value'
},
series: [{
data: series_data,
type: 'line'
}]
};
mychart.setOption(option);
script>
body>
html>
(4) 配置路径
urls.py
from django.contrib import admin
from django.urls import path
from app import views
urlpatterns = [
path('admin/', admin.site.urls),
path('',views.index)
]
3、执行项目
python manage.py runserver
查看页面
