学习笔记 semantic +django快速在线图表展示
当我们需要利用网站快速展示仿真数据时，可以用sematic UI和django快速开发。
相关网址如下：
- django 3.2文档：
- semantic UI
- highcharts
- B站视频：
步骤：
1… …> django-admin startproject mysite新建网站
- …> py manage.py startapp polls 创建应用
- polls/views.py中创建视图
from django.http import HttpResponse
def index(request):
return HttpResponse("Hello, world. You're at the polls index.")
- 在 polls/urls.py 中，输入如下代码：
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
]
- 在根 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),
]
- 创建模型
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)
- 激活模型
- 在配置类 INSTALLED_APPS 中添加设置
- py manage.py makemigrations polls
- py manage.py migrate
- 创建账号
py manage.py createsuperuser - 启动服务器
py manage.py runserver - 使用模板系统
<h1>{{ question.question_text }}</h1>
<ul>
{% for choice in question.choice_set.all %}
<li>{{ choice.choice_text }}</li>
{% endfor %}
</ul>
- 简单表单
<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>
- 引入semantic
- 在网站根目录下新建static文件夹
- 在settings.py中STATIC_URL = ‘/static/’
STATICFILES_DIRS=[
os.path.join(BASE_DIR,‘static’)
] - static目录结构如下
- 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>
- semantic的使用
从官网中复制相应的div放入index.html中，如果有js，写入main.js中。找对象的方法参考jquery.js的方法。 - 图表的引入参考highcharts官网教程。
以直线图为例：
- 进入highcharts.com.cn官网，选文档教程，左侧图表类型，直线图
- 复制js代码
- 修改js代码中的数据