html5的响应式美食在线的设计与实现
摘 要随着移动互联网的发展，美食类应用大行其道。与此同时，一款能够真正的满足用户最根本的需求，专注于精品美食的分享，让用户能更方便快捷地找到自己感兴趣的并且可信任的美食及其餐厅信息的美食应用，对于美食爱好者来说尤为具有吸引力。 本课题是基于HTML5的在线的美食应用，并针对性的实现离线资源缓存。作为响应式的应用，该课题使用了Bootstrap移动设备优先的前端开发框架。同时，在设计上，应用尽量满足UI设计原则要求。该应用实现主要功能就是美食的分享，主要包括品质店铺的推荐，美食分享页，具体详情页，视频节目、潮流好店等的链接介绍等。成果表明，该美食分享应用了实现一个界面简洁，功能具体，操作方便等要求。
目 录
第一章 绪论 1
1.1 课题背景 1
1.2 目的和意义 1
1.3 设计思路 1
第二章 相关技术介绍 2
2.1 HTML5技术概述 2
2.2 HTML5数据持久化技术的介绍 2
2.3 Bootstrap技术概述 3
第三章 前端分析与设计 5
3.1 总体设计需求 5
3.2 前端整体框架设计 5
3.3 模块应用的产品设计 5
3.3.1 原型设计 5
3.3.2 交互设计 8
3.4 离线缓存的设计思路 9
第四章 前端实现 10
4.1 页面重构 10
4.1.1 页面结构实现 10
4.1.2 页面样式实现 11
4.2 具体实现 12
4.2.1 首页的实现 12
4.2.2 分类页面的实现 14
4.2.3 美食具体详情页实现 16
4.2.4 专题具体详情页实现 17
4.2.5 离线缓存的实现 20
结束语 21
致 谢 22
绪论
课题背景
据《2015中国餐饮业年度报告》显示，随着互联网+的深入和移动互联网的发展，餐饮业正积极拥抱互联网，而以团够，优惠为主的美团，大众点评以及以美食社交为主的下厨房等菜
*好棒文|www.hbsrm.com +Q: #351916072#
谱应用，更是收到了追捧。但是报告同样指出了我国餐饮行业从高大上转向小而美。高端消费的走低，取而代之的是对团购的钟爱。但是纵观这些市场上的美食类APP(Application, APP)，虽然有些开始有美食指南开始，但随着功能的增加，真正做到美食分享，推荐的应用却越来越少。
就目前的美食APP应用而言，它们的功能十分相似，除了简单的罗列以区域为划分的餐厅信息外，就是通过一些美食攻略为用户提供相应的信息，而且点评信息以及推荐的餐厅介绍只是绝大部分用户在积分优惠等条件下的完成的，不能详细的介绍，基本难以满足用户对美食品质追求的需求。因此，在产品力上，美食应用在分享，推荐上必须要有所革新才是。
目的和意义
一个专注于美食分享的应用，通过以下两种方式：一是通过编辑推荐，保证精品。可以是编辑亲自到店体验所写，也可以是通过挑选用户分享的精品内容的方式来完成分享。二是用户推荐，保证可信。这样的设计不仅标准化也更人性化。同样，该应用同时具备各国的专题或者时间的专题，来为这些特殊的场景同样提供美食店的推荐和视频攻略推荐，以及具体店铺的信息以及网页链接等。做到以上功能的美食应用可以给真正需要高品质推荐的用户有更好的选择。
设计思路
以美食分享为主线，通过线上已有的各类美食应用以及通过网络搜索公共论坛上有关美食应用的想法以及评价，确定可行性的同时，确定该课题的主要需求功能：
第一、基于HTML5，设计与实现响应式在线应用的离线资源缓存，在线状态检测以及本地数据存储；
第二、通过编辑编辑实现应用对美食的分享，好货的购物链接以及专题的分类分享推荐；
第三、应用同样实现轮转的贴士，美食的分类以及错误页面的响应，使该应用更加的人性化和专业化。
相关技术介绍
HTML5技术概述
HTML5是最新一代的HTML标准，它不仅拥有HTML中所有的特性，而且增加了许多实用的特性，如视频、音频、画布（canvas）等。2012年12月17日，万维网联盟（W3C）正式宣布凝聚了网络工作者努力的HTML5规范已经正式定稿发布。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”
HTML5作为HTML标准，可以用它来实现之前HTML可以实现的功能，除此之外，还可以用HTML5做以下特别的事情：
实现多媒体更加简单
可以利用HTML5的
目 录
第一章 绪论 1
1.1 课题背景 1
1.2 目的和意义 1
1.3 设计思路 1
第二章 相关技术介绍 2
2.1 HTML5技术概述 2
2.2 HTML5数据持久化技术的介绍 2
2.3 Bootstrap技术概述 3
第三章 前端分析与设计 5
3.1 总体设计需求 5
3.2 前端整体框架设计 5
3.3 模块应用的产品设计 5
3.3.1 原型设计 5
3.3.2 交互设计 8
3.4 离线缓存的设计思路 9
第四章 前端实现 10
4.1 页面重构 10
4.1.1 页面结构实现 10
4.1.2 页面样式实现 11
4.2 具体实现 12
4.2.1 首页的实现 12
4.2.2 分类页面的实现 14
4.2.3 美食具体详情页实现 16
4.2.4 专题具体详情页实现 17
4.2.5 离线缓存的实现 20
结束语 21
致 谢 22
绪论
课题背景
据《2015中国餐饮业年度报告》显示，随着互联网+的深入和移动互联网的发展，餐饮业正积极拥抱互联网，而以团够，优惠为主的美团，大众点评以及以美食社交为主的下厨房等菜
*好棒文|www.hbsrm.com +Q: #351916072#
谱应用，更是收到了追捧。但是报告同样指出了我国餐饮行业从高大上转向小而美。高端消费的走低，取而代之的是对团购的钟爱。但是纵观这些市场上的美食类APP(Application, APP)，虽然有些开始有美食指南开始，但随着功能的增加，真正做到美食分享，推荐的应用却越来越少。
就目前的美食APP应用而言，它们的功能十分相似，除了简单的罗列以区域为划分的餐厅信息外，就是通过一些美食攻略为用户提供相应的信息，而且点评信息以及推荐的餐厅介绍只是绝大部分用户在积分优惠等条件下的完成的，不能详细的介绍，基本难以满足用户对美食品质追求的需求。因此，在产品力上，美食应用在分享，推荐上必须要有所革新才是。
目的和意义
一个专注于美食分享的应用，通过以下两种方式：一是通过编辑推荐，保证精品。可以是编辑亲自到店体验所写，也可以是通过挑选用户分享的精品内容的方式来完成分享。二是用户推荐，保证可信。这样的设计不仅标准化也更人性化。同样，该应用同时具备各国的专题或者时间的专题，来为这些特殊的场景同样提供美食店的推荐和视频攻略推荐，以及具体店铺的信息以及网页链接等。做到以上功能的美食应用可以给真正需要高品质推荐的用户有更好的选择。
设计思路
以美食分享为主线，通过线上已有的各类美食应用以及通过网络搜索公共论坛上有关美食应用的想法以及评价，确定可行性的同时，确定该课题的主要需求功能：
第一、基于HTML5，设计与实现响应式在线应用的离线资源缓存，在线状态检测以及本地数据存储；
第二、通过编辑编辑实现应用对美食的分享，好货的购物链接以及专题的分类分享推荐；
第三、应用同样实现轮转的贴士，美食的分类以及错误页面的响应，使该应用更加的人性化和专业化。
相关技术介绍
HTML5技术概述
HTML5是最新一代的HTML标准，它不仅拥有HTML中所有的特性，而且增加了许多实用的特性，如视频、音频、画布（canvas）等。2012年12月17日，万维网联盟（W3C）正式宣布凝聚了网络工作者努力的HTML5规范已经正式定稿发布。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”
HTML5作为HTML标准，可以用它来实现之前HTML可以实现的功能，除此之外，还可以用HTML5做以下特别的事情：
实现多媒体更加简单
可以利用HTML5的
