张坤的博客

介绍V3 Admin Vite 是一个免费开源的中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element Plus、Pinia 和 Vite 等主流技术。另外还有： Vue-Cli 5.x 版: v3-admin Electron 桌面版: v3-electron-vite 目录结构12345678910111213141516171819202122232425262728293031323334# v3-admin-vite├─ .husky # 用户提交代码时格式化代码├─ .vscode # 本项目推荐的 vscode 配置和拓展├─ public│ ├─ favicon.ico│ ├─ app-loading.css # 首屏加载 loading├─ src│ ├─ api # api 接口│ ├─ assets # 静态资源│ ├─ components # 全局组件│ ├─ config ...

介绍V3 Admin Vite 是一个免费开源的中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element Plus、Pinia 和 Vite 等主流技术。另外还有： Vue-Cli 5.x 版: v3-admin Electron 桌面版: v3-electron-vite 目录结构12345678910111213141516171819202122232425262728293031323334# v3-admin-vite├─ .husky # 用户提交代码时格式化代码├─ .vscode # 本项目推荐的 vscode 配置和拓展├─ public│ ├─ favicon.ico│ ├─ app-loading.css # 首屏加载 loading├─ src│ ├─ api # api 接口│ ├─ assets # 静态资源│ ├─ components # 全局组件│ ├─ config ...

介绍V3 Admin Vite 是一个免费开源的中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element Plus、Pinia 和 Vite 等主流技术。另外还有： Vue-Cli 5.x 版: v3-admin Electron 桌面版: v3-electron-vite 目录结构12345678910111213141516171819202122232425262728293031323334# v3-admin-vite├─ .husky # 用户提交代码时格式化代码├─ .vscode # 本项目推荐的 vscode 配置和拓展├─ public│ ├─ favicon.ico│ ├─ app-loading.css # 首屏加载 loading├─ src│ ├─ api # api 接口│ ├─ assets # 静态资源│ ├─ components # 全局组件│ ├─ config ...

介绍V3 Admin Vite 是一个免费开源的中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element Plus、Pinia 和 Vite 等主流技术。另外还有： Vue-Cli 5.x 版: v3-admin Electron 桌面版: v3-electron-vite 目录结构12345678910111213141516171819202122232425262728293031323334# v3-admin-vite├─ .husky # 用户提交代码时格式化代码├─ .vscode # 本项目推荐的 vscode 配置和拓展├─ public│ ├─ favicon.ico│ ├─ app-loading.css # 首屏加载 loading├─ src│ ├─ api # api 接口│ ├─ assets # 静态资源│ ├─ components # 全局组件│ ├─ config ...

