首页 > 其他分享 >前端歌谣-第伍拾九课-路由获取请求参数

前端歌谣-第伍拾九课-路由获取请求参数

时间:2023-12-17 13:06:53浏览次数:32  
标签:fs res route 九课 server html static 伍拾 路由

前言

我是歌谣 微信公众号关注前端小歌谣一起学习前端知识 今天继续给大家讲解获取请求参数的讲解

案例1

api.js

function render(res, data,type="") {
    res.writeHead(200, { "content-Type": `${type?type:"application/json"};charset=utf-8` })
    res.write(data)
    res.end()
}
const apiRouter = {
    "/api/login": (res) => {
        render(res,`{
            "ok":"1"
        }`)
    }
}
module.exports = apiRouter

index.js

const server=require("./server")
const route=require("./route.js")
const api=require("./api.js")
server.use(route)
server.use(api)
server.start()

route.js

const fs = require("fs")
// function route(res,pathname){
//     switch (pathname) {
//         case "/login":
//             res.writeHead(200, { "content-Type": "text/html;charset=utf-8" })
//             res.write(fs.readFileSync("./static/login.html", "utf8"))
//             break
//         case "/home":
//             res.writeHead(200, { "content-Type": "text/html;charset=utf-8" })
//             res.write(fs.readFileSync("./static/home.html", "utf8"))
//             break
//         default:
//             res.writeHead(200, { "content-Type": "text/html;charset=utf-8" })
//             res.write(fs.readFileSync("./static/404.html", "utf8"))
//     }
// }

function render(res,path){
    res.writeHead(200, { "content-Type": "text/html;charset=utf-8" })
            res.write(fs.readFileSync(path), "utf8")
}
const route={
    "/login":(res)=>{
        render(res,"./static/login.html")
    },
    "/home":(res)=>{
        render(res,"./static/home.html")
    },
    "/404":(res)=>{
        render(res,"./static/404.html")
    }
}
module.exports = route

server.js

const http = require("http")
const Router={}
console.log(Router,"data is")
function use(route){
    Object.assign(Router,route)
}
function start(){
    http.createServer((req, res) => {
        const myurl = new URL(req.url, "http://127.0.0.1")
        // console.log(myurl.pathname)
        try{
            Router[myurl.pathname](res)
        }catch(error){
            Router["/404"](res)
        }
    
        res.end()
    }).listen(3000, () => {
        console.log("server start")
    })
}


exports.start=start
exports.use=use

运行结果

前端歌谣-第伍拾九课-路由获取请求参数_html

post请求案例

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是登录</title>
</head>

<body>
    <div>用户名:<input id="username" />
    </div>
    <div>密码:<input type="password" id="password" />
    </div>
    <div>
        <button id="login">登录</button>
    </div>
    <div>
        <button id="loginpost">登录-post</button>
    </div>
</body>
<script>
    var oLogin=document.querySelector("#login")
    var oLoginPost=document.querySelector("#loginpost")
    var oUsername=document.querySelector("#username")
    var oPassword=document.querySelector("#password")
    oLogin.onclick=()=>{
        console.log(oUsername.value,oPassword.value)
        fetch(`/api/login?username=${oUsername.value}&password=${oPassword.value}`)
        .then(res=>res.text()).then(res=>{
            console.log(res)
        })
    }
    oLoginPost.onclick=()=>{
        console.log(oUsername.value,oPassword.value)
        fetch(`/api/loginpost`,{
            method:"POST",
            body:JSON.stringify({
                username:oUsername.value,
                password:oPassword.value
            }),
            headers:{
                "Content-Type":"application/json"
            }
        }).then(res=>res.text()).then(res=>{
            console.log(res)
        })
    }
</script>
</html>

index.js

const server=require("./server")
const route=require("./route.js")
const api=require("./api.js")
server.use(route)
server.use(api)
server.start()

route.js

const fs = require("fs")
// function route(res,pathname){
//     switch (pathname) {
//         case "/login":
//             res.writeHead(200, { "content-Type": "text/html;charset=utf-8" })
//             res.write(fs.readFileSync("./static/login.html", "utf8"))
//             break
//         case "/home":
//             res.writeHead(200, { "content-Type": "text/html;charset=utf-8" })
//             res.write(fs.readFileSync("./static/home.html", "utf8"))
//             break
//         default:
//             res.writeHead(200, { "content-Type": "text/html;charset=utf-8" })
//             res.write(fs.readFileSync("./static/404.html", "utf8"))
//     }
// }

