- 博客(97)
- 收藏
- 关注
RSS订阅原创 解决使用XbsjEarth提供的Obj.Tileset方法加载3dtile模型，却无法显示出来的问题
如何解决XbsjEarth无法加载【特定的3dtile模型】的问题
2022-08-11 14:32:56
1118
原创 Echarts5.* 关系图谱(relation graph)如何以某节点为圆心，子节点环绕其排列布局？
在前一篇文章里我采用的方法是，随机生成坐标点，可这样会导致节点布局混乱，无法理清各个节点之间的关系。希望能做到如下的优化：后期的效果如下图所示：核心代码如下所示：以父节点为圆心，将子节点等分并返回坐标信息该方法如下所示：，即每个子节点对应的角度, 即每个子节点对应的弧度，得到该子节点与圆中心的方向偏移值，若需知道该子节点的坐标信息，则需加上圆心的值核心代码如下所示：在上面代码中，我先从所有节点中过滤出，因为它是类型聚合点，再根据不同类型，......
2022-07-02 15:09:50
2431
1
原创 Echarts5.* 关系图谱(relation graph)添加节点拖拽、点击节点高亮效果
echarts关系图谱添加节点拖拽、点击高亮效果
2022-06-23 14:59:25
6947
5
原创 如何使用flex布局，实现三个div垂直居中布局
前言有个布局需求：父级容器， class为szb-left-menu，里面有三个div，希望能实现下图的排列效果：如何用flex实现类似的效果呢？代码话不多说，父级容器的样式代码如下所示：.szb-left-menu { position: absolute; z-index: 9999; top: 100px; left: 28px; height: calc(100% - 150px); display: flex; flex-flow
2022-05-07 15:24:17
1461
原创 编写webpack插件，实现自动将前端dist文件夹部署至服务器的功能
前言需求背景是（相信无论是做vue或react项目的童鞋都不会陌生）：需要将前端build之后的dist文件夹，部署至指定的服务器上，如何编写自动工具，实现自动化一键部署呢？正文编写插件在项目内的src目录下新增plugins目录，在该目录内新增deploymentProject.js文件，内容如下所示：const fs = require('fs')const path = require('path')const axios = require('axios')const AdmZip
2022-04-24 17:36:07
1867
原创 video自动播放功能，却遭遇google浏览器拦截：play() failed because the user didn‘t interact with the document first
前言项目需求：希望宣传页上，循环播放视频动画效果，设计师提供了一个mp4给我，可是当我将其放在首页后，却遇到如下错误：play() failed because the user didn't interact with the document first视频播放代码为：<video src="~examples/assets/images/banner.mp4" autoplay="autoplay" loop="loop" id="video"></video>解决
2022-04-15 19:10:14
3061
3
原创 Vite + Vue3 + Typescript项目，如何引入ES2020语法
前言最近这段时间，我正在将公司原来的组件包（基于Vue2、Jsx）升级到基于Vue3、Vite、Typescript。顺便在新项目中使用最新的ES语法，比如optional-chaining，让你不用再去判断某对象A是否存在，存在才能继续获取它下面的属性老代码写法：if (A) { const { attr1 } = A}使用optional-chaining的写法：A?.attr1很酷，对吧？尤其是对象层级很深时，这些的写法更方便了不少。我在该项目下添加了babel.config.
2022-04-14 13:44:16
2238
3
原创 使用yarn安装包时，抛出Couldn‘t find package “xx“ on the “npm“ registry
前言这段时间，我想将原基于Vue2的npm包升级到Vue3，在完成Vue3框架的搭建后，执行yarn命令后，却不断地抛出下图错误：我查看当前npm registry，确定无误，且运行如下命令，可看到该npm包的各个版本号：npm view @babel/runtime versions解决这个问题确实诡异，registry库明明有@babel/runtime，为何始终显示该错误信息呢？原因我尚未找出，我使用如下命令，解决了yarn安装失败的问题yarn --registry https:/
2022-04-13 10:44:47
13471
原创 前端脚手架之根据用户选择，自动生成所需的页面模块
前言前不久，产品经理A跑来对我说，你看，这项目（cloud-web）能不能只有jingzhe（目前项目里的一个独立的功能模块）？产品经理B又跑来对我说，我这个项目，既需要jingzhe，也需要yuyi（亦为一个独立的功能模块）我看了下项目结构，如下图所示，略微思索了一下，回答他们，可以views下面的这些模块，皆为独立的路由模块，比如本地jingzhe的访问路径为http:localhost:3000/jingzhechangeLog为日志模块，始终存在于各个不同的项目里如何编写脚手架，根据用
2022-04-12 09:58:52
1413
原创 vue2项目内XbsjEarth报多个问题，均与XbsjEarth内置的状态管理器mobx相关，该如何解决？
前言有个feature分支的代码，需要手动合并到主线上，该项目由Vue2、Cesium、XbsjEarth构成的三维系统，在运行项目时，却报了如下图的错误：定位问题首先，我猜想是不是XbsjEarth的初始化有问题，跑去看其源码，和github的issues，却没有找到问题原因其次，我根据报错问题，去google搜索，仍然没有定位出问题最后，是最最无奈的一种办法，那便是排除法，将该项目引用到的所有功能组件一一屏蔽查找，终于发现有问题的Vue文件，该文件的问题代码如下所示：竟然将cesium对
2022-04-08 20:58:19
799
2
原创 如何将二维地图里不同的坐标系抽取成公共对象
前言二维地图里，可能用到的EPSG(The European Petroleum Survey Group，欧洲石油调查组织)坐标系如下所示：432644903857900913如何将上面的不同坐标系抽取到同一个对象里呢？正文代码如下所示：/** * 坐标系 * @typedef {Object} CoordinateReferenceSystem * @property {number} CODE 坐标系编码 * @property {string} EPSG epsg编码
2022-04-07 11:44:24
157
原创 常用的正则表达式分析
前言需求如下：①允许使用 固定6位长度工号（纯数字）或者固定8位长度工号（纯数字）②允许使用 ta加固定6位长度数字 的工号；③允许使用 ft加6位到20位字符（这20位只能包含数字和英文字母） 的工号；需要编写一个正则表达式，同时满足以上需求正文我对正则表达式了解比较少，遇到这样的需求，只能挨个解决，再将其合并在一起用到的知识点如下所示() ：提取匹配的字符串[]：定义匹配的字符范围^：开头$：结尾|：或者满足需求①的正则表达式如下：var reg = /^\d{6}(
2022-03-24 10:52:43
792
原创 如何使用uglify-js压缩指定文件夹下的js代码
前言客户来了需求：想使用公司的组件包，但组件包的源码不能对其开放，该怎么做呢？发布后的组件包目录结构如下图所示：其中，es文件夹下的js代码皆为esm（ES Module）模块lib文件夹下的js代码皆为cjs（CommonJS）模块起初，我是想使用uglify-js压缩es文件夹下的代码，但遇到了问题，通过google以及uglify-js在github上的文档说明才知道，uglify-js不支持压缩es模块，原文如下所示：uglify-js supports JavaScript and
2022-03-17 17:24:27
1643
原创 axios的interceptors为何会多次执行
前言需求背景：不同的接口需求，axios的拦截器配置也不一样。比如，有的业务场景需要axios有超时跳转到登录页面，有的业务场景无需该提示，那么该如何编写axios，最初，我将axios的response的拦截器放在函数内，如下代码所示：function genHcParams() { let hcParams = {} let axios = service if (window.globalApi) { if (globalApi.useAxiosInterc
2022-03-17 14:17:23
2164
原创 Windows：发现端口8080被占用，如何找出进程并kill它
前言启动后台服务时，发现提示8080端口被占用，如何快速找出占用该端口的所有进程，并终止它们呢？正文电脑的操作系统是Win10，使用win + R快速打开以下窗口，输入cmd在命令行终端输入netstat -ano | findstr "8080"从上图可看出，进程107600占用了8080端口继续在终端输入命令tskill 107600，再次执行netstat -ano | findstr "8080"，发现已无占用8080的进程了...
2022-03-07 17:22:42
4517
1
原创 Go语言之io pipe源码分析
pipe.go分析这个文件使用到了errors包,也是用到了sync库.文件说明:pipe是一个适配器,用于连接Reader和Writer.结构分析对外暴露的是一个构造函数和构造的两个对象. 两个对象分别暴露了方法,同时这两个对象还有一个共同的底层对象. 实际上,这两个对象暴露的方法是直接调用底层对象的, 那么核心还是在底层对象上,只是通过两个对象和一个构造方法将底层对象的细节隐藏了.pipe sruct分析pipe的方法不多,新的写法却不少. type atomicError st
2022-03-04 21:21:30
312
原创 使用download-git-repo下载指定库时，遇到git 128错误，如何定位问题并换向解决呢？
前言我正在搭一个脚手架，希望通过命令行终端自动下载git仓库的代码到本地，首先想到的库便是download-git-repo，部分代码如下所示：const download = require('download-git-repo');download('direct:https://gitee.com/xx/xxx.git', 'test', {clone: true}, (err) => { if (err) { console.log('executeDownload error =
2022-03-03 15:01:39
3316
2
原创 如何将markdown解析成html
什么是markdown文件随意打开任何markdown文件，你可能会看到类似如下内容：# 标题1## 标题2**粗体**我们需要将标题1、标题2、粗体转为<h1>、<h2>、<b>，如何做到这些呢？我们将利用正则表达式对其一一解析正则表达式不同的编程语言，其正则表达式可能会有一些差异。下面是用javascript编写的正则表达式：const pattern = /Hello/const text = 'Hello, beautiful people'
2022-03-01 15:23:27
1582
原创 Go语言之IO库源码分析
io包的说明和定位提供基础的io原语接口.因为是基于底层操作实现的,所以,如果没有特别说明,都不应该认为是并行安全.接口或结构体的关系第一部分是io包的核心部分,包括四个接口:Reader/Writer/Closer/Seeker,分别对应io的读写关闭和偏移.第一部分的扩展部分,是基于核心4接口的组合:ReadWriter/ReadCloser/WriterCloser/ReadWriteCloser/ReadSeeker/WriteSeeker/ReadWriteSeeker.组合的
2022-02-23 20:46:33
604
翻译 【CSS】可选自定义属性值之var篇
前提假设，你有一个类元素，拥有多个css属性值，如下所示：.el { transform: translate(100px) scale(1.5) skew(5deg);}有时，你并不想使用所有的transform值，你希望有些属性值是可选的，此时你可能会想到varvar使用var定义可选属性值.el { /* |-- default ---| |-- optional --| */ transform: translate(100px) var(--transf
2022-02-17 10:10:55
447
原创 (六)搭建graphql项目, 前端可随意指定接口返回的数据
前言上节课，我们已完成实时显示新增数据的功能，这节课我们需完成【点击个人，实时显示详情信息】的功能SINGLE_PERSON查询queries.js增加SINGLE_PERSON，即单人查询功能，部分代码如下所示：const SINGLE_PERSON = gql` query($id:ID!){ person(id:$id) { id name sex age
2022-01-29 17:49:56
1302
原创 (五)搭建graphql项目, 前端可随意指定接口返回的数据
前言上节课我们讲到如何使用Apollo获取到数据库的Person列表，这节课，我们将会继续使用它新增Person、Job数据AddPerson.js首先，我们在components文件夹下创建AddPerson.js，代码内容如下所示：import { gql, useQuery } from '@apollo/client'const JOBS_LIST = gql` { jobs { name id }
2022-01-28 13:29:45
1021
原创 (四)搭建graphql项目, 前端可随意指定接口返回的数据
GraphQLNonNull接着上文，我们需要限制Person新增时，name、sex、age以及jobId都是必传参数，此时需要GraphQLNonNull类函数，具体代码如下所示：const { ..., GraphQLNonNull} = graphqlconst Mutation = new GraphQLObjectType({ name: 'Mutation', fields: { addPerson: { typ
2022-01-27 14:59:45
1275
原创 (三)搭建graphql项目, 前端可随意指定接口返回的数据
前言上节课，我提到想直接使用线上mlab搭建数据库，但线上mlab一直没法正常登陆（或者好不容易登陆进去，却是cloud mongodb，收费的），所以耽误了这些天，只能选择本地安装mongodb。简单介绍下mongodb本地的安装步骤去官网下载mongodb的msi包（我的电脑是Win10）安装成功之后，它会自动在C盘的Program Files创建含bin文件的目录，将其添加到系统环境变量里（我选择将data和log文件存储在D盘）在命令行终端，输入mongod，有输出信息，或者浏览器
2022-01-26 14:05:25
1162
原创 (二)搭建graphql项目, 前端可随意指定接口返回的数据
graphql在线文档紧接着上节课, 我们已在浏览器上看到graphql的运行效果, 点击右侧的Docs, 可看到我们可以查询的数据类型点击上图的query: RootQueryType, 我们可进一步看到person(id: String): Person, 即我们定义的Person类型, 可以通过下面代码查询指定id数据注意: person(id:“2”)里面的2必须用双引号括起来我们亦可以指定, 接口只需返回name, 如下图所示:GraphQLID之前在查找人时, person
2022-01-26 14:04:43
1046
原创 (一)搭建graphql项目, 前端可随意指定接口返回的数据
什么是graphql首先,让我们看下面这张图:以往的模式是, client端和server端直接互相通信, 很多情况下, 作为前端开发, 往往是服务端返回什么数据, 我们只能被动接受. 可能我们只需要一个参数person, 可服务端会返回很多不相关的其他信息, 这不仅仅增加了网络负担, 更加大了前端维护的工作量.现在不同了, graphql改变了这种交互模式, 它作为中间件, 可将服务端预发送的数据转成客户端真正需要的, 比如我们只需要客户的name, 通过Apollo发送请求, 服务端再通过Gra
2022-01-26 14:03:38
770
原创 (二)Chrome Extension入门教程----Budget Manager(预算管理)
前言紧接着上节课，我们成功创建了Hello World Extension程序，现在让我创建稍复杂一些的，即Budget Manager Extension， 它谨遵Chrome定义的API规范。何为Budget Manager ExtensionBrowser Action（与Hello World Extension的类型一致）Accept spending （能接受的花费量）Display total spending （显示总花费）Limit - Notify if reached （
2022-01-25 14:23:02
516
原创 (一)Chrome Extension入门教程---Hello World
Chrome Extension是什么Small programs(小程序)Modify DOM of a web page (修改网页的DOM)HTML, CSS & Javascript大致组成结构如下图所示：Extension类型Browser Action显示在浏览器的tool bar内随时能被访问Page Action显示在浏览器的tool bar内，但功能已被禁用只在部分页面能被访问到既不是Browser Action，亦非Page Ac
2022-01-25 13:28:15
3120
原创 使用vite+vue创建chrome extension(一)
创建项目使用yarn create vite自动创建项目,如下所示:再通过命令code 'chrome-vite extension'快速用vscode打开chrome-vite extension项目安装依赖需先安装vite-plugin-chrome-extension, 如下所示:yarn add vite-plugin-chrome-extension -D紧接着, 使用npx tailwindcss init -p安装tailwindcss, 完成后, 会自动在项目下生成postc
2022-01-22 17:52:17
1449
1
原创 @ant-design/icons源码解读
@ant-design/icons源码解读从package.json开始读源码，我习惯从package.json里的scripts开始，从这里，可以看到该npm包发布前做了哪些事。"scripts": { "build": "npm run build:lib && npm run build:index-es && npm run build:umd", "build:lib": "cross-env NODE_ENV=production rimr
2021-12-10 16:07:26
1880
原创 vuepress如何自定义首页的样式风格
前言如何自定义vuepress的首页设计风格呢？比如，我希望首页下面的红框内容是可点击的：请看正文步骤正文在docs -> .vuepress下新建theme文件夹，再在theme文件夹下新建components -> Home.vue, 将vuepress -> packages -> @vuepress -> theme-default -> Home.vue的源码拷贝至我们的Home.vue即可，在源码里稍做修改便能满足我们的业务需求改过后的Home.v
2021-12-09 14:35:42
4876
17
原创 解决发布npm包，git bash执行该命令却无颜色的问题
前言在Win10系统，发布了@sf/cli的私有库，全局安装npm install @sf/cli -g后，在Git Bash终端输入sf create XX却发现后续执行语没有任何颜色，该问题为何会出现，又如何解决它呢？问题原因如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作。你必须通过 winpty vue.cmd create hello-world 启动这个命令解决问题在该目录C:\Users\用户名内找到.bashrc文件，若没有，则手动创建
2021-11-19 18:21:23
1099
原创 使用flex布局，实现容器内所有的子元素多行水平垂直居中
前言需要实现下图的效果，多个元素水平垂直居中，如下所示：使用flex可轻松实现上图效果源码html代码如下所示： <div class="sfui-empty"> <img src="./assets/lost.png"/> <p>哎呀，页面丢失</p> <a href="javascript:location.reload();">重新加载</a> </div>
2021-11-19 17:50:41
1255
原创 Cesium创建小汽车闯红灯后的闪光效果
功能需基于cesium编写小汽车闯红灯后的闪光效果代码创建光亮遮罩层类BrightnessMaskfunction defaultValue(a, b) { if (a !== undefined && a !== null) { return a; } return b;}function defined(value) { return value !== undefined && value !== null;
2021-10-20 19:03:38
459
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人