Nodeji:http模块搭建服务器(Vue基础必备)

253 阅读2分钟

开启服务器

//1.导入http模块 (安装软件)
const http = require('http')

//2.创建服务器 (运行软件)
/* 
req : request 请求报文 (请求行、请求头、请求体)
res : response 响应报文 (响应行、响应头、响应体)
回调执行条件 : 客户端给服务器发送请求的时候会执行 (发一个请求,就执行一次,会执行多次)
*/
const app = http.createServer( (req,res)=>{
    //(1)请求 : req
    console.log( req.url )
    //当url中有中文的时候,http会进行特殊编码. 服务器需要解码之后才能看到中文
    console.log( decodeURI(req.url) )//解析中文
    //(2)处理 : 增删改查
    //(3)响应 : res
} )

//3.开启服务器 (启动软件)
//第一个参数 : port 端口号
    // 一台电脑只有一个id,但是有很多软件都能访问网络。 每一个软件对应一个编号称之为端口号。
//第二个参数: hostname主机名(ip地址)   如果不写,nodejs会自动识别本机ip
    //本机ip:    http://127.0.0.1
//第三个参数: 完成回调
app.listen(3000,()=>{
    console.log('服务器启动成功')
})

点击这里查看服务器

image.png

image.png

创建成功

image.png

http模块响应客户端请求

// 导入http模块
const http = require('http')

// 2.创建服务器
const app = http.createServer((req, res) => {
  // (1)req :请求
  console.log(decodeURI(req.url))//解析url中的中文
  // (2)处理
  // (3) : 响应
  // 如果是中文,浏览器会乱码 需要设置响应头 : 服务器告诉浏览器我给你的数据是什么格式
  res.setHeader('Content-type', 'text/plain;charset=utf-8')
  res.end('今天请看电影')
})

// 3.开启服务器
app.listen(3000, () => {
  console.log('服务器开启成功');
})

必须先关闭之前的服务器然后按照上面的步骤进行开启服务器

image.png

image.png

浏览器就可以访问了

image.png

nodejs响应客户端html文件

准备两个跳转的html页面

image.png

index页面

            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <meta http-equiv="X-UA-Compatible" content="ie=edge">
                <title>Document</title>
                <style>

                    div{
                        height: 100px;
                        line-height: 100px;
                        font-size: 50px;
                        color: #fff;
                        text-align: center;
                        background: linear-gradient(to right,red,orange,yellow,green,cyan,blue,purple);
                    }
                </style>
            </head>
            <body>
                <div>这是首页</div>
            </body>
            </html>

login页面

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Document</title>
        </head>
        <body>
            这是登录页
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
        </body>
        </html>
// 导入http模块
const http = require('http')
const fs = require('fs')
const path = require('path')
// 2.创建服务器
const app = http.createServer((req, res) => {
  // (1)req :请求
  console.log(decodeURI(req.url))//解析url中的中文
  // (2)处理
  if (req.url == '/') {
    fs.readFile(path.join(__dirname, 'index.html'), (err, data) => {
      if (err) {
        throw err
      } else {
        res.end(data)
      }
    })
  } else if (req.url == '/login') {
    fs.readFile(path.join(__dirname, 'login.html'), (err, data) => {
      if (err) {
        throw err
      } else {
        res.end(data)
      }
    })
  } else {
    // 如果山面的路径都不对,一般就代表错的路径
    res.end('404 not found')
  }

})

// 3.开启服务器
app.listen(3000, () => {
  console.log('服务器开启成功');
})



进入首页效果

image.png

login页面

image.png