西安邮电大学web大作业报告

西安邮电大学

（计算机学院）

WEB开发技术大作业题目：个人博客

专业名称：网络工程

班级：1203

学生姓名：

学号（8位）：

指导教师：朱辉

提交时间：2014年12月19日

网站主题的意义

本次web大作业制作个人博客站点，通过B/S架构，我们能很方便的把对客户端进行更新、管理等等操作，而且数据库采用开源的MYSQL数据库，成本低、跨平台性能好。而且在服务器配置好PHPMYADMIN后，便可以远程操作数据库，十分方便。本网站采用python作为后台语言，可移植性高。

网站分析

一个人博客应该具有以下几个功能：

1.登录

2.注册

3.写文章

4.评论文章

5.文章管理

网站整体思路采取MVC的架构方式：

首先，在前端网页中，CSS样式没什么好说的，应为风格采用了扁平化的方式，CSS样式比较简单。不过在数据交互的过程中，我采用了JS中的Jquery和AJAX,这样会让前端网页在动态中显得更加漂亮。

为了实现动态网页的设计，我采用了python的web框架，使用了jinja2技术来将前端网页模板化，将网页拆成许多个小块，在用的时候，再组成客

户能看到的页面。由于python提供的web框架各有所长，所以我重新构造了一个web框架：jinja2来是页面模版化，django来实现socket通信和拦截，web.py来对URL映射。

有了承上启下的web框架之后，就得针对Web App进行api的设计，这里采用REST的方式来设计API，使用的数据格式是JSON，这样就能直接被JS获取，然后我就能把数据进行封装，来完成数据传输。

接下来该设计的就是数据库的连接，底层模块设计的原则是，根据上层调用者设计简单易用的API接口，然后，实现模块内部代码。所以，设计一个db模块，来作为数据库连接的引擎，连接上数据库后，我能使用SQL语句对数据库进行操作，为了避免SQL注入攻击，把SQL中不用的字符作为占位符。

完成底层数据库db模块后，就是设计orm模块的时候，因为使用SQL 语句来操作数据库还是有些不方便，所以将SQL语句换为更为简单的API 来给上层操作使用。

有了orm模块后，上层模块model就能将数据库需要的表表示出来了。

不过，我要提前用SQL脚本初始化数据库，以便调试。

设计和风格说明

我的设计风格以扁平化和简约为主，不多加太多的修饰，让人能一下子抓住重点。背景以白色为主色（不是纯白），这样子字的颜色选用黑色会显得比较显目，而且白色搭配蓝色我觉得也是一种类似于地中海风格的搭配，总之能让人觉得很是舒服。

为了能让错误提示更加美观，我采用了Ajax技术，这样子，在输入不合法的时候就不会重新加载页面了。

对于图标的选用，我也采取当下流行的扁平化的风格，这样的图标虽然简单，但是能传达的信息是非常巨大的。

所需要编辑和支撑的工具软件

由于我才用python来作为后台语言，所以必须要用Python的支持

以下是支持清单：

1.Python

2.x

2.Mysql-connector-python（Python第三方库）

3.Jinja2（Python第三方库）

4.Mysql（提供数据库支持）

5.浏览器（推荐谷歌等浏览器）

因为Python跨平台性好，所以我对系统要求不高，如果实在Linux系统上搭建服务器的话，最好有phpmyadmin来管理数据库

我的编程软件分别为sublime 2和PyCharm

前者我用来写前端网页，后者我用来Python代码，在本机测试的时候，使用自建服务器通过浏览器访问localhost:9000

软件安装后的路径结果

Python及第三方库：C:\Python27

Mysql：C:\Program Files\MySQL

数据库设计

数据库ER图：

数据库脚本：

-- schema.sql

drop database if exists qxx;

create database qxx;

use qxx;

create table users (

`id` varchar(50) not null,

`email` varchar(50) not null,

`password` varchar(50) not null,

`admin` bool not null,

`name` varchar(50) not null,

`image` varchar(500) not null,

`created_at` real not null,

unique key `idx_email` (`email`),

key `idx_created_at` (`created_at`), primary key (`id`)

) engine=innodb default charset=utf8;

