Node--搭建服务器

使用node搭建服务器，完成简单的登录功能。

搭建简易的服务器

步骤

1、引入http模块

2、创建服务，http.createServer

3、监听端口

我们创建http.js文件，并写入以下代码，然后在终端中执行 node http.js,这样服务就启用了，我们就可以访问服务器了

const http = require('node:http');

const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((request, response) => {
    console.log('访问服务器')
    //触发服务器时的逻辑
 });

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

运行文件后会在终端打印出

打开浏览器并输入http://127.0.0.1:3000时， 终端会打印出

每次访问服务器时，都会触发http.createServer方法，访问一次触发一次。createServer方法中的回调函数包含两个参数request和response

• request:web端向服务端发送请求
• response:服务端给web端的响应

request对象

request对象中包含我们需要的headers,method,url，获取到请求的url后，我们可以做出相应逻辑判断

const server = http.createServer((request, response) => {
    console.log('访问服务器')
    const {url} = request
    console.log(url)
 });

重启服务，刷新页面，终端展示如下：

/ 就是我们访问的url，这样看不太明了，我们在浏览器输入http://127.0.0.1:3000/index.html

url就是/index.html

response对象

通过response.write()方法写入应响内容

const server = http.createServer((request, response) => {
  console.log('访问服务器')
  const { url } = request;
  console.log(url)
  response.write('this is response content')
  response.end()
});

重启服务，刷新页面

这样我们就完成了一个简单的服务请求。

实现简单的登录操作

下面我们实现一个简单的登录操作：

创建index.html

内容如下：

<div class="item">
  <label for="">姓名：</label>
  <input type="text" id="inputField"/>
</div>
<div class="item">
   <label for="">密码：</label>
   <input type="password" id="passwordField" />
</div>
<div class="item">
   <button id="submit">提交</button>
</div>

页面创建好后，我们需要将这个页面通过服务器渲染出来。

读取文件内容并渲染

修改一下http.js

const http = require("node:http");
const fs = require("node:fs");//我们需要读取我们本地的index.html文件的内容并展示

const hostname = "127.0.0.1";
const port = 3000;

const server = http.createServer((request, response) => {
  console.log("访问服务器");
  const { url } = request;
  if (url === "/index.html") {
    fs.readFile("/index.html", "utf-8", (err, data) => {
     //读取文件成功，返回的data是字符串，我们需要告诉浏览器用什么规则去解码
     //如果data是undefined大概率是读取文件的路径错了
     response.writeHead(200, {
        "content-type": "text/html;Chartset=utf-8",
      });
      response.write(data);
      response.end();
    });
  }
  response.write("this is response content");
  response.end();
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

看看页面加载结果：

绑定事件，获取数据并发送

下来我们需要绑定事件，将输入框的数据传给服务器

  <script>
      $(function () {
        const submitBtn = document.getElementById("submit");
        submitBtn.addEventListener("click", function () {
          const name = $("#inputField").val();
          const password = $("#passwordField").val();
          $.post("http://127.0.0.1:3000/login", { name, password }, function (res) {
            console.log("response", res);
          });
          return false;
       });
      });
    </script>

服务器端添加request监听事件

再次修改http.js文件,添加请求相关的监听事件：

let chunkData = {}
request.on('error',err=>{
    console.log(err)
})
.on('data',chunk=>{
   //chunk是Buffer格式的，我们需要将其转换成我们需要的格式,下图就是转换前与转换后的内容
  console.log(chunk);
 //buf.toString([encoding[, start[, end]]]),根据 `encoding` 中指定的字符编码将 `buf` 解码为字符串,encoding默认是utf8
  chunk
     .toString()
     .split("&")
     .forEach((element) => {
         const arr = element.split("=");
         chunkData[arr[0]] = arr[1];
      });
     console.log(chunkData);  
})
.on('end',()=>{})

通过监听"data"事件获取数据，监听"error"事件获取错误信息，需要注意的一点是，当我们没有监听error事件时，一旦request流出现错误，就会抛出异常，这很可能导致你的服务崩溃。

response响应内容

我们拿到参数之后，需要给客户端返回response数据

• 显示设置标头，setHeader()
• 隐士设置表头，writeHead(statusCode,options)（上边有示例）
• 响应正文，可以通过response.write()方法写入（上边有示例），也可以通过resposne.end()传送数据

response.on("error", function (err) {
   console.log(err);
});
response.statusCode = 200;
response.setHeader("Content-Type", "application/json");
const responseBody = {
     code: 200,
     data: {
        userId:1,
        userName: "name",
     }
    };
response.end(JSON.stringify(responseBody));

完整代码如下：

//这段代码追加在createServer的回调函数中
 if (url === "/login") {
   let chunkData = {};
    request
      .on("error", (err) => {
      //监听请求错误事件
        console.log(err);
      })
      .on("data", (chunk) => {
      //chunk是Buffer格式的，我们需要将其转换成我们需要的格式,下图就是转换前与转换后的内容
        console.log(chunk);
      //buf.toString([encoding[, start[, end]]]),根据 `encoding` 中指定的字符编码将 `buf` 解码为字符串,encoding默认是utf8
       chunk
          .toString()
          .split("&")
          .forEach((element) => {
            const arr = element.split("=");
            chunkData[arr[0]] = arr[1];
          });
      })
      .on("end", () => {
        response.on("error", function (err) {
          console.log(err);
        });
        response.statusCode = 200;
        response.setHeader("Content-Type", "application/json");
        const responseBody = {
          code: 200,
          data: {
            userId:1,
            userName: "name",
          }
        };
        response.end(JSON.stringify(responseBody));
      });
  }

让我们来看一下请求结果：

至此，我们完成了一个简单的Node服务器搭建,了解大概的流程，实际项目开发，还需继续深造。