#Django
Django项目中新建一个应用程序(例:start app01),在app01的文件夹中会有一个默认生成的models.py文件,这个文件和数据库的操作相关,通过执行数据库迁移,便于网页端和数据库端的交互操作。
1.model.py操作数据库
1.1连接数据库
首先,在项目根目录的settings.py文件配置数据库连接,代码如下。
1.2创建实例
在models.py综创建一个Model实例。
对应于数据库,图中创建了一个名为app01_Department的表格,包含名为title的列,CharField定义此列数据类型,verbose_name='标题'无实际意义,仅用于对此列的文字说明,max_length=32限定数据长度。
根据所需数据库表格结构设计,编写完模型类之后,需要在终端执行命令进行数据库的迁移,在数据库中创建所需的表。
生成迁移文件
python manage.py makemigrations
同步到数据库中
python manage.py migrate
数据库迁移成功后,会在数据库中生成多个django开头和app01开头的表。每次执行操作后,表django_migrations中会记录每一次数据迁移记录,删掉此行记录,相当于撤销本次迁移。
接着在视图函数或是其他编写的函数中,可以对数据库中的app01开头的表内容进行增改删查。
2.直接读取已有内容
因为连接的数据库,在我的django项目开始编写前本身有一部分内容,这里希望直接查询并展示在网页上,使用模型类文件编写代码,数据库迁移形成的表名因为带有app01这个前缀,和已有的表格不对应,所以直接编写了查询函数(django有一个可以根据数据库已有内容反向生成model.py的class文件的命令,但我由于psycopg2版本问题,执行这个命令会报错,后面有机会再研究)。
2.1编写函数直接查询
这里给出的是编写函数读取数据库一个已有表格的内容,通过echarts绘制折线图在网页上。
数据库表格结构与表内容如图:
编写函数内容如下:
from django.shortcuts import render
def test2(request):
with connection.cursor() as cursor:
cursor.execute("SELECT 姓名, 身高 FROM table_20240322") # 查询学生的姓名和身高
result = cursor.fetchall()
names = [row[0] for row in result] # 学生姓名
heights = [float(row[1]) for row in result] # 学生身高
# 将列表转换为JSON格式的字符串
import json
names_json = json.dumps(names)
heights_json = json.dumps(heights)
return render(request, 'test2.html', {
'names': names_json,
'heights': heights_json
})
上述代码读取了数据库table1表中的“time1”和“数值”两列数据内容,并将其转换为html文件可用的json数据格式,并将数据传入test2.html文件进行后续处理。
然后新建一个test2.html文件,注意将其放置在settings.py中规定的模版文件位置,一般是应用文件app01中的templates目录下。
test2.html内容如下:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test2</title>
<script src="{% static 'lib/echarts/chart/echarts.js' %}"></script>
</head>
<body>
<h1>这是大标题</h1>
<div id="main" style="width: 1200px; height: 600px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
// 从 Django 模板获取 names 和 heights 数据
var names = {{ names|safe }};
var heights = {{ heights|safe }};
var option = {
title: {
text: '这是主标题',
textStyle: {color: '#a125d9'},
subtext: '副标题',
subtextStyle: {color: '#125454'},
},
tooltip: {
trigger: 'axis'
},
{#工具栏组件toolbox#}
toolbox: {
show: true,
{#left: 'right',//左侧显示#}
feature: {
mark: {show: true},// 布尔型,默认为true,只有false时才是不显示这个工具配置项
dataView: {show: true, readOnly: false},// 看到底层数据
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},// 还原查看时的状态
saveAsImage: {show: true}// 保存到本地
}
},
{#legend图例#}
legend: {
data: ['Height']
},
grid: {
left: '3%',
right: '4%',
bottom: '12%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: names // 学生姓名数组
},
yAxis: {
type: 'value',
},
series: [
{
name: 'Height',
type: 'line',
data: heights // 身高数据数组
}
],
dataZoom: [{ // 添加 dataZoom 组件来实现缩放滑动
type: 'slider', // 使用 'slider' 类型
xAxisIndex: [0], // 表明这个 dataZoom 组件控制哪个轴(0 表示第一个 xAxis)
start: 0, // 数据窗口的起始百分比
end: 50, // 数据窗口的结束百分比
height: 50, // 设置 dataZoom 的高度
}]
};
myChart.setOption(option);
</script>
</body>
</html>
运行项目,输入urls.py文件中设定的地址,网页显示如图,数据查询成功。