浏览器状态同步和路由-前端路由和服务端路由原理

news2024/11/16 7:27:08

目录

前端路由和History API

浏览文境(Browser Context)

会话历史(Session History)

History API

history.go()切换当前会话,并不改变会话栈

history.back() === history.go(-1) & history.forward() === history.go(1)

pushState(state,title,url)

replaceState(state, title, url)

 实战服务端路由(做个负载均衡)

实战前端路由(单页面)


前端路由和History API

浏览文境(Browser Context)

 

document文档

Browser Context (浏览的网页,网址等---浏览器的上下文)(共享的知识)

程序Present呈现出我们看到的网页效果

会话历史(Session History)

浏览器的会话栈Session Stack

 

History API

提供操作控制浏览器会话历史,维护会话栈(Session stack)的能力

history.go()切换当前会话,并不改变会话栈

 

history.back() === history.go(-1) & history.forward() === history.go(1)

pushState(state,title,url)

压栈,从当前会话栈前往新产生路径

不发生跳转、刷新页面、后退/前进到一个pushState出来的路径也不会渲染,让前端渲染

新增一个状态(State)到会话栈(Session Stack)

  • state:状态数据(自定义),可以通过history.state获取
  • title:预留字段,多数浏览器不使用
  • url:新状态的URL

 

replaceState(state, title, url)

替换当前页面路径

替换会话栈(Session Stack)中当前的状态

  • state:状态数据(自定义),可以通过history.state获取
  • title:预留字段,多数浏览器不使用
  • url:新状态的URL

 实战服务端路由(做个负载均衡)

  • 观察node.js实现服务端路由
  • 观察用Cluster启动多个实例进行负载均衡
const app = require('express')()
const fs = require('fs')
const path = require('path')
const pageDir = path.resolve(__dirname, "pages")//解析绝对路径, __dirname当前文件相对目录,文件夹
const htmls = fs.readdirSync(pageDir)// 读取目录下所有文件s
function displayHtmlFile(name) { // 写一个函数去显示,
  return (req, res) => {
    const filePath = path.resolve(pageDir, name + ".html") // 找到文件
    res.sendFile(filePath)// 返回文件
  }
}
htmls.forEach(file => { // 路由架构
  const [name, ext] = file.split('.')// 拿到文件名.扩展名
  app.get('/' + name, displayHtmlFile(name))
})
app.listen(3000)
// 负载均衡
const cluster = require('cluster');// 集群
const numCPUs = require('os').cpus().length; // 我的机器上有多少CPU核心
const express = require('express')
if (cluster.isMaster) {// 判断进程是在主进程
  console.log(`Master ${process.pid} is running`);// pid 进程id
  // Fork workers.
  for (let i = 0; i < numCPUs - 1; i++) {
    cluster.fork(); // 再执行一次本文件
  }
  cluster.on('exit', (worker, code, signal) => {
    console.log(`worker ${worker.process.pid} died`);
  });
} else {// 从进程
  // Workers can share any TCP connection
  // In this case it is an HTTP server
  const app = new express() 
  // 此时express提供负载均衡,是操作系统层面提供的;
  // TCP层面开始分流,流量平均打到8080端口上
  // 可以加1级缓存,2级缓存,3级缓存
  app.listen(8080)
  console.log(`Worker ${process.pid} started`);
}
// 父进程和子进程是平等的/平行的,父进程关了不一定会关子进程
// 组织形式上有父子关系,Master父,Worker子,内部有一定的联系

实战前端路由(单页面)

