//====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
假如说我们的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
执行后效果如下:
当在登录页输入用户名xiaoming密码123456点击登录之后,发送了get请求,然后也看到响应了{“ok”:1}
//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}