记录python Django web开发小项目二

最新推荐文章于 2024-05-13 06:47:15 发布

windy741

最新推荐文章于 2024-05-13 06:47:15 发布

阅读量127

点赞数

文章标签： python django 前端 mysql

本文链接：https://blog.csdn.net/windy741/article/details/121760505

版权

样式问题解决：

在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

windy741

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记录python Django web开发小项目二

样式问题解决：在settings.py下加入static目录路径，该目录保存网页的样式以及js代码STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), # 添加此项]在网页上加载时，在自己的网页开始加入{% load static %}，并添加css路径和js路径，类似如下。{% load static %}<!DOCTYPE html><html lang="en"><head> <
复制链接

扫一扫