JWT（鉴权）
演示案例一、index.ts123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869// 导入 expressconst express = require('express');// 导入 corsconst cors = require('cors');// 导入 jsonwebtoken commonjs规范const jwt = require('jsonwebtoken');// 导入Request Response 类型import { Request, Response } from 'express';const app = express();app.use(cors());app.use(express.json());app.use(express.urlencode ...
XSS跨站脚本攻击
一、反射型XSS
二、存储型XSS
三、dom型XSS
关于动态路由刷新丢失的问题
解决案例
Test 中的/test是动态创建的路由
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687<script setup lang="ts">import { RouterLink, RouterView } from 'vue-router'import HelloWorld from './components/HelloWorld.vue'</script><template> <header> <img alt="Vue logo" class="logo" src="@/assets/logo.svg& ...
TCP实现http服务
1234567891011121314151617181920212223242526// Description: TCP 服务端import net from 'net';// html 模板const html: string = `<h2>xiaokang zs</h2>`;// 响应头const headers = [ 'HTTP/1.1 200 OK', 'Content-Type: text/html;charset=utf-8', 'Content-Length: ' + html.length, 'Date: ' + new Date(), `\r\n`, html]// 创建服务const server = net.createServer((socket) => { socket.on('data', (data) => { if (/GET/.test(data.toS ...
前端网络状态
12345678910111213141516171819202122232425262728<!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>前端网络状态</title></head><body> <script> // 1. 前端的网络状态如何获取以及对应的事件 // navigator.onLine true/false 在线/离线 console.log(navigator ...
SSE
SSE（Server-Sent Events）是一种用于服务器向客户端推送实时数据的技术。它基于HTTP协议，允许服务器实时地向客户端发送数据，而无需客户端请求。这使得SSE成为一种非常适合实时数据推送的解决方案。
SSE可以用于很多场景，例如：
实时通知：SSE可以用于向客户端推送实时通知，例如新的消息、新的订单等等。
实时数据更新：SSE可以用于向客户端推送实时数据更新，例如股票行情、天气预报等等。
实时聊天：SSE可以用于实现实时聊天功能，例如在线客服、聊天室等等。
总之，SSE是一种非常强大的实时数据推送技术，可以应用于很多实时场景，提升用户体验和应用性能。
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263<!DOCTYPE html><html lang="en"><head> <meta charset=" ...
跨域+四种解决办法
一、跨域
二、四种解决办法
1. jsonp12345678910111213141516171819<script> // jsonp // 原理就是通过script 的 src 不受同源策略的限制，可以跨域请求资源 但是只能通过get请求 // 缺点：只能发送get请求，不安全，不好控制 // 优点：兼容性好 // 后端返回的是一个函数 但是这个函数是在前端定义的 它会把值传给这个函数的参数 const jsonp = (name) => { let script = document.createElement('script'); script.src = `http://localhost:3000/api/jsonp?callback=${name}`; document.body.appendChild(script); return new Promise((resolve, reject) => { window[name] = (data ...
微前端
微前端一、webComponents
Web Components是一项Web标准，它提供了一种创建可重用Web组件的方式，这些组件可以通过一个统一的编程模型来创建和使用。
Web Components主要由以下三个技术组成：
Custom Elements：这允许您创建指定名称的新HTML元素，该元素可以包含自定义的JavaScript和CSS。
Shadow DOM：它提供了一种隔离特定元素的DOM和样式，从而可以防止样式和DOM冲突。
Template：模板允许您定义HTML模板，这些模板可以在需要时进行克隆。
使用Web Components可以将UI组件封装到独立的、可重用的自定义元素中，从而可以避免命名冲突和代码重复。这样代码更具有可维护性和可扩展性，并且可以轻松地与任何框架或库集成。此外，Web Components还符合跨浏览器、跨平台和性能优化等方面的最佳实践。
总之，Web Components提供了一种用于创建可重用Web组件的标准方式。使用Web Components可以简化Web开发过程并提高代码的可维护性、可重用性和性能。
案例
12345678 ...
OSI-七层模型
OSI-七层模型
七层参考模型
一、物理层（主要传输的是比特流）
二、 数据链路层
三、网络层
四、传输层
五、会话层
六、表示层
七、应用层