create table blogs (

`id` varchar(50) not null,

`user_id` varchar(50) not null,

`user_name` varchar(50) not null,

`user_image` varchar(500) not null,

`name` varchar(50) not null,

`summary` varchar(200) not null,

`content` mediumtext not null,

`created_at` real not null,

key `idx_created_at` (`created_at`),

primary key (`id`)

) engine=innodb default charset=utf8;

create table comments (

`id` varchar(50) not null,

`blog_id` varchar(50) not null,

`user_id` varchar(50) not null,

`user_name` varchar(50) not null,

`user_image` varchar(500) not null,

`content` mediumtext not null,

`created_at` real not null,

key `idx_created_at` (`created_at`),

primary key (`id`)

) engine=innodb default charset=utf8;

网站主目录的结构说明

我建立了如下目录结构

Blog/ <---------根目录

|

+- static/ <--------存放静态文件

| |

| +-css/ <--------存放CSS样式文件| |

| +-fonts/ <---------存放字体文件

| |

| +-js/ <--------存放js文件

| |

+-templates/ <---------存放模版文件

| |

+-transwarp/ <---------存放底层py文件

网站首页设计

网站的首页地址是ip:端口号/

当访问这个地址是就会进入如图所示的页面了，这便是我的博客的首页了。这里展示的是每一篇博文的主题和摘要，图中有能看到的是三篇博文，主题分别是“学号是04122071”、“实验”、“Web大作业”，这是首页的主体部分。在首页的右边，可以看到两名同班同学博客的友情链接，通过友情链接可以访问“常宫小戎”、“刘漫玉”的个人博客。首页上部管理区，可以进入到博客的管理页面。

基于页面的数据录入和操作页面说明

数据录入：

我的站点数据录入有两张方式，一种是注册帐号，一种是发表博问和评论首先是注册帐号，我的帐号是管理员，拥有的权限最高，当然，只能我有，所以在建立数据库的时候，就在数据库中直接写入了。游客（看我博客的人）过来，只能注册普通账户，不能发表博文，只能评论和查看博客。

例如：

这个页面就注册了帐号是：quxiangxuanqxx@https://www.360docs.net/doc/b712908756.html,名字为：瞿祥轩

可以查看数据库：

可以看到此账户信息已经保存到数据库中了，可以发现，密码采用了MD5的加密，同样的，这个帐号也可以登录：

帐号密码输入成功后，就进入首页，不过在下图中标注的位置，已经是注册时的名字了

接下来是发表博文和评论：

可以先看游客账户发布评论，首先点击继续阅读，就能查看本博文的详细内容：

输入内容后，点击发表评论，就可以了，然后查看数据库：

内容已经在数据库中了，网页上也显示出来了。

再看撰写博文，下图是页面：

填入标题，摘要和内容就能发表了，在首页中，我提前写好了三篇博文，在页面已经展示出来了，而在数据库中，如下图，也是正确的：

此上是数据录入的部分；

对于操作页面，只有管理员可以查看：

管理页面中，有三项，可以对评论、日志和用户进行管理，来试着删除一篇博文：

如上图，页面上显示已经删除了，下图中，数据库也已经删除成功了：

评论的模式和日志差不多，便不再赘述了。

参考资料

《Python开发实战》人民邮电出版社/BePROUD股份有限公司著《HTML教程》https://www.360docs.net/doc/b712908756.html,/html/html-tutorial.html 《CSS教程》https://www.360docs.net/doc/b712908756.html,/css/css-tutorial.html 《JavaScript教程》https://www.360docs.net/doc/b712908756.html,/js/js-tutorial.html 《jQuery教程》https://www.360docs.net/doc/b712908756.html,/jquery/jquery-tutorial.html 《AJAX 教程》https://www.360docs.net/doc/b712908756.html,/ajax/ajax-intro.html

《配色教程》https://www.360docs.net/doc/b712908756.html,/

西安邮电大学计算机学院WEB开发技术大作业成绩鉴定表