胖胖零食网站前端设

摘  要：零食不仅可以充当充饥的小帮手，还可以帮助放松身心使紧张兴奋情绪得到抑制，最终使身心得以放松。而消费者需求的日益多元化和个性化，对休闲食品的口味要求越来越高，单一化口味的小品类休闲食品将难以满足多样化的消费需求。而零食网站可以让现代的人们更加轻松、快捷的选择符合自己口味的零食产品。还可以满足我们在想吃零食的同时包含的想要小小的偷个懒的心愿。

网站开发采用了div+css开发技术，有网站首页、登录页、商品信息展示页、用户留言、后台管理等页面，界面设计以橙色为主，是暖色系中最温暖的色，它使人联想到金色的秋天，丰硕的果实，是一种富足、快乐而幸福的颜色。网站版块多以排列的商品框为主，紧贴网站主题。布局简约舒适，让生活去除复杂，找回空间本质的乐趣纯净并且宁静。网站结合Sql server数据库的使用完成了用户登录、后台管理等功能。

关键词：div+css 零食网站 java script

目 录

1 引言 1

1.1 零食网站的开发背景 1

1.2 零食网站的意义与设计目的 1

2 开发工具及环境介绍 2

2.1 零食网站的开发环境 2

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

2.2.1 Sublime Text 3

2.2.2 Adobe Photoshop CC 2017 3

2.2.3 Adobe Dreamweaver CC 2017 4

2.2.4 Google Chrome 5

2.2.5 SQLyog 5

2.2.6 XMind ZEN 6

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

2.3.1 DIV+CSS 6

2.3.2 java script 6

2.3.3 Vue.js 7

2.3.4 PHP 7

3 项目概述 8

3.1 项目概述 8

3.2 项目风险 8

3.3 项目进度计划 9

4 项目需求分析 10

4.1 业务分析 10

4.1.1 业务组织结构 10

4.1.2 业务工作角色分析 10

4.2 概要设计 11

4.2.1 网站结构图 11

4.2.2 网站概要设计说明 12

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

5 数据库设计 13

5.1 数据库结构 13

5.2 数据库表 13

5.3 数据库设计命名规范 14

6 网站实现 16

6.1 网站前台界面设计与布局 16

6.1.1 胖胖零食网站首页 16

6.1.2 用户登录界面 18

6.1.3 管理员登录界面 19

6.1.4 零食详情页 21

6.1.5 留言板 22

6.2 说明 23

6.2.1 项目文件命名规范 23

6.2.2 项目文件结构说明 23

6.3 Web.Config 文件配置 23

7 测试 25

7.1 测试 25

7.2 测试例子及其结果 26

7.2.1 页面效果测试 26

7.2.2 后台添加测试 27

8 总结与展望 28

致谢 29

参考文献 30