Nanami Kento

前言在这个快速发展的数字时代，前端技术的每一次进步都深刻地改变着我们的开发方式和用户体验 站在技术革新的前沿，我作为一名前端开发者，时刻准备着接受新知，思考如何将先进的技术融入到我们的项目之中 这不仅是一种职业发展的需求，更是一种对创新精神的持续追求 在每个项目的背后，都有着数不尽的挑战和问题需要我们去解决 我们不能停留在表面，而需要深入到技术的内核，去理解它、驾驭它 在沉浸式的编码过程中，我遇到过许多挑战，它们每一个都促使我精进我的技术，更加深刻地理解前端的精髓 通过这篇文章，我想分享一些在这个领域内的心得 这些难点不仅仅考验了我的技术知识，更考验了我解决问题的方法和耐心 接下来的概览部分列出了我的一些核心文章，这些都是在实际工作中积累的宝贵经验 希望这能对你有所启发，让我们共同进步，在编码的世界中探索无限可能 概览每一篇都对应着我在实际工作中遇到的一个特定的难题或知识点 虽然每篇文章都是独立的个体，但它们共同构成了我的职业生涯中的一段重要历程 随着时间的推移和经验的积累，这里会不断添加新的内容，以记录我的学习和成长轨迹 Vue权限设计 ...

设计模式是什么设计模式是在软件工程中被反复使用的、经过验证的解决方案，用于解决特定问题或设计软件架构 它们提供了一种在设计和开发过程中重用的可靠方式，有助于解决常见的设计问题并促进代码的可维护性、可扩展性和可重用性 设计模式并不是一种具体的编程语言特性或库，而是一种通用的解决方案 它们是从实际开发经验中总结出来的，并被广泛接受和使用 设计模式通常包括了面向对象设计的一些基本原则和惯例，通过它们可以更好地组织代码结构、降低耦合度、提高代码的灵活性和可维护性 设计模式之所以出现，是因为在软件开发中经常会遇到一些常见的问题，比如对象创建、对象之间的关系、算法的选择等等 这些问题在不同的项目和场景中可能会多次出现，因此工程师们开始寻找并提炼出一些通用的解决方案，这就是设计模式产生的原因 设计模式有助于开发人员更快速地理解和解决问题，提高了开发效率 此外，它们还有助于提高代码的可读性和可维护性，因为它们是经过验证的、被广泛认可的解决方案，可以减少因为设计上的错误而造成的后续问题 设计模式遵循原则设计模式的原则通常指的是一些基本的设计理念和规范，它们指导着设计模式的实现和应用。以下是一些常见的设 ...

Camera Camara Array Camera Cinematic Camera Logarithmicdepthbuffer Camera

前言个人网站不仅是技术展示的平台，更是个性化的一种自我表达 随着静态网站生成器的兴起，Hexo 加上精美的 Butterfly 主题成为了搭建个性化博客的首选 我从项目的搭建和配置开始，走过了发布到 GitHub Pages 的旅程，不仅止步于此，更深入到了网站的深度魔改之路 在这个过程中，我超过了28篇文章的积累，从页面的细微调整到功能的重大更新，每一步都记录了我的空间变化 在探索的过程中，我不是孤单前行的 感谢在网络世界中遇到的每一位”魔改大佬”，是他们的创意和分享给了我灵感和动力 **特别要感谢 Fomalhaut、冰老师、店长、安知鱼等大佬** 正是他们的优秀作品激励我不断进步，让我的网站更加丰富和完善 概览下面是我在这个项目中涉及的一些核心文章和改进的概览： 建站基础 建站-《项目搭建、配置》 GitHub Page部署 Blog结合GitHub Page部署 魔改系列 魔改-《网站特殊日子置灰》 ...

Html Css Javascript 手写Javascript Vue React 工程化 浏览器 && 计算机网络 Node

前置条件在开发过程中遇到的一个具有挑战性的需求，涉及到一个独特且复杂的数据结构，这直接关系到如何有效地更新建筑信息 这个项目需求源自于对建筑数据精确管理的必要性，其中建筑数据按照其属性被划分为三种主要类型：多栋建筑、独栋建筑以及局部建筑 多栋建筑是指那些包含若干子建筑单元的复合体，它们共享一套总体的数据——大约10余条重要的信息，并且拥有一个庞大的数组，这个数组详细记录了其中每一个子建筑或局部建筑的详细信息，每个子单元的数据大约包含40至50条具体信息 独栋建筑在数据结构上与多栋建筑中的单个建筑单元类似，同样维护着大约40至50条的详细信息，但它独立存在，不属于任何多栋建筑的一部分 局部建筑则相对较小，包含的数据项约30条，关注点更集中在具体的、局部的部分上 鉴于建筑数据的复杂性和数量众多，我们设计了专门的数据接口来处理查询和更新操作 局部建筑由单一的接口管理，而栋建筑的数据则通过四个不同的接口进行操作，多栋建筑最为复杂，需要六个接口来维护其数据的准确性和时效性 面对这种需求，关键在于如何在用户对某个建筑的数据进行编辑或修改时，能够准确地捕捉到这些变动，并通过正确的接口将更新推送至服 ...

