前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
需要联调的有以下两个方面的资源：
- css、js、图片等前端静态资源文件。
- ajax获取的后端数据。
前后端分离也可能分几种情况，比如:
- 前后端完全分离，前后端分别拥有自己域名后服务器
- 前后端开发分离，但是使用同一个域名和服务器
等等。
css、js文件和图片是通过link、scripts、img标签来引入的（样式中的图片也是一个道理）， 它们是不存在跨域问题的，在哪里引入都无所谓。
ajax获取后端数据是有跨域问题的，虽然说可以解决，但是有可能是该数据（或者后端部署环境）和上面的css、js、图片等静态资源是不在同一台服务器上的，也可能是同一台服务器不同域名下的。
......
mock 数据
进入页面注册登陆后点击右下角+号即可新建项目。
输入项目信息：
在数据编辑器内输入em.demo.all回车，自动创建好数据对象。
现在就可以使用mock好的数据了。
复制其URL到请求中。
xhr.open('GET', "https://www.easy-mock.com/mock/5ad4e4effee5f81310617113/getSomething", true);
发送后就可以收到返回的数据了。
Mock.js
Mock.js
Mock.js是一个模拟数据生成器，可以让前端独立于后端进行开发。如果你正在开发一个前端页面，可是后台还没有完成供你调用的Api，并且数据格式已经确定，那么你就可以使用Mock.js模拟相关的接口，生成假数据来查看页面效果。Mock.js的功能：生成随机数据，拦截 Ajax 请求。
引入Mock.js：
<script src="http://mockjs.com/dist/mock.js"></script>
Mock.mock('http://api.com', {
"name|3": "ABC", // 属性值重复3次
"age|20-30": 1 // 20~30随机数，1用来确定类型
});
var xhr = new XMLHttpRequest();
xhr.open("get", "http://api.com", true);
xhr.send(null);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
}
现在就可以访问了。
来一个复杂一些的。
Mock.mock('http://api.com', {
"user|2-5": [{ //2-5组数据
'name': '@cname', //中文名称
'age|1-100': 100, //100以内随机整数
'birthday': '@date("yyyy-MM-dd")', //日期
'city': '@city(true)' //中国城市
}]
});
var xhr = new XMLHttpRequest();
xhr.open("get", "http://api.com", true);
xhr.send(null);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
}
返回的数据：
{
"user": [
{
"name": "廖涛",
"age": 45,
"birthday": "1970-10-16",
"city": "重庆 重庆市"
},
{
"name": "龚勇",
"age": 88,
"birthday": "1984-05-12",
"city": "河北省 秦皇岛市"
},
{
"name": "文静",
"age": 84,
"birthday": "2016-05-12",
"city": "云南省 大理白族自治州"
},
{
"name": "史秀英",
"age": 93,
"birthday": "1970-02-25",
"city": "吉林省 辽源市"
}
]
}
Mock.setup()
配置拦截 Ajax 请求时的行为。支持的配置项有：timeout。
Mock.setup({
timeout: 400
})
Mock.setup({
timeout: '200-600'
})
指定被拦截的 Ajax 请求的响应时间，单位是毫秒。值可以是正整数，例如 400，表示 400 毫秒 后才会返回响应内容；也可以是横杠 '-' 风格的字符串，例如 '200-600'，表示响应时间介于 200 和 600 毫秒之间。默认值是'10-100'。
更多详细请戳：Mock.js
server-mock
server-mock
实现本地mock服务器的node.js工具。
var http = require("http");
http.createServer(function(req,res) {})
req：包含请求头部的相关信息，如请求方法、请求域名、IP地址、user-agent等等。
res：需要其返回的数据
var http = require("http");
var server = http.createServer(function (req, res) {
res.write("hello world");
res.end();
})
server.listen(8080);
使用node执行上述代码。
我们把req打印出来，看看里面有什么
console.log(req);
这里的这一连串我也看不懂的东西：），也许是相关的组件把。
res.write()就是将括号内的字符串作为响应体返回给浏览器。
res.setHeader("Content-Type","text/html; charset=gbk");
setHeader方法可用于设置响应头部。
上面代码就指定了响应体的编码方式，以何种方式编码。
var http = require("http");
var server = http.createServer(function (req, res) {
res.setHeader("Content-Type","text/html; charset=gbk");
res.write("hello world");
res.end();
})
server.listen(8080);
再次执行node。
var http = require("http");
var server = http.createServer(function (req, res) {
res.setHeader("Content-Type","text/html; charset=gbk");
res.write("<h1>test</h1>");
res.end();
})
server.listen(8080);
比如上面的代码，在浏览器中看到的将会是H1标签的"test"文本，因为"text/html"。
text/css ：CSS样式
application/javascript：JS脚本
....
Content-Type对照表
在setHeader中设置的属性优先级高于在响应内容中设置的属性。
