node.js创建服务器

最新推荐文章于 2024-11-26 16:49:31 发布

原创最新推荐文章于 2024-11-26 16:49:31 发布 · 156 阅读

0 ·

CC 4.0 BY-SA版权

node.js 专栏收录该内容

7 篇文章

订阅专栏

前置基础

Node.js 是JavaScript 运行时环境，既不是语言，也不是框架，它是一个平台
Node.js 中的 JavaScript没有 BOM、DOM，但有EcmaScript 基本的 JavaScript 语言部分
在 Node 中为 JavaScript 提供了一些服务器级别的 API，如文件操作的能力，http 服务的能力

Content-Type

服务器最好把每次响应的数据是什么内容类型都告诉客户端，而且要正确的告诉
不同的资源对应的 Content-Type 是不一样，具体参照：http://tool.oschina.net/commons
对于文本类型的数据，最好都加上编码，目的是为了防止中文解析乱码问题，图片不需要

一个简单的服务器

var http = require('http')
var fs = require('fs')

var server = http.createServer()

server.on('request', function (req, res) {
  //  index.html
  var url = req.url

  if (url === '/') {
    // 肯定不这么干
    // res.end('<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><h1>首页</h1></body>/html>')

    // 我们要发送的还是在文件中的内容
    fs.readFile('./resource/index.html', function (err, data) {
      if (err) {
        res.setHeader('Content-Type', 'text/plain; charset=utf-8')
        res.end('文件读取失败，请稍后重试！')
      } else {
        // data 默认是二进制数据，可以通过 .toString 转为咱们能识别的字符串
        // res.end() 支持两种数据类型，一种是二进制，一种是字符串
        res.setHeader('Content-Type', 'text/html; charset=utf-8')
        res.end(data)
      }
    })
  } else if (url === '/xiaoming') {
    // url：统一资源定位符
    // 一个 url 最终其实是要对应到一个资源的
    fs.readFile('./resource/ab2.jpg', function (err, data) {
      if (err) {
        res.setHeader('Content-Type', 'text/plain; charset=utf-8')
        res.end('文件读取失败，请稍后重试！')
      } else {
        // data 默认是二进制数据，可以通过 .toString 转为咱们能识别的字符串
        // res.end() 支持两种数据类型，一种是二进制，一种是字符串
        // 图片就不需要指定编码了，因为我们常说的编码一般指的是：字符编码
        res.setHeader('Content-Type', 'image/jpeg')
        res.end(data)
      }
    })
  }
})

server.listen(3000, function () {
  console.log('Server is running...')
})

服务端渲染

安装模板引擎

npm i art-template -s

创建2个html文件

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>hello {{name}}</h2>
</body>
</html>

// login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>登录 {{name}}</h2>
</body>
</html>

服务端渲染html文件

使用readFile读取html文件转为字符串，然后使用模板渲染转换插值内容，最后将这些字符串用res.end发送给浏览器，浏览器会自动解析这些字符串

let fs = require('fs')
let http = require('http')
// 加载模板引擎
let tem = require('./node_modules/art-template/lib/template-web')

let server = http.createServer()

dir = 'C:/Users/ma/Desktop/node.js/实战'

server.on('request', function (req, res) {
  let url = req.url

  // 使用访问的路径名来获取读取文件的名字，因为路径名和读取文件相同
  let filePath = '/index.html'
  if (url !== '/') {
    filePath = url
  }

  fs.readFile(dir + filePath, function (err, data) {
    if (err) {
      return res.end('404 Not Found.')
    }
    else {
      let newData = data.toString()
      let htmlData = tem.render(newData, {
        name: 'Vansal'
      })
      res.end(htmlData)
    }
  })
})

server.listen(8080, function () {
  console.log('Server is running...')
})

反馈页面制作

使用app.js创建服务器，当服务器监听到由浏览器访问首页时，服务器响应并返回一个index.html文件，浏览器就会渲染这个index.html，当渲染时发现img标签的地址，就会再次发起一个请求来获取图片，服务器监听到由浏览器访问/public时就会读取相应url名对应的文件名，响应给浏览器

案例最重要的一点，index.html中的获取图片路径、代码路径等都不是像前端一样的相对路径了，而是浏览器访问服务器的url路径

例如浏览器向服务器请求图片的路径是http://localhost:8080/public/img/ab3.jpg

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>首页</h2>
    <img src="/public/img/ab3.jpg" alt="">
    <script src="/public/js/main.js"></script>
</body>
</html>

//app.js

let fs = require('fs')
let http = require('http')

let dir = 'C:/Users/ma/Desktop/node.js/实战/feedback'
http
  .createServer(function (req, res) {
    let url = req.url

    if (url === '/') {
      fs.readFile('./views/index.html', function (err, data) {
        if (err) {
          return res.end('404')
        }
        res.end(data)
      })
    }
    else if (url.indexOf('/public') === 0) {
      fs.readFile('.' + url, function (err, data) {
        if (err) {
          return res.end('404')
        }
        res.end(data)
      })
    }
  })
  .listen(8080, function () {
    console.log('running...')
  })

使用url核心模块可以解析url

let url = require('url')

// 第二个参数设置true可以将查询参数query变成一个对象
parseObj = url.parse(req.url,true)

重定向原理

res.statusCode = 302

res.setHeader('Location', '/')