西安邮电大学web大作业报告Word文档格式.docx
- 文档编号:21310726
- 上传时间:2023-01-29
- 格式:DOCX
- 页数:14
- 大小:845.79KB
西安邮电大学web大作业报告Word文档格式.docx
《西安邮电大学web大作业报告Word文档格式.docx》由会员分享,可在线阅读,更多相关《西安邮电大学web大作业报告Word文档格式.docx(14页珍藏版)》请在冰豆网上搜索。
网站主题的意义
本次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:
\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(
`user_id`varchar(50)notnull,
`user_name`varchar(50)notnull,
`user_image`varchar(500)notnull,
`summary`varchar(200)notnull,
`content`mediumtextnotnull,
createtablecomments(
`blog_id`varchar(50)notnull,
网站主目录的结构说明
我建立了如下目录结构
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进行模块化网站构建。
大作业主题明确,结构完整,观点明确,逻辑合理,资料完善,字数适中。
对课程的认识为良好。
评阅教师签字
年月日
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 西安 邮电大学 web 作业 报告