Node学习之路

今天介绍一下接口、SSR、SEO优化、Socket通讯和分页接口

1. 接口

---

1.1 RestfulAPI 规范

---

RESTful 是目前最流行的 API 设计规范，用于 Web 数据接口的设计。

RESTful 的核心思想就是，客户端发出的数据操作指令都是"动词 + 宾语"的结构。
比如，GET /articles这个命令，GET是动词，/articles是宾语。
动词通常就是五种 HTTP 方法，对应 CRUD 操作。

GET：读取（Read） 
POST：新建（Create） 
PUT：更新（Update） 
PATCH：更新（Update），通常是部分更新 
DELETE：删除（Delete）

根据 HTTP 规范，动词一律大写。

有些客户端只能使用GET和POST这两种方法。
服务器必须接受POST模拟其他三个方法（PUT、PATCH、DELETE）。
这时，客户端发出的 HTTP 请求，要加上X-HTTP-Method-Override属性，告诉服务器应该使用哪一个动词，覆盖POST方法。

1.2 编写api接口文档

---

正规的团队合作或者是项目对接，接口文档是非常重要的，一般接口文档都是通过开发人员写的。一个工整的文档显得是非重要

1.2.1 接口规范内容

• 接口名称
• 场景说明
• 接口说明
• 请求参数
• 响应参数
• 错误码

1.2.2 参数内容

• 字段名
• 变量名
• 是否必填
• 类型
• 示例值
• 描述

1.2.3 错误码内容

• 名称
• 描述
• 原因
• 解决方案

4.2.4 接口示例（来源：聚合数据新闻接口）

接口地址：http://v.juhe.cn/toutiao/index
返回格式：json
请求方式：get/post
请求示例：http://v.juhe.cn/toutiao/index?type=top&key=APPKEY
接口备注：返回头条，社会，国内，娱乐，体育，军事，科技，财经，时尚等新闻信息

请求参数说明：

名称	必填	类型	说明
key	是	string	应用APPKEY
type	否	string	类型,top(头条，默认),shehui(社会),guonei(国内),guoji(国际),yule(娱乐),tiyu(体育)junshi(军事),keji(科技),caijing(财经),shishang(时尚)

返回参数说明：

名称	类型	说明
见JSON返回示例	-	-

JSON返回示例：

{ 
"reason": "成功的返回",
 "result": { 
 	"stat": "1", 
 	"data": [ 
 		{ 
 			"uniquekey": "6c4caa0c3ba6e05e2a272892af43c00e", 
 			"title": "杨幂的发际线再也回不去了么？网友吐槽像半秃", 
 			"date": "2017-01-05 11:03", 
 			"category": "yule", 
 			"author_name": "腾讯娱乐", 
 			"url": "http://mini.eastday.com/mobile/170105110355287.html?qid=juheshuju", 
 			"thumbnail_pic_s": 
 				"http://03.imgmini.eastday.com/mobile/20170105/20170105110355_ 806f4ed3fe71d04fa452783d6736a02b_1_mwpm_03200403.jpeg", 
 			"thumbnail_pic_s02": 
 				"http://03.imgmini.eastday.com/mobile/20170105/20170105110355_ 806f4ed3fe71d04fa452783d6736a02b_2_mwpm_03200403.jpeg", 
 			"thumbnail_pic_s03": "http://03.imgmini.eastday.com/mobile/20170105/20170105110355_ 806f4ed3fe71d04fa452783d6736a02b_3_mwpm_03200403.jpeg" 
 			}, 
 		] 
 	} 
 }

1.3 postman接口调试工具的使用

---

postman
用户在开发或者调试网络程序或者是网页B/S模式的程序的时候是需要一些方法来跟踪网页请求的，用户可以使用一些网络的监视工具比如著名的Firebug等网页调试工具。

1.3.1 先写一个获取用户信息的接口

复制routes文件夹为api文件夹，只保留user.js
api
-> user.js
修改api/user.js文件

前后端分离 res.send()
前后端不分离 res.render()

var express = require('express'); 
var router = express.Router(); 
const sql = require('./../sql'); 
const User = require('./../sql/model/users'); 
router.get('/', function(req, res, next) { 
	sql.find(User, {}, {_id: 0, __v: 0}, (data) => { 
		res.send(data) 
		}) 
	}); // 查找某个用户的信息 
	router.post('/detail', function(req, res, next) {
		sql.find(User, { tel: req.body.tel }, {_id: 0, __v: 0}, (data) => { 
			res.send(data) 
		}) 
	}); 
	
	module.exports = router;

app.js处引入并且注册接口

var apiuserRouter = require('./api/user'); 
app.use('/api/user', apiuserRouter);

以后就可以通过 /api/user访问api文件夹下的user.js所对应的接口
http://localhost:3000/api/user

1.3.2 postman测试接口

1.3.3 前端通过ajax调用接口

$.ajax({ 
	url: 'http://localhost:3000/api/user', 
	success: function (data) { 
		console.log(data) 
	} 
})

