Big_YiFeng的博客

通过以上步骤，可以实现一个简单的用户登录和 JWT 身份验证系统。用户登录时会生成 token，而在需要保护的接口中，通过中间件校验 token 的有效性，以决定是否放行请求。建议把 secret key 存放在环境变量中，以增强安全性。

wujie(无界)是腾讯在 2022 年 7 月推出的微前端框架，下面是腾讯前端团队的原话无界微前端方案基于 webcomponent 容器 + iframe 沙箱，能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户的核心诉求。

和浏览器缓存：比如,localStorage,sessionStorage,cookie 等等。这些功能主要用于缓存一些必要的数据，比如用户信息。比如需要携带到后端的参数。亦或者是一些列表数据等等。比较基础，不做过多赘述。

对于 UUID,使用 DataTypes.UUID. 对于 PostgreSQL 和 SQLite,它会是 UUID 数据类型;

维基百科中对偏函数 (Partial application) 的定义为：翻译成中文：在计算机科学中，局部应用是指固定一个函数的一些参数，然后产生另一个更小元的函数。什么是元？元是指函数参数的个数，比如一个带有两个参数的函数被称为二元函数。return a + b } // 执行 add 函数，一次传入两个参数即可 add(1 , 2) // 3 // 假设有一个 partial 函数可以做到局部应用 let addOne = partial(add , 1) addOne(2) // 3。

2.在 vite.config.js 中配置3.新建组件code-editor.vue4.使用常用方法// 常用设置// 监听事件editor.getValue()editor.setValue(‘77777’)editor.dispose() //销毁实例monaco.editor.setModelLanguage(editor.getModel(), ‘javascript’) //语言设置editor.getAction(‘editor.action.formatDocument’).r

解决方案： 使用 vite-plugin-qiankun 包，暂未使用过，不过看有部分人是使用的这个。第一个微应用 mount 后需要调用的方法，比如开启一些监控或者埋点脚本。初始化完成后进入默认的子应用。

最终一个简单的微前端就配置好了，可通过主应用的路由来控制显示哪个子应用。新建 main 主应用和两个使用 vue/cli 创建的子应用。如果报错了 就降级 vue/cli 到 4 版本。main 项目中的 main.js。main 项目中的 App.vue。

微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于拆, 拆完后在合!

bin/mvc.js

Canvas APIctx.moveTo(100,100)参数x 横坐标y 竖坐标作用将画笔移动到坐标中的某个点ctx.lineTo(100,100)参数x 横坐标y 竖坐标作用将画笔从它所在的点到另一个点用线连接ctx.stroke()参数作用画ctx.strokeStyle (‘red’)参数色值作用画笔颜色ctx.beginPath()参数作用开始使用一只新的画笔，防止之前的画笔的各种属性污染到新的图ctx.closePath()参数

