西安邮电大学web大作业报告.docx
《西安邮电大学web大作业报告.docx》由会员分享，可在线阅读，更多相关《西安邮电大学web大作业报告.docx（14页珍藏版）》请在冰豆网上搜索。
西安邮电大学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框架之后，就得针对WebApp进行api的设计，这里采用REST的方式来设计API，使用的数据格式是JSON，这样就能直接被JS获取，然后我就能把数据进行封装，来完成数据传输。
接下来该设计的就是数据库的连接，底层模块设计的原则是，根据上层调用者设计简单易用的API接口，然后，实现模块内部代码。
所以，设计一个db模块，来作为数据库连接的引擎，连接上数据库后，我能使用SQL语句对数据库进行操作，为了避免SQL注入攻击，把SQL中不用的字符作为占位符。
完成底层数据库db模块后，就是设计orm模块的时候，因为使用SQL语句来操作数据库还是有些不方便，所以将SQL语句换为更为简单的API来给上层操作使用。
有了orm模块后，上层模块model就能将数据库需要的表表示出来了。
不过，我要提前用SQL脚本初始化数据库，以便调试。
设计和风格说明
我的设计风格以扁平化和简约为主，不多加太多的修饰，让人能一下子抓住重点。
背景以白色为主色（不是纯白），这样子字的颜色选用黑色会显得比较显目，而且白色搭配蓝色我觉得也是一种类似于地中海风格的搭配，总之能让人觉得很是舒服。
为了能让错误提示更加美观，我采用了Ajax技术，这样子，在输入不合法的时候就不会重新加载页面了。
对于图标的选用，我也采取当下流行的扁平化的风格，这样的图标虽然简单，但是能传达的信息是非常巨大的。
所需要编辑和支撑的工具软件
由于我才用python来作为后台语言，所以必须要用Python的支持
以下是支持清单：
1.Python2.x
2.Mysql-connector-python（Python第三方库）
3.Jinja2（Python第三方库）
4.Mysql（提供数据库支持）
5.浏览器（推荐谷歌等浏览器）
因为Python跨平台性好，所以我对系统要求不高，如果实在Linux系统上搭建服务器的话，最好有phpmyadmin来管理数据库
我的编程软件分别为sublime2和PyCharm
前者我用来写前端网页，后者我用来Python代码，在本机测试的时候，使用自建服务器通过浏览器访问localhost:
9000
软件安装后的路径结果
Python及第三方库：
C:
\Python27
Mysql：
C:
\ProgramFiles\MySQL
数据库设计
数据库ER图：
数据库脚本：
--schema.sql
dropdatabaseifexistsqxx;
createdatabaseqxx;
useqxx;
createtableusers（
`id`varchar（50）notnull,
`email`varchar（50）notnull,
`password`varchar（50）notnull,
`admin`boolnotnull,
`name`varchar（50）notnull,
`image`varchar（500）notnull,
`created_at`realnotnull,
uniquekey`idx_email`（`email`）,
key`idx_created_at`（`created_at`）,
primarykey（`id`）
）engine=innodbdefaultcharset=utf8;
createtableblogs（
`id`varchar（50）notnull,
`user_id`varchar（50）notnull,
`user_name`varchar（50）notnull,
`user_image`varchar（500）notnull,
`name`varchar（50）notnull,
`summary`varchar（200）notnull,
`content`mediumtextnotnull,
`created_at`realnotnull,
key`idx_created_at`（`created_at`）,
primarykey（`id`）
）engine=innodbdefaultcharset=utf8;
createtablecomments（
`id`varchar（50）notnull,
`blog_id`varchar（50）notnull,
`user_id`varchar（50）notnull,
`user_name`varchar（50）notnull,
`user_image`varchar（500）notnull,
`content`mediumtextnotnull,
`created_at`realnotnull,
key`idx_created_at`（`created_at`）,
primarykey（`id`）
）engine=innodbdefaultcharset=utf8;
网站主目录的结构说明
我建立了如下目录结构
Blog/<---------根目录
|
+-static/<--------存放静态文件
||
|+-css/<--------存放CSS样式文件
||
|+-fonts/<---------存放字体文件
||
|+-js/<--------存放js文件
||
+-templates/<---------存放模版文件
||
+-transwarp/<---------存放底层py文件
网站首页设计
网站的首页地址是ip:
端口号/
当访问这个地址是就会进入如图所示的页面了，这便是我的博客的首页了。
这里展示的是每一篇博文的主题和摘要，图中有能看到的是三篇博文，主题分别是“学号是04122071”、“实验”、“Web大作业”，这是首页的主体部分。
在首页的右边，可以看到两名同班同学博客的友情链接，通过友情链接可以访问“常宫小戎”、“刘漫玉”的个人博客。
首页上部管理区，可以进入到博客的管理页面。
基于页面的数据录入和操作页面说明
数据录入：
我的站点数据录入有两张方式，一种是注册帐号，一种是发表博问和评论
首先是注册帐号，我的帐号是管理员，拥有的权限最高，当然，只能我有，所以在建立数据库的时候，就在数据库中直接写入了。
游客（看我博客的人）过来，只能注册普通账户，不能发表博文，只能评论和查看博客。
例如：
这个页面就注册了帐号是：
quxiangxuanqxx@名字为：
瞿祥轩
可以查看数据库：
可以看到此账户信息已经保存到数据库中了，可以发现，密码采用了MD5的加密，同样的，这个帐号也可以登录：
帐号密码输入成功后，就进入首页，不过在下图中标注的位置，已经是注册时的名字了
接下来是发表博文和评论：
可以先看游客账户发布评论，首先点击继续阅读，就能查看本博文的详细内容：
输入内容后，点击发表评论，就可以了，然后查看数据库：
内容已经在数据库中了，网页上也显示出来了。
再看撰写博文，下图是页面：
填入标题，摘要和内容就能发表了，在首页中，我提前写好了三篇博文，在页面已经展示出来了，而在数据库中，如下图，也是正确的：
此上是数据录入的部分；
对于操作页面，只有管理员可以查看：
管理页面中，有三项，可以对评论、日志和用户进行管理，来试着删除一篇博文：
如上图，页面上显示已经删除了，下图中，数据库也已经删除成功了：
评论的模式和日志差不多，便不再赘述了。
参考资料
《Python开发实战》人民邮电出版社/BePROUD股份有限公司著
《HTML教程》http:
//www.w3cschool.cc/html/html-tutorial.html
《CSS教程》http:
//www.w3cschool.cc/css/css-tutorial.html
《JavaScript教程》http:
//www.w3cschool.cc/js/js-tutorial.html
《jQuery教程》http:
//www.w3cschool.cc/jquery/jquery-tutorial.html
《AJAX教程》http:
//www.w3cschool.cc/ajax/ajax-intro.html
《配色教程》
西安邮电大学计算机学院
WEB开发技术大作业成绩鉴定表
学生姓名
瞿祥轩
班级/学号
网工
1203/04122071
提交时间
2014年12月19日
成绩鉴定
学习态度（20分）
平时考勤（10分）
学习纪律（10分）
设计效果（40分）
创新性（10分）
功能完整性（10分）
系统稳定性（10分）
界面友好性（10分）
报告鉴定
（40分）
前期准备和调研，资料查阅与分析（10分）
系统设计方案（10分）
报告质量（主题、结构、观点、逻辑、资料、字数）（10分）
认识总结（10分）
评阅教师姓名
朱辉
职称
讲师
成绩
评语
该同学WEB开发技术大作业题目《瞿祥轩的个人博客》，经过前期准备和调研，设计并实现了管理员系统、后台内容发布、登录\注册、评论等多项功能，功能完整，系统稳定，运行结果很好。
其中的创新点：
使用了jQuery、Ajax等技术，使用Python进行模块化网站构建。
大作业主题明确，结构完整，观点明确，逻辑合理，资料完善，字数适中。
对课程的认识为良好。
评阅教师签字
年月日
升级会员 