前言

之前介绍过很多前端向后端接口发送请求拿数据的例子，今天来介绍一下node为web提供的服务，提供接口给前端拿数据

http

创建服务

“Node HTTP”通常指的是在 Node.js 环境中用于处理 HTTP（超文本传输协议）相关操作的模块或功能。

Node.js 中的 http 模块提供了创建 HTTP 服务器和处理 HTTP 请求与响应的能力。通过这个模块，可以编写服务器端的代码来监听特定的端口，接收客户端的请求，并返回相应的响应。

官方文档：首页 | Node.js v22 文档 (nodejs.cn)

const http = require('http')
const server = http.createServer((req, res) => {
    
    res.end('hello node')
})

server.listen(3000,()=>{
    console.log('server is running at http://127.0.0.1:3000')
})

• 由于我们在npm init -y之后生成的项目描述文件中，没有更改type，默认模块化规则是commonJS，因此导包的方式还是require，如果type改成module，规则就是ES6之后的模块化方式import xxx

• 在上述代码中，创建了一个监听在 3000 端口的服务器，当有请求到达时，返回“hello node”的响应。

url

在 Node.js 中，url 模块用于处理和解析 URL 相关的操作。

它提供了一些方法和函数来提取 URL 的各个部分，例如协议、主机名、端口、路径、查询参数等。

例如，可以使用 url.parse() 方法来解析 URL 字符串，并获取其组成部分。

const http = require('http')
const url = require('url')
const server = http.createServer((req, res) => {
    const reqUrl = url.parse(req.url)
    if (reqUrl.pathname === '/') {
        res.end('hello world')
    } else {
        res.end('404 not found')
    }
})

server.listen(3000, () => {
    console.log('server is running at http://127.0.0.1:3000')
})

当我们打印一下reqUrl的结果时：

path和pathnanme的区别

path 包含了整个请求路径，包括查询字符串部分。例如，对于 URL https://example.com/page?param=value ，path 的值为 /page?param=value 。

pathname 则仅包含路径部分，不包含查询字符串。对于上述同样的 URL，pathname 的值为 /page 。

总的来说，path 涵盖的范围更广，包含了查询部分；而 pathname 则只专注于路径本身。

设置请求头

思考：当浏览器返回响应是一个标签呢？如何把标签渲染到浏览器上？

const http = require('http')
const url = require('url')
const server = http.createServer((req, res) => {
    const reqUrl = url.parse(req.url)
    if (reqUrl.pathname === '/') {
        res.end('<h2>你好</h2>')
    } else {
        res.end('404 not found')
    }
})

server.listen(3000, () => {
    console.log('server is running at http://127.0.0.1:3000')
})

可以看见响应上还是一个字符串xxxxx，说明浏览器还是把它当成普通字符串来处理了，因此我们可以携带一个响应头，告诉浏览器这是html标签。

const http = require('http')
const url = require('url')
const server = http.createServer((req, res) => {
    const reqUrl = url.parse(req.url)
    if (reqUrl.pathname === '/') {
        res.writeHead(200, {
            'Content-Type': 'text/html;charset=utf8'
        })
        res.end('<h2>你好</h2>')
    } else {
        res.end('404 not found')
    }
})

server.listen(3000, () => {
    console.log('server is running at http://127.0.0.1:3000')
})

插件/postman/apifox

思考：当我们访问/user时，返回一个Json对象呢？

const http = require('http')
const url = require('url')
const server = http.createServer((req, res) => {
    const data = {
        name: '张三',
        age: 18,
        sex: '男'
    }
    const reqUrl = url.parse(req.url)
    if (reqUrl.pathname === '/') {
        res.writeHead(200, {
            'Content-Type': 'text/html;charset=utf8'
        })
        res.end('<h2>你好</h2>')
    } else if (reqUrl.pathname === '/user') {
        res.writeHead(200, {
            'Content-Type': 'application/json;charset=utf8'
        })
        res.end(JSON.stringify(data))
    } else {
        res.end('404')
    }
})

server.listen(3000, () => {
    console.log('server is running at http://127.0.0.1:3000')
})

• 如此一来，中文也能支持了，并且能以json对象的格式输出

• 如果你想更加美观，你也可以在谷歌扩展中安装一些json插件，比如jsonvue。

• 再或者，你也可以通过postman或者apifox软件，对接口进行测试，看是否能拿到数据

跳转至404页面

思考：当访问的路径不存在，我们想跳转到404页面怎么办？

const http = require('http')
const url = require('url')
const fs = require('fs')
const path = require('path')

const server = http.createServer((req, res) => {
    const data = {
        name: '张三',
        age: 18,
        sex: '男'
    }
    const reqUrl = url.parse(req.url)
    if (reqUrl.pathname === '/') {
        res.writeHead(200, {
            'Content-Type': 'text/html;charset=utf8'
        })
        res.end('<h2>你好</h2>')
    } else if (reqUrl.pathname === '/user') {
        res.writeHead(200, {
            'Content-Type': 'application/json;charset=utf8'
        })
        res.end(JSON.stringify(data))
    } else if (req.method === 'POST' && reqUrl.pathname === '/login') {
        // 拿到前端传递的参数
        // 去数据库校验参数的合法性
        res.end('登录成功')
    } else {
        // res.end('404')
        const _path = path.resolve(__dirname, 'assets/404.html')
        const content = fs.readFileSync(_path, { encoding: 'utf8' })
        // console.log(content);
        res.writeHead(404, {
            'Content-Type': 'text/html;charset=utf8'
        })
        res.end(content)
    }
})

server.listen(3000, () => {
    console.log('server is running at http://127.0.0.1:3000')
})

• __dirname读取当前文件的根目录

• path.resolve(xxx,xxx)做字符串拼接。

koa

当有一百个接口，难道我们写一百个if else吗？因此接下来我们引入一个轻量级的Web应用框架。它致力于提供一个更小、更富有表现力、更健壮的 Web 应用和 API 开发体验。

Koa 利用了 async/await 语法，使得异步代码的编写更加清晰和简洁。与传统的回调函数方式相比，大大提高了代码的可读性和可维护性。

其主要特点包括：

1. 轻量级：核心模块非常简洁，只提供了最基本的功能，开发者可以根据需求选择和添加中间件。

2. 中间件机制：通过一系列中间件来处理请求和响应，中间件的执行顺序按照添加的顺序依次进行。

3. 错误处理：提供了更优雅和方便的错误处理方式。

Koa 广泛应用于构建各种类型的 Web 应用，包括但不限于网站、API 服务等。

安装

npm i koa 
npm i koa-router

创建app.js,创建router文件夹下创建user.js做路由

app.js

const Koa = require('koa');
const app = new Koa();
const router = require('./router/user.js')

app.use(router.routes())



app.listen(3001, () => {
    console.log('app is running on 3001 port');
});

user.js

const router = require('koa-router')()

router.get('/user', (ctx) => {
    ctx.body = {
        name: 'user',
        age: 18
    }
})

module.exports = router

如果还有其他的接口，就继续创建其他的路由，最后将这个router抛出，然后在app.js中use掉router的routes的调用