什么是 Symbol？为什么会有这么个东西？Symbol（符号）是 ES6 新增的数据类型。Symbol 是原始值（基础数据类型），且 Symbol 实例是唯一、不可变的。它的产生是因为要用来唯一的标记，进而用作非字符串形式的对象属性，是确保对象属性使用唯一标识符，不会发生属性冲突的危险。用法1. 基本用法符号需要使用 Symbol()函数初始化。因为符号本身是原始类型，所以 typeof 操作符对符号返回 symbol。let sym = Symbol();console.log(typeof

给插槽(slot)绑定事件背景： 现在有一个组件，它里面有一个插槽，需要实现不管往插槽里面添加什么，都要能让他点击之后可以让组件里面的数据的值+1实现思路 可以运用 vue 的作用域插槽先将需要点击之后运行的方法通过作用域插槽传递给调用该组件的页面<template> <div> <h1>{{ num }}</h1> <slot :add-num="addNum"> <button @click="

十分钟上手打包工具 Rollup简介rollup 是一个用来打包 js 代码的工具。ES 模块化是由浏览器来支持的，但是 rollup 可以让你在 node 环境下提前使用，ES 模块化是支持 tree-shaking 的，可以最大化的减小包体积学前思考为什么使用 rollup？上手简单，用来打包纯 js 模块的话特别好用rollup 的使用场景是什么？目前个人主要是拿来打包自己的 npm 工具包，如果是打包应用程序的话，还是使用 webpack 比较好开始上手新建文件夹，初始化项目

发布/订阅模式什么是发布订阅模式？此模式分为发布者和订阅者两个概念，发布者收集订阅者的需求，然后在某个时刻告知订阅者例子：小王去小卖部买充电器，小李去小卖部买剃须刀，但是充电器和剃须刀都卖完了，于是他们在小卖部老板那儿进行了登记，等到货了老板就通知他们。解析：此案例中，小王和小李就是订阅者，小卖部老板就是发布者，等到货了之后老板就会给在他这儿登记过的人发送特定的消息怎么一步一步实现发布订阅模式？发布者首先定义发布者class Dep {}因为是一个收集的过程，所以可以定义一个数

对象合并的多种方式（对于通过接口获取数据之后赋值给本地对象的时候极其有用）第一种：手动赋值(很捞)const obj1 = { name: "zs", age: 13,};const obj2 = { name: "ls", sex: "女",};obj1.name = obj2.name;obj1.sex = obj2.sex;这种方法时最简单的，但是日常项目中一个对象的属性是非常多的，如果还是用这种方法的话就会有点繁琐了第二种：扩展运算符const obj1 = {

使用带来的好处：不用一层层传递：页面组件可以直接获取到所在页面的实例上的数据，而不用通过prop一层层传下去，在页面组件所在的层级较深时极其好用解耦：页面组件实现某些功能需要借助所在页面的生命周期钩子来进行一些操作的时候，使用该方法可以不用将处理的代码写在所在页面的钩子里，而是直接将代码写在页面组件里。例如：视频组件在滑动到某个节点才开始自动播放，就需要所在页面的 onPageScroll钩子里面进行视频处理逻辑，这样复用性极低。而且耦合度比较高，而是用本技巧可以直接在本组件里写逻辑，而不用修改所在

CSS 架构为什么要学习 CSS 架构？统一 CSS 命名规范写出易维护，易复用，易扩展的 CSS提升布局能力稍微大点的项目 CSS 代码极其臃肿，倘若没有一定的 CSS 架构能力将会让人头大，写到后面越写越乱，特别是重构的时候，会让人无从下手。倘若是掌握了 CSS 的架构能力可以是的代码 CSS 代码易于维护。CSS 设计模式OOCSS（面向对象的 CSS）例子： 在不改变原有 css 的基础上更改其中的某个元素<style> .menu { width:

什么是nuxt？一个使用vue来开发web网站的脚手架为什么要使用nuxt？vue 由于会接管dom 元素，使得dom 元素都是通过script 里面的代码进行渲染的，爬虫爬不到，不利于SEO使用原生js 和jquery 写网站很麻烦，各种繁琐的dom操作，各种api，已经习惯了使用 vue 开发我们开发起来效率会很慢（当然，像那种一两个页面的网站还是用原生写比较好）nuxt为什么可以做SEO？nuxt项目虽然也是用vue写的，但是他会将在服务端将页面进行渲染（SSR），而不是在浏览器端通过

webpack打包优化开发环境优化1.开启热模块替换（HMR）**原因：**如果不开启 HMR功能 的话，修改某一个模块的时候，所有模块都会重新打包实现：给devServer添加 hot:truehot:true给js添加HMR功能（除了入口文件以外）在入口js里监听需要热替换的js文件if (module.hot) { // 一旦 module.hot 为true，说明开启了HMR功能。 --> 让HMR功能代码生效 module.hot.accept('./print.

video 视频项目中需要用到视频播放，但是使用的时候无法播放。卡住不动 <video style="width:800px" src="./assets/test.mp4"></video>原因：没有给video标签 controls 属性，这个属性是控制功能键显示的 <video style="width:800px" controls='controls' src="./assets/test.mp4"></video>加上之后就可

自定义指令解决了什么问题？可以自定义操作一些dom元素，使开发更便捷使用方法（常用）在 vue2.x中template**语法：**就是把注册好的组件前面加一个 v-，后面跟的是一个值<p v-highlight="'yellow'">高亮显示此文本亮黄色</p>script语法：常用的方法有bind（页面加载时触发），update（页面更新时触发），他们的参数都是三个值：el 是父dom元素，binding是在template里传过来的值，vnode是虚拟节点，

最近学习Vue3的时候，利用业余时间做了一个简单的ToDoList来进行练习，效果如下：但是再完成这个小demo的时候遇到了一点常见的坑，所以分享出来，希望给刚刚学习vue3的小伙伴一点帮助1.路由跳转正常的路由跳转是需要进行以下几步的第一步： 引入 useRouterimport { useRouter } from 'vue-router'第二步： 实例化路由方法const router = useRouter()第三步： 使用跳转 router.push('/Login') /

快速上手Vue31.为什么使用Vue3？打包文件的大小更小内存消耗更少渲染速度更快总之一句话：性能提升了2.新增特性setup简单理解就是vue2.x原来分出来的一个个模块，比如 data，methods，conputed这些，统统放在了一个setup里面，然后把页面需要用到的进行return就行。3.从vue2.x的基础上快速上手vue3datavue2data:{ return:{ str:'啦啦啦'， obj：{ name：'zs', age:18 }

**适用于：**第一天上班或者拿到一台新电脑需要进行开发的前端把以下几步完成，可以快速进行项目的开发1.安装应用以下软件谷歌浏览器VsCodeGitNode（npm）值得注意的是，像git和node这部分软件，你如果直接下载的话，会很慢，甚至卡住，可以先下一个电脑管家，然后在电脑管家的软件商店里面下载另外，推荐几个跟代码无关，但是非常好用的软件有道词典（英语不是特别好的的可以用一下）火绒安全软件（比较干净，拦截弹窗很好用）向日葵（远程控屏的软件）Snipaste（截图软件，极其好用）