介绍不是所有的 CSS 属性都能使用 animation 属性实现动画效果，最典型的例子就是 background-image 渐变。 123.gradient { background-image: linear-gradient(45deg, red 50%, blue 50%);} 其中无论是角度（45deg），颜色（red, blue）还是位置（50%）单独作为属性者都是可以动画过渡的，但是合在一起作为渐变背景的时候是无法产生过渡效果的，因为 background-image 的语义是图片。 变量种子计数器Chrome 等浏览器（不包括 Safari）有个特性，就是当我们使用 @keyframes 定义关键帧的时候，关键帧里面设置的属性也是会运行的，典型的案例就是 content 属性与内容变化。 例如实现一个“正在加载中…”效果： 1<button>正在加载中<dot></dot></button> 1234567891011121314151617dot::before { content: ...

介绍Chrome 等浏览器（不包括 Safari）有个特性，就是当我们使用 @keyframes 定义关键帧的时候，关键帧里面设置的属性也是会运行的，典型的案例就是 content 属性与内容变化。 不仅普通的 CSS 属性可以在 CSS 动画关键帧中运行，CSS 自定义属性（CSS 变量）也可以在 CSS 动画关键帧中运行。例如： 1234@keyframes var { 33% { --someVar: 33%; } 66% { --someVar: 66%; }} 如果我们某一个 CSS 属性值是基于这个 --someVar 变量构成的，那岂不是就算这个属性值不支持 CSS 动画，我只要让每一个百分比值的间隙足够的小，不也能够实现一个平滑的动画效果？ 具体做法就是，把 CSS 动画关键帧从 0%-100% 分成 101 份，然后每一份从 0 开始依次计数，就像是个计数器一样，然后把这个计数器分配给一个特定的 CSS 变量。最终我们可以得到一个如下所示的 CSS 动画“变量种子计数器”。 123@keyframes s ...

介绍V3 Admin Vite 是一个免费开源的中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element Plus、Pinia 和 Vite 等主流技术。另外还有： Vue-Cli 5.x 版: v3-admin Electron 桌面版: v3-electron-vite 接口 所有的请求最终都是通过 Axios 来发送的，我们可以找到封装 Axios 的文件，看见后端接口的 baseURL 是 import.meta.env.VITE_BASE_API。 可以在 .env 配置文件（.env.development 代表开发环境配置， .env.staging 代表预发布环境配置，.env.production 代表正式环境配置）中找到定义 VITE_BASE_API 的地方： 这里采用了相对路径 /api/v1，例如开发环境运行在 http://localhost:3333 路径下，也就意味着前端调用后端接口时，调用的具体的 baseURL 将会是 http://localhost:3333/api/v1。 登录接口的 url 是 user ...

介绍V3 Admin Vite 是一个免费开源的中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element Plus、Pinia 和 Vite 等主流技术。另外还有： Vue-Cli 5.x 版: v3-admin Electron 桌面版: v3-electron-vite 功能 用户管理：登录、登出演示 权限管理：内置页面权限（动态路由）、指令权限、权限函数、路由守卫 多环境：开发环境（development）、预发布环境（staging）、正式环境（production） 多主题：内置普通、黑暗、深蓝三种主题模式 错误页面: 403、404 Dashboard：根据不同用户显示不同的 Dashboard 页面 其他内置功能：SVG、动态侧边栏、动态面包屑、标签页快捷导航、Screenfull 全屏、自适应收缩侧边栏 特性 Vue3：采用 Vue3 + script setup 最新的 Vue3 组合式 API Element Plus：Element UI 的 Vue3 版本 Pinia: 传说中的 Vuex5 Vite：真的很快 Vue Router ...

介绍实现下图所示的图片拖拽缩放效果： 通常实现方式都是 <img> 元素外面包裹个 DIV，然后定位一些方框框，然后再去拉伸。如果是非编辑器产品，这么实现并没有多大的问题。 但是如果是需要实时编辑的产品，IMG 外面还有其他标签，势必会影响很多编辑操作。 当然，还有方法就是 JS 定位，拖拽层覆盖在图像上，从技术成本上讲，也是一个不错的实现，但如果页面发生了滚动，或者拖拽很快，拖拽的小方块就有可能跟不上（具体要看你的实现）。 CSS 四个角四个圆圈圈，比较简洁，凡是这种在元素边框（不包括边角）包含规则图形（没有图形也是一种规律）的效果，一定是使用 CSS border-image 属性。 下图是使用处理后的素材配合 border-image 属性实现的效果： 可能图有些小，看不到细节，把边角放大 N 倍看下： border-image 生成的图形藏在了图像内容的后面。在 Web 中，content 内容的层级是最高的，outline 轮廓、border 边框、background 背景色等都是比图文内容的层级低的。因此，border-image 的图形在 IMG ...

介绍建立对计算机网络的整体认知，对计算机网络中的各种概念（网络分层、网络协议、网络应用等)有初步的理解，进而可以在后续的实际工作中能高效解决网络问题。 课程内容 通过一个示例建立对计算机网络的整体认识 建立对网络协议分层的认知 分析 HTTP1、2、3的关系 介绍 CDN 运行的基本原理 了解网络安全的最基本原则 但不包括： 详细描述如何开发一个基于HTTP协议（或者其他协议)的网络应用 深入介绍课程中所涉及协议的规范（Specification）内容和实现细节 分析方法 自底向上 从简单开始，逐渐变复杂 将模块逐步拼凑成一个系统 自顶向下 从复杂开始，逐渐变简单 从复杂的系统问题入手，拆分为模块问题 蟹堡王帝国蟹老板想挣一个“小目标”，三步走战略： 在比奇堡开通外卖 在北京和上海开分店 在全国开分店并开通外卖 计算机网络基础网络组成部分 主机：客户端和服务端 路由器 网络协议 网络结构：网络的网络 比奇堡和小区网络：本地网络 北京和上海分店+比奇堡：三个本地网络节点的网络 全国通信网络：本地网络的网络 区域网络、城域网和广域网 网络分层 快递员不关心包裹内 ...