前言
我是歌谣 微信公众号关注前端小歌谣一起学习前端知识 今天继续给大家讲解获取请求参数的讲解
案例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
运行结果
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