此时发现跨域问题

a) jsonp 解决跨域问题
后端代码

router.get('/', function(req, res, next) { 
	// 这一步JSONP必备 
	var _callback = req.query.callback; 
	sql.find(User, {}, {_id: 0, __v: 0}, (data) => { 
		// res.send(data) 
		if (_callback){ 
			// 这两步设置发送也是NODE.JS发送JSONP必备 
			res.type('text/javascript'); 
			res.send(_callback + '(' + JSON.stringify(data) + ')'); 
		} else{ 
			res.json(data); 
		} 
	}) 
});

前端代码

$.ajax({ 
	url: 'http://localhost:3000/api/user', 
	dataType: 'jsonp', // *************** 
	success: function (data) { 
		console.log(data) 
	} 
})

b) cors解决跨域问题

app.js中加入如下代码

var allowCrossDomain = function (req, res, next) { 
	res.header('Access-Control-Allow-Origin', '*');//自定义中间件，设置跨域需要的响应头。 
	next(); 
}; 
	app.use(allowCrossDomain) 运用跨域的中间件

c) 利用 http-proxy-middleware 实现代理跨域 — 服务器与服务器之间
假设有一个服务器http://localhost:4000/users，现在需要在服务器为http://localhost:3000的接口中访问，可以使用http-proxy-middleware进行反向代理

var proxy = require('http-proxy-middleware'); 
const proxyOption = { 
	target: 'http://localhost:4000', 
	pathRewrite: { 
		'^/api/' : '/' // 重写请求，api/解析为/ 
	}, 
	changeOrigoin:true 
}; 
// 反向代理 
app.use('/api/*', proxy(proxyOption));

这样就可以直接通过http://localhost:3000/api/users访问到http://localhost:4000/users接口了

2. SSR

---

SSR是 Server-Side Rendering(服务器端渲染)的缩写，在普通的SPA中，一般是将框架及网站页面代码发送到浏览器，然后在浏览器中生成和操作DOM（这里也是第一次访问SPA网站在同等带宽及网络延迟下比传统的在后端生成HTML发送到浏览器要更慢的主要原因），但其实也可以将SPA应用打包到服务器上，在服务器上渲染出HTML，发送到浏览器，这样的HTML页面还不具备交互能力，所以还需要与SPA框架配合，在浏览器上“混合”成可交互的应用程序。所以，只要能合理地运用SSR技术，不仅能一定程度上解决首屏慢的问题，还能获得更好的SEO。

SSR的优点

• 更快的响应时间，不用等待所有的JS都下载完成，浏览器便能显示比较完整的页面了。
• 更好的SSR，我们可以将SEO的关键信息直接在后台就渲染成HTML，而保证搜索引擎的爬虫都能爬取到关键数据。

SSR的缺点

• 相对于仅仅需要提供静态文件的服务器，SSR中使用的渲染程序自然会占用更多的CPU和内存资源
• 一些常用的浏览器API可能无法正常使用，比如window、docment和alert等，如果使用的话需要对运行的环境加以判断
• 开发调试会有一些麻烦，因为涉及了浏览器及服务器，对于SPA的一些组件的生命周期的管理会变得复杂
• 可能会由于某些因素导致服务器端渲染的结果与浏览器端的结果不一致。

SSR常用框架

• React 的Next
• Vue.js 的Nuxt

3. seo优化

---

全称：Search English Optimization，搜索引擎优化。自从有了搜索引擎，SEO便诞生了。

存在的意义：为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。简言之，就是希望百度等搜索引擎能多多我们收录精心制作后的网站，并且在别人访问时网站能排在前面。

分类：白帽SEO和黑帽SEO。白帽SEO，起到了改良和规范网站设计的作用，使网站对搜索引擎和用户更加友好，并且网站也能从搜索引擎中获取合理的流量，这是搜索引擎鼓励和支持的。黑帽SEO，利用和放大搜索引擎政策缺陷来获取更多用户的访问量，这类行为大多是欺骗搜索引擎，一般搜索引擎公司是不支持与鼓励的。本文针对白帽SEO，那么白帽SEO能做什么呢？

1. 对网站的标题、关键字、描述精心设置，反映网站的定位，让搜索引擎明白网站是做什么的；

2. 网站内容优化：内容与关键字的对应，增加关键字的密度；

3. 在网站上合理设置Robot.txt文件；

4. 生成针对搜索引擎友好的网站地图；

5. 增加外部链接，到各个网站上宣传；

3.1 前端SEO优化

通过网站的结构布局设计和网页代码优化，使前端页面既能让浏览器用户能够看懂，也能让“蜘蛛”看懂。
(1) 网站结构布局优化：尽量简单、开门见山，提倡扁平化结构。
　　一般而言，建立的网站结构层次越少，越容易被“蜘蛛”抓取，也就容易被收录。一般中小型网站目录结构超过三级，“蜘蛛”便不愿意往下爬，“万一天黑迷路了怎么办”。并且根据相关调查：访客如果经过跳转3次还没找到需要的信息，很可能离开。因此，三层目录结构也是体验的需要。为此我们需要做到：

