“校园舆情监测系统”网站设计及网页编辑总结

这是很早之前，13年左右在做舆情系统前端时写的一些总结，现在放到博客上，以防丢失。
后端使用Django Web 框架。
前端使用django 的python模板语言开发。

一、网页编程基础知识

<html>
<head>
<title>校园舆情监测系统</title>
</head>
<body>
<p>.......</p>
<a href="XXXX">YYYY</a>
</body>
</html>

1、<html>是网页的html代码的开始，在最后，有一个</html>与它相对应，表示代码的结束位置，网页的所有内容都出现在这两个标记(我们把用<>包含起来的这部分称之为标记或标签)之间。
2、<head>是网页头标记，也有一个</head>与之相对应，在<head>和</head>之间，有许多定义，下面一个是<title>和</title>，这是网页标题的标记，从上面的代码我们可以看到，网页的标题为“校园舆情监测系统”,要是我们想给页面取一个名称的话，我们就把要改的名称写到<title>和</title>之间。
3、<body>和</body>是网页正文的标记，基本上，网页所显示的内容全部都包含在这两个标记之间。现在我们看到的这两个标记之间什么也没有，就代表了网页是空的。
4、在<body></body>之间多了<p>.......</p>的代码，这里的<p></p>标签指的是段落，既是在网页上加上一段内容，可以有多个<p></p>标签存在。
5、<a ></a>标签是用来做链接的，其中XXXX是链接目标页面的网址，YYYY是我们在网页上看到的链接提示文字。
将包含这些内容的代码的文件以***.html命名，即将其生成html文件的形式保存，用IE或者Firefox浏览器打开，就可以看到所编辑的网页内容了。
这些事一个网页所需要的大概内容，但是在我们的系统中，利用纯html进行网站的开发是不行的，它一般用于静态网页编程比较多，但是我们需要一个动态的网站，所以以Django进行Web开发时，它要求我们的网站编程必须要与python结合起来，将原有的html用相应的python语句进行编写。

二、django中的模板

在开发一个网站的过程中，将页面的设计和Python的代码分离开会更干净简洁更容易维护。我们可以使用Django的模板系统 (Template System)来实现这种模式。

1、定义基础模板

利用 base.html的模板来定义一个简单的HTML框架，我们将在网站的所有网页中使用。

{% load staticfiles %}
<DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>{% block head %} {% endblock %}</head><body>{% block body %}{% endblock %}</body>
</html>

上面的代码既是整个系统网站的base.html的内容，我们可以看到他包含了以前所说的HTML网页编程的基础代码，利用base.html这一基础模板，在所有网页编写的过程中，我们只需调用该基础模板即可，无需再编写上述内容。
所有的 {% block %}标签告诉模板引擎，子模板可以重载这些部分，即所有的网页在编写时，必须要用{% block head %}等标签来代替<head>等标签，而{% endblock %}即表示</head>。

2、网页编程

定义好基础模块后，就可以开始进行具体的网页编程了，一个网页应当以“{% extends "resources/base.html" %}”开头，表示这个网页需要调用resources文件夹中的base.html文件，也就是调用基础模板，下面以一个简单的例子来介绍：

{% extends "resources/base.html" %}
{% block head %}
{% load staticfiles %}
<link href={% static "css/style.css" %} rel="stylesheet" type="text/css" />{% endblock %}
{% block body %}
<div class="clear"></div>{%endblock%}

