胖胖零食网站前端设计

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

网站开发采用了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 Text3

2.2.2 Adobe Photoshop CC 20173

2.2.3 Adobe Dreamweaver CC 20174

2.2.4 Google Chrome5

2.2.5 SQLyog5

2.2.6 XMind ZEN6

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

2.3.1 DIV+CSS6

2.3.2 java script6

2.3.3 Vue.js7

2.3.4 PHP7

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