样式问题解决:
在settings.py下加入static目录路径,该目录保存网页的样式以及js代码
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'), # 添加此项
]
在网页上加载时,在自己的网页开始加入{% load static %}
,并添加css路径和js路径,类似如下。
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>沉降观测</title>
<link rel="stylesheet" href="/static/css/index.css">
<script src="/static/js/echarts.min.js"></script>
</head>
<body>
{#内容#}
</body>
启用python manage.py runserver
就可以看到渲染的界面了。
读取数据库内容展示:
win10系统下载mysql数据库,mysql for window.zip,下载第一个比较小zip就够了,解压到自己想要安装的路径下。然后配置文件,在mysql根目录创建my.ini,内容如下:
[client]
# 设置mysql客户端默认字符集
default-character-set=utf8
[mysqld]
# 设置3306端口
port = 3306
# 设置mysql的安装目录
basedir=F:\\mysql-8.0.27-winx64
# 设置 mysql数据库的数据的存放目录,MySQL 8+ 不需要以下配置,系统自己生成即可,否则有可能报错
# datadir=F:\\mysql-8.0.27-winx64\\data
# 允许最大连接数
max_connections=20
# 服务端使用的字符集默认为8比特编码的latin1字符集
character-set-server=utf8
# 创建新表时将使用的默认存储引擎
default-storage-engine=INNODB
cmd以管理员身份进入F:\mysql-8.0.27-winx64\data\bin目录下:
mysqld --initialize --console #初始化数据库
完成后,输出原始数据库密码,记住该密码。
net start mysql #启用服务
mysql -u root -p #登陆mysql
RGe/elc_z7Yt #输入上述密码
创建自己的数据库,使用Navicat工具管理mysql数据库,高版本创建数据库时会出现连接问题。在cmd中登陆mysql,使用如下命令:
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'RGe/elc_z7Yt';
FLUSH PRIVILEGES;
之后就可以登陆创建自己的数据库了,提前建立数据库。再settings.py下更改默认的数据库连接。
DATABASES = {
# 'default': {
# 'ENGINE': 'django.db.backends.sqlite3',
# 'NAME': BASE_DIR / 'db.sqlite3',
# }
'default': {
'ENGINE': 'django.db.backends.mysql', # 数据库引擎
'NAME': 'settlement_ob', # 数据库名称
'HOST': '127.0.0.1', # 数据库地址,本机 ip 地址 127.0.0.1
'PORT': 3306, # 端口
'USER': 'root', # 数据库用户名
'PASSWORD': 'RGe/elc_z7Yt', # 数据库密码
}
}
在django的models.py下建立表模型
class Point(models.Model):
Pname = models.CharField(max_length=200)
Altitude = models.CharField(max_length=200)
State = models.IntegerField()
Explain = models.CharField(max_length=200)
Ptime = models.CharField(max_length=200)
def __unicode__(self):
return self.Pname, self.Altitude, self.State, self.Explain, self.Ptime
在pycharm下的终端使用如下命令:
# 保持app目录下存在migrations文件夹和空白的__init__.py文件,才能使用
python manage.py makemigrations
python manage.py migrate
没有安装pymysql库会报错,安装pymysql,在settings.py同级目录下的__init__.py添加如下代码。
import pymysql
pymysql.install_as_MySQLdb()
最后在自己的表中添加数据。
id Pname Altitude State Explain Ptime
1 p1 138.9652 1 1 2021-01-01
2 p1 138.9626 1 1 2021-02-09
3 p1 138.9611 1 1 2021-04-06
4 p1 138.9602 1 1 2021-06-08
在views.py中添加视图函数。objects.all()获取表中所有的数据。
from OB.models import Point
# Create your views here.
def index(request):
point_list = Point.objects.all()
return render(request, 'index.html', {'point_list':point_list})
urls.py中加入:
from django.contrib import admin
from django.urls import path
from OB import views
urlpatterns = [
path('admin/', admin.site.urls),
path('index/index.html',views.index),]
网页中设置表格行列,以及使用echarts展示沉降的折线趋势。
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>沉降观测</title>
<link rel="stylesheet" href="/static/css/index.css">
<script src="/static/js/echarts.min.js"></script>
</head>
<body>
<table border="1" style="width: 480px; height:auto">
<tr>
<th>ID</th>
<th>点名</th>
<th>高程</th>
<th>状态</th>
<th>解释</th>
<th>时间</th>
</tr>
{% for i in point_list %}
<tr>
<td>{{ i.id }}</td>
<td>{{ i.Pname }}</td>
<td>{{ i.Altitude }}</td>
<td>{{ i.State }}</td>
<td>{{ i.Explain }}</td>
<td>{{ i.Ptime }}</td>
</tr>
{% endfor %}
</table>
<div id="chart" style="width: auto"></div>
<script type="text/javascript">
{#初始化 echarts 对象#}
var mychart = echarts.init(document.getElementById('chart'));
{#首先,声明两个 javascript 的数组#}
var series_data = [];
var xAxis_data = [];
{#将 echarts对象与展示选项结合起来#}
{% for line in point_list %}
series_data.push({{line.Altitude}});
{# 只要加入引号,类型自动转化为字符类型 #}
xAxis_data.push('{{line.Ptime}}');
{% endfor %}
var jsonfile = [];
var min_value = Math.min.apply(null,series_data) - 0.01;
var max_value = Math.max.apply(null,series_data) + 0.01;
var n = series_data.length;
for (i = 0; i < n; i++) {
jsonfile.push({value:[xAxis_data[i],series_data[i]]});
}
var option = {
title: {
text: '测试数据'
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
params = params[0];
var date = new Date(params.name);
return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
},
axisPointer: {
animation: false
}
},
toolbox: {
right: 10,
feature: {
restore: {},
saveAsImage: {}
}
},
xAxis: {
axisLabel :{
//设置x轴显示样式
formatter:function(params){
var date = new Date(params);
return date.getMonth()+'/'+data.getDate();
}
},
type: 'time',
name: '时间',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
name: '高程值',
min: min_value,
max: max_value,
splitLine: {
show: false
}
},
series: [{
name: 'Altitude',
type: 'line',
showSymbol: true,
hoverAnimation: true,
data: jsonfile,
markLine: {
silent: true,
lineStyle: {
color: '#333'
},
data: [{
yAxis: 138
}]
}
}]
};
mychart.setOption(option)
</script>
</div>
</body>
启用python manage.py runserver
,访问网址http://127.0.0.1:8000/index/index.html