可以看到，由于继承了基础模板的内容，所以在网页中全部用python语句替换掉了之前的HTML语句，在这里出现了{%load staticfiles %}指的是用来调用名叫“static”文件夹中的内容，在“static”文件夹中包含了css、js、jpg等文件，都是用于修饰网页的文件，在这里，书写这一句语句意味着接下来的代码中可以随意的调取“static”文件夹里的任何文件或者文件夹，它都能够找得到。
而“<link href={% static "css/style.css" %} rel="stylesheet" type="text/css" />”这里的{% XXXX %}表示的是一个变量，是可以更改的，这样的形式同样表示一个链接，但是它链接的是一个文件，即“style.css”这一css文件用于为HTML文档定义布局，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面，每一个网页都需要它来进行调整和操作。
我们可以从上面的例子看出，每一个{% block XX%}开头的，都以{%endblock%}结束，他们中间包含具体内容，都是从base.html中继承来的，也就是说base.html中怎么定义，这里就要怎么写。然后网页的其他知识都是html网页通用知识，自己查查就可以了解。

3、视图和url

网页的内容编辑好以后，在django中，想要网页能够正常显示，必须要在视图（view.py）中定义并且配置url才算完成任务。在之后的调取数据库内容时，视图也起到了关键作用。
每个视图只负责以下两件事中的一件：返回一个 HttpResponse 对象，即返回所请求页面的内容，或者抛出一个异常，即返回Http异常，例如 Http404（页面不存在）。剩下的就由我们来实现了。视图可以读取数据库记录，或者不用。它可以使用一个模板系统或不用。它可以生成一个 PDF 文件，输出 XML ，即时创建 ZIP 文件，你可以使用你想用的任何 Python 库来做你想做的任何事。
一个视图就是Python的一个函数，我们需要使其成为一个django所能够识别的，实际上视图就是在你做好网页过后，定义在运行django时需要响应的网页，以及网页如何响应和响应的形式等。并且，视图同时也起着链接数据库的功能，我们只能在视图里定义将要链接的数据库内容，才能够将其响应到网页上，编辑视图所用到的都是Python库所能够实现的。
定义好视图过后，我们还需要一个详细描述的URL来显式的告诉django并且激活这个视图，才能够正常的显示。Url起着一个映射作用，使得模板、视图有效地链接起来。

4、读取数据库内容

在我们的系统中，最主要的功能就是读取数据库中所抓取的内容，并进行分析，使其能够有一定规律的显示在网页上，这个问题一开始很容易解决，但是，我们面临的关键问题是如何能够将数据进行过滤和筛选之后显示出来。于是，查阅了相关资料后有以下几点总结：
(1)排序：如果要将数据按照一定的限制进行排序的话，我们会用到order_by这一SQL语句，具体使用时在视图中：