前置条件在当前的Web应用开发中，将页面渲染的内容导出为PDF文件，供用户下载与查看，已成为一项常见且复杂的需求 尤其是当项目规模较大、用户群体庞大时，后端渲染PDF并提供下载链接的方式虽可行，但将消耗大量的服务器资源 因此，寻找一种纯前端实现PDF渲染的解决方案成为了开发中的一大挑战 本文旨在探讨在Vue3框架下，如何利用前端技术实现高效且用户友好的PDF导出功能 项目需求概述在本项目中，我们面对如下需求： 技术栈 使用Vue3构建的Web应用 用户需求 用户需求能够在页面上查看各类图表，并提供一键导出功能，将图表渲染为PDF文件，以便用户下载和查看 挑战 不增加后端负担 考虑到项目的庞大规模，要求PDF渲染工作完全在前端完成，避免由后端渲染PDF而增加服务器的计算与资源开销 前端实现 需要对前端技术方案进行调研，寻找合适的工具与库来实现HTML元素到PDF的转换，同时确保功能的完整性（包括下载、分页及完整节点渲染等） 技术方案在进行技术选型和调研过程中，我们决定采用html2canvas和pdf.js这两个库作为主要技术方案 以下是具体的实施步骤： 使用html2 ...

Vue权限 一、是什么权限是对特定资源的访问许可，所谓权限控制，也就是确保用户只能访问到被分配的资源 而前端权限归根结底是请求的发起权，请求的发起可能有下面两种形式触发 页面加载触发 页面上的按钮点击触发 总的来说，所有的请求发起都触发自前端路由或视图 所以我们可以从这两方面入手，对触发权限的源头进行控制，最终要实现的目标是： 路由方面，用户登录后只能看到自己有权访问的导航菜单，也只能访问自己有权访问的路由地址，否则将跳转 4xx 提示页 视图方面，用户只能看到自己有权浏览的内容和有权操作的控件 最后再加上请求控制作为最后一道防线，路由可能配置失误，按钮可能忘了加权限，这种时候请求控制可以用来兜底，越权请求将在前端被拦截 二、怎么做前端权限控制可以分为四个方面： 接口权限 按钮权限 菜单权限 路由权限 接口权限接口权限目前一般采用jwt的形式来验证，没有通过的话一般返回401，跳转到登录页面重新进行登录 登录完拿到token，将token存起来，通过axios请求拦截器进行拦截，每次请求的时候头部携带token 123456789axios.interceptors.r ...

版本要求node版本需要18及以上，否则下载最新的webpack一些包，运行起来会出问题 npm版本一般都是跟随node的 建议最好是可以利用nvm来对你电脑的node版本进行管理 如何查看版本 调出来你的cmd工具 按键：Win+R 查看node版本 1node -v 得到版本为V 18.18.2 查看npm版本 1npm -v 得到版本为V 9.8.1 一、新建项目新建一个项目，并在编辑器里面打开，这里用的是Webstorm，项目名字是WebpackCreateVue 二、初始化项目打开终端， 运行下面这段命令，会给我们的项目初始化，生成一个package.json文件 1npm init -y package.json是什么 package.json 文件是一个重要的文件，存在于 Node.js 应用或前端项目（通常用到了 Node.js 工具链，如使用 npm/yarn 进行包管理的项目）的根目录中它用于存储项目的元数据和配置信息这个文件是用 JSON 格式编写的，提供了一种标准化的方式来组织项目 ...

版本要求node版本需要18及以上，否则下载最新的webpack一些包，运行起来会出问题 npm版本一般都是跟随node的 建议最好是可以利用nvm来对你电脑的node版本进行管理 如何查看版本 调出来你的cmd工具 按键：Win+R 查看node版本 1node -v 得到版本为V 18.18.2 查看npm版本 1npm -v 得到版本为V 9.8.1 注意本章节前置知识点、优化点大部分均在[Webapck创建Vue3项目](https://wutiaowu5t5.github.io/posts/54d94922/)这里 一、新建项目新建一个项目，并在编辑器里面打开，这里用的是Webstorm，项目名字是WebpackCreateReact 二、初始化项目打开终端， 运行下面这段命令，会给我们的项目初始化，生成一个package.json文件 1npm init -y 三、搭建项目这一步将要实现目标就是： 给webpack区分打包环境 给项目添加React 给项目添加css预处理器 把项目跑起来 3.1-Webpack基础包执行下面这段命令，我们就可以启动 ...