- 博客(483)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 Vue项目自动化部署 CI/CD
上一篇文章写了手动通过xftp把vue项目包上传到Nginx web服务器目录下。都2022年了，谁还手动通过xftp部署。嗯，必须来个自动化部署。自动化部署是个比较熟悉的话题，也有成熟的方案，一般大点的公司采用gitLab + Jenkins，但这个方案对服务器性能要求比较高，一般是4核8G内存起步。我试用的阿里云ECS 服务器 是2核4G的，所以放弃尝试gitLab + Jenkins了。
2022-11-01 17:42:36
1947
原创 WebGL 绘制矩形
上一节绘制了圆点，调用的绘制方法如下：gl.drawArrays(gl.POINTS, 0, 1);这小节尝试一下 绘制单独线段、线条、闭合线条、三角带（可构成矩形）
2023-09-09 15:25:25
500
原创 vue 动态绑定ref 父组件获取自组件data数据
vue中用ref 可以引用元素或组件中的数据，静态绑定用法非常简单，例如：this.$refs["xxx"].func() 或this.$refs["xxx"].msg 父组件调用子组件中的方法或数据。如果在父组件中用v-for循环渲染子组件，并且需要在父组件获取所有子组件中的数据，那么就需要动态绑定ref，代码如下。：注意父组件在取得子组件数据写法如下：this.$refs[`child${item.id}`][0].msg。
2023-09-06 18:49:43
1559
原创 浮动元素导致被遮住元素单击事件不响应
2）给浮动元素设置pointer-events 属性为none, 表示该元素永远不会成为鼠标事件的 target。具体含义可在网上看看。有时候浮动元素会遮住下面元素，并导致下面元素click事件不响应。点击被红色遮住部分click事件没有响应。1） 设置被遮住元素z-index。
2023-09-06 17:52:50
461
原创 WebGL 绘制圆点
这篇文章不说WebGL相关概念了，初学者先到网上看看WebGL相关概念。这里着重写一下在vue3前端框架下，如何通过webGL绘制圆点。
2023-08-24 18:36:22
3096
转载 掌握这些概念，不用担心看不懂OpenGL ES着色语言了
根据组成向量的分量数量，每个分量可以通过使用向量坐标{x, y, z, w}、颜色分量{r, g, b, a}、纹理坐标{s, t, p, q}三种方式访问。提供给我们进行编程的包括顶点着色器和片元着色器，它们都遵循着色语言语法，核心概念包括：向量、矩阵、变量、常量、运算符、采样器、布局限定符、精度限定符、插值限定符、输入输出限定符等。不同的是，矩阵有多行多列，用m*n表示，而向量只有一列或者一行。在平面着色中，图元中的值没有进行插值，而是将其中一个顶点视为驱动顶点，该顶点的值被用于图元的所有片段。
2023-08-24 18:15:01
90
原创 Qt 嵌入Vue项目 flapMap 浏览器兼容性问题
2）由于Qt不像浏览器那样可以console，或断点定位，所以采用加alert 的方法来定位，最后定位到调用flatMap方法的地方有问题。flapMap是es6语法，猜测是由于Qt自集成的chrome版本低导致，所以升级Qt版本到6， 问题解决。vue项目采用.browserslistrc默认配置，没有限定chrome浏览器版本，babel转换后生成的js代码需要的浏览器版本高于Qt自集成的chrome版本。使用 Browserslist，可以做到覆盖更广泛的受众（浏览器），同时包的体积也会保持最小化。
2023-08-16 14:02:17
804
原创 搭建cesium源码调试环境
1) packages目录源码目录，包含engine，widgets2）Apps目录包含一些示例代码3）Specs目录测试相关代码4）ThirdParty目录第三方依赖代码最新的cesium采用了gulp 和 esbuild进行打包，极大的提高了打包速度。gulpfile.js导出了打包命令，像build, buildRelease,clean等。具体的打包过程在build.js中。6）Build目录。
2023-07-06 18:47:16
627
转载 WebGL 入门
webgl 是在网页上绘制和渲染三维图形的技术，可以让用户与其进行交互。我们之前学过的div+css、canvas 2d 都是专注于二维图形的，它们虽然也能模拟一部分三维效果，但它们和webgl 比起来，那就是玩具枪和AK47的差别。综上所述，webgl 绘图好麻烦啊！麻烦不是不学的理由，因为后面还有three.js 为你排忧解难。那我们为啥不直接学习three.js 呢？那是因为three.js 若是只想画个旋转的立方体还好，若是要深入学习，实现复杂的模型交互逻辑，就必须要有webgl 基础了。
2023-07-06 16:22:48
2118
原创 vue项目用iframe嵌入另外一个vue项目(cesium)
用web服务器启动vue项目的方法很多，例如采用tomcat服务器，nodejs服务器，nginx服务器。这里我们用nginx服务器启动vue项目。如果要被iframe嵌入的项目集成了cesium，用这种方法，cesium在加载地图时会报错，需要采用web服务器启动这个vue项目。vue项目用iframe 项目嵌入另外一个vue项目，主要分2种情况，一种情况是嵌入本地项目，另外一种是嵌入用web服务器启动的vue项目。然后启动nginx， start nginx.exe。2）用web服务器启动vue项目。
2023-06-25 17:00:06
3091
原创 Cesium 画折线 polyline
Cesium 画折线非常简单， 鼠标点击获取经纬度， 把这些经纬度存放在数组中。每次鼠标点击先清空之前画的折线，然后重新画。所用到的API 有Cesium.Cartesian3.fromDegreesArrayHeights。注意：在使用此代码时，需要替换自己的accessToken。
2023-05-29 15:28:15
767
转载 Git之拉取指定tag版本/切换指定tag代码
切换到tag历史记录 会使当前指针处在分离头指针状态，这个时候的修改是很危险的，在切换回主线时如果没有合并，之前的修改提交基本都会丢失，如果需要修改可以尝试git checkout -b branch tag创建一个基于指定tag的分支，例如：git checkout -b test v0.1.0 这个时候就在这个test分支上进行开发，之后可以切换到主线合并。如果当前仓库中，已经存在一个跟你新建分支同名的分支，那么使用普通的git checkout -b 这个命令，是会报错的，且同名分支无法创建。
2023-05-25 18:59:23
5493
原创 Cesium 在地图鼠标点击进行定位，并显示经纬度
这篇文章介绍一下如何响应鼠标左键获取经纬度，以及在地图上添加广告牌。注意：在使用上述代码时，把accessToken 换成自己的。1）响应鼠标左键，并获取经纬度。2）在地图上添加广告牌。
2023-05-22 17:08:51
2018
原创 vue 使用cesium简单介绍
Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支持绝大多数的浏览器和mobile。相关网址如下：Cesium 官网：Cesium: The Platform for 3D GeospatialCesium 官网 API：Index - Cesium DocumentationCesium 中文API： Cesium中文api文档 | Index - Cesium Doc
2023-04-08 14:43:12
1190
1
转载 CesiumJS PrimitiveAPI 高级着色入门 - 从参数化几何与 Fabric 材质到着色器 - 下篇
案例就不放了，有能力的可以直接参考 CesiumJS 曾经推过的一个 3D 风场可视化的案例，它不仅自己写了一个顶点着色器、片元着色器都是自定义的 Appearance，还写了自定义的 Primitive（不是原生 Primitive，是连 DrawCommand 都自己创建的似 Primitive，似 Primitive 将在下文解释）。关于 fabric.materials，它的所有键名都可以在着色器代码中作为 GLSL 变量使用，也就是一个计算完成的 czm_material 结构体变量。
2023-03-14 17:13:04
1344
转载 Cesium应用篇：1快速搭建
细心的用户不难发现，该函数的实现是在hello2.html中，在该函数中，用户创建div，并创建Cesium.Viewer窗口绑定该div，实现三维球的加载，其逻辑和hello.html完全一样，只是封装在了onload函数内。上面的hello.html本身没有什么问题，但对于开发人员，或多或少都需要以源码方式加载，便于调试和问题的定位，但如上的范例直接加载Build下的Release脚本，对开发人员来说略显不足，下面我们就升级一下这个范例。最后，调用onload函数，结束main.js脚本的使命。
2023-03-14 17:08:16
239
转载 Cesium中自定义材质material
Cesium.Material.fromType() 方法是一个简写，完整的写法是如下，Fabric 是 Cesium 中用于描述材质的一种 JSON 规定，里面type属性是材质的类型，也就是材质标识，uniforms是对应材质的一些变量，可以设置材质的颜色、图片等，不同材质的uniforms不一样。内置的材质可以直接拿来使用，最常用的就是Color和Image。但是，不管是哪一种，在这些 glsl 代码中，都是可以直接使用 glsl 的内置函数和 Cesium 预定义的 函数、结构体、常量的。
2023-03-13 18:26:33
2937
转载 Cesium中地形数据的加载
4.利用群里（Cesium交流群，群号：115883691）的工具gdal2srtmtiles_x64（我用的是64位的，32位的我没测过），工具的使用说明已经很详细了，这里我就不多作解释了。首先，地形数据是什么？拿DEM数据来说，DEM数据就是数字高程模型，就是描述每个点位的高程数据而已，没有其他附加信息，更不会包含影像图，单独展示是看不出什么名堂的。另外一个tif文件，我也没明白有什么用，如果有知道的，欢迎评论告知一下，感激不尽。按住Ctrl键，旋转地球，从地平线方向看，地形数据更明显，效果更好。
2023-03-04 12:06:58
1440
转载 cesium 屏幕坐标转世界坐标的方法对比
2.getPickRay和pickEllipsoid的区别在于它返回的高是地形高度（当视高较大时获取的高程不准确），如果Cesium没有添加地形数据，则他返回的高为一个无效的负值，可以认为没有添加地形数据时两者没有区别。1.pickEllipsoid获得的是二维坐标，即高永远为0，当视高较大时（经测试，这个值大约为80万m），不严格为0，是一个很小的数。2.如果不需要拾取模型上的位置，添加了地形，建议使用getPickRay，没有添加地形使用pickEllipsoid。
2023-03-04 11:54:39
184
原创 systemctl status network.service
可能由于和networkManager 有冲突导致的，只需要把networkManager服务给停掉，再重启网络服务就可以了。systemctl status network.service 用来查看网络服务情况，
2023-02-27 09:21:02
1454
1
原创 vue项目采用vue-cli-plugin-cesium 插件集成cesium
通常情况下，我们要在 Vue 中使用 Cesium，首先要安装 Cesium，然后要在 vue-cli 的 webpack 配置很多东西，对一些有经验的人来说只不过麻烦些，但是对 Cesium 的初学者来说会很痛苦，因为没有使用过，也不知到要怎么配置，只能搜索网上的教程，一步一步踩坑。市面上的前端框架中，Vue+Cesium 可谓是最佳搭档，一般做 Cesium B 端产品的公司都会使用 Vue，所以后续内容都将基于 Vue。问题2：采用此插件的示例No01-init.vue 组件地球加载不出来。
2023-02-01 15:17:12
799
转载 webgl框架介绍以及webgl项目的技术选型问题
需要说明的是，普通的webgl项目性能是一定不如前端级框架的。为了项目和团队的健康，不要什么项目都选自己精通的技术，要选对的技术栈，选健康的解决方案。让我印象最深刻的就是前些天遇到一家专做交通规划的公司，选了一个不合适的技术栈全家桶，项目进行到中期整个技术部在填坑，填了2个月，最后决定重构、换栈。自大前端时代到来以后，硬件的给力，浏览器的发力，使得前端越来越硬气，开始尝试挑战分外之事，三维就是其中之一。技术选型是重中之重，应该是所有企业的共识，这不仅关于到当前项目的交付，也涉及到未来项目的生命线和前景。
2023-01-31 09:46:19
2123
1
转载 前端工程化基建探索（2）从内部机制和核心原理了解npm，看它何“咸鱼翻身”
本文从内部机制和核心原理了解npm，和简单了解了私服的建设，对 npm 一些常见使用误区以及使用技巧进行了分析，评论区也可以把你在安装删除的过程中遇到问题，一同分享和解决的办法~作者：codercao来源：稀土掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
2023-01-29 11:15:52
233
原创 自定义日历组件day-calendar实现
实现此日历需求的关键是构建6行7列的数据。我们可以先构建一个一维数组，此一维数组中放着42个日期，然后再把这个一维数组分割为二维数组，二维数组有6个元素，每个元素又是一个一维数组，放着7个日期元素。点击上月日期要翻页到上一个月，例如上图中，点击28号，日历翻到了上一月。点击下月日期要翻到下一月，例如点击2号，日历翻到下一月。想着用vant组件库中的calendar组件实现此需求，但calendar组件不是固定6行7列。在代码中做个详细的注释，如有不明白的地方可留言。另外还要显示农历，以及当年的公休日信息。
2023-01-05 14:30:19
642
原创 Promise 中的异步错误 怎么捕获
在obj.abc.status这里会出现引用错误，因为是同步错误，可以被catch捕获。我们在看下，在Promise中异步产生的错误能否被catch捕获？怎么让catch能捕获到呢？用对异步代码加try catch ，然后把错误reject出去，这样就可以捕获到异步代码里面的错误了。大家可以执行一下，catch并没有捕获到引用错误。原因就是错误是异步的，catch捕获不到。
2022-12-30 16:24:01
1562
原创 js 立即执行函数传参问题
聪明的你可能从错误中已经看出错误原因了：把"test string" 当成运算符了，所以会出现这个错误。在变量定义后面加个分号就可以了。JS 再词法分析的时候，就把定义变量那一行和自执行函数分开了。大家可以直接复制，执行一下。看看下面这段代码有什么问题？
2022-12-30 15:56:46
271
原创 vant calendar 组件 bottom-info slot 用法
从文档上看，bottom-info插槽有参数，所以是作用域插槽，我们看下此插槽用法。我们给bottom-info 加了节日，节气，农历，并给所有节气下面增加了一个*。
2022-12-14 17:57:38
1888
5
原创 Vant 日历组件改造，增加农历，左右点击按钮上一个月，下一个月
到2023年2月份显示错误了， 因为2023年2月份有28天，我们传入的天数是30天，超出了2月份最大天数，所以出错了。注意：记得安装获取农历的一个插件 npm i js-calendar-converter。在网上找了一个vant 日历改造的文章。
2022-11-30 11:07:14
3415
2
原创 uni-app uview1.x u-slider组件最小值最大值 使用问题
在uni-app项目中UI设计的进度条不能用uview2.x中u-slider组件实现其中的自定义滑块，所以采用了uview1.x来实现，见之前的一篇文章（看了一下uview1.x u-slider源码，发现就是这么设计的，那么如何修改呢？
2022-11-26 14:27:55
996
原创 uView u-slider 自定义滑块
项目中集成的是vView2.0组件库，u-slider组件中有 blockStyle 属性，看着是用来设置自定义滑块的。看了一下uView1.0组件库 u-slider组件有自定义插槽属性，所以就想着把uView1.0 中的u-slider组件给单拎出来在项目中集成。现在slider 已经是自己项目中的一个组件了，为了方面可以对slider简单改造一下，例如给activeColor，inactiveColor 属性设置个默认颜色，这样使用的时候就不用传值了。不用设置选自定义插槽属性了，直接写插槽就行了。
2022-11-19 12:24:23
2410
原创 docker 启动Nginx镜像部署Vue项目
阐述了直接启动Nginx进程来部署vue项目，这篇文章阐述采用docker 启动Nginx镜像来部署vue项目。可以看到Nginx镜像已成功启动，在浏览器地址栏输入IP+port 出现Nginx欢迎页。再次在浏览器输入IP+端口号会出现vue部署的项目，记得清除一下缓存。记得把之前启动的镜像(Nginx欢迎页那个镜像)删除掉。3. 制作docker 本地镜像，并启动。3) 构建Nginx镜像，并启动。1. docker 启动Nginx镜像。可以看到Nginx镜像已经成功拉取。
2022-11-04 09:24:57
1314
原创 部署vue项目到阿里云服务器
可能在make的时候会报2个错误，在网上搜一下就解决了。大概记得第一个错误是在MakeFile中删除-Werror，第二个错误是注释一行代码就可以了。记得vue项目包dist 一定要上传到Nginx 安装目录下的html目录，一般是/usr/local/nginx/html目录。我们试用阿里云ESC服务器(选择CentOS)，按步骤试用，稍等几分钟就会收到短信，创建实例成功。但不幸的是，打不开。4）用户名和密码填写我的在阿里云服务器设置的，一般用户名在没有修改的情况下都是root。
2022-10-27 18:06:27
5449
6
原创 写一个VSCode snippets 代码片段
在上篇文章中()这是两段通用网络接口代码，每个请求都这么写。我们能不能做个小工具方便的输入这些通用的代码片段呢？当然可以的。有经验的前端工程师基本上都安装了类似这样的VSCode插件。所以我们自定义的这个通用代码片段当然可以用VSCode插件来实现。为这2段代码片段写个VSCode插件有点杀鸡焉用牛刀的感觉。有没有更轻量的实现方案呢？VSCode 提供了snippets来实现。
2022-10-26 14:58:50
365
原创 基于element-ui 搭建管理后台
此框架采用了vue-cli 脚手架创建的项目，选中vuex vue-router，然后按官方文档安装element-ui 并按需加载。之前接触的框架，网络接口一般定义在一个文件中，所有业务模块用到的网络接口都写到一个文件中，文件比较长，维护起来也费尽。在项目中如果多人协作开发，定义通用常量还是比较重要的，防止出现奇怪bug。在这个通用框架中我们定义了一个假路由数据，如果你们后端返回的动态路由和这个假路由一样，那么这个框架就可以直接拿来用了，直接上手写业务。左侧为菜单栏，右侧包含头部，面包屑，主内容区。
2022-10-24 18:03:17
5709
1
转载 运行npm install 命令的时候带上--ignore-scripts有什么好处吗？
现在可以就理解成是npm的一个包执行器，能让npm包中的命令行工具和其他可执行文件在使用上变得更加简单）。实际上呢，一些我们已经运行了几个月的脚本是没啥问题的，而该工具可以帮助我们确定新加入的依赖包是否可以加入到没问题列表中。就是说我们怎么样可以预先了解哪些依赖包需要脚本文件，我们不能使用。can-i-ignore-scripts工具，可以帮助我们分析各个依赖包是否可以使用。后缀，那么是可以减轻恶意代码的危害，但同时也会导致下载的依赖包没有正常发挥作用。或则就如我们标题里说的，在安装依赖包时，确保添加。
2022-10-14 14:51:29
994
转载 【Vue+Element】菜单导航折叠后文字不隐藏
出现这个问题是因为我们在嵌套中出现了意料之外的,而标签本身希望里面嵌套的是,,其中之一。"parentName": "个人管理","menuName": "钱包管理","parentName": "系统管理","parentName": "密码管理","parentName": "密码管理","menuName": "菜单管理","menuName": "个人管理",
2022-10-13 16:43:46
1713
原创 Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origin‘
此vue项目用了.env .env.prod文件来配置开发环境和生成环境域名，在.env文件中配置了和vue.config.js中target相同的域名。这样axios在请求时，地址为http://xxx/api/user/info 导致vue.config.js配置的代理无效。这样axios请求时，地址为/api/user/info 这样vue.config.js配置的代理就生效了。vue项目在开发环境下出现了跨域问题，在vue.config.js中配置了跨域，但没有生效。
2022-10-10 14:43:18
399
原创 vant cascader级联选择器动态无限加载
直接取this.options[0]给children赋值。如果要求动态无限级加载怎么办？问题的关键是从options中定位到要加载的级别给children赋值。例如要加载3级，this.options[x].children[x].children = data。vant 官网给出了cascader 级联选择器异步动态加载示例，示例比较简单，加载了2级，固定写法。令我惊讶的是，这个vant级联选择器组件动态加载，网络上几乎没有相关文章。如有不明白的地方，或有更好的写法，可留言讨论。
2022-09-30 15:44:51
3298
13
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人