【Node.js】路由

基础使用

写法一：

// server.js
const http  = require('http');
const fs = require('fs');
const route  = require('./route')
http.createServer(function (req, res) {const myURL = new URL(req.url, 'http://127.0.0.1')route(res, myURL.pathname)res.end()
}).listen(3000, ()=> {console.log("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'), 'utf-8')break;case '/home':res.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8' })res.write(fs.readFileSync('./static/home.html'), 'utf-8')breakdefault:res.writeHead(404, { 'Content-Type': 'text/html;charset=utf-8' })res.write(fs.readFileSync('./static/404.html'), 'utf-8')break}
}
module.exports = route

写法二：

// route.js
const fs = require('fs')const route = {"/login": (res) => {res.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8' })res.write(fs.readFileSync('./static/login.html'), 'utf-8')},"/home": (res) => {res.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8' })res.write(fs.readFileSync('./static/home.html'), 'utf-8')},"/404": (res) => {res.writeHead(404, { 'Content-Type': 'text/html;charset=utf-8' })res.write(fs.readFileSync('./static/404.html'), 'utf-8')},"/favicon.ico": (res) => {res.writeHead(200, { 'Content-Type': 'image/x-icon;charset=utf-8' })res.write(fs.readFileSync('./static/favicon.ico'))}
}
module.exports = route

// server.js
const http  = require('http');
const fs = require('fs');
const route  = require('./route')
http.createServer(function (req, res) {const myURL = new URL(req.url, 'http://127.0.0.1')try {route[myURL.pathname](res)} catch (error) {route['/404'](res)}res.end()
}).listen(3000, ()=> {console.log("server start")
})

注册路由

// 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

// route.js
const fs = require('fs')function render(res, path, type="") {res.writeHead(200, { 'Content-Type': `${type?type:'text/html'};charset=utf-8` })res.write(fs.readFileSync(path), 'utf-8')res.end()
}const route = {"/login": (res) => {render(res, './static/login.html')},"/home": (res) => {render(res, './static/home.html')},"/404": (res) => {res.writeHead(404, { 'Content-Type': 'text/html;charset=utf-8' })res.write(fs.readFileSync('./static/404.html'), 'utf-8')res.end()},"/favicon.ico": (res) => {render(res, './static/favicon.ico', 'image/x-icon')}
}
module.exports = route

// server.js
const http = require('http');
const Router = {}
const use = (obj) => {Object.assign(Router, obj)
}
const start = () => {http.createServer(function (req, res) {const myURL = new URL(req.url, 'http://127.0.0.1')try {Router[myURL.pathname](res)} catch (error) {Router['/404'](res)}}).listen(3000, () => {console.log("server start")})
}
exports.start = start
exports.use = use

// index.js
const server = require('./server');
const route = require('./route');
const api = require('./api');
// 注册路由
server.use(route)
server.use(api)
server.start()

get 和 post

// 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': (req,res) => {const myURL = new URL(req.url, 'http:/127.0.0.1')if(myURL.searchParams.get('username') === 'admin' && myURL.searchParams.get('password') === '123456') {render(res, `{"ok":1)`)} else {render(res, `{"ok":0}`)}},'/api/loginpost': (req, res) => {let post = ''req.on('data', chunk => {post += chunk})req.on('end', () => {console.log(post)post = JSON.parse(post)if(post.username === 'admin' && post.password === '123456') {render(res, `{"ok":1}`)}else {render(res, `{"ok":0}`)}})}
}
module.exports = apiRouter

// route.js
const fs = require('fs')function render(res, path, type="") {res.writeHead(200, { 'Content-Type': `${type?type:'text/html'};charset=utf-8` })res.write(fs.readFileSync(path), 'utf-8')res.end()
}const route = {"/login": (req,res) => {render(res, './static/login.html')},"/home": (req,res) => {render(res, './static/home.html')},"/404": (req,res) => {res.writeHead(404, { 'Content-Type': 'text/html;charset=utf-8' })res.write(fs.readFileSync('./static/404.html'), 'utf-8')res.end()},"/favicon.ico": (req,res) => {render(res, './static/favicon.ico', 'image/x-icon')}
}
module.exports = route

// server.js
const http = require('http');
const Router = {}
const use = (obj) => {Object.assign(Router, obj)
}
const start = () => {http.createServer(function (req, res) {const myURL = new URL(req.url, 'http://127.0.0.1')try {Router[myURL.pathname](req, res)} catch (error) {Router['/404'](req, res)}}).listen(3000, () => {console.log("server start")})
}
exports.start = start
exports.use = use

// index.js
const server = require('./server');
const route = require('./route');
const api = require('./api');
// 注册路由
server.use(route)
server.use(api)
server.start()

