P09:node实现静态服务器 ~ hello http

相关文章

静态服务器初体验


  • 编写根文件app.js
    // 引入http内置模块
    const http = require('http');
    
    // 引入chalk 用于美化后台打印
    const chalk = require('chalk')
    
    // 引入基本配置
    const conf = require('./config/defaultConfig');
    
    // 建立一个server 实例
    const server = http.createServer((rep, res) => {
        // 状态码
        res.statusCode = 200;
    
        // 设置相应头部
        res.setHeader('Content-Type', 'text/plain')
    
        // 输出
        res.end('haha http!')
    
    })
    
    // 监听 server 实例
    
    server.listen(conf.port, conf.hostname, () => {
    
        const addr = `http:// ${conf.hostname}:${conf.port}`
    
        console.info(`server startd at ${chalk.green(addr)}`)
    })
    复制代码
  • 抽离配置文件
    • 编写代码简洁实用为好,咱们将端口主机名等抽离出来 defaultConfig.js
    module.exports = {
        // 主机名称
        hostname: '127.0.0.1',
        // 端口号
        port: 6969
    }
    复制代码
  • 输出结果
    • 执行node app.js
    • 由于咱们监听的时候打印了端口因此有如下输出
    <!--输出结果-->
    server startd at http:// 127.0.0.1:6969
    复制代码
  • 在浏览器输入规定的主机名以及端口便可访问咱们编写的本地服务器

输出web页面


咱们设置res.setHeader('Content-Type', 'text/plain'),就会将输出格式设置成文本。这时候咱们会想到,工做中碰到过接口返回web页面的状况,这是怎么实现的呢?html

  • 须要将上述app.js文件建立实例部分修改成
    • 须要注意的是若是项目没有配置热跟新,须要从新执行 node app.js
// 建立一个server 实例
const server = http.createServer((rep, res) => {
    // 状态码
    res.statusCode = 200;

    // 设置相应头部
    res.setHeader('Content-Type', 'text/html')
    
    res.write('<html>')
    res.write('<body>')
    res.write('<h1 style="color: blue">')
    res.write('ah, http !')
    res.write('</h1>')
    res.write('</body>')
    // 输出
    res.end('</html>')

})

复制代码
  • 能够看到页面输出蓝色文字,表明咱们输出了web页面

关于热更新


上面提到修改代码,就须要使用node 从新执行文件。而实际写代码是须要不断的调试的,若是有一个东西可以自动帮咱们执行就行了,它有个官方名词:热更新node

  • supervisorwebpack

    • 你们都知道webpack 是自带热跟新的,很是强大。可是咱们写代码总不能每一个demo都用webpack,显得过于笨重web

    • supervisor 是一款轻量级的热更新工具,推荐装载在全局,这样随便哪一个js文件均可以随时随地热跟新了浏览器

      node i -g supervisor
      复制代码
    • 执行代码只需bash

      supervisor app.js
      复制代码

      从启动描述上能够看出,应该是利用了node watch 监听了文件的变更,从而再次触发 node XXX.js服务器

    • 后面再次修改文件,直接刷新页面便可,插件工具会帮咱们再将相关文件执行一遍app

    • 另外webpack 不须要刷新也能够看到效果,我猜想是后续有一次执行了相似location.reload()工具

    closepost

相关文章
相关标签/搜索