1. 控制首页链接数量
2. .扁平化的目录层次，尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页。扁平化的目录结构，比如：“植物”–> “水果” –> “苹果”、“桔子”、“香蕉”，通过3级就能找到香蕉了。
3. .导航优化
导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化<img添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。
其次，在每一个网页上应该加上面包屑导航，好处：从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而形成更好的位置感，同时提供了返回各个页面的接口，方便用户操作；对“蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。

4. 网站的结构布局–不可忽略的细节
	1）页面头部：logo及主导航，以及用户的信息。
	
	2）页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。
	
	3）页面底部：版权信息和友情链接。
	特别注意：分页导航写法，推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样“蜘蛛”能够根据相应页码直接跳转，下拉框直接选择页面跳转。而下面的写法是不推荐的，“首页 下一页 尾页”，特别是当分页数量特别多时，“蜘蛛”需要经过很多次往下爬，才能抓取，会很累、会容易放弃。

	5.制页面的大小，减少http请求，提高网站的加载速度。
	
	一个页面最好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开。
	(2) 网页代码优化
1.<title调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的<title设置相同的内容。
2.< meta keywords>标签：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。 
3.< meta description>标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。 　
4.< body>中的标签：尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如：h1-h6是用于标题类的，< nav>标签是用来设置页面主导航的等。 　
5.< a >页内链接，要加“title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上el="nofollow"属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。 　
6.正文标题要用< h1>标签：“蜘蛛” 认为它最重要，若不喜欢< h1>的默认样式可以通过CSS设置。尽量做到正文标题用< h1>标签，副标题用< h2>标签, 而其它地方不应该随便乱用 h 标题标签。
7.< br>标签：只用于文本内容的换行，比如:
< p>
　　 第一行文字内容<br/>
　　 第二行文字内容<br/>
　　 第三行文字内容
< /p>
8.表格应该使用<caption>表格标题标签
9.<img>应使用 “alt” 属性加以说明
10.< strong>、< em>标签 : 需要强调时使用。< strong>标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，< em>标签强调效果仅次于< strong>标签。< b>、< i>标签: 只是用于显示效果时使用，在SEO中不会起任何效果。
11、文本缩进不要使用特殊符号&nbsp; 应当使用CSS进行设置。版权符号不要使用特殊符号 &copy; 可以直接使用输入法，拼“banquan”，选择序号5就能打出版权符号©。
12、巧妙利用CSS布局，将重要内容的HTML代码放在最前面，最前面的内容被认为是最重要的，优先让“蜘蛛”读取，进行内容关键词抓取。
13.重要内容不要用JS输出，因为“蜘蛛”不认识
14.尽量少使用iframe框架,因为“蜘蛛”一般不会读取其中的内容
15.谨慎使用display：none ：对于不想显示的文字内容，应当设置z-index或设置到浏览器显示器之外。因为搜索引擎会过滤掉display:none其中的内容。
16..不断精简代码
17.js代码如果是操作DOM操作，应尽量放在body结束标签之后，html代码之前

4 socket通讯

---

socket 网络传输 — 双向数据传输

没有 socket通讯之前，只能使用 轮询 方案 
> 基于net原生模块

4.1 Socket 简介和通讯流程

网络上的两个程序通过一个双向的通信连接实现数据的交换，这个连接的一端称为一个socket。

建立网络通信连接至少要一对端口号(socket)。socket本质是编程接口(API)，对TCP/IP的封装，TCP/IP也要提供可供程序员做网络开发所用的接口，这就是Socket编程接口；HTTP是轿车，提供了封装或者显示数据的具体形式；Socket是发动机，提供了网络通信的能力。

4.1.1 通讯流程

根据连接启动的方式以及本地套接字要连接的目标，套接字之间的连接过程可以分为三个步骤：服务器监听，客户端请求，连接确认。

（1）服务器监听：是服务器端套接字并不定位具体的客户端套接字，而是处于等待连接的状态，实时监控网络状态。

（2）客户端请求：是指由客户端的套接字提出连接请求，要连接的目标是服务器端的套接字。为此，客户端的套接字必须首先描述它要连接的服务器的套接字，指出服务器端套接字的地址和端口号，然后就向服务器端套接字提出连接请求。

（3）连接确认：是指当服务器端套接字监听到或者说接收到客户端套接字的连接请求，它就响应客户端套接字的请求，建立一个新的线程，把服务器端套接字的描述发给客户端，一旦客户端确认了此描述，连接就建立好了。而服务器端套接字继续处于监听状态，继续接收其他客户端套接字的连接请求。

socket.io

5. 实现 分页接口

---

db.users.find().skip().limit()

skip 表示从第几个开始查询

limit 表示查询多少个

封装分页的模块 myapp - sql - index.js

实现分页接口 api user.js


今天就到这里了，请多多指教。