Node.js13---路由获取请求传参

路由

目录结构如下:
Node.js13---路由获取请求传参_第1张图片
代码如下:

//====404.html就显示404,以此类推,home.html就显示home,那login.html就显示login====
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    404
</body>
</html>

//====api.js主要是对js的封装和请求的响应====
function render(res, data, type = '') {
    res.writeHead(200, { 'Content-Type': `${type ? type : "application/json"};charset=utf8` })
    res.write(data)
    res.end()
}
const apiRouter = {
    "/api/login": (req,res) => {
        render(res, `{ok:1}`)
    }
}
module.exports = apiRouter

//====index.js主要是合并路由和启动服务====
const server = require('./server')
const route = require('./route')
const api = require('./api')

//合并路由
server.use(route)
server.use(api)
//启动服务
server.start()

//====route.js主要是一些路由配置=====
const fs = require('fs')
function render(res, path, type = '') {
    res.writeHead(200, { "Content-Type": `${type ? type : 'text/html'};charset=utf8` })
    res.write(fs.readFileSync(path), "utf-8")
}

const route = {
    '/login': (req,res) => {
        render(res, "./static/login.html")
    }
    ,
    '/home': (req,res) => {
        render(res, './static/home.html')
    }
    ,
    '/favicon.ico': (req,res) => {
        render(res, './static/favicon.ico', 'image/x-icon')
    }
    ,
    default: (req,res) => {
        render(res, './static/404.html')
    }
}
module.exports = route

//====server.js主要是对服务的封装====
const http = require('http')
const route = require('./route')
const api = require('./api')

//对路由进行合并
const Router = {}
function use(obj) {
    Object.assign(Router, obj)
}

function start() {
    http.createServer((req, res) => {
        const myURL = new URL(req.url, 'http://127.0.0.1')
        console.log("123", Router, myURL.pathname)
        try {
            Router[myURL.pathname](req,res)
        } catch (error) {
            Router["/404"](req,res)
        }
        res.end()
    }).listen(3000, () => {
        console.log("启动服务器成功!")
    })
}

exports.start = start
exports.use = use

代码执行后效果如下:
Node.js13---路由获取请求传参_第2张图片
Node.js13---路由获取请求传参_第3张图片

路由获取请求传参

获取get请求参数

假如说我们的login.html登录页代码如下:

//login.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <div>
            用户名:<input id="username" />
        </div>

        <div>
            密码:<input type="password" id="password" />
        </div>

        <div>
            <button id="login">登录</button>
        </div>
    </div>

    <script>
        var ologin = document.querySelector('#login')
        var username = document.querySelector('#username')
        var password = document.querySelector('#password')
        ologin.onclick = (() => {
            // username.value password.value
            fetch(`/api/login?username=${username.value}&password=${password.value}`).then(res => res.json()).then(res => {
                console.log("请求", res)
            })

        })
    </script>
</body>
</html>

然后我们在接口那里怎么写get请求获取到的参数呢?代码如下:

//api.js
function render(res, data, type = '') {
    res.writeHead(200, { 'Content-Type': `${type ? type : "application/json"};charset=utf8` })
    res.write(data)
    res.end()
}

const apiRouter = {
    "/api/login": (req, res) => {
        //get请求获取参数
        const myURL = new URL(req.url, "http://127.0.0.1")
        console.log(myURL.searchParams)

        if (myURL.searchParams.get("username") === 'xiaoming' && myURL.searchParams.get("password") === '123456') {
            render(res, `{"ok":1}`)
        } else {
            render(res, `{"ok":0}`)
        }
    }
}

module.exports = apiRouter

执行后效果如下:
Node.js13---路由获取请求传参_第4张图片
Node.js13---路由获取请求传参_第5张图片
当在登录页输入用户名xiaoming密码123456点击登录之后,发送了get请求,然后也看到响应了{“ok”:1}

获取post请求参数
//login.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <div>
            用户名:<input id="username" />
        </div>

        <div>
            密码:<input type="password" id="password" />
        </div>

        <div>
       
            <button id="loginPost">登录--post</button>
        </div>
    </div>

    <script>
  
        var loginPost = document.querySelector('#loginPost')
        var username = document.querySelector('#username')
        var password = document.querySelector('#password')
    

        loginPost.onclick = (() => {
            // username.value password.value
            fetch(`/api/loginpost`, {
                method: "POST",
                body: JSON.stringify({
                    username: username.value,
                    password: password.value
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(res => res.text()).then(res => {
                console.log("post请求", res)
            })
        })
    </script>
</body>
</html>

//api.js
function render(res, data, type = '') {
    res.writeHead(200, { 'Content-Type': `${type ? type : "application/json"};charset=utf8` })
    res.write(data)
    res.end()
}

const apiRouter = {
 
    "/api/loginpost": (req, res) => {
        //post获取参数

        var post = ''
        req.on("data", chunk => {
            post += chunk
        })
        req.on("end", () => {
            console.log(post)
            post = JSON.parse(post)

            if (post.username === 'xiaoming' && post.password === '123456') {
                render(res, `{"ok":1}`)
            } else {
                render(res, `{"ok":0}`)
            }

        })


    },
}

module.exports = apiRouter

当在登录页输入用户名xiaoming密码123456点击登录之后,发送了post请求,然后也看到响应了{“ok”:1}

你可能感兴趣的:(Node.js基础,node.js,javascript,前端)