搭建服务器
2019-02-28 本文已影响0人
学的会的前端
http-server
使用http-server node工具启动一个静态服务器，并没有任何的后端。
npm install http-server -g
http-server
//index.html文件
<body>
<script>
var xhr = new XMLHttpRequest()
xhr.open('GET','/cate.json',true)
xhr.send()
xhr.onload = function(){
if((xhr.status >= 200 & xhr.status < 300) || xhr.status === 304){
var data = xhr.responseText
console.log(data)
}
}
</script>
</body>
//cate.json文件，响应的数据
{
"status": 200,
"data": 2
}
image.png
把数据的响应内容放到cate.json这个文件中，相当于像这个文件发送请求，返回这个文件的内容，而这个文件的内容就是数据响应的结果，就可以实现数据的模拟。简单开发时可以使用。
使用http://easy-mock.com/ ，线上mock数据
- 登录注册https://easy-mock.com/
-
创建新项目
创建项目.PNG
-
点击/hunger进入建立接口
image.png
之后创建接口
创建接口.PNG
-
进入接口进行编辑，之后更新
编辑接口.PNG
-
更新之后便有了URL地址
image.png
URL地址.PNG
-
在浏览器中打开URL地址
image.png
- 也可以使用命令行curl，对生成的URL地址进行测试，用
curl + URL
image.png
-
也可以在本地做测试，利用http-server。（我用的是vscode的live-server）
image.png
浏览器结果
image.png
缺点：数据是比较死的，无法根据条件进行模拟。比如用户登录状态，用户输入用户名和密码有可能会成功，有可能会失败，但是很难进行成功和失败的模拟。
线上mock数据平台
- 使用http://easy-mock.com/
- 使用http://rapapi.org/org/index.do
- 使用server-mock
使用server-mock node工具启动一个能处理静态文件和动态路由的服务器
手写一个服务器
- 使用nodejs搭建一个服务器，监听9000端口
//nodejs里面有个内置模块http
//nodejs里面通过require加载一个模块,require是一个对象。
var http = require('http')
//createServer创建一个服务器
//服务器里面有一个回调函数
//当通过浏览器访问服务器的时候，请求底层会被封装成一个对象，这个对象就是传入的第一个参数，req。
//用户请求的信息都在这个对象req里面。
//res是返回给用户的对象
var server = http.createServer(function(req,res){
console.log('jirengu')//在控制台展示，而不是浏览器
//通过setHeader()设置响应头,权重很高,响应头的作用：告诉浏览器一些相关的信息，按照这些信息进行解析
//text/plain：告诉浏览器接受到的数据就当成字符串（明文）展现就可以了，所以页面展现的是<h1>jirengu</h1>
//text/html告诉浏览器接收到的字符串要当成HTML渲染，所以展示的是jirengu
//charset=gbk告诉浏览器以gbk的方式进行解码，汉字就会乱码
//charset=utf-8汉字不会乱码
res.setHeader('Content-Type','text/html; charset=utf-8')
//res.write('hello word')
//res.write('<h1>jirengu</h1>')
res.write('<h1>饥人谷</h1>')
//调用end,结束请求。
res.end()
})
//.listen方法启动这个服务器，并且监听9000端口
server.listen(9000)
//想运行多个js文件，必须启动多个服务器，每一个服务器必须要使用不同的端口。
- nodejs的应用
var http = require('http')
var server = http.createServer(function(request, response){
setTimeout(function(){
//response.setHeader权重最高
response.setHeader('Content-Type','text/html; charset=utf-8')
response.writeHead(200, 'haha')
response.write('<html><head><meta charset="gbk" /></head>')
response.write('<body>')
response.write('<h1>你好</h1>')
response.write('</body>')
response.write('</html>')
response.end()
},2000);
})
console.log('open http://localhost:8080')
server.listen(8080)
-
浏览器渲染截图
image.png
-
关于响应的截图
响应截图.PNG
-
关于 response.setHeader和 response.writeHead的截图
image.png
-
当写入response.writeHead(404,'not found')就会产生404的结果
image.png
使用nodejs服务器路由解析
对一个网站来说，域名后面的东西就是路由，例如localhost:8080/user/123，则/user/123就是一个路由，路由的本质就是后端根据路由做对应的事情，比如用户访问这个路由，后端应该返回相应的数据。
var http = require('http')
var fs = require('fs')
http.createServer(function(req,res){
switch (req.url) {
case '/getWeather':
res.end(JSON.stringify({a:1, b:2}))
break;
case '/user/123':
res.end(fs.readFileSync(__dirname + '/static/user.tpl'))
break;
default:
res.end(fs.readFileSync(__dirname + '/static' + req.url))
}
}).listen(8080)
//可以实现mock数据，可以启动一个静态文件，可以处理动态路由
//一个网站请求到达后台，服务器根据对应的路由，到达相应的逻辑，响应对应的数据。
