一,简介
关于安装node和基础的node知识,之前的博客都要介绍完毕,这次的博客讲讲关于node搭建静态服务器。
以前我们所谓说的前端静态页面以为是没有设置任何效果的页面就是静态页面,但是这并不是,因为没有任何的数据交互,再炫酷的效果,那也是静态页面,只是前端工程师拿着自己的数据进行玩罢了,但是如果涉及到后端服务器和数据库,将数据库里的数据拿出,从后代将数据做简单的处理,再通过接口连接前端,前端拿到这些数据,再通过那些炫酷的效果,这才是动态页面。
二,搭建
前面讲了前后端数据连接的介绍,光说无用,我来一一介绍
在搭建一个简单的服务器的,首先要引入必要的模块
引入模块
let http = require("http");
let fs = require("fs");
let url = require("url");
let path = require("path");
这些是简单,但是必要的四个模块
接下来就是创建一个静态服务器
创建一个静态服务器
let server = http.createServer();
创建好静态服务器好后,就把所需要的本地文件进行上传处理
主要的作用是进行处理网络请求
server.on("request" , (req , res) =>{
})
如果我有一个页面有简单的html,和css
那么就将这些html,css的本地地址找到,进行上传
并且进行数据交互,需要写一下请求头
server.on("request" , (req , res) =>{
if((req.url == "/text.html" || req.url == "/") && req.method == "GET"){
fs.readFile("./text.html" , "utf8" , (err ,data) =>{
res.writeHead(200,{"Content-type" : "text/html"})
res.end(data);
})
}else if(req.url == "/text.css" && req.method == "GET"){
fs.readFile("./text.css" , "utf8" , (err ,data) =>{
res.writeHead(200,{"Content-type" : "text/css"})
res.end(data);
})
}
})
这样我就把所需要的本地文件进行上传
既然写好了服务器那么最后写好端口号,也就是写地址,通过浏览器就可以打开网页了
sever.listen(3000)
以上的步骤就是基本的创建了一个静态的服务器,但是还少一个步骤,也就是最重要的步骤,也就是接口,前后端的数据交互全靠它了
接口
else if(req.url == "/getData" && req.method == "GET"){
fs.readFile(".data.json" , "utf8" , (err , data) =>{
res.end(JSON.stringify(data));
})
}
通过url写入接口地址,method接口的请求方式,然后通过找到地址,找到数据后,然后将这些进行转码,然后前端通过ajax请求拿到这些数据进行渲染
以上静态的服务器的静态服务器就创建完毕