ssr前端独立开发利器，一个demo

来源：互联网发布：手机wifi热点软件编辑：程序博客网时间：2024/05/22 07:46

前端利器ssr，不用等后端去开发API接口了。

将一个目录设置成一个静态服务器。。大家肯定遇到过，当后端 API 没有编写完成时，前端无法进行调试，这就导致了前端会被后端阻塞的情况。而ssr相当于是搭建了一个 Mock Server ，构建假数据，然后把这些假数据存到 JSON 文件上，Mock Server 可以响应请求或者生成页面，当然也可以顺便生成 API 文档。

强制跨域访问(AJAX请求不报错)
启动多个服务，自动解决端口冲突
设置指定端口号

全局安装

npm install -g ssr

命令帮助。

Usage: ssr [options]Options:  --help, -h         Show help                                          --version, -V, -v  Show version number                                --port, -p         Set the port!  --cors, -c         allows cross origin access serving  copyright 2015

命令使用 ssr

$ ssr           # 默认 端口 1987   访问地址：=> http://localhost:1987$ ssr -p 2015   # 端口设置 2015   访问地址：=> http://localhost:2015$ ssr -cp 2015   #端口设置 2015  并且 可以跨域访问

注意：默认不传端口，起多个服务不会发生端口冲突，尽情玩耍吧。

使用方法

建两个目录文件 dir1 和 dir2
分别进入这两个目录使用ssr起服务
dir1 运行ssr -cp 1987 起来之后为 http://localhost:1987，dir2 运行 ssr -cp 2015 起来之后地址为 http://localhost:2015
在 dir1 中存一个文件 file 里面是JSON数据格式
在 dir2 中存一个 index.html 通过 jQuery 去访问 file 文件返回 JSON 或者你输入file文件中的内容的内容

当前目录安装

npm install ssr

nodejs 中应用

var ssr = require('ssr');    ssr(1998);

//dir1/test.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ssr</title>
<script src="js/jquery172min.js"></script>
</head>
<body>
<script>
$.ajax({
url:"http://localhost:1987/data.json",
type:"get",
//datatype:"json",
//data:JSON.stringify(para),
async:true,
timeout : 30000,
error: function(){
console.log('网络通信错误，请稍后再试！');
},
success: function(data){
console.log(data)
}
});
</script>
</body>
</html>

//dir2/data.json

"{'msg':'这是一个test。'}"

!!这里注意，不要写成"{"msg":"这是一个test!"}" 这样ajax能请求成功，status虽然为200，但是XMLHttpRequest 的readyState 不一定等于4。

写成{"msg":"这是一个test。"}或者"{'msg':'这是一个test。'}" 也不要写成'{"msg":"这是一个test。"}'

效果：

阅读全文

'); })();