<!-- login.html -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div>用户名：<input type="text" class="username"></div><div>密码：<input type="password" class="password"></div><div><button class="login">登录-get</button><button class="loginpost">登录-post</button></div><script>const ologin = document.querySelector('.login')const ologinpost = document.querySelector('.loginpost')const password = document.querySelector('.password')const username = document.querySelector('.username')// get 请求ologin.onclick = () => {// console.log(username.value, password.value)fetch(`/api/login?username=${username.value}&password=${password.value}`).then(res => res.text()).then(res => {console.log(res)})}// post 请求ologinpost.onclick = () => {fetch('api/loginpost',{method: 'post',headers: {'Content-Type': 'application/json'},body: JSON.stringify({username: username.value,password: password.value})}).then(res => res.text()).then(res=> {console.log(res)})}</script>
</body></html>

静态资源管理

成为静态资源文件夹static，可以直接输入类似于login.html或者login进行访问（忽略static/）。

在这里插入图片描述

在这里插入图片描述

<!-- login.html -->
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="/css/login.css">
</head><body><div>用户名：<input type="text" class="username"></div><div>密码：<input type="password" class="password"></div><div><button class="login">登录-get</button><button class="loginpost">登录-post</button></div><script src="/js/login.js"></script>
</body></html>

/* login.css */
div {background-color: pink;
}

// login.js
const ologin = document.querySelector('.login')
const ologinpost = document.querySelector('.loginpost')
const password = document.querySelector('.password')
const username = document.querySelector('.username')
// get 请求
ologin.onclick = () => {// console.log(username.value, password.value)fetch(`/api/login?username=${username.value}&password=${password.value}`).then(res => res.text()).then(res => {console.log(res)})
}
// post 请求
ologinpost.onclick = () => {fetch('api/loginpost', {method: 'post',headers: {'Content-Type': 'application/json'},body: JSON.stringify({username: username.value,password: password.value})}).then(res => res.text()).then(res => {console.log(res)})
}