前端路由配合服务端路由的使用

  • 在node端实现wildcard路由/product/*
  • 前端解析/product/:id和/product/list形成单页面应用
// 服务端node
const app = require('express')()
const path = require('path')
const { reset } = require('nodemon')
const htmlFile = path.resolve(__dirname, "pages/spa.html")// 多路由都指向单页面渲染的同一html
// /proucts /product/123 -> 
app.get(/\/product(s|\/\d+)/, (req, res) => {// /d+数字
  res.sendFile(htmlFile)// 返回文件
})
app.listen(3000)

 

// html
<!DOCTYPE html>
<html>
<head>
  <style>
    a {
      color: skyblue;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h2>单页面应用示例</h2>
  <div id='content'>渲染内容区</div>
  <ul>
    <li><a onclick='route("/products")'>列表</a></li>
    <li><a onclick='route("/product/123")'>详情</a></li>
  </ul>
  <script>
    function pageList() {
      const html = `
  <ul>
    <li>Apple</li>
    <li>TicTok</li>
    <li>Alibaba</li>
  </ul>
  `
      document.getElementById('content')
        .innerHTML = html
    }
    function pageDetail() {
      document.getElementById('content')
        .innerHTML = "DETAIL"
    }
    function route(path) { // 单页面跳转
      history.pushState(null, null, path)
      matchRoute(pages, window.location.href) // 渲染
    }
    const pages = [// 路由列表
      {
        match: /\/products/,// 路由匹配
        route: pageList // 调用函数
      },
      {
        match: /\/product\/\d+/,
        route: pageDetail
      }
    ]
    function matchRoute(pages, href) { // 路由匹配
      const page = pages.find(page => page.match.test(href))
      page.route()
    }
    window.onpopstate = function () { // 监听单页面应用浏览器前进后退,增加渲染,和history api是一组的
      matchRoute(pages, window.location.href)
    }
    matchRoute(pages, window.location.href)
  </script>
</body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

5.4、服务器编程基本框架和两种高效的事件处理模式

5.4、服务器编程基本框架和两种高效的事件处理模式 1.服务器编程基本框架2.两种高效的事件处理模式①Reactor模式②Proactor模式③模拟Proactor模式 1.服务器编程基本框架 模块功能I/O 处理单元处理客户连接&#xff0c;读写网络数据逻辑单元业务进程或线程网络存储单元数据库、…

18.网络爬虫—Scrapy实战演示

网络爬虫—Scrapy实战演示 Scrapy Shell简介进入shell调试网站启动Scrapy Shell 查看目标网站获取网站源代码常用方法调试xpath提取数据Scrapy请求子页面请求及返回处理创建项目创建爬虫 数据解析写入csv文件后记 前言&#xff1a; &#x1f3d8;️&#x1f3d8;️个人简介&…

Java,jdbc,jvm

1、数据删除 物理删除 直接发送delete语句 就是物理删除 这种删除 删除之后不可恢复逻辑删除 本质是更新 0 表示不可用 1 可用状态 update emp set is_active where id ?2、数据更新 1 显示所有数据 2. 点击修改按钮 此时 应该执行的动作-查询该用户信息 目的是将当前用户…

并发编程的那些事

目录 一、并发编程的目的 二、线程和进程2.1 什么是线程2.2 进程2.3 一个普通Java 程序包含哪些线程 三、并发、并行四、线程的六个状态五、wait 和sleep的区别5.1 位于不同的类5.2 关于锁的释放 一、并发编程的目的 并发编程的目的是为了让程序运行得更快&#xff0c;但是&…

类ChatGPT逐行代码解读(1/2):从零起步实现Transformer、ChatGLM-6B

前言 最近一直在做类ChatGPT项目的部署 微调&#xff0c;关注比较多的是两个&#xff1a;一个LLaMA&#xff0c;一个ChatGLM&#xff0c;会发现有不少模型是基于这两个模型去做微调的&#xff0c;说到微调&#xff0c;那具体怎么微调呢&#xff0c;因此又详细了解了一下微调代…

ggplot中坐标轴和图例的相关处理

文章目录 改变坐标轴和图例的名称方法1, labs()方法2&#xff0c;scale_xxx_discrete/continuous() 删除坐标轴和图例的名称方法1&#xff0c; labs()方法2&#xff0c;scale_xxx_discrete/continuous()方法3&#xff0c;theme()方法4&#xff0c;guides()可以去图例名称 改变图…

osgwidget 使用 方法以及案例分享

osgwidget 使用 方法以及案例分享 按钮 一个常见的 osg::Widget 就是按钮。下面的代码展示了如何使用 osg::Switch 和 osgText 创建一个简单的按钮&#xff1a; osg::ref_ptr<osg::Switch> buttonSwitch new osg::Switch(); osg::ref_ptr<osgText::Text> buttonTe…

[论文阅读] (29)李沐老师视频学习——2.研究的艺术·找问题和明白问题的重要性

《娜璋带你读论文》系列主要是督促自己阅读优秀论文及听取学术讲座&#xff0c;并分享给大家&#xff0c;希望您喜欢。由于作者的英文水平和学术能力不高&#xff0c;需要不断提升&#xff0c;所以还请大家批评指正&#xff0c;非常欢迎大家给我留言评论&#xff0c;学术路上期…

写在28岁,回看3年前的自己,庆幸当时入了软件测试这行

为什么会学习软件测试&#xff1f; 已经28岁了&#xff0c;算一下快过去3年了&#xff0c;刚毕业那会工作了一年&#xff0c;因为自己当时很迷茫&#xff08;觉得自己挺废的&#xff09;&#xff0c;所以就没去工作就一直在家&#xff0c;家里固定每个月给点生活费&#xff0c…

人工智能、ChatGPT等火爆的当下 AI大模型爆发

4月18日&#xff0c;火山引擎在其举办的“原动力大会”上发布自研DPU等系列云产品&#xff0c;并推出新版机器学习平台&#xff1a;支持万卡级大模型训练、微秒级延迟网络&#xff0c;让大模型训练更稳更快。火山引擎总裁谭待表示&#xff0c;AI大模型有巨大潜力和创新空间&…

chatgpt实际是怎样工作的?

文章翻译自&#xff1a; https://www.assemblyai.com/blog/how-chatgpt-actually-works/ ChatGPT 是 OpenAI 的最新语言模型&#xff0c;比其前身 GPT-3 有了重大改进。与许多大型语言模型类似&#xff0c;ChatGPT 能够为不同目的生成多种样式的文本&#xff0c;但具有更高的精…

用ChatGPT搭建公司内部ChatGPT服务器

一、前言 我是ChatGPT&#xff0c;一个由OpenAI训练的大型语言模型。我被设计用于回答各种问题并生成文本&#xff0c;可以处理多种自然语言任务&#xff0c;例如问答、摘要和翻译等。在我的学习过程中&#xff0c;我阅读了数百万篇文本&#xff0c;并使用这些文本来提高我的理…

了解分布式Session

大家好&#xff0c;我这名CRUD工程师又来了&#xff0c;最近我的一个同事突然在看分布式Seesion的问题&#xff0c;然后我们两个也是互相讨论了一下&#xff0c;今天我就想着把分布式Session的知识点好好的梳理一下。 在很多系统中&#xff0c;用户的登录功能都是用Session去实…

Eclipse 4.27.0 制作并使用jar包

目的&#xff1a; 记录使用Eclipse 4.27.0 制作并使用jar包的过程&#xff0c;以备查看。 一&#xff0c;制作jar包 新建工程new ->Java Project 输入工程名&#xff0c;注意这里勾掉 Create module-info.java file的复选框&#xff0c;也可以在创建后自行删除该文件 后面…

[架构之路-171]-《软考-系统分析师》-5-数据库系统-4- 数 据 库 的 控 制 功 能(并发控制、性能优化)

目录 5 . 4 数 据 库 的 控 制 功 能 5.4.1 并发控制 1 . 事务的基本概念 2 . 数据不一致问题 3 . 封锁协议 4 . 死锁问题 5.4.2 数据库性能优化 1 . 硬件升级 2 . 数据库设计 5.4.3 数据库的完整性 1 . 完整性约束条件 2 . 实体完整性 3 . 参照完整性 4 . 用户定…

SVD求解ICP问题

Background ICP&#xff08;Iterative Closest Point&#xff09;问题&#xff0c;迭代最近点。已知一组三维点在两个坐标系中的坐标表示&#xff0c;求这两个坐标系之间的变换关系&#xff0c;称为ICP问题。 最开始想到这个问题&#xff0c;是想进行手眼标定&#xff0c;有一…

头歌c语言实训项目-综合案例课外练习:大奖赛现场统分

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 第1关&#xff1a;大奖赛现场统分 题目&#xff1a; 代码思路&#xff1a; 代码表示&#xff1a; 第1关…

【看图识文】tesseract.js@4.0.2

看图识文 介绍示例一示例二示例三示例四示例五示例六 介绍 该库用于识别并获取图片上的文字&#xff0c;支持多种语言。对英文识别度非常高&#xff0c;但是对中文的识别度非常一般。需要单独训练对应的中文库。对白纸黑字的合同文识别度还不错&#xff0c;其他的都不太好。 …

Android之编写申请权限库PermissionX

比如要实现拨打电话的功能&#xff0c;一般我们要编写如下Android运行时权限API class MainActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)if(ContextCom…

日撸 Java 三百行day35

文章目录 说明day35 图的 m 着色问题1.问题描述2.思路2.代码 说明 闵老师的文章链接&#xff1a; 日撸 Java 三百行&#xff08;总述&#xff09;_minfanphd的博客-CSDN博客 自己也把手敲的代码放在了github上维护&#xff1a;https://github.com/fulisha-ok/sampledata day3…