def mainpage(request):tweet_form = open_newsforms.TweetForm()
open_news_article = Article.objects.order_by(‘pointnum')
return render(request,‘mainpage.html', { ‘tweet_form': tweet_form, ‘open_news_article': open_news_article})

上述语句中就是以数据库中“pointnum”这一字段进行排序的，“open_news_article”表示的是我们自己定义的名字，在网页中会用到，后面的“Article.objects.order_by(‘pointnum')”指的就是从数据库中article这一个表中读取数据，并以“pointnum”为标准进行排序。
（2）网页显示过滤
定义好视图以后在网页书写以下语句一实现数据库内容的显示：

{%for item in open_news_article|slice:":10"%}
<li>{{item.title|slice:"0:10"}} </li>          {%endfor%}

可以看到同样是{% %}括起来的语句，中间运用了一个for循环语句，从而将符合定义要求的数据从数据库中取出来，上面的代码表示了从open_news_article中取出item，然后利用过滤器（“|”）过滤，在网页上最终显示前十条记录。接下来<li>表示以列表的形式显示，两个<li>包含的内容指的是从名为title这一字段中取出记录，并同样利用过滤器进行过滤，显示出每条记录的前十个字。
（3）url正确配置
上述工作完成后，还需要正确的url配置才行，如下：
url(r'^mainpage','views.mainpage', name = 'mainpage'),
这里表明直接从视图响应mainpage.html这一网页，而不是调用这一网页，才能够实现网页的正常响应。

5、利用`Plotkit`画图

 开发舆情监测系统，这就需要网站上有相应的图标展示数据，因此，我们选择使用`Plotkit`这一开源软件进行图表的制作。`PlotKit`是一个纯`javascript`绘图工具包。它支持`HTML Canvas`和`Adobe SVG`。所以我们可以比较容易的利用它进行图表的绘制。`PlotKit`需要它自己的脚本文件，以及良好的`MochiKit`库，因此我们需要在网页中调用：

{% block head %}
{% load staticfiles %}
<script src="/static/MochiKit/MochiKit.js" type="text/javascript"></script>
<script src="/static/PlotKit/excanvas.js" type="text/javascript"></script>
<script src="/static/PlotKit/Base.js" type="text/javascript"></script>
<script src="/static/PlotKit/Layout.js" type="text/javascript"></script>
<script src="/static/PlotKit/Canvas.js" type="text/javascript"></script>
<script src="/static/PlotKit/SweetCanvas.js" type="text/javascript"></script>
{% endblock %}

接下来，如果想要图形出现，还需要添加一个<canvas>标签。并且为了标签能够正常工作，PlotKit要求将<canvas>标签放置在<DIV>标签里面：
<div><canvas id="graph" height="300" width="350"></canvas></div>
实际上，这一段代码就是生成一块画布，具体的图形都要在这块画布上进行操作，也就是说画图的代码应该是在上面这一

标签所包含的。
然后绘制图表：

<script type="text/javascript">
var options = {
"FFCanvasHTC": "/plotkit/ffcanvas.htc",
"colorScheme": PlotKit.Base.palette(PlotKit.Base.baseColors()[2]),
"padding": {left: 0, right: 0, top: 10, bottom: 50},
"xTicks": [{v:0, label:"“}, {v:1, label:"”},"barWidthFillFraction": 0.50,"yAxis": [0, 1500],};
function drawGraph() {var layout = new PlotKit.Layout("bar", options);
layout.addDataset("sqrt", [ [0,888], [1,777]]);
layout.evaluate();
var canvas = MochiKit.DOM.getElement("graph");
var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, options);plotter.render();}
MochiKit.DOM.addLoadEvent(drawGraph);
</script>

在这里，colorScheme控制图表的数据组件的颜色 - 例如线，棒图，饼图，反对背景。它接受一个定额在PlotKit.Base.palette阵列中的“MochiKit.Color.Color”。
xTicks其实主要做两件事情。作为{v:X, label:""},对象的数组，它设置X轴的刻度值以及其关联的标签。
barWidthFillFraction决定每个X值，以及每个bar要消耗的空间量。因此，那些不超过1的数字所需的bar较少，而那些超过1则创建更广泛的bar。
yAxis属性设置为Y轴的最小值和最大值，使用2个浮点数的数组。
其实，整个绘制图表的过程就是javasript的操作，这样简便了我们的很多工作，只需调用现成的代码就可以随心所欲的绘制图表了，上面是一个柱形图的简单例子。

6、数据库搜索功能

Django有自带的搜索表单（form）功能，因此，我们可以在网页上通过以下代码定义一个搜索功能：

<div class="search"><form action="/search/" method="get"><input type="text" name="q"><input type="submit" value="Search"></form>
</div>

然后，在视图中编写代码进行搜索：

def search(request):if 'q' in request.GET and request.GET['q']:q = request.GET['q']article = Article.objects.order_by(title=q)return render_to_response('search_results.html', {'Article': article, 'query': q})

 这段代码判断我们将要搜索的`“q”`变量是否在数据库中指定的记录中，如果存在就将带有变量`“q”`的记录返回到搜索结果的网页上。

最后，制作一个搜索结果的网页并配置url：

{% if article%}<ul>{% for item in article %}<li>{{ item.title }}</li>{% endfor %}</ul>
{% else %}<p>No books matched your search criteria.</p>
{% endif %}

这里运用一个if加上for循环的结构来读取数据库相应的数据来显示。而Url的配置同之前所述一样。