// 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': (req, res) => {const myURL = new URL(req.url, 'http:/127.0.0.1')if (myURL.searchParams.get('username') === 'admin' && myURL.searchParams.get('password') === '123456') {render(res, `{"ok":1)`)} else {render(res, `{"ok":0}`)}},'/api/loginpost': (req, res) => {let post = ''req.on('data', chunk => {post += chunk})req.on('end', () => {console.log(post)post = JSON.parse(post)if (post.username === 'admin' && post.password === '123456') {render(res, `{"ok":1}`)} else {render(res, `{"ok":0}`)}})}
}
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')
const mime = require('mime')
const path = require('path')
function render(res, path, type = "") {res.writeHead(200, { 'Content-Type': `${type ? type : 'text/html'};charset=utf-8` })res.write(fs.readFileSync(path), 'utf-8')res.end()
}const route = {"/login": (req, res) => {render(res, './static/login.html')},"/": (req, res) => {render(res, './static/home.html')},"/home": (req, res) => {render(res, './static/home.html')},"/404": (req, res) => {// 校验静态资源能否读取if(readStaticFile(req, res)) {return }res.writeHead(404, { 'Content-Type': 'text/html;charset=utf-8' })res.write(fs.readFileSync('./static/404.html'), 'utf-8')res.end()},// 静态资源下没有必要写该 ico 文件加载// "/favicon.ico": (req, res) => {//   render(res, './static/favicon.ico', 'image/x-icon')// }
}// 静态资源管理
function readStaticFile(req, res) {const myURL = new URL(req.url, 'http://127.0.0.1:3000')// __dirname 获取当前文件夹的绝对路径  path 有以统一形式拼接路径的方法，拼接绝对路径const pathname = path.join(__dirname, '/static', myURL.pathname)if (myURL.pathname === '/') return falseif (fs.existsSync(pathname)) {// 在此访问静态资源// mime 存在获取文件类型的方法// split 方法刚好截取文件类型render(res, pathname, mime.getType(myURL.pathname.split('.')[1]))return true} else {return false}
}
module.exports = route

// server.js
const http = require('http');
const Router = {}
const use = (obj) => {Object.assign(Router, obj)
}
const start = () => {http.createServer(function (req, res) {const myURL = new URL(req.url, 'http://127.0.0.1')try {Router[myURL.pathname](req, res)} catch (error) {Router['/404'](req, res)}}).listen(3000, () => {console.log("server start")})
}
exports.start = start
exports.use = use

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/105590.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

毕业设计选题Java+springboot校园新闻资讯系统源码 开题 lw 调试

毕业设计选题Java+springboot校园新闻资讯系统源码 开题 lw 调试

&#x1f495;&#x1f495;作者&#xff1a;计算机源码社 &#x1f495;&#x1f495;个人简介&#xff1a;本人七年开发经验&#xff0c;擅长Java、Python、PHP、.NET、微信小程序、爬虫、大数据等&#xff0c;大家有这一块的问题可以一起交流&#xff01; &#x1f495;&…
阅读更多...
HT for Web (Hightopo) 使用心得（3）- 吸附与锚点

HT for Web (Hightopo) 使用心得（3）- 吸附与锚点

吸附与锚点是 HT for Web 中两个比较重要的概念。这两个概念在执行交互和动画时会经常被用到。 吸附&#xff0c;顾名思义&#xff0c;是一个节点吸附到另一个节点上。就像船底的贝类一样&#xff0c;通过吸附到船身&#xff0c;在船移动的时候自己也会跟着移动&#xff1b;而…
阅读更多...
Oracle update 关联更新优化方法

Oracle update 关联更新优化方法

关联更新顾名思义就是指&#xff0c;更新的数据从关联的表中获取并update到目标表。并且该SQL将会是一个天然的嵌套循环。有两种优化思路解决&#xff1a; 1、PLSQL 根据rowid更新 是否需要加order by rowid的考量&#xff1a; 如果buffer cache足够大&#xff0c;能够放得下要…
阅读更多...
蓝桥杯双周赛算法心得——三带一（暴力枚举）

蓝桥杯双周赛算法心得——三带一（暴力枚举）

大家好&#xff0c;我是晴天学长&#xff0c;枚举思想&#xff0c;需要的小伙伴可以关注支持一下哦&#xff01;后续会继续更新的。 1) .三带一 2) .算法思路 1.通过Scanner读取输入的整数n&#xff0c;表示接下来有n个字符串需要处理。 2.使用循环遍历每个字符串&#xff1a;…
阅读更多...
华为端到端战略管理体系（DSTE开发战略到执行）的运作日历图/逻辑图及DSTE三大子流程介绍

华为端到端战略管理体系（DSTE开发战略到执行）的运作日历图/逻辑图及DSTE三大子流程介绍

华为端到端战略管理体系&#xff08;DSTE开发战略到执行&#xff09;的运作日历图/逻辑图及DSTE三大子流程介绍 本文作者 | 谢宁&#xff0c;《华为战略管理法&#xff1a;DSTE实战体系》、《智慧研发管理》作者 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#…
阅读更多...
es6（三）—— set（集合） 和map的使用

es6（三）—— set（集合） 和map的使用

ES6的系列文章目录 第一章 Python 机器学习入门之pandas的使用 文章目录 ES6的系列文章目录一、set&#xff08;集合&#xff09;0. 定义1. 基本使用2.常用方法&#xff08;1&#xff09;代码&#xff08;2&#xff09;效果&#xff08;3&#xff09;遍历 二、map0. 定义1. 基…
阅读更多...
Stable Diffusion绘图，lora选择

Stable Diffusion绘图，lora选择

best quality, ultra high res, (photorealistic:1.4), 1girl, off-shoulder white shirt, black tight skirt, black choker, (faded ash gray hair:1), looking at viewer, closeup <lora:koreandolllikeness_v20:0.66> 最佳品质&#xff0c;超高分辨率&#xff0c;&am…
阅读更多...
【C++】继承 -- 详解

【C++】继承 -- 详解

一、继承的概念及定义 1、继承的概念 继承 (inheritance) 机制是面向对象程序设计使代码可以复用的最重要的手段&#xff0c;它允许程序员在保 持原有类特性的基础上进行扩展&#xff0c;增加功能&#xff0c;这样产生新的类&#xff0c;称派生类。 继承呈现了面向对象 程序设…
阅读更多...
极限号可以拿到函数的内部吗？【复合函数中极限的进入】

极限号可以拿到函数的内部吗？【复合函数中极限的进入】

极限号无脑直接拿进来 1.1 如果f&#xff08;极限值&#xff09;在该点连续&#xff0c;ojbk&#xff0c;拿进来。 1.2 如果f&#xff08;极限值&#xff09;不存在或不连续&#xff0c;不能拿进来&#xff0c;出去。
阅读更多...
【操作系统】磁臂黏着现象

【操作系统】磁臂黏着现象

文章目录 什么是磁臂黏着&#xff1f;为什么 FCFS&#xff08;First Come First Service&#xff09; 可以避免磁臂黏着&#xff1f;为什么 scan&#xff0c;cscan 会产生磁臂黏着&#xff1f;为什么 NsetpScan 可以避免磁臂黏着&#xff1f;NScan 原理简介NScan 避免磁臂黏着的…
阅读更多...
从零开始学习调用百度地图网页API：二、初始化地图，鼠标交互创建信息窗口

从零开始学习调用百度地图网页API：二、初始化地图，鼠标交互创建信息窗口

目录 代码结构headbodyscript 调试 代码 <!DOCTYPE html> <html> <head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><meta name"viewport" content"initial-scale1.0, user-scalable…
阅读更多...
Flask (Jinja2) 服务端模板注入漏洞复现

Flask (Jinja2) 服务端模板注入漏洞复现

文章目录 Flask (Jinja2) 服务端模板注入漏洞1.1 漏洞描述1.2 漏洞原理1.3 漏洞危害1.4 漏洞复现1.4.1 漏洞利用 1.5 漏洞防御 Flask (Jinja2) 服务端模板注入漏洞 1.1 漏洞描述 说明内容漏洞编号漏洞名称Flask (Jinja2) 服务端模板注入漏洞漏洞评级高危影响版本使用Flask框架…
阅读更多...
python openai playground使用教程

python openai playground使用教程

文章目录 playground介绍Playground特点模型设置和参数选择四种语言模型介绍 playground应用构建自己的playground应用playground python使用 playground介绍 OpenAI Playground是一个基于Web的工具&#xff0c;旨在帮助开发人员测试和尝试OpenAI的语言模型&#xff0c;如GPT-…
阅读更多...
4.1 继承性

4.1 继承性

知识回顾 &#xff08;1&#xff09;类和对象的理解&#xff1f; 对象是现实世界中的一个实体&#xff0c;如一个人、一辆汽车。一个对象一般具有两方面的特征&#xff0c;状态和行为。状态用来描述对象的静态特征&#xff0c;行为用来描述对象的动态特征。 类是具有相似特征…
阅读更多...
SwiftUI Swift CoreData 计算某实体某属性总和

SwiftUI Swift CoreData 计算某实体某属性总和

有一个名为 Item 的实体&#xff0c;它有一个名为 amount 的 Double 属性&#xff0c;向你的 View 添加一个计算属性&#xff1a; Code: struct ContentView: View {Environment(\.managedObjectContext) private var viewContextFetchRequest(sortDescriptors: [NSSortDescri…
阅读更多...
聚观早报 | “百度世界2023”即将举办；2024款岚图梦想家上市

聚观早报 | “百度世界2023”即将举办；2024款岚图梦想家上市

【聚观365】10月13日消息 “百度世界2023”即将举办 2024款岚图梦想家上市 腾势D9用户超10万 华为发布新一代GigaGreen Radio OpenAI拟进行重大更新 “百度世界2023”即将举办 “百度世界2023”将于10月17日在北京首钢园举办。届时&#xff0c;百度创始人、董事长兼首席执…
阅读更多...
LinkedHashMap与LRU缓存

LinkedHashMap与LRU缓存

序、慢慢来才是最快的方法。 背景 LinkedHashMap 是继承于 HashMap 实现的哈希链表&#xff0c;它同时具备双向链表和散列表的特点。事实上&#xff0c;LinkedHashMap 继承了 HashMap 的主要功能&#xff0c;并通过 HashMap 预留的 Hook 点维护双向链表的逻辑。 1.缓存淘汰算法…
阅读更多...
虚拟机的发展史：从分时系统到容器化

虚拟机的发展史：从分时系统到容器化

一、前世 早期计算机的价格非常昂贵&#xff0c;一台计算机可能需要花费几十万甚至上百万美元。例如&#xff0c;ENIAC计算机&#xff0c;作为世界上第一台通用电子数字计算机&#xff0c;当时的造价约为48万美元。科学家或者工程师们需要计算机的能力&#xff0c;但是买不起整…
阅读更多...
Netty P1 NIO 基础，网络编程

Netty P1 NIO 基础，网络编程

Netty P1 NIO 基础&#xff0c;网络编程 教程地址&#xff1a;https://www.bilibili.com/video/BV1py4y1E7oA https://nyimac.gitee.io/2021/04/25/Netty%E5%9F%BA%E7%A1%80/ 1. 三大组件 1.1 Channel & Buffer Channel 类似 Stream&#xff0c;它是读写数据的双向通道…
阅读更多...
柔性数组（C语言）

柔性数组（C语言）

文章目录 1. 柔性数组的定义2. 柔性数组的特点3. 柔性数组的使用4. 柔性数组的好处 也许你从来没有听说过 柔性数组这个概念&#xff0c;但是它确实是存在的。柔性数组是C语言中一种特殊的结构&#xff0c;它允许在结构体的末尾定义一个可变长度的数组。 1. 柔性数组的定义 柔…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023