http - 简书

使用nodemon运行node.js
nodemon在我们修改服务器代码的时候会自动刷新，不用重复去执行node指令。

npm install nodemon -g

创建一个最简单的http服务器

//http是内置模块，装完node就有
const http=require("http")
const server=http.createServer((req,res)=>{
    //res.write("hello你好");//出现中文会乱码
    //解决乱码问题
    // res.writeHead(200,{"content-type":"text/html;charset=utf8"})
    res.setHeader("content-type","text/html;charset=utf8");//和上面一样
    res.write("hello你好");//出现中文会乱码
    res.end()
})
server.listen(3000)

res.write(“可以是任意数据类型，也可以是标签；也可以是文件”）可以向浏览器写入的内容

读取文件写入网页中-也就是通过node加载html页面

借助fs模块

const http=require("http")
const fs=require("fs")
const server=http.createServer((req,res)=>{
    res.setHeader("content-type","text/html;charset=utf8")
    let htmldata=fs.readFileSync("./1.html")
    console.log(htmldata.toString())
    res.write(htmldata)
   res.end()
})
server.listen(3000)

上面代码在打印htmldata时，会把htm所有代码全部打印出来； res.write(htmldata)可以向网页放任何你内容。
注意：如果要读取不止一个html文件，我们就要用到后端路由的概念；因为如果在上面代码中分别读取2个html文件，我们是区分不了的。
再来理解一下前端路由：也就是SPA、我们始终用的是一个html模块，在切换路由的时候不会跳转，也不会刷新网页。

后端路由跳转

写代码之前。我们先来理解一下req和res这两个参数
req：所有浏览器发送请求到服务端的东西都在req里面
res：服务端输出给浏览器的东西都在res里面

const http = require("http")
const fs = require("fs")
const server = http.createServer((req, res) => {
    res.setHeader("content-type", "text/html;charset=utf8")
    if (req.url === "/") {
        let htmldata = fs.readFileSync("./views/index.html")
        res.write(htmldata)
    }else if(req.url === "/detail"){
        let htmldata = fs.readFileSync("./views/detail.html")
        res.write(htmldata)
    }else if(req.url === "/getData"){//模拟接口
        let obj={
            info:"some value",
            status:1
        }
        res.write(JSON.stringify(obj))
    }
    res.end()
})

server.listen(3000)

我们可以在浏览器地址栏输入不同的地址去加载不同的html，或者是模拟接口数据；写操作都会刷新浏览器。
地址带参数和不带参数
1.http://localhost:3000/detail
2.http://localhost:3000/detail?name=zhangsan
分析带不带参数之前先来了解一下地址
1.http：http和thhps是网络协议。
2.localhost：是域名地址，目前是本地的域名，如果想要别人访问你的网页，我们需要去买一个域名。
3.3000：端口号。
4.?name=zhangsan：?后面是该地址所带的参数
好了。现在来谈谈地址带参合不带参的问题。
req.url === "/detail"；这里我们设置的地址是不带参的，如果在这个地址的基础上带了参数再去访问，是访问不到不带参的地址的内容的。但实际上，带参和不带参都是同一个地址。
如何解决
引入url模块，这个模块的parse方法可以将req.url解析成一个Url对象
其中pathname才是真正的地址。
也就是说，当我们输入http://localhost:3000/detail?name=zhangsan，url模块会自动帮我们解析这个地址，即使有参数，他的pathname还是/detail，当我们访问带参数的地址也可以访问到else if (urlData.pathname === "/detail")这个条件判断里面的内容

const http = require("http")
const fs = require("fs")
const url = require("url")
const server = http.createServer((req, res) => {
    res.setHeader("content-type", "text/html;charset=utf8")
    //1.http://localhost:3000/detail 2.http://localhost:3000/detail?name=zhangsan
    let urlData = url.parse(req.url, true);//他会把地址真正解析出来
    console.log(urlData)
    /**
     * Url {
            protocol: null,
            slashes: null,
            auth: null,
            host: null,
            port: null,
            hostname: null,
            hash: null,
            search: '?name=zhangsan',
            query: [Object: null prototype] { name: 'zhangsan' },
            pathname: '/detail',
            path: '/detail?name=zhangsan',
            href: '/detail?name=zhangsan' }
     */
    if (urlData.pathname === "/") {
        let htmldata = fs.readFileSync("./views/index.html")
        res.write(htmldata)
    } else if (urlData.pathname === "/detail") {
      console.log(urlData.query.name);//zhangsan
        let htmldata = fs.readFileSync("./views/detail.html")
        res.write(htmldata)
    } else if (urlData.pathname === "/getData") { //模拟接口
        let obj = {
            info: "some value",
            status: 1
        }
        res.write(JSON.stringify(obj))
    }
    res.end()
})

server.listen(3000)

通过node去加载资源文件比如css，或者图片

当我们请求一个页面的时候，该页面还引入了很多资源文件，我们也要通过服务器解析出来，设置不同的头部，才不会乱码。

const http = require("http")
const fs = require("fs")
const url = require("url")
const path=require("path")
const mime=require("./mime.json")

const server = http.createServer((req, res) => {
    res.setHeader("content-type", "text/html;charset=utf8")
    let urlData = url.parse(req.url, true);//他会把地址真正解析出来
    console.log(urlData)
    /**
     * Url {
            protocol: null,
            slashes: null,
            auth: null,
            host: null,
            port: null,
            hostname: null,
            hash: null,
            search: '?name=zhangsan',
            query: [Object: null prototype] { name: 'zhangsan' },
            pathname: '/detail',
            path: '/detail?name=zhangsan',
            href: '/detail?name=zhangsan' }
     */
    if (urlData.pathname === "/") {
        let htmldata = fs.readFileSync("./views/index.html")
        res.write(htmldata)
    } else if (urlData.pathname === "/detail") {
        console.log(urlData.query.name);//zhangsan
        let htmldata = fs.readFileSync("./views/detail.html")
        res.write(htmldata)
    } else if (urlData.pathname === "/getData") { //模拟接口
        let obj = {
            info: "some value",
            status: 1
        }
        res.write(JSON.stringify(obj))
    }else{
        //请求头部编码有关系对于css；他和html不一样
        if(urlData.pathname !== "/favicon.ico"){//不要图标
            //1.设置对应的头部;2.读取资源文件写入到页面
            console.log(urlData);//此时pathname是css文件名
            /**
             * Url {
                    protocol: null,
                    slashes: null,
                    auth: null,
                    host: null,
                    port: null,
                    hostname: null,
                    hash: null,
                    search: null,
                    query: [Object: null prototype] {},
                    pathname: '/detail.css',
                    path: '/detail.css',
                    href: '/detail.css' }
             */
             //获取资源文件的后缀
            let ext=path.extname(urlData.pathname)
            console.log(ext);//.css
            //根据不同的后缀设置不同的头部-不同文件有自己对应的头部。才不会乱码
            res.setHeader("content-type",mime[ext]);
            let resData=fs.readFileSync("./views"+urlData.pathname)
            res.write(resData)
        }
    }
    res.end()
})

server.listen(3000)