移动web前端学习-HTML5常用特性部分-离线随手记的构建

186人阅读 评论(1) 收藏 举报

在上一篇文章中我们简单搭建了一个node.js的后台,为的其实就是验证离线缓存application cache和serviceWorker

首先是applicationCache

   我们在项目测试包中创建一个文件:offline.manifest

CACHE MANIFEST   
#cache之后的资源都会被缓存  
ApplicationcacheDemo.html
css/mui.min.css
js/mui.min.js  
#network之后资源不会被缓存,总是从线上获取
NETWORK:  
#FALLBACK是如果无法建立因特网连接,则用 "404.html" 替代 /html5/ 目录中的所有文件
FALLBACK:   
/测试项目包/ /file/error404.html

然后创建ApplicationcacheDemo.html

<!DOCTYPE html>
<html manifest="offline.manifest">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" href="css/mui.min.css" />
		<!--去除favicon.ico请求-->
		<link rel="shortcut icon" href="#" />
	</head>
	<body>
		<div>			
			<p id="content" contenteditable="true">随手记</p>
		</div>
		<script src="js/mui.min.js"></script>
		<script>
			mui.init();
			//获取记录内容的文本域
			var el = document.getElementById("content");
			el.addEventListener('blur',function(){
				//获取文本域的内容
				var data = el.innerText;
				if(navigator.onLine){
					//将内容保存到服务器
					saveOnline(data);
				}else{
					localStorage.setItem('data',data);
				}
				
			});
			//监听上线事件
			window.onLine = function(){
				//从本地获取数据
				var data = localStorage.getItem('data');
				if(!!!data){
					//如果数据存在,则保存到服务器
					saveOnline(data);
					//同时清空本地缓存
					localStorage.removeItem('data');
				}
			}
			function saveOnline(data){
				var xhr = new XMLHttpRequest();
				//定义请求响应的回调,每次readyState变化都会执行
				xhr.onreadystatechange = function() {
					if(xhr.readyState == 4) {
						if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
							mui.alert(xhr.responseText);
						} else {
							mui.alert("Request was unsuccessful " + xhr.status);
						}
					}
				};
				xhr.open('POST','http://127.0.0.1:3000');
				xhr.send('data =' + data);				
			}
		</script>
	</body>
	
</html>

接下来就是3000请求的server构建    server.js

//获取mime模块
var mime = require("mime");
var http = require('http');
var fs = require("fs");
var querystring = require('querystring');
http.createServer(function(req, res, filePath) {
	//解决跨域
	res.setHeader('Access-Control-Allow-Origin', '*');
	// 定义了一个post变量,用于暂存请求体的信息
	var body = "";
	// 通过req的data事件监听函数,每当接受到请求体的数据,就累加到post变量中
	req.on('data', function(chunk) {
		body += chunk;
	});
	req.on('end', function() {
		// 解析参数
		body = querystring.parse(body);
		// 设置响应头部信息及编码
		res.writeHead(200, {
			'Content-type': mime.getType(filePath)
		});
		//将请求内容写入文件
		console.log("准备写入文件");
		fs.writeFile('input.txt', JSON.stringify(body), function(err) {
			if(err) {
				return console.error(err);
			}
			fs.readFile('input.txt', function(err, data) {
				if(err) {
					return console.error(err);
				}
				res.end(data.toString());
			});
		});
	});
}).listen(3000, function() {
	console.log("服务器启动");
});

然后shift+右键->node server.js

然后浏览器运行一下这个页面,可以在Chrome中的application中找到这些缓存,然后可以试试offline的效果,同时对比其他没有缓存的页面的效果。


查看评论

2002年考研必读

2002年考研必读   (一)报考条件:   (1)政治条件:拥护中国共产党的领导,愿为社会主义现代化建设服务,热爱祖国,遵纪守法,品德良好。   (2)学历条件:高等学校(指普通高等学校和国家承认本...
  • stanely
  • stanely
  • 2001-06-04 21:52:00
  • 567

妙用HTML5的八大特性来开发移动webAPP

webAPP的实现基础就是html5+js+css3.但是webAPP还是基于浏览器的微网站开发。正是如此,我们必须要深入的了解html5的特性,这样才能方便我们在开发和设计APP的时候,更合理的采用...
  • houerfei
  • houerfei
  • 2015-03-31 19:51:20
  • 951

妙用html5的八大特性来开发移动webAPP

webAPP的实现基础就是html5+js+css3.但是webAPP还是基于浏览器的微网站开发。        正式如此,我们必须要深入的了解html5的8大特性,这样才能方便我们...
  • vuturn
  • vuturn
  • 2015-03-31 16:45:26
  • 1726

SQL语言学习随手记——alter table

alter table  1.更改字段的类型:alter table  表名 modify(字段名 字段类型); alter table student modify(age char(10)); 2...
  • Ring1303
  • Ring1303
  • 2017-11-02 09:29:54
  • 87

SQL语言学习随手记——显示clob字段的内容

显示clob字段的内容 dbms_lob.substr(clob字段名),就可以显示clob字段的内容 select id,age,dbms_lob.substr(s_clob) ...
  • Ring1303
  • Ring1303
  • 2018-03-16 13:40:40
  • 18

SQL语言学习随手记——numeric、char、varchar、nvarchar字段类型

数据类型
  • Ring1303
  • Ring1303
  • 2017-10-27 09:22:54
  • 63

[随手记经验] 【转载】其实你不懂记账

这些问题你都能立马回答出来吗?  1、你的资产负债率是多少?  2、你的收支结余比例是多少?  3、上个月结余的钱都放在什么地方了?  4、目前你手上有多少可动用资金?  5、你的股票、基金等投资收益...
  • fishmai
  • fishmai
  • 2016-09-01 12:58:02
  • 1370

随手记图表

先来看下随手记的效果图:   怎么样很炫吧?而且手指可以将饼图任意的转动哦。当时看到的时候,就眼睛一亮,很想自己实现。现在,就再来看看俺实现的效果,虽然实现了一样的功能,但是感觉颜...
  • JerryWu145
  • JerryWu145
  • 2016-07-12 09:58:06
  • 722

随手记源代码

  • 2013年12月30日 09:32
  • 5KB
  • 下载

项目例子——随手记

介绍:          随手记可以手机记账,在线理财,上随手记网站,你可以更方便的去发现自己的财务漏洞。随手记,记账方便!生活场景设计,左手拿满东西,右手大拇指也能记完账。这次我们分享的是随手记的...
  • MYBOYER
  • MYBOYER
  • 2013-05-21 08:27:44
  • 972
    个人资料
    等级:
    访问量: 0
    积分: 42
    排名: 0
    文章分类
    文章存档