|
|
@@ -50,6 +50,7 @@ code > span.er { color: #ff0000; font-weight: bold; }
|
|
|
<li><a href="#介绍"><span class="toc-section-number">0.4</span> 介绍</a><ul>
|
|
|
<li><a href="#为什么没有c"><span class="toc-section-number">0.4.1</span> 为什么没有C ?</a></li>
|
|
|
<li><a href="#为什么不是java"><span class="toc-section-number">0.4.2</span> 为什么不是JAVA ?</a></li>
|
|
|
+<li><a href="#为什么没有android"><span class="toc-section-number">0.4.3</span> 为什么没有Android ？</a></li>
|
|
|
</ul></li>
|
|
|
<li><a href="#如何阅读"><span class="toc-section-number">0.5</span> 如何阅读</a></li>
|
|
|
<li><a href="#无处不在的html"><span class="toc-section-number">1</span> 无处不在的HTML</a><ul>
|
|
|
@@ -237,6 +238,8 @@ code > span.er { color: #ff0000; font-weight: bold; }
|
|
|
<li>JAVA学的人很多，然而不适合我们将主要精力集中于构建与学习，因为无关的代码太多了。</li>
|
|
|
<li>当时以及现在，我还是不喜欢JAVA(ps:更喜欢脚本语言，可以在更少的时候做更多的事)。</li>
|
|
|
</ul>
|
|
|
+<h3 id="为什么没有android"><span class="header-section-number">0.4.3</span> 为什么没有Android ？</h3>
|
|
|
+<p>在IOT的repo中: <a href="https://github.com/gmszone/iot">https://github.com/gmszone/iot</a> 是有Android的示例，然而这些理论不适合在这里讨论。</p>
|
|
|
<h2 id="如何阅读"><span class="header-section-number">0.5</span> 如何阅读</h2>
|
|
|
<p>这是一个简单的建议，仅针对于在选择阅读没有经验的读者。</p>
|
|
|
<table>
|
|
|
@@ -277,20 +280,18 @@ code > span.er { color: #ff0000; font-weight: bold; }
|
|
|
<li><p>然后双击打开这个文件。 正常情况下应该是刚好用你的默认浏览器打开。只要是一个现代的浏览器的话，应该可以看到上面显示的是“Hello,world”。</p></li>
|
|
|
</ol>
|
|
|
<p>这才是最短的hello,world程序，其次呢？ruby中的会是这样子的</p>
|
|
|
-<pre><code class="bash">2.0.0-p353 :001 > p "hello,world"
|
|
|
-"hello,world"
|
|
|
- => "hello,world"
|
|
|
-2.0.0-p353 :002 >
|
|
|
-</code></pre>
|
|
|
-
|
|
|
+<pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">2.0.0-p353</span> :001 <span class="kw">></span> p <span class="st">"hello,world"</span>
|
|
|
+<span class="st">"hello,world"</span>
|
|
|
+ =<span class="kw">></span> <span class="st">"hello,world"</span>
|
|
|
+<span class="kw">2.0.0-p353</span> :002 <span class="kw">></span></code></pre>
|
|
|
<p>等等，如果你了解过html的话，会觉得这一点都不符合语法规则，但是他工作了，没有什么比安装完Nginx后看到It works!更让人激动了。</p>
|
|
|
<p>遗憾的是，它可能无法在所有的浏览器上工作，所以我们需要去调试其中的bug。</p>
|
|
|
<h3 id="调试helloworld"><span class="header-section-number">1.1.1</span> 调试hello,world</h3>
|
|
|
<p>我们会发现我们的代码在浏览器中变成了下面的代码，如果你和我一样用的是chrome，那么你可以右键浏览器中的空白区域，点击审查元素，就会看到下面的代码。</p>
|
|
|
-<pre><code><html>
|
|
|
- <head></head>
|
|
|
- <body>hello,world</body>
|
|
|
-</html></code></pre>
|
|
|
+<pre class="sourceCode html"><code class="sourceCode html"><span class="kw"><html></span>
|
|
|
+ <span class="kw"><head></head></span>
|
|
|
+ <span class="kw"><body></span>hello,world<span class="kw"></body></span>
|
|
|
+<span class="kw"></html></span></code></pre>
|
|
|
<p>这个才是真正能在大部分浏览器上工作的代码，所以复制它到编辑器里吧。</p>
|
|
|
<h3 id="说说helloworld"><span class="header-section-number">1.1.2</span> 说说hello,world</h3>
|
|
|
我很不喜欢其中的<*><!--*-->超文本标记语言
|
|
|
@@ -321,12 +322,13 @@ code > span.er { color: #ff0000; font-weight: bold; }
|
|
|
<p>于是我们看到的结果便是</p>
|
|
|
<pre><code><语言> <头> <身体>你好，世界</code></pre>
|
|
|
<p>被chrome浏览器解析成什么样了？</p>
|
|
|
-<pre><code><html><head></head><body><语言>
|
|
|
- <头><!--头-->
|
|
|
- <身体>你好，世界<!--身体-->
|
|
|
- <!--语言-->
|
|
|
-</body></html> </code></pre>
|
|
|
-<p>以<!–开头，–>结尾的是注释，写给人看的代码，不是给机器看的，所以机器不会去理解这些代码。</p>
|
|
|
+<pre class="sourceCode html"><code class="sourceCode html"><span class="kw"><html><head></head><body></span><span class="er"><</span>语言>
|
|
|
+ <span class="er"><</span>头><span class="co"><!--头--></span>
|
|
|
+ <span class="er"><</span>身体>你好，世界<span class="co"><!--身体--></span>
|
|
|
+ <span class="co"><!--语言--></span>
|
|
|
+<span class="kw"></body></html></span> </code></pre>
|
|
|
+<p>以 <!--开头，--></p>
|
|
|
+<p>结尾的是注释，写给人看的代码，不是给机器看的，所以机器不会去理解这些代码。</p>
|
|
|
<p>但是当我们把代码改成</p>
|
|
|
<pre><code><whatwewanttosay>你好世界</whatwewanttosay></code></pre>
|
|
|
<p>浏览器上面显示的内容就变成了</p>
|
|
|
@@ -352,21 +354,21 @@ code > span.er { color: #ff0000; font-weight: bold; }
|
|
|
<body>hello,world</body>
|
|
|
</html></code></pre>
|
|
|
<p>我们便可以在浏览器的最上方看到“标题”二字，真实世界的淘宝网也包含了上面的东西，只是还包括了更多的东西，所以你也可以看懂那些我们可以看到的淘宝的标题。</p>
|
|
|
-<pre><code><html>
|
|
|
-<head>
|
|
|
- <title>标题</title>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
+<pre class="sourceCode html"><code class="sourceCode html"><span class="kw"><html></span>
|
|
|
+<span class="kw"><head></span>
|
|
|
+ <span class="kw"><title></span>标题<span class="kw"></title></span>
|
|
|
+<span class="kw"></head></span>
|
|
|
+<span class="kw"><body></span>
|
|
|
hello,world
|
|
|
-<h1>大标题</h1>
|
|
|
-<h2>次标题</h2>
|
|
|
-<h3>...</h3>
|
|
|
-<ul>
|
|
|
- <li>列表1</li>
|
|
|
- <li>列表2</li>
|
|
|
-</ul>
|
|
|
-</body>
|
|
|
-</html></code></pre>
|
|
|
+<span class="kw"><h1></span>大标题<span class="kw"></h1></span>
|
|
|
+<span class="kw"><h2></span>次标题<span class="kw"></h2></span>
|
|
|
+<span class="kw"><h3></span>...<span class="kw"></h3></span>
|
|
|
+<span class="kw"><ul></span>
|
|
|
+ <span class="kw"><li></span>列表1<span class="kw"></li></span>
|
|
|
+ <span class="kw"><li></span>列表2<span class="kw"></li></span>
|
|
|
+<span class="kw"></ul></span>
|
|
|
+<span class="kw"></body></span>
|
|
|
+<span class="kw"></html></span></code></pre>
|
|
|
<p>更多的东西可以在一些书籍上看到，这边所要说的只是一次简单的语言入门，其他的东西都和这些类似。</p>
|
|
|
<h3 id="美妙之处"><span class="header-section-number">1.2.1</span> 美妙之处</h3>
|
|
|
<p>我们简单地上手了一门不算是语言的语言，浏览器简化了这其中的大部分过程，虽然没有C和其他语言来得有专业感，但是我们试着去开始写代码了。我们可能在未来的某一篇中可能会看到类似的语言，诸如python，我们所要做的就是</p>
|
|
|
@@ -385,137 +387,112 @@ hello,world
|
|
|
<p>Javascript现在已经无处不在了，也许你正打开的某个网站他可能是node.js+json+javascript+mustache.js完成的，虽然你还没理解上面那些是什么，也正是因为你不理解才需要去学习更多的东西。但是Javascript已经无处不在了，可能会在你手机上的某个app里，在你浏览的网页里，在你IDE中的某个进程中运行的。</p>
|
|
|
<h2 id="javascript的helloworld"><span class="header-section-number">2.1</span> Javascript的Hello,world</h2>
|
|
|
<p>这里我们还需要有一个helloworld.html，Javascript是专为网页交互而设计的脚本语言，所以我们一点点来开始这部分的旅途，先写一个符合标准的helloworld.html</p>
|
|
|
-<pre><code><!DOCTYPE html>
|
|
|
-<html>
|
|
|
- <head></head>
|
|
|
- <body></body>
|
|
|
-</html></code></pre>
|
|
|
+<pre class="sourceCode html"><code class="sourceCode html"><span class="dt"><!DOCTYPE </span>html<span class="dt">></span>
|
|
|
+<span class="kw"><html></span>
|
|
|
+ <span class="kw"><head></head></span>
|
|
|
+ <span class="kw"><body></body></span>
|
|
|
+<span class="kw"></html></span></code></pre>
|
|
|
<p>然后开始融入我们的javascript，向HTML中插入Javascript的方法，就需要用到html中的<script>标签，我们先用页面嵌入的方法来写helloworld。</p>
|
|
|
-<pre><code><!DOCTYPE html>
|
|
|
-<html>
|
|
|
- <head>
|
|
|
- <script>
|
|
|
- document.write('hello,world');
|
|
|
- </script>
|
|
|
- </head>
|
|
|
- <body></body>
|
|
|
-</html></code></pre>
|
|
|
+<pre class="sourceCode html"><code class="sourceCode html"><span class="dt"><!DOCTYPE </span>html<span class="dt">></span>
|
|
|
+<span class="kw"><html></span>
|
|
|
+ <span class="kw"><head></span>
|
|
|
+ <span class="kw"><script></span>
|
|
|
+ <span class="ot">document</span>.<span class="fu">write</span>(<span class="st">'hello,world'</span>);
|
|
|
+ <<span class="ot">/script></span>
|
|
|
+<span class="ot"> </head</span>>
|
|
|
+ <body><<span class="ot">/body></span>
|
|
|
+<span class="ot"></html</span>></code></pre>
|
|
|
<p>按照标准的写法，我们还需要声明这个脚本的类型</p>
|
|
|
-<pre><code><!DOCTYPE html>
|
|
|
-<html>
|
|
|
- <head>
|
|
|
- <script type="text/javascript">
|
|
|
- document.write('hello,world');
|
|
|
- </script>
|
|
|
- </head>
|
|
|
- <body></body>
|
|
|
-</html></code></pre>
|
|
|
+<pre class="sourceCode html"><code class="sourceCode html"><span class="dt"><!DOCTYPE </span>html<span class="dt">></span>
|
|
|
+<span class="kw"><html></span>
|
|
|
+ <span class="kw"><head></span>
|
|
|
+ <span class="kw"><script</span><span class="ot"> type=</span><span class="st">"text/javascript"</span><span class="kw">></span>
|
|
|
+ <span class="ot">document</span>.<span class="fu">write</span>(<span class="st">'hello,world'</span>);
|
|
|
+ <<span class="ot">/script></span>
|
|
|
+<span class="ot"> </head</span>>
|
|
|
+ <body><<span class="ot">/body></span>
|
|
|
+<span class="ot"></html</span>></code></pre>
|
|
|
<p>没有显示hello,world?试试下面的代码</p>
|
|
|
-<pre><code><!DOCTYPE html>
|
|
|
-<html>
|
|
|
- <head>
|
|
|
- <script type="text/javascript">
|
|
|
- document.write('hello,world');
|
|
|
- </script>
|
|
|
- </head>
|
|
|
+<pre class="sourceCode html"><code class="sourceCode html"><span class="dt"><!DOCTYPE </span>html<span class="dt">></span>
|
|
|
+<span class="kw"><html></span>
|
|
|
+ <span class="kw"><head></span>
|
|
|
+ <span class="kw"><script</span><span class="ot"> type=</span><span class="st">"text/javascript"</span><span class="kw">></span>
|
|
|
+ <span class="ot">document</span>.<span class="fu">write</span>(<span class="st">'hello,world'</span>);
|
|
|
+ <<span class="ot">/script></span>
|
|
|
+<span class="ot"> </head</span>>
|
|
|
<body>
|
|
|
<noscript>
|
|
|
disable Javascript
|
|
|
- </noscript>
|
|
|
- </body>
|
|
|
-</html></code></pre>
|
|
|
+ <<span class="ot">/noscript></span>
|
|
|
+<span class="ot"> </body</span>>
|
|
|
+<<span class="ot">/html></span></code></pre>
|
|
|
<h2 id="更js一点"><span class="header-section-number">2.2</span> 更js一点</h2>
|
|
|
<p>我们需要让我们的代码看上去更像是js，同时是以js结尾。C语言的源码但是以C结尾的，所以我们要让我们的代码看上去更正式一点。于是我们需要在helloworld.html的同文件夹下创建一个app.js，里面写着</p>
|
|
|
-<pre><code class="javascript">document.write('hello,world');
|
|
|
-</code></pre>
|
|
|
-
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">document</span>.<span class="fu">write</span>(<span class="st">'hello,world'</span>);</code></pre>
|
|
|
<p>同时我们的helloworld.html还需要告诉我们的浏览器js代码在哪里</p>
|
|
|
-<pre><code><!DOCTYPE html>
|
|
|
-<html>
|
|
|
- <head>
|
|
|
- <script type="text/javascript" src="app.js"></script>
|
|
|
- </head>
|
|
|
- <body>
|
|
|
- <noscript>
|
|
|
+<pre class="sourceCode html"><code class="sourceCode html"><span class="dt"><!DOCTYPE </span>html<span class="dt">></span>
|
|
|
+<span class="kw"><html></span>
|
|
|
+ <span class="kw"><head></span>
|
|
|
+ <span class="kw"><script</span><span class="ot"> type=</span><span class="st">"text/javascript"</span><span class="ot"> src=</span><span class="st">"app.js"</span><span class="kw">></script></span>
|
|
|
+ <span class="kw"></head></span>
|
|
|
+ <span class="kw"><body></span>
|
|
|
+ <span class="kw"><noscript></span>
|
|
|
disable Javascript
|
|
|
- </noscript>
|
|
|
- </body>
|
|
|
-</html></code></pre>
|
|
|
+ <span class="kw"></noscript></span>
|
|
|
+ <span class="kw"></body></span>
|
|
|
+<span class="kw"></html></span></code></pre>
|
|
|
<h3 id="从数学出发"><span class="header-section-number">2.2.1</span> 从数学出发</h3>
|
|
|
<p>让我们回到第一章讲述的小明的问题，<strong>从实际问题下手编程，更容易学会编程</strong>。小学时代的数学题最喜欢这样子了——某商店里的糖一个5块钱，小明买了3个糖，小明一共花了多少钱的问题。在编程方面，也许我们还算是小学生。最直接的方法就是直接计算3x5=?</p>
|
|
|
-<pre><code class="javascript">document.write(3*5);
|
|
|
-</code></pre>
|
|
|
-
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">document</span>.<span class="fu">write</span>(<span class="dv">3</span>*<span class="dv">5</span>);</code></pre>
|
|
|
<p>document.write实际也我们可以理解为输出，也就是往页面里写入3*5的结果，在有双引号的情况下会输出字符串。我们便会在浏览器上看到15，这便是一个好的开始，也是一个不好的开始。</p>
|
|
|
<h2 id="设计和编程"><span class="header-section-number">2.3</span> 设计和编程</h2>
|
|
|
<p>对于我们的实际问题如果总是止于所要的结果，很多年之后，我们成为了code monkey。对这个问题进行一次设计，所谓的设计有些时候会把简单的问题复杂化，有些时候会使以后的扩展更加简单。这一天因为这家商店的糖价格太高了，于是店长将价格降为了4块钱。</p>
|
|
|
-<pre><code class="javascript">
|
|
|
-document.write(3*4);
|
|
|
-</code></pre>
|
|
|
-
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">document</span>.<span class="fu">write</span>(<span class="dv">3</span>*<span class="dv">4</span>);</code></pre>
|
|
|
<p>于是我们又得到了我们的结果，但是下次我们看到这些代码的时候没有分清楚哪个是糖的数量，哪个是价格，于是我们重新设计了程序</p>
|
|
|
-<pre><code class="javascript">
|
|
|
-tang=4;
|
|
|
-num=3;
|
|
|
-document.write(tang*num);
|
|
|
-</code></pre>
|
|
|
-
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript">tang=<span class="dv">4</span>;
|
|
|
+num=<span class="dv">3</span>;
|
|
|
+<span class="ot">document</span>.<span class="fu">write</span>(tang*num);</code></pre>
|
|
|
<p>这才能叫得上是程序设计，或许你注意到了“;”这个符号的存在，我想说的是这是另外一个标准，我们不得不去遵守，也不得不去fuck。</p>
|
|
|
<h3 id="函数"><span class="header-section-number">2.3.1</span> 函数</h3>
|
|
|
<p>记得刚开始学三角函数的时候，我们会写</p>
|
|
|
<pre><code>sin 30=0.5</code></pre>
|
|
|
-而我们的函数也是类似于此，换句话说，因为很多搞计算机的先驱都学好了数学，都把数学世界的规律带到了计算机世界，所以我们的函数也是类似于此，让我们做一个简单的开始。
|
|
|
-<pre><code class="javascript">
|
|
|
-function hello(){
|
|
|
- return document.write("hello,world");
|
|
|
+<p>而我们的函数也是类似于此，换句话说，因为很多搞计算机的先驱都学好了数学，都把数学世界的规律带到了计算机世界，所以我们的函数也是类似于此，让我们做一个简单的开始。</p>
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="fu">hello</span>(){
|
|
|
+ <span class="kw">return</span> <span class="ot">document</span>.<span class="fu">write</span>(<span class="st">"hello,world"</span>);
|
|
|
}
|
|
|
-hello();
|
|
|
-</code></pre>
|
|
|
+<span class="fu">hello</span>();</code></pre>
|
|
|
<p>当我第一次看到函数的时候，有些小激动终于出现了。我们写了一个叫hello的函数，它返回了往页面中写入hello,world的方法，然后我们调用了hello这个函数，于是页面上有了hello,world。</p>
|
|
|
-<pre><code class="javascript">
|
|
|
-function sin(degree){
|
|
|
- return document.write(Math.sin(degree));
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="fu">sin</span>(degree){
|
|
|
+ <span class="kw">return</span> <span class="ot">document</span>.<span class="fu">write</span>(<span class="ot">Math</span>.<span class="fu">sin</span>(degree));
|
|
|
}
|
|
|
-sin(30);
|
|
|
-</code></pre>
|
|
|
+<span class="fu">sin</span>(<span class="dv">30</span>);</code></pre>
|
|
|
<p>在这里degree称之为变量，也就是可以改变的量。 于是输出了-0.9880316240928602，而不是0.5，因为这里用的是弧度制，而不是角度制。</p>
|
|
|
<pre><code>sin(30)</code></pre>
|
|
|
<p>的输出结果有点类似于sin 30。写括号的目的在于，括号是为了方便解析，这个在不同的语言中可能是不一样的，比如在ruby中我们可以直接用类似于数学中的表达:</p>
|
|
|
-<pre><code class="ruby">
|
|
|
-2.0.0-p353 :004 > Math.sin 30
|
|
|
-=> -0.9880316240928618
|
|
|
-2.0.0-p353 :005 >
|
|
|
-</code></pre>
|
|
|
-
|
|
|
+<pre class="sourceCode ruby"><code class="sourceCode ruby"><span class="fl">2.0</span>.<span class="dv">0</span>-p353 :<span class="dv">004</span> > <span class="dt">Math</span>.sin <span class="dv">30</span>
|
|
|
+=> -<span class="fl">0.9880316240928618</span>
|
|
|
+<span class="fl">2.0</span>.<span class="dv">0</span>-p353 :<span class="dv">005</span> ></code></pre>
|
|
|
<p>我们可以在函数中传入多个变量，于是我们再回到小明的问题，就会这样去写代码。</p>
|
|
|
-<pre><code class="javascript">
|
|
|
-function calc(tang,num){
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="fu">calc</span>(tang,num){
|
|
|
result=tang*num;
|
|
|
- document.write(result);
|
|
|
+ <span class="ot">document</span>.<span class="fu">write</span>(result);
|
|
|
}
|
|
|
-calc(3,4);
|
|
|
-</code></pre>
|
|
|
-
|
|
|
+<span class="fu">calc</span>(<span class="dv">3</span>,<span class="dv">4</span>);</code></pre>
|
|
|
<p>但是从某种程度上来说，我们的calc做了计算的事又做了输出的事，总的来说设计上有些不好。</p>
|
|
|
<h3 id="重新设计"><span class="header-section-number">2.3.2</span> 重新设计</h3>
|
|
|
-我们将输出的工作移到函数的外面，
|
|
|
-<pre><code class="javascript">
|
|
|
-function calc(tang,num){
|
|
|
- return tang*num;
|
|
|
+<p>我们将输出的工作移到函数的外面，</p>
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="fu">calc</span>(tang,num){
|
|
|
+ <span class="kw">return</span> tang*num;
|
|
|
}
|
|
|
-document.write(calc(3,4));
|
|
|
-</code></pre>
|
|
|
-
|
|
|
-接着我们用一种更有意思的方法来写这个问题的解决方案
|
|
|
-<pre><code class="javascript">
|
|
|
-function calc(tang,num){
|
|
|
- return tang*num;
|
|
|
+<span class="ot">document</span>.<span class="fu">write</span>(<span class="fu">calc</span>(<span class="dv">3</span>,<span class="dv">4</span>));</code></pre>
|
|
|
+<p>接着我们用一种更有意思的方法来写这个问题的解决方案</p>
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="fu">calc</span>(tang,num){
|
|
|
+ <span class="kw">return</span> tang*num;
|
|
|
}
|
|
|
-function printResult(tang,num){
|
|
|
- document.write(calc(tang,num));
|
|
|
+<span class="kw">function</span> <span class="fu">printResult</span>(tang,num){
|
|
|
+ <span class="ot">document</span>.<span class="fu">write</span>(<span class="fu">calc</span>(tang,num));
|
|
|
}
|
|
|
-printResult(3, 4)
|
|
|
-</code></pre>
|
|
|
+<span class="fu">printResult</span>(<span class="dv">3</span>, <span class="dv">4</span>)</code></pre>
|
|
|
<p>看上去更专业了一点点，如果我们只需要计算的时候我们只需要调用calc，如果我们需要输出的时候我们就调用printResult的方法。</p>
|
|
|
<h3 id="object和函数"><span class="header-section-number">2.3.3</span> object和函数</h3>
|
|
|
<p>我们还没有说清楚之前我们遇到过的document.write以及Math.sin的语法看上去很奇怪，所以让我们看看他们到底是什么，修改app.js为以及内容</p>
|
|
|
@@ -529,101 +506,100 @@ document.write(typeof Math);</code></pre>
|
|
|
</blockquote>
|
|
|
|
|
|
<p>创建一个object，然后观察这便是我们接下来要做的</p>
|
|
|
-<pre><code>store={};
|
|
|
-store.tang=4;
|
|
|
-store.num=3;
|
|
|
-document.write(store.tang*store.num);</code></pre>
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript">store={};
|
|
|
+<span class="ot">store</span>.<span class="fu">tang</span>=<span class="dv">4</span>;
|
|
|
+<span class="ot">store</span>.<span class="fu">num</span>=<span class="dv">3</span>;
|
|
|
+<span class="ot">document</span>.<span class="fu">write</span>(<span class="ot">store</span>.<span class="fu">tang</span>*<span class="ot">store</span>.<span class="fu">num</span>);</code></pre>
|
|
|
<p>我们就有了和document.write一样的用法，这也是对象的美妙之处，只是这里的对象只是包含着基本值，因为</p>
|
|
|
<pre><code>typeof story.tang="number"</code></pre>
|
|
|
<p>一个包含对象的对象应该是这样子的。</p>
|
|
|
-<pre><code>store={};
|
|
|
-store.tang=4;
|
|
|
-store.num=3;
|
|
|
-document.writeln(store.tang*store.num);
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript">store={};
|
|
|
+<span class="ot">store</span>.<span class="fu">tang</span>=<span class="dv">4</span>;
|
|
|
+<span class="ot">store</span>.<span class="fu">num</span>=<span class="dv">3</span>;
|
|
|
+<span class="ot">document</span>.<span class="fu">writeln</span>(<span class="ot">store</span>.<span class="fu">tang</span>*<span class="ot">store</span>.<span class="fu">num</span>);
|
|
|
|
|
|
-var wall=new Object();
|
|
|
-wall.store=store;
|
|
|
-document.write(typeof wall.store);</code></pre>
|
|
|
+<span class="kw">var</span> wall=<span class="kw">new</span> <span class="fu">Object</span>();
|
|
|
+<span class="ot">wall</span>.<span class="fu">store</span>=store;
|
|
|
+<span class="ot">document</span>.<span class="fu">write</span>(<span class="kw">typeof</span> <span class="ot">wall</span>.<span class="fu">store</span>);</code></pre>
|
|
|
<p>而我们用到的document.write和上面用到的document.writeln都是属于这个无序属性集合中的函数。</p>
|
|
|
<p>下面代码说的就是这个无序属性集中中的函数。</p>
|
|
|
-<pre><code>var IO=new Object();
|
|
|
-function print(result){
|
|
|
- document.write(result);
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> IO=<span class="kw">new</span> <span class="fu">Object</span>();
|
|
|
+<span class="kw">function</span> <span class="fu">print</span>(result){
|
|
|
+ <span class="ot">document</span>.<span class="fu">write</span>(result);
|
|
|
};
|
|
|
-IO.print=print;
|
|
|
-IO.print("a obejct with function");
|
|
|
-IO.print(typeof IO.print);</code></pre>
|
|
|
+<span class="ot">IO</span>.<span class="fu">print</span>=print;
|
|
|
+<span class="ot">IO</span>.<span class="fu">print</span>(<span class="st">"a obejct with function"</span>);
|
|
|
+<span class="ot">IO</span>.<span class="fu">print</span>(<span class="kw">typeof</span> <span class="ot">IO</span>.<span class="fu">print</span>);</code></pre>
|
|
|
<p>我们定义了一个叫IO的对象，声明对象可以用</p>
|
|
|
<pre><code>var store={};</code></pre>
|
|
|
<p>又或者是</p>
|
|
|
<pre><code>var store=new Object{};</code></pre>
|
|
|
<p>两者是等价的，但是用后者的可读性会更好一点，我们定义了一个叫print的函数，他的作用也就是document.write，IO中的print函数是等价于print()函数，这也就是对象和函数之间的一些区别，对象可以包含函数，对象是无序属性的集合，其属性可以包含基本值、对象或者函数。</p>
|
|
|
<p>复杂一点的对象应该是下面这样的一种情况。</p>
|
|
|
-<pre><code>var Person={name:"phodal",weight:50,height:166};
|
|
|
-function dream(){
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> Person={<span class="dt">name</span>:<span class="st">"phodal"</span>,<span class="dt">weight</span>:<span class="dv">50</span>,<span class="dt">height</span>:<span class="dv">166</span>};
|
|
|
+<span class="kw">function</span> <span class="fu">dream</span>(){
|
|
|
future;
|
|
|
};
|
|
|
-Person.future=dream;
|
|
|
-document.write(typeof Person);
|
|
|
-document.write(Person.future);</code></pre>
|
|
|
+<span class="ot">Person</span>.<span class="fu">future</span>=dream;
|
|
|
+<span class="ot">document</span>.<span class="fu">write</span>(<span class="kw">typeof</span> Person);
|
|
|
+<span class="ot">document</span>.<span class="fu">write</span>(<span class="ot">Person</span>.<span class="fu">future</span>);</code></pre>
|
|
|
<p>而这些会在我们未来的实际编编程中用得更多。</p>
|
|
|
<h3 id="面向对象"><span class="header-section-number">2.3.4</span> 面向对象</h3>
|
|
|
<p>开始之前先我们简化上面的代码，</p>
|
|
|
-<pre><code>Person.future=function dream(){
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">Person</span>.<span class="fu">future</span>=<span class="kw">function</span> <span class="fu">dream</span>(){
|
|
|
future;
|
|
|
}</code></pre>
|
|
|
<p>看上去比上面的简单多了，不过我们还可以简化为下面的代码。。。</p>
|
|
|
-<pre><code>var Person=function(){
|
|
|
- this.name="phodal";
|
|
|
- this.weight=50;
|
|
|
- this.height=166;
|
|
|
- this.future=function dream(){
|
|
|
- return "future";
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> Person=<span class="kw">function</span>(){
|
|
|
+ <span class="kw">this</span>.<span class="fu">name</span>=<span class="st">"phodal"</span>;
|
|
|
+ <span class="kw">this</span>.<span class="fu">weight</span>=<span class="dv">50</span>;
|
|
|
+ <span class="kw">this</span>.<span class="fu">height</span>=<span class="dv">166</span>;
|
|
|
+ <span class="kw">this</span>.<span class="fu">future</span>=<span class="kw">function</span> <span class="fu">dream</span>(){
|
|
|
+ <span class="kw">return</span> <span class="st">"future"</span>;
|
|
|
};
|
|
|
};
|
|
|
-var person=new Person();
|
|
|
-document.write(person.name+"<br>");
|
|
|
-document.write(typeof person+"<br>");
|
|
|
-document.write(typeof person.future+"<br>");
|
|
|
-document.write(person.future()+"<br>");</code></pre>
|
|
|
+<span class="kw">var</span> person=<span class="kw">new</span> <span class="fu">Person</span>();
|
|
|
+<span class="ot">document</span>.<span class="fu">write</span>(<span class="ot">person</span>.<span class="fu">name</span>+<span class="st">"<br>"</span>);
|
|
|
+<span class="ot">document</span>.<span class="fu">write</span>(<span class="kw">typeof</span> person+<span class="st">"<br>"</span>);
|
|
|
+<span class="ot">document</span>.<span class="fu">write</span>(<span class="kw">typeof</span> <span class="ot">person</span>.<span class="fu">future</span>+<span class="st">"<br>"</span>);
|
|
|
+<span class="ot">document</span>.<span class="fu">write</span>(<span class="ot">person</span>.<span class="fu">future</span>()+<span class="st">"<br>"</span>);</code></pre>
|
|
|
<p>只是在这个时候Person是一个函数，但是我们声明的person却变成了一个对象<strong>一个Javascript函数也是一个对象，并且，所有的对象从技术上讲也只不过是函数。</strong>这里的+“<br>”是HTML中的元素，称之为DOM，在这里起的是换行的作用，我们会在稍后介绍它，这里我们先关心下this。this关键字表示函数的所有者或作用域，也就是这里的Person。</p>
|
|
|
<p>上面的方法显得有点不可取，换句话说和一开始的</p>
|
|
|
<pre><code>document.write(3*4);</code></pre>
|
|
|
<p>一样，不具有灵活性，因此在我们完成功能之后，我们需要对其进行优化，这就是程序设计的真谛——解决完实际问题后，我们需要开始真正的设计，而不是解决问题时的编程。</p>
|
|
|
-<pre><code>var Person=function(name,weight,height){
|
|
|
- this.name=name;
|
|
|
- this.weight=weight;
|
|
|
- this.height=height;
|
|
|
- this.future=function(){
|
|
|
- return "future";
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> Person=<span class="kw">function</span>(name,weight,height){
|
|
|
+ <span class="kw">this</span>.<span class="fu">name</span>=name;
|
|
|
+ <span class="kw">this</span>.<span class="fu">weight</span>=weight;
|
|
|
+ <span class="kw">this</span>.<span class="fu">height</span>=height;
|
|
|
+ <span class="kw">this</span>.<span class="fu">future</span>=<span class="kw">function</span>(){
|
|
|
+ <span class="kw">return</span> <span class="st">"future"</span>;
|
|
|
};
|
|
|
};
|
|
|
-var phodal=new Person("phodal",50,166);
|
|
|
-document.write(phodal.name+"<br>");
|
|
|
-document.write(phodal.weight+"<br>");
|
|
|
-document.write(phodal.height+"<br>");
|
|
|
-document.write(phodal.future()+"<br>");</code></pre>
|
|
|
+<span class="kw">var</span> phodal=<span class="kw">new</span> <span class="fu">Person</span>(<span class="st">"phodal"</span>,<span class="dv">50</span>,<span class="dv">166</span>);
|
|
|
+<span class="ot">document</span>.<span class="fu">write</span>(<span class="ot">phodal</span>.<span class="fu">name</span>+<span class="st">"<br>"</span>);
|
|
|
+<span class="ot">document</span>.<span class="fu">write</span>(<span class="ot">phodal</span>.<span class="fu">weight</span>+<span class="st">"<br>"</span>);
|
|
|
+<span class="ot">document</span>.<span class="fu">write</span>(<span class="ot">phodal</span>.<span class="fu">height</span>+<span class="st">"<br>"</span>);
|
|
|
+<span class="ot">document</span>.<span class="fu">write</span>(<span class="ot">phodal</span>.<span class="fu">future</span>()+<span class="st">"<br>"</span>);</code></pre>
|
|
|
<p>于是，产生了这样一个可重用的Javascript对象,this关键字确立了属性的所有者。</p>
|
|
|
<h2 id="其他"><span class="header-section-number">2.4</span> 其他</h2>
|
|
|
<p>Javascript还有一个很强大的特性，也就是原型继承，不过这里我们先不考虑这些部分，用尽量少的代码及关键字来实际我们所要表达的核心功能，这才是这里的核心，其他的东西我们可以从其他书本上学到。</p>
|
|
|
<p>所谓的继承，</p>
|
|
|
-<pre><code>var Chinese=function(){
|
|
|
- this.country="China";
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> Chinese=<span class="kw">function</span>(){
|
|
|
+ <span class="kw">this</span>.<span class="fu">country</span>=<span class="st">"China"</span>;
|
|
|
}
|
|
|
|
|
|
-var Person=function(name,weight,height){
|
|
|
- this.name=name;
|
|
|
- this.weight=weight;
|
|
|
- this.height=height;
|
|
|
- this.futrue=function(){
|
|
|
- return "future";
|
|
|
+<span class="kw">var</span> Person=<span class="kw">function</span>(name,weight,height){
|
|
|
+ <span class="kw">this</span>.<span class="fu">name</span>=name;
|
|
|
+ <span class="kw">this</span>.<span class="fu">weight</span>=weight;
|
|
|
+ <span class="kw">this</span>.<span class="fu">height</span>=height;
|
|
|
+ <span class="kw">this</span>.<span class="fu">futrue</span>=<span class="kw">function</span>(){
|
|
|
+ <span class="kw">return</span> <span class="st">"future"</span>;
|
|
|
}
|
|
|
}
|
|
|
-Chinese.prototype=new Person();
|
|
|
-
|
|
|
+<span class="ot">Chinese</span>.<span class="fu">prototype</span>=<span class="kw">new</span> <span class="fu">Person</span>();
|
|
|
|
|
|
-var phodal=new Chinese("phodal",50,166);
|
|
|
-document.write(phodal.country);</code></pre>
|
|
|
+<span class="kw">var</span> phodal=<span class="kw">new</span> <span class="fu">Chinese</span>(<span class="st">"phodal"</span>,<span class="dv">50</span>,<span class="dv">166</span>);
|
|
|
+<span class="ot">document</span>.<span class="fu">write</span>(<span class="ot">phodal</span>.<span class="fu">country</span>);</code></pre>
|
|
|
<p>完整的Javascript应该由下列三个部分组成:</p>
|
|
|
<ul>
|
|
|
<li>核心(ECMAScript)——核心语言功能</li>
|
|
|
@@ -632,18 +608,18 @@ document.write(phodal.country);</code></pre>
|
|
|
</ul>
|
|
|
<p>我们在上面讲的都是ECMAScript，也就是语法相关的，但是JS真正强大的，或者说我们最需要的可能就是对DOM的操作，这也就是为什么jQuery等库可以流行的原因之一，而核心语言功能才是真正在哪里都适用的，至于BOM真正用到的机会很少，因为没有好的统一的标准。</p>
|
|
|
<p>一个简单的DOM示例,</p>
|
|
|
-<pre><code><!DOCTYPE html>
|
|
|
-<html>
|
|
|
-<head>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
- <noscript>
|
|
|
+<pre class="sourceCode html"><code class="sourceCode html"><span class="dt"><!DOCTYPE </span>html<span class="dt">></span>
|
|
|
+<span class="kw"><html></span>
|
|
|
+<span class="kw"><head></span>
|
|
|
+<span class="kw"></head></span>
|
|
|
+<span class="kw"><body></span>
|
|
|
+ <span class="kw"><noscript></span>
|
|
|
disable Javascript
|
|
|
- </noscript>
|
|
|
- <p id="para" style="color:red">Red</p>
|
|
|
-</body>
|
|
|
- <script type="text/javascript" src="app.js"></script>
|
|
|
-</html></code></pre>
|
|
|
+ <span class="kw"></noscript></span>
|
|
|
+ <span class="kw"><p</span><span class="ot"> id=</span><span class="st">"para"</span><span class="ot"> style=</span><span class="st">"color:red"</span><span class="kw">></span>Red<span class="kw"></p></span>
|
|
|
+<span class="kw"></body></span>
|
|
|
+ <span class="kw"><script</span><span class="ot"> type=</span><span class="st">"text/javascript"</span><span class="ot"> src=</span><span class="st">"app.js"</span><span class="kw">></script></span>
|
|
|
+<span class="kw"></html></span></code></pre>
|
|
|
<p>我们需要修改一下helloworld.html添加</p>
|
|
|
<pre><code><p id="para" style="color:red">Red</p></code></pre>
|
|
|
<p>同时还需要将script标签移到body下面，如果没有意外的话我们会看到页面上用红色的字体显示Red，修改app.js。</p>
|
|
|
@@ -1227,9 +1203,9 @@ Copyright (C) 2010--2013 Olaf Bergmann <bergmann@tzi.org></code></pre>
|
|
|
<p>node-coap is a client and server library for CoAP modelled after the http module.</p>
|
|
|
</blockquote>
|
|
|
<p>Node-CoAP是一个客户端和服务端的库用于CoAP的模块建模。创建一个package.json文件，添加这个库</p>
|
|
|
-<pre><code>{
|
|
|
- "dependencies":{
|
|
|
- "coap": "0.7.2"
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript">{
|
|
|
+ <span class="st">"dependencies"</span>:{
|
|
|
+ <span class="st">"coap"</span>: <span class="st">"0.7.2"</span>
|
|
|
}
|
|
|
}</code></pre>
|
|
|
<p>接着执行</p>
|
|
|
@@ -1237,28 +1213,28 @@ Copyright (C) 2010--2013 Olaf Bergmann <bergmann@tzi.org></code></pre>
|
|
|
<p>就可以安装好这个库</p>
|
|
|
<h3 id="node-coap示例"><span class="header-section-number">10.3.2</span> Node CoAP示例</h3>
|
|
|
<p>接着，创建这样一个app.js</p>
|
|
|
-<pre><code>const coap = require('coap')
|
|
|
- , server = coap.createServer()
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">const</span> coap = <span class="fu">require</span>(<span class="st">'coap'</span>)
|
|
|
+ , server = <span class="ot">coap</span>.<span class="fu">createServer</span>()
|
|
|
|
|
|
-server.on('request', function(req, res) {
|
|
|
- res.end('Hello ' + req.url.split('/')[1] + '\n')
|
|
|
+<span class="ot">server</span>.<span class="fu">on</span>(<span class="st">'request'</span>, <span class="kw">function</span>(req, res) {
|
|
|
+ <span class="ot">res</span>.<span class="fu">end</span>(<span class="st">'Hello '</span> + <span class="ot">req</span>.<span class="ot">url</span>.<span class="fu">split</span>(<span class="st">'/'</span>)[<span class="dv">1</span>] + <span class="st">'</span><span class="ch">\n</span><span class="st">'</span>)
|
|
|
})
|
|
|
|
|
|
-server.listen(function() {
|
|
|
- console.log('server started')
|
|
|
+<span class="ot">server</span>.<span class="fu">listen</span>(<span class="kw">function</span>() {
|
|
|
+ <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">'server started'</span>)
|
|
|
}) </code></pre>
|
|
|
<p>执行</p>
|
|
|
<pre><code>node app.js</code></pre>
|
|
|
<p>便可以在浏览器上访问了，因为现在什么也没有，所以什么也不会返回。</p>
|
|
|
<p>接着下来再创建一个client端的js，并运行之</p>
|
|
|
-<pre><code>const coap = require('coap')
|
|
|
- , req = coap.request('coap://localhost/World')
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">const</span> coap = <span class="fu">require</span>(<span class="st">'coap'</span>)
|
|
|
+ , req = <span class="ot">coap</span>.<span class="fu">request</span>(<span class="st">'coap://localhost/World'</span>)
|
|
|
|
|
|
-req.on('response', function(res) {
|
|
|
- res.pipe(process.stdout)
|
|
|
+<span class="ot">req</span>.<span class="fu">on</span>(<span class="st">'response'</span>, <span class="kw">function</span>(res) {
|
|
|
+ <span class="ot">res</span>.<span class="fu">pipe</span>(<span class="ot">process</span>.<span class="fu">stdout</span>)
|
|
|
})
|
|
|
|
|
|
-req.end()</code></pre>
|
|
|
+<span class="ot">req</span>.<span class="fu">end</span>()</code></pre>
|
|
|
<p>就可以在console上输出</p>
|
|
|
<pre><code>Hello World </code></pre>
|
|
|
<p>也就达到了我们的目的，用CoAP协议创建一个服务，接着我们应该用它创建更多的东西，如产生JSON数据，以及RESTful。和HTTP版的最小物联网系统一样，CoAP版的最小物联网系统也是要返回JSON的。</p>
|
|
|
@@ -1266,46 +1242,46 @@ req.end()</code></pre>
|
|
|
<h3 id="node-module"><span class="header-section-number">10.4.1</span> Node Module</h3>
|
|
|
<p>这说里Module的意义是因为我们需要在别的地方引用到db_helper这个库，也就是下一小节要的讲的内容。</p>
|
|
|
<p>这样我们就可以在server.js类似于这样去引用这个js库。</p>
|
|
|
-<pre><code>var DBHelper = require('./db_helper.js');
|
|
|
-DBHelper.initDB();</code></pre>
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> DBHelper = <span class="fu">require</span>(<span class="st">'./db_helper.js'</span>);
|
|
|
+<span class="ot">DBHelper</span>.<span class="fu">initDB</span>();</code></pre>
|
|
|
<p>而这样调用的前提是我们需要去声明这样的module，为了方便地导出函数功能调用。</p>
|
|
|
-<pre><code>function DBHelper(){
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="fu">DBHelper</span>(){
|
|
|
}
|
|
|
-DBHelper.initDB = function(){};
|
|
|
-module.exports = DBHelper;</code></pre>
|
|
|
+<span class="ot">DBHelper</span>.<span class="fu">initDB</span> = <span class="kw">function</span>(){};
|
|
|
+<span class="ot">module</span>.<span class="fu">exports</span> = DBHelper;</code></pre>
|
|
|
<p>虽然这里的功能很简单，简单也能做我们想做的事情。</p>
|
|
|
<h3 id="node-sqlite3"><span class="header-section-number">10.4.2</span> Node-Sqlite3</h3>
|
|
|
<p>还是继续用到了SQLite3，只是这里用到的只是基本的查询和创建。</p>
|
|
|
<h4 id="一个简单的initdb函数"><span class="header-section-number">10.4.2.1</span> 一个简单的initDB函数</h4>
|
|
|
-<pre><code>var db = new sqlite3.Database(config["db_name"]);
|
|
|
-var create_table = 'create table if not exists basic (' + config["db_table"] + ');';
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> db = <span class="kw">new</span> <span class="ot">sqlite3</span>.<span class="fu">Database</span>(config[<span class="st">"db_name"</span>]);
|
|
|
+<span class="kw">var</span> create_table = <span class="st">'create table if not exists basic ('</span> + config[<span class="st">"db_table"</span>] + <span class="st">');'</span>;
|
|
|
|
|
|
-db.serialize(function() {
|
|
|
- db.run(create_table);
|
|
|
- _.each(config["init_table"], function(insert_data) {
|
|
|
- db.run(insert_data);
|
|
|
+<span class="ot">db</span>.<span class="fu">serialize</span>(<span class="kw">function</span>() {
|
|
|
+ <span class="ot">db</span>.<span class="fu">run</span>(create_table);
|
|
|
+ <span class="ot">_</span>.<span class="fu">each</span>(config[<span class="st">"init_table"</span>], <span class="kw">function</span>(insert_data) {
|
|
|
+ <span class="ot">db</span>.<span class="fu">run</span>(insert_data);
|
|
|
});
|
|
|
});
|
|
|
-db.close();</code></pre>
|
|
|
+<span class="ot">db</span>.<span class="fu">close</span>();</code></pre>
|
|
|
<p>首先从配置中读取db_name，接着创建table，然后调用underscore的each方法，创建几个数据。配置如下所示</p>
|
|
|
-<pre><code>config = {
|
|
|
- "db_name": "iot.db",
|
|
|
- "db_table": "id integer primary key, value text, sensors1 float, sensors2 float",
|
|
|
- "init_table":[
|
|
|
- "insert or replace into basic (id,value,sensors1,sensors2) VALUES (1, 'is id 1', 19, 20);",
|
|
|
- "insert or replace into basic (id,value,sensors1,sensors2) VALUES (2, 'is id 2', 20, 21);"
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript">config = {
|
|
|
+ <span class="st">"db_name"</span>: <span class="st">"iot.db"</span>,
|
|
|
+ <span class="st">"db_table"</span>: <span class="st">"id integer primary key, value text, sensors1 float, sensors2 float"</span>,
|
|
|
+ <span class="st">"init_table"</span>:[
|
|
|
+ <span class="st">"insert or replace into basic (id,value,sensors1,sensors2) VALUES (1, 'is id 1', 19, 20);"</span>,
|
|
|
+ <span class="st">"insert or replace into basic (id,value,sensors1,sensors2) VALUES (2, 'is id 2', 20, 21);"</span>
|
|
|
],
|
|
|
- "query_table":"select * from basic;"
|
|
|
+ <span class="st">"query_table"</span>:<span class="st">"select * from basic;"</span>
|
|
|
};</code></pre>
|
|
|
<p>而之前所提到的url查询所做的事情便是</p>
|
|
|
-<pre><code>DBHelper.urlQueryData = function (url, callback) {
|
|
|
- var db = new sqlite3.Database("iot.db");
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">DBHelper</span>.<span class="fu">urlQueryData</span> = <span class="kw">function</span> (url, callback) {
|
|
|
+ <span class="kw">var</span> db = <span class="kw">new</span> <span class="ot">sqlite3</span>.<span class="fu">Database</span>(<span class="st">"iot.db"</span>);
|
|
|
|
|
|
- var result = [];
|
|
|
- console.log("SELECT * FROM basic where " + url.split('/')[1] + "=" + url.split('/')[2]);
|
|
|
- db.all("SELECT * FROM basic where " + url.split('/')[1] + "=" + url.split('/')[2], function(err, rows) {
|
|
|
- db.close();
|
|
|
- callback(JSON.stringify(rows));
|
|
|
+ <span class="kw">var</span> result = [];
|
|
|
+ <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">"SELECT * FROM basic where "</span> + <span class="ot">url</span>.<span class="fu">split</span>(<span class="st">'/'</span>)[<span class="dv">1</span>] + <span class="st">"="</span> + <span class="ot">url</span>.<span class="fu">split</span>(<span class="st">'/'</span>)[<span class="dv">2</span>]);
|
|
|
+ <span class="ot">db</span>.<span class="fu">all</span>(<span class="st">"SELECT * FROM basic where "</span> + <span class="ot">url</span>.<span class="fu">split</span>(<span class="st">'/'</span>)[<span class="dv">1</span>] + <span class="st">"="</span> + <span class="ot">url</span>.<span class="fu">split</span>(<span class="st">'/'</span>)[<span class="dv">2</span>], <span class="kw">function</span>(err, rows) {
|
|
|
+ <span class="ot">db</span>.<span class="fu">close</span>();
|
|
|
+ <span class="fu">callback</span>(<span class="ot">JSON</span>.<span class="fu">stringify</span>(rows));
|
|
|
});
|
|
|
};</code></pre>
|
|
|
<p>将URL传进来，便解析这个参数，接着再放到数据库中查询，再回调回结果。这样我们就可以构成之前所说的查询功能，而我们所谓的post功能似乎也可以用同样的方法加进去。</p>
|
|
|
@@ -1313,21 +1289,21 @@ db.close();</code></pre>
|
|
|
<p>简单地记录一下在IoT-CoAP中一次获取数据地过程。</p>
|
|
|
<h3 id="get"><span class="header-section-number">10.4.4</span> GET</h3>
|
|
|
<p>先看看在示例中的Get.js的代码，这关乎在后面server端的代码。</p>
|
|
|
-<pre><code>const coap = require('coap')
|
|
|
- ,requestURI = 'coap://localhost/'
|
|
|
- ,url = require('url').parse(requestURI + 'id/1/')
|
|
|
- ,req = coap.request(url)
|
|
|
- ,bl = require('bl');
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">const</span> coap = <span class="fu">require</span>(<span class="st">'coap'</span>)
|
|
|
+ ,requestURI = <span class="st">'coap://localhost/'</span>
|
|
|
+ ,url = <span class="fu">require</span>(<span class="st">'url'</span>).<span class="fu">parse</span>(requestURI + <span class="st">'id/1/'</span>)
|
|
|
+ ,req = <span class="ot">coap</span>.<span class="fu">request</span>(url)
|
|
|
+ ,bl = <span class="fu">require</span>(<span class="st">'bl'</span>);
|
|
|
|
|
|
-req.setHeader("Accept", "application/json");
|
|
|
-req.on('response', function(res) {
|
|
|
- res.pipe(bl(function(err, data) {
|
|
|
- var json = JSON.parse(data);
|
|
|
- console.log(json);
|
|
|
+<span class="ot">req</span>.<span class="fu">setHeader</span>(<span class="st">"Accept"</span>, <span class="st">"application/json"</span>);
|
|
|
+<span class="ot">req</span>.<span class="fu">on</span>(<span class="st">'response'</span>, <span class="kw">function</span>(res) {
|
|
|
+ <span class="ot">res</span>.<span class="fu">pipe</span>(<span class="fu">bl</span>(<span class="kw">function</span>(err, data) {
|
|
|
+ <span class="kw">var</span> json = <span class="ot">JSON</span>.<span class="fu">parse</span>(data);
|
|
|
+ <span class="ot">console</span>.<span class="fu">log</span>(json);
|
|
|
}));
|
|
|
|
|
|
});
|
|
|
-req.end();</code></pre>
|
|
|
+<span class="ot">req</span>.<span class="fu">end</span>();</code></pre>
|
|
|
<p>const定义数据的方法，和我们在其他语言中有点像。只是这的const主要是为了程序的健壮型,减少程序出错，当然这不是javascript的用法。</p>
|
|
|
<p>我们构建了一个请求的URL</p>
|
|
|
<pre><code> coap://localhost/id/1/</code></pre>
|
|
|
@@ -1335,59 +1311,59 @@ req.end();</code></pre>
|
|
|
<h3 id="iot-coap"><span class="header-section-number">10.4.5</span> IoT CoAP</h3>
|
|
|
<h3 id="判断请求的方法"><span class="header-section-number">10.4.6</span> 判断请求的方法</h3>
|
|
|
<p>在这里先把一些无关的代码删除掉，并保证其能工作，so，下面就是简要的逻辑代码。</p>
|
|
|
-<pre><code>var coap = require('coap');
|
|
|
-var server = coap.createServer({});
|
|
|
-var request_handler = require('./request_handler.js');
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> coap = <span class="fu">require</span>(<span class="st">'coap'</span>);
|
|
|
+<span class="kw">var</span> server = <span class="ot">coap</span>.<span class="fu">createServer</span>({});
|
|
|
+<span class="kw">var</span> request_handler = <span class="fu">require</span>(<span class="st">'./request_handler.js'</span>);
|
|
|
|
|
|
-server.on('request', function(req, res) {
|
|
|
- switch(req.method){
|
|
|
- case "GET": request_handler.getHandler(req, res);
|
|
|
- break;
|
|
|
+<span class="ot">server</span>.<span class="fu">on</span>(<span class="st">'request'</span>, <span class="kw">function</span>(req, res) {
|
|
|
+ <span class="kw">switch</span>(<span class="ot">req</span>.<span class="fu">method</span>){
|
|
|
+ <span class="kw">case</span> <span class="st">"GET"</span>: <span class="ot">request_handler</span>.<span class="fu">getHandler</span>(req, res);
|
|
|
+ <span class="kw">break</span>;
|
|
|
}
|
|
|
});
|
|
|
|
|
|
-server.listen(function() {
|
|
|
- console.log('server started');
|
|
|
+<span class="ot">server</span>.<span class="fu">listen</span>(<span class="kw">function</span>() {
|
|
|
+ <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">'server started'</span>);
|
|
|
});</code></pre>
|
|
|
<p>创建一个CoAP服务，判断req.method，也就是请求的方法，如果是GET的话，就调用request_handler.getHandler(req, res)。而在getHandler里，判断了下请求的Accept</p>
|
|
|
-<pre><code>request_helper.getHandler = function(req, res) {
|
|
|
- switch (req.headers['Accept']) {
|
|
|
- case "application/json":
|
|
|
- qh.returnJSON(req, res);
|
|
|
- break;
|
|
|
- case "application/xml":
|
|
|
- qh.returnXML(req, res);
|
|
|
- break;
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">request_helper</span>.<span class="fu">getHandler</span> = <span class="kw">function</span>(req, res) {
|
|
|
+ <span class="kw">switch</span> (<span class="ot">req</span>.<span class="fu">headers</span>[<span class="st">'Accept'</span>]) {
|
|
|
+ <span class="kw">case</span> <span class="st">"application/json"</span>:
|
|
|
+ <span class="ot">qh</span>.<span class="fu">returnJSON</span>(req, res);
|
|
|
+ <span class="kw">break</span>;
|
|
|
+ <span class="kw">case</span> <span class="st">"application/xml"</span>:
|
|
|
+ <span class="ot">qh</span>.<span class="fu">returnXML</span>(req, res);
|
|
|
+ <span class="kw">break</span>;
|
|
|
}
|
|
|
};</code></pre>
|
|
|
<p>如果是json刚调用returnJSON,</p>
|
|
|
<h3 id="database与回调"><span class="header-section-number">10.4.7</span> Database与回调</h3>
|
|
|
<p>而这里为了处理回调函数刚分为了两部分</p>
|
|
|
-<pre><code>query_helper.returnJSON = function(req, res) {
|
|
|
- DBHelper.urlQueryData(req.url, function (result) {
|
|
|
- QueryData.returnJSON(result, res);
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">query_helper</span>.<span class="fu">returnJSON</span> = <span class="kw">function</span>(req, res) {
|
|
|
+ <span class="ot">DBHelper</span>.<span class="fu">urlQueryData</span>(<span class="ot">req</span>.<span class="fu">url</span>, <span class="kw">function</span> (result) {
|
|
|
+ <span class="ot">QueryData</span>.<span class="fu">returnJSON</span>(result, res);
|
|
|
});
|
|
|
};</code></pre>
|
|
|
<p>而这里只是调用了</p>
|
|
|
-<pre><code>DBHelper.urlQueryData = function (url, callback) {
|
|
|
- var db = new sqlite3.Database(config["db_name"]);
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">DBHelper</span>.<span class="fu">urlQueryData</span> = <span class="kw">function</span> (url, callback) {
|
|
|
+ <span class="kw">var</span> db = <span class="kw">new</span> <span class="ot">sqlite3</span>.<span class="fu">Database</span>(config[<span class="st">"db_name"</span>]);
|
|
|
|
|
|
- console.log("SELECT * FROM basic where " + url.split('/')[1] + "=" + url.split('/')[2]);
|
|
|
- db.all("SELECT * FROM basic where " + url.split('/')[1] + "=" + url.split('/')[2], function(err, rows) {
|
|
|
- db.close();
|
|
|
- callback(JSON.stringify(rows));
|
|
|
+ <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">"SELECT * FROM basic where "</span> + <span class="ot">url</span>.<span class="fu">split</span>(<span class="st">'/'</span>)[<span class="dv">1</span>] + <span class="st">"="</span> + <span class="ot">url</span>.<span class="fu">split</span>(<span class="st">'/'</span>)[<span class="dv">2</span>]);
|
|
|
+ <span class="ot">db</span>.<span class="fu">all</span>(<span class="st">"SELECT * FROM basic where "</span> + <span class="ot">url</span>.<span class="fu">split</span>(<span class="st">'/'</span>)[<span class="dv">1</span>] + <span class="st">"="</span> + <span class="ot">url</span>.<span class="fu">split</span>(<span class="st">'/'</span>)[<span class="dv">2</span>], <span class="kw">function</span>(err, rows) {
|
|
|
+ <span class="ot">db</span>.<span class="fu">close</span>();
|
|
|
+ <span class="fu">callback</span>(<span class="ot">JSON</span>.<span class="fu">stringify</span>(rows));
|
|
|
});
|
|
|
};</code></pre>
|
|
|
<p>这里调用了node sqlite3去查询对应id的数据，用回调处理了数据无法到外部的问题，而上面的returnJSON则只是返回最后的结果，code以及其他的内容。</p>
|
|
|
-<pre><code>QueryData.returnJSON = function(result, res) {
|
|
|
- if (result.length == 2) {
|
|
|
- res.code = '4.04';
|
|
|
- res.end(JSON.stringify({
|
|
|
- error: "Not Found"
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">QueryData</span>.<span class="fu">returnJSON</span> = <span class="kw">function</span>(result, res) {
|
|
|
+ <span class="kw">if</span> (<span class="ot">result</span>.<span class="fu">length</span> == <span class="dv">2</span>) {
|
|
|
+ <span class="ot">res</span>.<span class="fu">code</span> = <span class="st">'4.04'</span>;
|
|
|
+ <span class="ot">res</span>.<span class="fu">end</span>(<span class="ot">JSON</span>.<span class="fu">stringify</span>({
|
|
|
+ <span class="dt">error</span>: <span class="st">"Not Found"</span>
|
|
|
}));
|
|
|
- } else {
|
|
|
- res.code = '2.05';
|
|
|
- res.end(result);
|
|
|
+ } <span class="kw">else</span> {
|
|
|
+ <span class="ot">res</span>.<span class="fu">code</span> = <span class="st">'2.05'</span>;
|
|
|
+ <span class="ot">res</span>.<span class="fu">end</span>(result);
|
|
|
}
|
|
|
};</code></pre>
|
|
|
<p>当resulst的结果为空时，返回一个404，因为没有数据。这样我们就构成了整个的链，再一步步返回结果。</p>
|
|
|
@@ -1405,36 +1381,36 @@ server.listen(function() {
|
|
|
<p>综上所述，块(Block)选项提供了传送一个最小的在分块的方式更大的陈述。</p>
|
|
|
<h3 id="coap-post"><span class="header-section-number">10.5.1</span> CoAP POST</h3>
|
|
|
<p>看看在IoT CoAP中的post示例。</p>
|
|
|
-<pre><code>const coap = require('coap')
|
|
|
- ,request = coap.request
|
|
|
- ,bl = require('bl')
|
|
|
- ,req = request({hostname: 'localhost',port:5683,pathname: '',method: 'POST'});
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">const</span> coap = <span class="fu">require</span>(<span class="st">'coap'</span>)
|
|
|
+ ,request = <span class="ot">coap</span>.<span class="fu">request</span>
|
|
|
+ ,bl = <span class="fu">require</span>(<span class="st">'bl'</span>)
|
|
|
+ ,req = <span class="fu">request</span>({<span class="dt">hostname</span>: <span class="st">'localhost'</span>,<span class="dt">port</span>:<span class="dv">5683</span>,<span class="dt">pathname</span>: <span class="st">''</span>,<span class="dt">method</span>: <span class="st">'POST'</span>});
|
|
|
|
|
|
-req.setOption('Block2', [new Buffer('1'),new Buffer("'must'"), new Buffer('23'), new Buffer('12')]);
|
|
|
-req.setHeader("Accept", "application/json");
|
|
|
-req.on('response', function(res) {
|
|
|
- res.pipe(bl(function(err, data) {
|
|
|
- console.log(data);
|
|
|
- process.exit(0);
|
|
|
+<span class="ot">req</span>.<span class="fu">setOption</span>(<span class="st">'Block2'</span>, [<span class="kw">new</span> <span class="fu">Buffer</span>(<span class="st">'1'</span>),<span class="kw">new</span> <span class="fu">Buffer</span>(<span class="st">"'must'"</span>), <span class="kw">new</span> <span class="fu">Buffer</span>(<span class="st">'23'</span>), <span class="kw">new</span> <span class="fu">Buffer</span>(<span class="st">'12'</span>)]);
|
|
|
+<span class="ot">req</span>.<span class="fu">setHeader</span>(<span class="st">"Accept"</span>, <span class="st">"application/json"</span>);
|
|
|
+<span class="ot">req</span>.<span class="fu">on</span>(<span class="st">'response'</span>, <span class="kw">function</span>(res) {
|
|
|
+ <span class="ot">res</span>.<span class="fu">pipe</span>(<span class="fu">bl</span>(<span class="kw">function</span>(err, data) {
|
|
|
+ <span class="ot">console</span>.<span class="fu">log</span>(data);
|
|
|
+ <span class="ot">process</span>.<span class="fu">exit</span>(<span class="dv">0</span>);
|
|
|
}));
|
|
|
|
|
|
});
|
|
|
|
|
|
-req.end();</code></pre>
|
|
|
+<span class="ot">req</span>.<span class="fu">end</span>();</code></pre>
|
|
|
<p>Block2中一共有四个数据，相应的数据结果应该是</p>
|
|
|
-<pre><code>{ name: 'Block2', value: <Buffer 31> }
|
|
|
-{ name: 'Block2', value: <Buffer 27 6d 75 73 74 27> }
|
|
|
-{ name: 'Block2', value: <Buffer 32 33> }
|
|
|
-{ name: 'Block2', value: <Buffer 31 32> }</code></pre>
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript">{ <span class="dt">name</span>: <span class="st">'Block2'</span>, <span class="dt">value</span>: <Buffer <span class="dv">31</span>> }
|
|
|
+{ <span class="dt">name</span>: <span class="st">'Block2'</span>, <span class="dt">value</span>: <Buffer <span class="dv">27</span> 6d <span class="dv">75</span> <span class="dv">73</span> <span class="dv">74</span> <span class="dv">27</span>> }
|
|
|
+{ <span class="dt">name</span>: <span class="st">'Block2'</span>, <span class="dt">value</span>: <Buffer <span class="dv">32</span> <span class="dv">33</span>> }
|
|
|
+{ <span class="dt">name</span>: <span class="st">'Block2'</span>, <span class="dt">value</span>: <Buffer <span class="dv">31</span> <span class="dv">32</span>> }</code></pre>
|
|
|
<p>这是没有解析的Block2，简单地可以用</p>
|
|
|
-<pre><code> _.values(e).toString()</code></pre>
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">_</span>.<span class="fu">values</span>(e).<span class="fu">toString</span>()</code></pre>
|
|
|
<p>将结果转换为</p>
|
|
|
<pre><code>Block2,1
|
|
|
Block2,'must'
|
|
|
Block2,23
|
|
|
Block2,12</code></pre>
|
|
|
<p>接着按“,”分开，</p>
|
|
|
-<pre><code>_.values(e).toString().split(',')[1]</code></pre>
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">_</span>.<span class="fu">values</span>(e).<span class="fu">toString</span>().<span class="fu">split</span>(<span class="st">','</span>)[<span class="dv">1</span>]</code></pre>
|
|
|
<p>就有</p>
|
|
|
<pre><code>[ '1', '\'must\'', '23', '12' ]</code></pre>
|
|
|
<p>便可以很愉快地将其post到数据库中了，</p>
|
|
|
@@ -1616,72 +1592,72 @@ Block2,12</code></pre>
|
|
|
<h2 id="coap-json"><span class="header-section-number">10.6</span> CoAP JSON</h2>
|
|
|
<p>于是在一开始的时候首先支持的便是“application/json”这样的类型。</p>
|
|
|
<p>首先判断请求的header</p>
|
|
|
-<pre><code>request_helper.getHandler = function(req, res) {
|
|
|
- switch (req.headers['Accept']) {
|
|
|
- case "application/json":
|
|
|
- qh.returnJSON(req, res);
|
|
|
- break;
|
|
|
- case "application/xml":
|
|
|
- qh.returnXML(req, res);
|
|
|
- break;
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">request_helper</span>.<span class="fu">getHandler</span> = <span class="kw">function</span>(req, res) {
|
|
|
+ <span class="kw">switch</span> (<span class="ot">req</span>.<span class="fu">headers</span>[<span class="st">'Accept'</span>]) {
|
|
|
+ <span class="kw">case</span> <span class="st">"application/json"</span>:
|
|
|
+ <span class="ot">qh</span>.<span class="fu">returnJSON</span>(req, res);
|
|
|
+ <span class="kw">break</span>;
|
|
|
+ <span class="kw">case</span> <span class="st">"application/xml"</span>:
|
|
|
+ <span class="ot">qh</span>.<span class="fu">returnXML</span>(req, res);
|
|
|
+ <span class="kw">break</span>;
|
|
|
}
|
|
|
};</code></pre>
|
|
|
<p>再转至相应的函数处理，而判断的依据则是Accept是不是“application/json”。</p>
|
|
|
-<pre><code>registerFormat('text/plain', 0)
|
|
|
-registerFormat('application/link-format', 40)
|
|
|
-registerFormat('application/xml', 41)
|
|
|
-registerFormat('application/octet-stream', 42)
|
|
|
-registerFormat('application/exi', 47)
|
|
|
-registerFormat('application/json', 50)</code></pre>
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">registerFormat</span>(<span class="st">'text/plain'</span>, <span class="dv">0</span>)
|
|
|
+<span class="fu">registerFormat</span>(<span class="st">'application/link-format'</span>, <span class="dv">40</span>)
|
|
|
+<span class="fu">registerFormat</span>(<span class="st">'application/xml'</span>, <span class="dv">41</span>)
|
|
|
+<span class="fu">registerFormat</span>(<span class="st">'application/octet-stream'</span>, <span class="dv">42</span>)
|
|
|
+<span class="fu">registerFormat</span>(<span class="st">'application/exi'</span>, <span class="dv">47</span>)
|
|
|
+<span class="fu">registerFormat</span>(<span class="st">'application/json'</span>, <span class="dv">50</span>)</code></pre>
|
|
|
<p>对应地我们需要在一发出请求的时候设置好Accept，要不就没有办法返回我们需要的结果。</p>
|
|
|
-<pre><code>req.setHeader("Accept", "application/json");</code></pre>
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">req</span>.<span class="fu">setHeader</span>(<span class="st">"Accept"</span>, <span class="st">"application/json"</span>);</code></pre>
|
|
|
<h3 id="返回json"><span class="header-section-number">10.6.1</span> 返回JSON</h3>
|
|
|
<p>在给IoT CoAP添加了JSON支持之后，变得非常有意思，至少我们可以获得我们想要的结果。在上一篇中我们介绍了一些常用的工具——<a href="http://www.phodal.com/blog/coap-command-line-tools-set/">CoAP 命令行工具集</a>。</p>
|
|
|
<h3 id="coap客户端代码"><span class="header-section-number">10.6.2</span> CoAP客户端代码</h3>
|
|
|
<p>开始之前我们需要有一个客户端代码，以便我们的服务端可以返回正确的数据并解析</p>
|
|
|
-<pre><code>var coap = require('coap');
|
|
|
-var requestURI = 'coap://localhost/';
|
|
|
-var url = require('url').parse(requestURI + 'id/1/');
|
|
|
-console.log("Request URL: " + url.href);
|
|
|
-var req = coap.request(url);
|
|
|
-var bl = require('bl');
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> coap = <span class="fu">require</span>(<span class="st">'coap'</span>);
|
|
|
+<span class="kw">var</span> requestURI = <span class="st">'coap://localhost/'</span>;
|
|
|
+<span class="kw">var</span> url = <span class="fu">require</span>(<span class="st">'url'</span>).<span class="fu">parse</span>(requestURI + <span class="st">'id/1/'</span>);
|
|
|
+<span class="ot">console</span>.<span class="fu">log</span>(<span class="st">"Request URL: "</span> + <span class="ot">url</span>.<span class="fu">href</span>);
|
|
|
+<span class="kw">var</span> req = <span class="ot">coap</span>.<span class="fu">request</span>(url);
|
|
|
+<span class="kw">var</span> bl = <span class="fu">require</span>(<span class="st">'bl'</span>);
|
|
|
|
|
|
-req.setHeader("Accept", "application/json");
|
|
|
-req.on('response', function(res) {
|
|
|
- res.pipe(bl(function(err, data) {
|
|
|
- var json = JSON.parse(data);
|
|
|
- console.log(json);
|
|
|
+<span class="ot">req</span>.<span class="fu">setHeader</span>(<span class="st">"Accept"</span>, <span class="st">"application/json"</span>);
|
|
|
+<span class="ot">req</span>.<span class="fu">on</span>(<span class="st">'response'</span>, <span class="kw">function</span>(res) {
|
|
|
+ <span class="ot">res</span>.<span class="fu">pipe</span>(<span class="fu">bl</span>(<span class="kw">function</span>(err, data) {
|
|
|
+ <span class="kw">var</span> json = <span class="ot">JSON</span>.<span class="fu">parse</span>(data);
|
|
|
+ <span class="ot">console</span>.<span class="fu">log</span>(json);
|
|
|
}));
|
|
|
|
|
|
});
|
|
|
|
|
|
-req.end();</code></pre>
|
|
|
+<span class="ot">req</span>.<span class="fu">end</span>();</code></pre>
|
|
|
<p>代码有点长内容也有点多，但是核心是这句话：</p>
|
|
|
-<pre><code> req.setHeader("Accept", "application/json");</code></pre>
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">req</span>.<span class="fu">setHeader</span>(<span class="st">"Accept"</span>, <span class="st">"application/json"</span>);</code></pre>
|
|
|
<p>这样的话，我们只需要在我们的服务端一判断，</p>
|
|
|
-<pre><code>if(req.headers['Accept'] == 'application/json') {
|
|
|
- //do something
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">if</span>(<span class="ot">req</span>.<span class="fu">headers</span>[<span class="st">'Accept'</span>] == <span class="st">'application/json'</span>) {
|
|
|
+ <span class="co">//do something</span>
|
|
|
};</code></pre>
|
|
|
<p>这样就可以返回数据了</p>
|
|
|
<h3 id="coap-server端代码"><span class="header-section-number">10.6.3</span> CoAP Server端代码</h3>
|
|
|
<p>Server端的代码比较简单，判断一下</p>
|
|
|
-<pre><code>if (req.headers['Accept'] == 'application/json') {
|
|
|
- parse_url(req.url, function(result){
|
|
|
- res.end(result);
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">if</span> (<span class="ot">req</span>.<span class="fu">headers</span>[<span class="st">'Accept'</span>] == <span class="st">'application/json'</span>) {
|
|
|
+ <span class="fu">parse_url</span>(<span class="ot">req</span>.<span class="fu">url</span>, <span class="kw">function</span>(result){
|
|
|
+ <span class="ot">res</span>.<span class="fu">end</span>(result);
|
|
|
});
|
|
|
- res.code = '2.05';
|
|
|
+ <span class="ot">res</span>.<span class="fu">code</span> = <span class="st">'2.05'</span>;
|
|
|
}</code></pre>
|
|
|
<p>请求的是否是JSON格式，再返回一个205，也就是Content，只是这时设计是请求一个URL返回对应的数据。如</p>
|
|
|
<pre><code> coap://localhost/id/1/</code></pre>
|
|
|
<p>这时应该请求的是ID为1的数据，即</p>
|
|
|
-<pre><code>[ { id: 1, value: 'is id 1', sensors1: 19, sensors2: 20 }]</code></pre>
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript">[ { <span class="dt">id</span>: <span class="dv">1</span>, <span class="dt">value</span>: <span class="st">'is id 1'</span>, <span class="dt">sensors1</span>: <span class="dv">19</span>, <span class="dt">sensors2</span>: <span class="dv">20</span> }]</code></pre>
|
|
|
<p>而parse_url只是从数据库从读取相应的数据。</p>
|
|
|
-<pre><code>function parse_url(url ,callback) {
|
|
|
- var db = new sqlite3.Database(config["db_name"]);
|
|
|
+<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="fu">parse_url</span>(url ,callback) {
|
|
|
+ <span class="kw">var</span> db = <span class="kw">new</span> <span class="ot">sqlite3</span>.<span class="fu">Database</span>(config[<span class="st">"db_name"</span>]);
|
|
|
|
|
|
- var result = [];
|
|
|
- db.all("SELECT * FROM basic;", function(err, rows) {
|
|
|
- callback(JSON.stringify(rows));
|
|
|
+ <span class="kw">var</span> result = [];
|
|
|
+ <span class="ot">db</span>.<span class="fu">all</span>(<span class="st">"SELECT * FROM basic;"</span>, <span class="kw">function</span>(err, rows) {
|
|
|
+ <span class="fu">callback</span>(<span class="ot">JSON</span>.<span class="fu">stringify</span>(rows));
|
|
|
})
|
|
|
}</code></pre>
|
|
|
<p>并且全部都显示出来，设计得真是有点不行，不过现在已经差不多了。</p>
|
Phodal Huang