路由（二）

最新推荐文章于 2024-11-09 10:31:18 发布

岑静无妄

最新推荐文章于 2024-11-09 10:31:18 发布

阅读量141

点赞数

分类专栏： Node学习记录文章标签：前端 javascript json node.js

本文链接：https://blog.csdn.net/weixin_44813858/article/details/128961282

版权

Node学习记录专栏收录该内容

9 篇文章 0 订阅

订阅专栏

接上文。

获取前端参数作出相应返回给前端

现在，前端已经可以通过修改路由访问不同的页面了，访问的页面不同调用的api也不同，作为后端的我们如何通过路由接收前端传递的参数呢?在解决这个问题之前呢，要考虑一点，路由表要和api接口文件要放在一起吗？不放在一起的话后端api接口是需要获取路由参数的，放在一起呢，工功能有不同。基于此我们做出以下处理：

将所有的api接口写成一个对象，将所有的路由也写成一个对象，并将它们暴露出来并采用Object.assign()方法将其合并成一个新对象，这样是不是就解决了以上的问题呢？

那我们先改造一下server.js文件:

const http = require('http')
const fs = require('fs')
const routeTwo = require('./router.js')
const api = require("./api.js")
const Router = {}
// 可以将路由和api合并作为一个公共方法
Object.assign(Router, routeTwo) //合并对象，如果觉得还是不够简洁，可以把合并的这几行代码再封装一下
Object.assign(Router, api)
const server = http.createServer()

server.on('request', (req, res) => {
  const myUrl = new URL(req.url, "http://10.45.129.66")
  try {
    Router[myUrl.pathname](req, res)
  } catch (err) {
    Router[myUrl.pathname](req, res)
  }


}).listen(10086, () => {
  console.log("10086")
})

好啦，接下来就看要怎么传递和获取参数了呢，先把前端的事情做完，完成login登录页面：

<!--
 * @Author: 梅子黄时雨
 * @Date: 2023-02-09 09:45:12
 * @LastEditTime: 2023-02-09 15:36:00
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \node\路由\static\login.html
 -->
<!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>
  <div>
    用户名:
    <input id="username" />
  </div>
  <div>
    密码:
    <input type="password" id="password" />
  </div>
  <button id='button'>登录get</button>
  <button id='buttonPost'>登录Post</button>
</body>
<script>
  let button = document.querySelector('#button')
  let username = document.querySelector('#username')
  let btn = document.querySelector('#password')
  button.onclick = () => {
    //get请求
    console.log(username.value)
    fetch(`/api/login?username = ${username.value}&password = ${password.value}`)
      .then(res => { console.log(res.text()) })
  }
  let buttonPost = document.querySelector('#buttonPost')
  buttonPost.onclick = () => {
    // post请求
    fetch(`/api/loginPost`, {
      method: "POST",
      body: JSON.stringify({
        username: username.value,
        password: password.value
      }),
      headers: {
        "Content-Type": "application/json"
      }
    })
      .then(res => res.json())
      .then(json => {
        console.log({ json })
      })
  }

</script>

</html>

我们将api接口放入api.js文件并在其中做相应的处理给前端返回数据，

function render(res, data, type = "") {
  // console.log(res, data, type)
  res.writeHead(200, { "Content-Type": `${type};chartset=utf8` })
  res.write(data)
  res.end()
  // console.log(res)
}

const apiRouter = {
  '/api/login': (req, res) => {
    const myUrl = new URL(req.url, 'http://10.45.129.66')
    if (myUrl.searchParams.get('username') === "0002936" && myUrl.searchParams.get("password") === "2222") {
      render(res, '{ "name": "llibai" }', 'application/json')
    } else {
      render(res, '{ "name": "hanxin" }', 'application/json')
    }

  },
  '/api/loginPost': (req, res) => {
    let post = ""
    // 如果post数据量比较大，需要多次返回
    req.on("data", chunk => {
      post += chunk
    })
    req.on("end", () => {
      post = JSON.parse(post)
      render(res, '{ "name": "libai" }', 'application/json')
    })
  }
}
module.exports = apiRouter