function render(res,path){
    res.writeHead(200, { "content-Type": "text/html;charset=utf-8" })
            res.write(fs.readFileSync(path), "utf8")
}
const route={
    "/login":(req,res)=>{
        render(res,"./static/login.html")
    },
    "/home":(req,res)=>{
        render(res,"./static/home.html")
    },
    "/404":(req,res)=>{
        render(res,"./static/404.html")
    }
}
module.exports = route

server.js

const http = require("http")
const Router={}
console.log(Router,"data is")
function use(route){
    Object.assign(Router,route)
}
function start(){
    http.createServer((req, res) => {
        const myurl = new URL(req.url, "http://127.0.0.1")
        // console.log(myurl.pathname)
        try{
            Router[myurl.pathname](req,res)
        }catch(error){
            Router["/404"](req,res)
        }
    
        res.end()
    }).listen(3000, () => {
        console.log("server start")
    })
}


exports.start=start
exports.use=use

运行结果

前端歌谣-第伍拾九课-路由获取请求参数_html_02

标签:fs,res,route,九课,server,html,static,伍拾,路由
From: https://blog.51cto.com/geyaoisnice/8860470

相关文章

  • H3CNA-RS+——路由器交换机介绍
    路由器交换机介绍路由器的作用路由器的特点主要工作在OSI模型的物理层、数据链路层和网络层根据网络层信息进行路由转发提供丰富的接口类型支持丰富的链路层协议支持多种路由协议交换机的作用交换机的特点主要工作在OSI模型的物理层、数据链路层提供以太网间的透明桥接和交换依据链......
  • 前端歌谣-第伍拾九课-路由获取请求参数
    前言我是歌谣微信公众号关注前端小歌谣一起学习前端知识今天继续给大家讲解获取请求参数的讲解案例1api.jsfunctionrender(res,data,type=""){res.writeHead(200,{"content-Type":`${type?type:"application/json"};charset=utf-8`})res.write(data)res.en......
  • 【UniApp】-uni-app-路由
    前言好,经过上个章节的介绍完毕之后,了解了一下uni-app-CompositionAPI应用生命周期和页面生命周期那么了解完了uni-app-CompositionAPI应用生命周期和页面生命周期之后,这篇文章来给大家介绍一下uni-app-路由前面我还说过,除了有应用程序的生命周期和页面的生命周期以外,其......
  • 使用router.replace解决路由跳转问题
    需求:A页面跳转到B页面,B页面带参跳转到C页面,C页面点击确定带参跳转回B页面。但是C页面点击返回按钮可返回到B页面,B页面点击返回按钮可返回到A页面。即A->B(带参)<->C(带参)在Vue3中,如果全部使用router.push带参跳转,则返回时路由跳转会变得很混乱。解决方法:B和C页面的相互跳转全部使......
  • 记录一次在k8s上,web服务内嵌的netty-socketio注册到nacos,gateway转发路由 遇到的问题
    web服务内嵌的nacos怎么注册?使用javasdk方式参考链接:https://nacos.io/zh-cn/docs/sdk.html每个socket不同怎么设置端口我这里使用的是注解,让用户传过来,并且在bean初始化之前进行变量存储。这个链接里面的[netty-socketio服务端代码编写目录]:https://www.cnblogs.com/x......
  • VueRouter 路由使用
    一安装对应版本的VueRouter二在main.js做相关操作  importVuefrom'vue'importAppfrom'./App.vue'//引入路由配置文件importrouterfrom'./router/index.js'Vue.config.productionTip=false//引入实例对象newVue({ el:"#app",render:h=......
  • vue路由切换时内容组件的滚动条回到顶部
    vue路由切换时内容组件的滚动条回到顶部:https://blog.csdn.net/Macao7_W/article/details/125517519?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170252373016800185826420%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=......
  • Java第九课_继承
    3.面向对象的编程_继承继承publicclassPractice{publicstaticvoidmain(String[]args){/*继承/extends:子类继承父类后,子类可以获取父类中所有的非私有的成员;子类:被抽取共同成员的类,通常是多个类,StudentWorker......
  • 路由
    路由路由是指导报文转发的路径信息,通过路由可以确认转发IP报文的路径路由设备维护着一张路由表,保存着路由信息路由表目的网络:目的网段的网络号掩码:目的网段的掩码出接口:数据包从本路由器发出的接口下一跳:到达目的网段的下一跳的设备地址[AR1]displayiproutin......
  • 网络多级路由电脑配置
    网络多级路由电脑配置 公司内网----->路由器----->公司电脑 ----->服务器 ----->打印机 ----->路由器----->我的电脑二级路由访问一级路由(我的电脑访问服务器): PC1    TP-LINK PC2二级路由(192.168.......