学习笔记 semantic +django快速在线图表展示

当我们需要利用网站快速展示仿真数据时,可以用sematic UI和django快速开发。
相关网址如下:

  1. django 3.2文档:
  2. semantic UI
  3. highcharts
  4. B站视频:

步骤:
1… …> django-admin startproject mysite新建网站

  1. …> py manage.py startapp polls 创建应用
  2. polls/views.py中创建视图
from django.http import HttpResponse


def index(request):
    return HttpResponse("Hello, world. You're at the polls index.")
  1. 在 polls/urls.py 中,输入如下代码:
from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
]
  1. 在根 URLconf 文件中指定我们创建的 polls.urls 模块
from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('polls/', include('polls.urls')),
    path('admin/', admin.site.urls),
]
  1. 创建模型
from django.db import models


class Question(models.Model):
    question_text = models.CharField(max_length=200)
    pub_date = models.DateTimeField('date published')


class Choice(models.Model):
    question = models.ForeignKey(Question, on_delete=models.CASCADE)
    choice_text = models.CharField(max_length=200)
    votes = models.IntegerField(default=0)
  1. 激活模型
  • 在配置类 INSTALLED_APPS 中添加设置
  • py manage.py makemigrations polls
  • py manage.py migrate
  1. 创建账号
    py manage.py createsuperuser
  2. 启动服务器
    py manage.py runserver
  3. 使用模板系统
<h1>{{ question.question_text }}</h1>
<ul>
{% for choice in question.choice_set.all %}
    <li>{{ choice.choice_text }}</li>
{% endfor %}
</ul>
  1. 简单表单
<form action="{% url 'polls:vote' question.id %}" method="post">
{% csrf_token %}
<fieldset>
    <legend><h1>{{ question.question_text }}</h1></legend>
    {% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
    {% for choice in question.choice_set.all %}
        <input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}">
        <label for="choice{{ forloop.counter }}">{{ choice.choice_text }}</label><br>
    {% endfor %}
</fieldset>
<input type="submit" value="Vote">
</form>
  1. 引入semantic
  • 在网站根目录下新建static文件夹
  • 在settings.py中STATIC_URL = ‘/static/’
    STATICFILES_DIRS=[
    os.path.join(BASE_DIR,‘static’)
    ]
  • static目录结构如下学习笔记 semantic +django快速在线图表展示_第1张图片
  • head标签加入
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{% static 'css/semantic.css' %}">
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css'>
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/semantic.js' %}"></script>
    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts-more.js"></script>
    <script src="http://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>


    <title>Title</title>
</head>
  • 在index.html页面第一项加入{% load static %}
  • body标签后加入
</body>
<script src="{% static 'js/main.js' %}" type="text/javascript"></script>
</html>
  1. semantic的使用
    从官网中复制相应的div放入index.html中,如果有js,写入main.js中。找对象的方法参考jquery.js的方法。
  2. 图表的引入参考highcharts官网教程。
    以直线图为例:
  • 进入highcharts.com.cn官网,选文档教程,左侧图表类型,直线图
  • 复制js代码
  • 修改js代码中的数据

你可能感兴趣的:(django,python)