关爱流浪猫狗网页设计与制作【字数:7916】
目录
1绪论1
1.1课题背景 1
1.2目的和意义 1
2相关技术说明2
2.1开发平台及工具说明2
2.1.1 php概述^2
2.1.2 JavaScript、jQuery概述2
2.1.3 Bootstrap概述2
2.1.4 数据库概述2
2.2开发环境的选择2
2.3 富文本编辑器简介3
3设计方案及功能概述4
3.1数据库设计4
3.2整体模块说明7
3.3网站功能概述8
3.4网站页面设计9
4系统功能实现11
4.1数据连接概述11
4.2注册登录界面11
4.3用户浏览界面16
4.4管理员模块18
4.5响应式页面展示24
结束语25
参考文献26
致谢271绪论
1.1课题背景
流浪猫狗在街上、小区中、学校里等地方都能看到,对城市建设,人民生活带来了很多影响,大家都希望关爱到这些流浪猫狗,解决它们的住所难题,社会上有各类社会公益活动,对这些流浪猫狗的进行关爱救助,但这些远远不够。因此,需要制作流浪 *51今日免费论文网|www.jxszl.com +Q: *351916072*
猫狗的网站,来让更多人了解他们,有平台关爱帮助它们。
1.2 目的和意义
通过浏览网站,宣传流浪猫狗需要救助的信息,让人们深入了解流浪猫狗,从而伸出手关爱救助这些流浪猫狗。对流浪猫狗而言,他们多了一种被发现的方式,人们可以及时 救助他们想要救助的猫狗,缩短了距离;对人们而言,节省了时间,可以在网站上了解猫狗的新动态,或者发布知晓的流浪猫狗信息,让救助站有效的救助。
流浪猫狗网站打破了传统救助猫狗的形式,用户可以在线留言、发贴、申请收养猫狗、浏览流浪猫狗救助信息,能够及时的与救助站进行沟通。因此发展网站式宣传是非常必要的,能让更多人足不出户便可关爱救助流浪猫狗。
2相关技术说明
2.1开发平台及工具的说明
2.1.1 php概述
多用途脚本语言php被广泛应用,它具有免费开源,html内嵌式等特点,适合web开发。php具备很多优势,好用易学,可拓展性高,跨平台应用,支持多种数据库,功能非常全面如图形处理,session和cookie操作等。[2]
2.1.2 JavaScript、jQuery概述
js语法与java很像,不用先进行编译,也不用严格变量声明,它提供大量预编制对象程序,只要编写少量程序,就能开发一个满足需求的脚本,并且它用途广,与其他语言交互性好,可以把JavaScript嵌入到html中,也可以在html中直接调用独立的js文件,来实现动态功能。
jquery相比于js,代码更加简洁,模式设计的很简单,可以对html文档进行优化操作,css选择器灵活效果好,插件丰富多样并且拓展机制便捷,能够适应各种浏览器等,提升程序库的性能,比js查询速度快。另外用它设计的网站动画效果好,简化修改网页内容.
2.1.3 Bootstrap概述
使用bootstrap响应式的布局可以使网页适应各类设备,它是一款前端开发框架,提供了各种丰富的web组件,由动态css和less样式语言写成,在http://www.bootcss.com上可以下载使用。Jquery为他提供基础组件,它有很多jqurey插件。
2.1.4 数据库概述
mysql数据库建表分类明确,全面高效,存储速度快,灵活性高,MySQL 对 PHP 有很好的支持,此外还有其他各种语言编写的界面,mysql数据库可以随时导入导出使用,方便快捷的共享。
2.2开发环境的选择
猫狗网站后台建设要搭建WampServer集成开发环境,wampsever启动快,可以重启或者切换离线状态,只有启动后才能运行网页文件,可以看到紫红色图标变成绿色,进入php admin就可以添加数据库,将数据库中的数据显示在前端网页界面上。
2.3 富文本编辑器简介
富文本编辑器有很多,在这次此项目中选择了UEditor编辑器,它有开源、可定制、便捷等特点。在网站中经常会出现输入文字的文本框,用富文本编辑器可以改变文字样式,设置背景,添加视频图片等等,可以自由选择或者删去上面的功能,简单便捷。使用ueditor,不仅使网页更加美观整洁,也方便了图片的上传,文字的格式修改。
3设计方案及功能概述
3.1数据库设计
3.1.1数据库的概念结构设计
数据库是基于要实现的功能所要设计的,需要建立一个数据库关系模型,用来存储大量的数据信息,这样当我们浏览页面时,就没有必要了为页面一个一个添加数据,可以从数据库中直接调用,从而提高了效率。数据库还提供了添加,删除,修改等功能,可以及时修改信息,方便网站快速找到自己想要的信息,而不用在代码中查找。数据库中信息表的每个部分根据一定的关系分类输入,数据类型,长度等问题都需要考虑到,最后制作出一个一个分类明确的表。根据需求分析,本系统包括以下几个实体。
(1)用户内容ER图,如图31所示:
图31用户信息ER图
(2)流浪猫狗新闻内容ER图,如图32所示:
图32新闻信息实体ER图,
(3)猫狗趣事分享ER图,如图33所示:
图33猫狗趣事实体ER图
(4)流浪猫狗领养帖ER图,如图34所示:
图34 领养帖实体ER图
原文链接:http://www.jxszl.com/ysl/szmt/559465.html