Node.js快速入门——实现一个服务器

Node.js的出现让前端工程师能够服务端争得一席之地，除了服务端以外Node.js在中台也占据着重要的地位，能够说Node.js是前端人进阶路上必备的技能之一了。而前端工程师学习Node.js成本很低，语法就是js的语法，只须要熟悉一下Node.js的API便可轻松上手。

推荐阅读路线

• Node.js基础知识——经常使用API：有耐心的话最好先过一遍基础知识，以为基础知识太枯燥能够从Node.js快速入门看起，遇到不会的API再回来查看基础知识。
• Node.js快速入门——实现一个服务器：Node.js手把手入门教程。
• express快速入门——实现一个服务器：Node.js的一个框架，能够加快咱们的开发速度。

前言

Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境。大白话说Node.js就是一个软件，他能够运行js/ts文件，使电脑充当一台服务器。

Node.js实现一台服务器至少须要实现如下功能：

• 响应静态资源请求
• 根据不一样的请求url返回不一样的内容
• 得到前端发送的get请求的参数
• 得到前端发送的post请求的参数

Node.js的安装十分容易，在官网下载安装便可，安装完成后在终端中用node -v测试是否完成安装。以下图所示即安装成功。

准备工做

建立一个static文件夹用来存放静态资源，server.js用于写服务器代码。

1 响应静态资源请求

客户端第一次向服务器发起的请求index.html文件的请求就是静态资源请求，全部的html、css、js等文件都属于静态资源。

Node.js在响应静态资源的请求上不一样于其余后端语言，如PHP，PHP自己不响应静态资源，而是经过Apache处理静态资源的响应，PHP只处理数据的请求，而Node.js则是既要处理静态资源的请求又要处理数据的请求。

那么咱们首实现用Node.js来响应静态资源请求。

// 首先引入http，fs，path模块
const http = require('http')
const fs = require('fs')
const path = require('path')

// 建立一个服务器
const server = http.createServer((req, res) => {
  // 请求地址以'/static'开头的为请求静态资源
  if(req.url.startsWith('/static')) {
    // 经过请求url得到对应文件的路径
    let pathStr = path.join(__dirname,req.url)
    // 读取文件内容并返回
    fs.readFile(pathStr,{encoding: 'utf8'}, (err,fileContent) => {
      if(err) {
        // 设置响应状态码为404
        res.writeHead(404)
        res.end('查找不到资源，请检查您的url是否正确')
      } else {
        res.end(fileContent)
      }
    })
  }
})
// 启动服务器并监听3000端口，启动成功后向控制台写入 服务器启动成功！
server.listen(3000,() => {
  console.log('服务器启动成功！') 
})
复制代码

接着在终端中先进入server.js文件所在路径，而后使用node+文件名来运行js文件。

在浏览器按照资源所在路径访问静态资源，测试是否能正确返回静态资源。

思路也是很是简单，首先经过请求的url拼接出文件的绝对路径，而后将文件内容读取出来并返回客户端便可，有了思路以后只须要记一下API就能够了。

2 根据不一样的请求url返回不一样的内容

咱们刚刚只处理了静态资源的请求，如今访问其余路径不会有任何反应，由于咱们尚未对其余请求url作处理。

接下来咱们作一个登录注册功能，分别处理/login、/register路径，并对未处理的url返回404。

const server = http.createServer((req, res) => {
  // 请求地址以'/static'开头的为请求静态资源
  if(req.url.startsWith('/static')) {
    // 经过请求url得到对应文件的路径
    let pathStr = path.join(__dirname,req.url)
    fs.readFile(pathStr,{encoding: 'utf8'}, (err,fileContent) => {
      if(err) {
        res.writeHead(404)
        res.end('查找不到资源，请检查您的url是否正确')
      } else {
        res.end(fileContent)
      }
    })
  } else if (/(^\/login$)|(^\/login\?.*$)/ig.test(req.url)) {
    // 匹配/login或者/login?xxx的url
    res.end('login')
  } else if(/(^\/register$)|(^\/register\?.*$)/ig.test(req.url)) {
    // 匹配/register或者/register?xxx的url
    res.end('register')
  } else {
    // 未处理的url返回404
    res.writeHead(404)
    res.end()
  }
})
复制代码

访问 localhost:3000/login或localhost:3000/login?xxxx时能够看到返回了数据。

而访问未处理的url时则报404错误。

3 得到前端发送的get请求的参数

首先咱们在index.html中建立一个表单，用于提交登录信息，信息提交到/login，方式为GET

<form action='/login' method='GET'>
    <label>
        用户名：
        <input type='text' name='username' placeholder='请输入用户名'/>
    </label>
    <br>
    <label>
        密码：
        <input type="password" name='password' placeholder='请输入密码' />
    </label>
    <br>
    <input type='submit' value='提交'>
</form>
复制代码

接下来解析GET请求参数须要用到url模块，先引入

const url = require('url')
复制代码

而后对匹配/login的规则进行修改

else if (/(^\/login$)|(^\/login\?.*$)/ig.test(req.url)) {
    // 匹配/login或者/login?xxx的url
    // 設置响应数据类型
    res.setHeader('Content-Type','text/plain;charset=utf8')
    // 判断请求是否为GET
    if (req.method === 'GET') {
      // 得到参数
      const params = url.parse(req.url, true).query
      // 伪装读取了数据库，用户名为admin，密码为123则登录成功
      if(params.username === 'admin' && params.password === '123') {
        res.end('登陆成功！')
      } else {
        res.end('您的帐号或密码有误，请重试')
      }
    }
    res.end('login')
}
复制代码

4 得到前端发送的post请求的参数

将index.html中的表格提交方式改成POST请求

<form action='/login' method='POST'>
复制代码

接下来解析POST请求参数须要用到querystring模块，先引入

const querystring = require('querystring')
复制代码

而后继续对匹配/login的规则进行修改

post请求的参数是放在http请求体中的，Node.js接收http请求体的数据是采用事件监听的方式接收的，收到一部分http请求体的数据会触发一次data事件，所有接收完会触发end事件，咱们先接收全部数据而后对数据格式化提取出咱们想要的参数

else if (/(^\/login$)|(^\/login\?.*$)/ig.test(req.url)) {
    // 匹配/login或者/login?xxx的url
    // 設置响应数据类型
    res.setHeader('Content-Type','text/plain;charset=utf8')
    // 判断请求是否为GET
    if (req.method === 'GET') {
      // 得到GET参数
      const params = url.parse(req.url, true).query
      // 伪装读取了数据库，用户名为admin，密码为123则登录成功
      if(params.username === 'admin' && params.password === '123') {
        res.end('登陆成功！')
      } else {
        res.end('您的帐号或密码有误，请重试')
      }
    } else if (req.method === 'POST') {
      // 得到POST参数
      let paramsStr = ''
      req.on('data', thunk=> {
        // thunk为http请求体中的一部分数据
        paramsStr += thunk
      })
      // 所有接收完触发end事件
      req.on('end', () => {
        const params = querystring.parse(paramsStr)
        // 伪装读取了数据库，用户名为admin，密码为123则登录成功
        if(params.username === 'admin' && params.password === '123') {
          res.end('登陆成功！')
        } else {
          res.end('您的帐号或密码有误，请重试')
        }
      })
    }
}
复制代码

再次在index.html中登陆

此时的参数存放在http的请求体中

5 交流

若是这篇文章帮到你了，以为不错的话来点个Star吧。 github.com/lizijie123