使用node中http搭建服务器以及自己写接口发送请求

如果搭建服务器的话，可以通过http模块（也可以通过第三方模块express搭建服务器，express模块对http模块进行了封装）

步骤：

1、引入http模块
2、创建服务器
3、设置端口，开启服务
4、监听浏览器请求事件（设置request事件）

	判断文件存在，则读取文件；如果文件不存在，页面显示Not Found（或者显示图片）

const http = require('http');
const server = http.createServer();
server.listen(3000,()=>console.log("服务器开启了"));
server.on('request', (request,response)=>{
    response.writeHead(200,{	//设置状态码和响应头
        "Content-Type": "text/html;charset=utf-8"
    })
    response.end('你好，服务器已经搭建完成，不在转圈圈了')
  	//响应结果（也叫响应体），最后必须设置end做出响应
})

server.on('request',(request,response)=>{}) 中参数response的方法：
response.statusCode=200;		//设置状态码
response.setHeader()				//设置响应头
response.write()			//设置响应体
response.writeHead()	//同时设置响应状态码和响应头
response.end()		//做出响应（必须设置）-参数是响应的结果（响应体）

demo1(根据不同url做出响应)

每进行修改一次代码，都要重新启动node服务
停止服务器（ctrl + c）
运行服务器（node 文件名）//文件开头+Tab键

const fs = require('fs');

const http = require("http");
const server = http.createServer();
server.listen(3000,()=>console.log('服务器已开启'))
server.on("request", (req,res)=>{
    //根据req的Url判断是什么地址，做出不同响应  
    if(req.url==='/demo.html'){
        fs.readFile('./demo.html', 'utf-8', (err,data)=>{
            if(err) throw err;
            res.end(data);
        })
    }else if(req.url==='/form.html'){
        fs.readFile('./form.html','utf-8', (err,data)=>{
            if(err) throw err;
            res.end(data);
        })
    }else {
        // res.statusCode = 404;
        res.writeHead(404,{
            "Content-Type": "text/html;charset=utf-8"
        })
        res.end('Not found 没有此文件');   ///demo.html
    }
})

demo2一套代码根据url做出不同响应

无论请求的是什么文件，如果文件存在的话，那么就去请求，得到响应；如果文件不存在，服务器响应404（Not Found）

const fs = require('fs');

const http = require("http");
const serve = http.createServer();
serve.listen(3000,()=>console.log('服务器开启了~'));
serve.on('request', (req,res)=>{

    fs.access('.'+req.url, (err)=>{ //判断文件是否存在
        if(err){
            //如果没有文件
            res.writeHead(404,{
                "Content-Type":"text/html;charset=utf-8"
            })
            res.end("Not Found");
        } else {
            //如果有文件
            fs.readFile('.'+req.url,'utf-8',(err,data)=>{
                if(err) throw err;
                res.end(data);
            })
        }
    })
})

实现下图的前后端操作

用户输入用户名和内容后，前端调接口发送请求，后端需要有写好的接口来收集信息，保存前端提交的数据。

1、后端操作：node写接口

获取留言：get方式接口的操作
添加留言：post方式接口的操作
如果请求的不是接口，那么将当作文件来处理，如果能读取到文件，将文件信息响应给前端，如果读取不到文件，将错误抛出去。

⭐nodemon启动服务器

全局安装nodemon启动服务器，保存时自动帮我们重启服务器。（nodemon app.js启动服务器）

（否则当我们修改node中代码时，需要频繁重新启动服务器）

全局安装nodemon：npm i -g nodemon
作用：代替node启动服务器
优点：只要代码修改，自动重启服务器

//node.js
const fs = require("fs");
const querystring = require("querystring");
const mime = require("mime");	//引入mime第三方模块
const http = require("http");

const server = http.createServer();
server.listen(3000,()=>console.log("服务器启动了"));
server.on("request",(req,res)=>{    //监听请求事件（只要有请求就触发该事件）
    var url = req.url;
    //接口1：获取留言
    if(url=='/getMessage'){
        //读取json文件，将结果响应给浏览器
        fs.readFile('./msg.json',"utf-8",(err,data)=>{
            if(err) throw err;
            res.writeHead(200,{
                "Content-Type":"application/json;charset=utf-8"
            })
            res.end(data);
        })
        //不reutrn报错（记得return否则代码一直往下执行）
        return
    }

    //接口2：添加留言
    if(url==='/addMessage'){
        //收集用户信息，保存在json中
        var str = '';
        req.on('data',(chunk)=>{    //收集的信息是一块一块接收的
            str+=chunk;
        })
        req.on('end',()=>{
            //接收完毕的结果，存在json中
            let msg = querystring.parse(str);   //转为对象形式，通过.push将新数据放在原本json中
            
            //保存数据
            //1、加载json文件   2、将新数据放入json中   3、保存json文件(重新写入json)
            let resjson = require('./msg.json');
            resjson.push(msg);  
            fs.writeFile('./msg.json',JSON.stringify(resjson),err=>{
                if(err) {
                    res.end(JSON.stringify({msg:'请求失败'}));
                }else {
                    res.setHeader("Content-Type","application/json");
                    res.end(JSON.stringify({code:200,msg:'添加成功'}));
                }
            })

        })
        return;
    }

    //当作文件处理
    fs.access('./public/'+url, (err)=>{ //判断有没有文件
        if(err){
            //如果没有文件
            res.writeHead(404,{
                "Content-Type":"text/html;chartset=utf-8"
            })
            res.end("Not Found");
        } else {
            //如果有文件
            fs.readFile("./public/"+url,(err,data)=>{
                if(err) throw err;
                res.setHeader("Content-Type",mime.getType(url));//mime是解决不同html/css/png/jpg的格式
                res.end(data);
            })
        }
    })

})

mime：第三方模块下载安装，引入后即可使用，解决mime警告问题

2、使用原生ajax请求接口

<script>
    function loadData () {

      var xhr = new XMLHttpRequest();
      xhr.open('GET', '/getMessage');
      xhr.onload = function () {
        console.log(this.response);
        var data = JSON.parse(this.response);
        var str = '';
        data.forEach(function (item) {
          str += `
          <li>
            <div class="info"><img src="images/03.jpg"><span>${item.name}</span>
              <p>发布于：2019-08-20</p>
            </div>
            <div class="content">${item.content}</div>
          </li>`;
        });
        // 把拼接=好的str放到ul中
        document.querySelector('ul').innerHTML = str;
      }
      xhr.send();
    }
    loadData();

    //添加留言功能
    var send = document.getElementById("send");
    send.onclick = function(){
      var nickname = document.querySelector("#username").value.trim();
      var content = document.querySelector("#area").value.trim();

      var xhr = new XMLHttpRequest();
      xhr.open("POST",'addMessage');
      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      xhr.onload = function(){
        // console.log(this.response);
        var res = this.response;
        if(res.code===200){
          alert(res.msg);
          loadData();
        }
        
      }
      xhr.send('name='+nickname+'&content='+content);  //name=11&content=22
    }
  </script>