水果百科网站的设计与实现

摘  要：水果百科网站的设计与实现，它是根据有关水果的基本资料和相关的行业资料来进行分类制作相关网页，在网页的制作方面，全面的考虑了页面的色彩，页面的结构，充分的应用了图片、文字、表格、图层等等元素。网站的主体明确，层次清楚，达到了自己预期所想要的功能。

    水果百科网站的开发主要采用了div+css开发技术设计网站的主体排版，有网站首页、水果百科页、行业展会、行业资讯以及各个页面的内容详细页等页面。使用了一些图片的处理工具来制作了页面要用到的相关图片，另外分别运用java script和jQuery技术来实现页面所要使用的动态效果。除了这些之外，制作中还运用了vue.js和java.js技术来动态的获取了页面所要的相关内容，能让自己在后期能更好的维护和修改自己的网站样式。

关键词：水果百科网站  div+css java script  jQuery  vue.js  java.js 

目 录

1 引言 1

1.1 水果百科网站的开发背景 1

1.2 水果百科网站的意义与设计目的 1

2 开发工具及环境介绍 2

2.1 水果百科网站的开发环境 2

2.2 本项目应用的主要开发工具 2

2.2.1 Sublime Text 3 2

2.2.2 Adobe Photoshop CS6 (64 Bit) 3

2.2.3 Microsoft Office Word 2003 3

2.3 本项目应用的主要开发技术 4

2.3.1 DIV+CSS 4

2.3.2 java script 4

2.3.3 jQuery 5

2.3.4 VUE.JS 5

3 项目概述 7

3.1 项目概述 7

3.2 项目风险 7

3.3 项目进度计划 8

4 项目需求分析 9

4.1 业务分析 9

4.1.1 业务工作角色分析 9

4.2 概要设计 9

4.2.1 网站结构图 9

4.2.2 网站概要设计说明 10

4.3 现行研究存在的问题及解决办法 12

5 数据库设计 13

5.1 数据库结构 13

5.2 数据库表 13

5.3 数据库设计命名规范 14

6 网站实现 15

6.1 网站界面设计与布局 15

6.1.1 首页 15

6.1.2 页面轮播效果 16

6.1.3 内容页 18

6.1.4 内容详细页 20

6.2 说明 21

6.2.1 项目文件命名规范 21

6.2.2 项目文件结构说明 21

7 测试 22

7.1 测试 22

7.2 测试例子及其结果 23

7.2.1 页面效果测试 23

7.2.2 java添加测试 23

8 总结与展望 25

致谢 26

参考文献 27