随笔分类 - Front-end
Nginx-简单使用
摘要：启动 文件夹内打开cmd, 输入: start nginx 确认运行: tasklist /fi "imagename eq nginx.exe" 浏览器输入: http://localhost:80或http://127.0.0.1:80 配置 vscode中打开D:\nginx-1.26.3\c
OpenLayers-加载影像、点、面要素
摘要：利用point.txt，实现添加隐患点数据，且点的样式要用zip里面的point.png图标来展示 加载imageAnhua.png作为影像图层，范围为[110.721085,27.974829,111.987103,28.639647] 解析yjq.json里的数据作为面要素图层，要求用黄色(#F
Cesium-加载GLB和倾斜摄影模型
摘要：加载glb模型(CesiumAir.glb) 加载倾斜摄影模型(tazhong文件夹)，要求贴地 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="wi
Cesium-点击实体显示弹窗
摘要：根据json数据中的点信息添加实体图标点，图标路径与dis_type对应 点击图标添加弹窗展示当前隐患点的名称pp_name <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewpor
Vue-组件实例的生命周期
摘要：组件实例的生命周期 创建组件实例：当使用new Vue()或通过模板解析创建一个组件时，Vue首先会创建一个组件的实例。 初始化阶段 Vue3中setup()取代了beforeCreate和created 初始化事件和生命周期：在组件实例创建之后，Vue会初始化事件和生命周期相关的属性。 befor
前端知识-质量与安全
摘要：质量保障 编码质量 防御性编程: 判空处理; 异常处理try-catch; 降级处理(对允许出错的弱依赖场景, 可以返回默认值, 增加系统容错性) 质量管理工具: 静态检查工具(ESLint); 风格控制工具(Prettier) 代码评审: 交叉验证代码设计的合理性 测试 通过编写测试用例来检查程序
前端知识-前端服务端
摘要：前端服务端 特指服务于前端开发的服务端, 不包含数据库, 中间件, 分布式服务, K8S等底层设施 引入服务端的必要性 在传统前端开发中, 所有的代码和功能都运行在客户端. 随着业务体量增大, 比如需要传输到客户端的脚本体积越来越大, 导致传输延迟上涨, 渲染性能下降; 前端要调用的接口越来越多,导
前端知识-用户体验
摘要：用户体验 性能优化 通过性能分析工具来观察页面各阶段的耗时和性能指标, 有针对性的进行优化 加载时间太长 资源体积过大: 减小产物大小, 减少传输量 现代构建工具提供了压缩(compression), 树摇(tree shaking), 依赖外置(externals) 功能来减小产物大小 同时提供代
前端知识-应用框架
摘要：应用框架 应用框架的任务包括: 引入状态管理方案, 做一套统一的布局, 抽象一个更好用的数据请求方法, 优化打包效率 应用框架的覆盖面: 基于React生态的Next.js, UmiJS, Modern.js; 基于Vue生态的Nuxt和Quasar; 自成一体的Astro和Angular; 专注于
前端知识-用户界面
摘要：用户界面 User Interface, 人与计算机设备交互的必要窗口 根据呈现方式, 承载功能来划分:图形用户界面GUI, 命令行界面CLI, 语言用户界面LUI,自然用户界面NUI 现代前端开发的用户界面包括: 网页, 跨平台桌面应用, 智能手机中的H5, 小程序和Native App CSS框
前端知识-工具链
摘要：工具链 一组用于软件开发的工具和技术, 帮助开发者管理好从源代码到最终软件的整个开发过程, 对于前端来讲, 这些工具通常包括: 集成开发环境, IDE 包管理工具, 核心是代码组织与复用 npm, 兼容性最强, 速度较慢 yarn, 通过并行安装和缓存, 解决了npm速度慢的问题, 但资源消耗大 p
前端知识-编程语言
摘要：编程语言 ES6 ECMAScript 6/2015 规范了脚本语言的设计, 包括语法, 数据类型, 内置对象等, 而JS则是遵循这套规范的编程语言之一 TS TypeScript是JS的超集, 核心特性是类型系统, TS的类型检查可以使许多常见错误暴露于编译阶段, 从而减少运行时错误, 极大地提升
前端知识-网络
摘要：网络 DNS 通过DNS服务器将域名转换成IP地址, 从而实现正确的网络连接. DNS服务器不仅部署在互联网的各个角落, 每一台终端设备都会内置本地DNS服务器. DNS查询 DNS查询时, 会依次经过应用程序的缓存, 本地hosts, 本地DNS服务器, 根服务器, 顶级域名服务器, 权威服务器,
Cesium-安装和引入问题
摘要：CesiumJS 库的构成 没有index.js的出口文件 主库文件有三种格式，ESModule 的是 index.js，IIFE 的是 Cesium.js，CommonJS 的是 index.cjs。 除了主库文件外，CesiumJS 还有 4 个文件夹下的静态资源： Assets 文件夹，图片或
Cesium-基础入门
摘要：Cesium 数据 影像数据：Bing、天地图、ArcGIS、OSM、WMTS、WMS等 地形数据：ArcGIS、谷歌、STK等 矢量数据：KML、KMZ、GeoJSON、TopoJSON、CZML 三维模型：GLTF、GLB（二进制glTF文件） 三维瓦片：3D Tiles（倾斜摄影、人工模型、
OpenLayers-快速使用
摘要：安装 npm安装: npm i ol <style> .map-x { width: 600px; height: 600px; } </style> <div id="map" class="map-x"></div> <script> import 'ol/ol.css' import { Ma
Vue2-内联脚本
摘要：vue2与vue3的差异 响应式系统的差异： Vue 2 使用 Object.defineProperty 实现响应式系统，而 Vue 3 使用了 Proxy。 在 Vue 2 中，对于数组的响应式处理有一些限制，比如不能检测数组索引和长度的变化，而 Vue 3 中这些问题得到了解决。 组件和API
浏览器原理-事件循环
摘要：浏览器的进程模型 何为进程？ 程序运行需要有专属的内存空间，这块内存空间可以简单理解为进程。 每个应用至少有一个进程，进程之间相互独立。即使要通信，也需要双方同意。 何为线程？ 有了进程后，就需要线程来执行程序。 一个进程至少有一个线程，所以进程开启后会自动创建一个线程来运行代码，该线程为主线程。
Vue-智慧城市
摘要：项目搭建 创建项目 npm create vite 安装依赖 package.json: { "name": "smartcity_wuhan", "version": "0.0.0", "private": true, "type": "module", "scripts": { "dev": "
AntVL7-上手流程
摘要：简介 基于 WebGL 的开源大规模地理空间数据可化视分析开发框架。 L7 中的 L 代表 Location，7 代表世界七大洲。专注数据可视化表达，通过颜色、大小、纹理，方向，体积等视觉变量设置实现从数据到信息清晰，有效的表达。 L7 能够满足常见的地图图表，BI 系统的可视化分析、以及 GIS，
