技术调研-网站更新一
背景对于前端部署如何进行项目部署这里就不详细介绍了，这里主要介绍如何进行前端部署通知用户更新网站。 之前开发的网站, 每次都是让用户手动进行刷新网页打到网站更新的目的,但是这里有一个弊端,就是用户每次都需要手动,对我来讲,我比较懒,能自动的绝不手动刷新; 简单介绍场景 1开发完一个功能, 提交到 github 上, 然后通过jenkins去部署发布, 之后你会发现页面还是之前的页面,因为你没有刷新网站,所以需要手动刷新一下网站。对于用户来讲能不能自动更新呢? 场景 2用户在填写表单的时候,你项目网站更新了,需要一个提示,可以立即更新也可以忽略稍后更新, 这样就可以告知用户网站更新了那些功能? 更新的内容会不会影响你正在操作的功能? 场景 3如果没有提示框,直接刷新页面导致用户正在操作的数据丢失, 这样的损失还是比较大的; 于是我今天研究了一下这个网站更新的方案, 然后通过本地nginx模拟服务器去尝试了一下; 实现的方案文章使用的是vite5 + vue3 + ts的一个本地项目; 使用第三方插件vite-plugin-pwa,...
技术调研-网站更新二
背景上篇总结了如何实现网站更新的功能，现在还有另外的一种做法pwa技术实现； 创建项目用vite+ts+vue创建一个空项目 1pnpm create vite vite-pwa-demo --template vue-ts 安装插件安装完成之后，需要再次安装pwa插件 1pnpm add -D vite-plugin-pwa 配置插件完成安装之后，需要改一下vite.config.ts文件，添加pwa插件 1234567891011121314151617181920212223import { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";import { VitePWA } from "vite-plugin-pwa";export default defineConfig({ plugins: [ vue(), VitePWA({ // prompt...
技术调研-记录使用1Panel遇到的问题
背景最近在bili上看到了一个可视化运营面板(go + docker)搭建而成的； 于是我花巨资买了一台服务器, 在Ubuntu操作系统上安装使用1Panel； 首先1Panel的在线安装, 如使用其他安装方式，可查看官网 12# 这里我使用的是Ubuntucurl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && sudo bash quick_start.sh 因为面板是使用docker搭建的，当然就要安装docker; 问题一：安装docker超时失败因为安装docker就像安装npm/pnpm install类似，是需要镜像源地址的； 因为1Panel默认使用的是官方的镜像源，那么在中国大陆很多关于docker的镜像源地址都关闭下架了；可以查看 githubDocker Hub 镜像加速器，可以看出很多的地址要不是内部使用要么就是关闭了； 我花时间查询了一下相关资料，就是你的先在你的服务器上安装docker，但是安装需要镜像地址；...
技术调研-跨端之多端系统
背景💡 跨端的概念已经清楚了，之前多套代码维护多端系统，导致不同的兼容，性能需要不同维护；开发多套一致的功能是比较浪费时间，也是不合理的； 以下案例涉及到公司的一些方案以及项目图片，仅个人查看； 跨端的概念以及场景如果一个系统能在不同设备上显示，并且始终维护一套代码，后期的开发效果与维护更加迅速，加快效率；即：一套微信小程序的电商系统（类似淘宝，京东），涉及到下单，购物车，支付，发货等等，以及后期的客服；较为庞大的系统中如何统一规范，一套代码实现多端处理，样式以及界面不会有太大的突出？ 这里引入一个新的概念 跨端， 跨端技术对于前端来讲还是蛮不错的，因为前端展示的页面形式都是一致的，如果不引入跨端，就会出现多个系统，多套代码维护与开发；从而导致项目过大，难以维护的后果； 跨端的应用场景还是比较多的，例如：一套 h5...
个人总结-2022-08 - 2024-07
2022-08 - 2024-07自身能力有所提升之后，在短暂时间内开始对自身进行沉淀，不论是对工作中还是生活或者是对个人，我相信在俩年时间内通过自身的沉淀能够得到一些成长。 当然俩年时间我也会尝试着接触不同的事物，接触不同的兴趣爱好；如果没有那就太枯燥乏味了； 能力沉淀想再短时间内提升自己，那就离不开能力沉淀，就好比说你去自己动手打造项目，去开源，社区，线下等去接触，这样渐渐的会提升自身的视野；也会对自身的那些不足进行填补； 但我觉得能力沉淀，并不是指什么； 能力沉淀，是指对自身能力进行提升，提升到一定程度，可以进行一些事情； 就拿个例子来讲吧： 小 A 在工作中通过自己的努力完成的一个项目，但是在开发过程中会发现一系列问题；而这个时候，小 A...
工作内容-GridView宫格加载渲染优化
背景公司系统首页是一个GridView宫格模块的界面，但是对于这样的一个界面来讲，渲染界面的时间并不会很长；接口返回的数据的耗时也是比较短的，但是整个过程加起来耗时22s ；很难想象为什么会花费这么长时间呢？ 分析在优化之前，要先明确优化的地方以及怎优化；只有找到来源才好找到解决方案去优化； 本地调试页面首次打开，从渲染页面开始到资源加载完毕，共加载 20s-30s 左右，加载本地资源在 1s-2s 左右，由于原生系统引入 vue 的原因， vue 外链不是国内的导致下载资源时间将近在 15s 左右； 本地开发去除 vue 外链引入，再次打开页面加载时间在 12s 左右，查看本地资源加载完成的时间在 1.5 左右，那么渲染时间从开始到结束一共 8s-10s 左右；对于 100 个 tab 的渲染决不能渲染时间在 10s 左右，那么就是源码是可以优化的； 明确了页面渲染时间较长，接下来我们可以查看源码；更加明确页面渲染时间长的原因； 查看源码，代码行数接近 2000 行；去除 css 样式和 html，计算每个 tab 将近 8-10...
工作内容-中英文搜索按键回车事件冲突
背景普通的输入框，做一个搜索的功能，那么对于搜索，输入直接调用接口就好了， 为什么还要值得做记录总结呢？是因为，搜索查询并不是你想象中的直接调用接口就可以了；考虑的因素也是挺多的，例如，搜索优化，不对服务器造成并发影响； 间隔搜索等等，一般行为，为了不频繁请求接口，我们都会使用节流函数优化，或者失去焦点再去请求也是可以的； 但是对于及查及显示的功能原则，这是就不能使用失焦查询了；这里的功能例如： 地址查询等等； 那么输入查询也会出现另外的一个弊端， 那就是中文字符的影响，下面会说明 bug 复现的过程和解决方案! 适用场景 常见的搜索查询无非就那么几种，端与端的搜索也就是移动端与 pc 端； 如果是移动端仅仅需要处理的是频繁请求的问题；避免频繁请求造成的服务器的压力; 如果是 pc 端，就不是仅仅需要处理频繁请求的问题了； 并且你在 input 的情况下还要处理另外一种情况，输入中文有中文字符的情况； 平常的搜索都是输入框， 按钮查询搜索; 问题分析复盘在原有的功能上去选择化的维护与扩展；其中有关联单号，其实是个搜索查询功能,...
工作内容-图片上传之前的自定义水印
背景前几天，公司项目中有这么一个需求，说是上传图片给图片加水印的功能，我说那还不简单，因为公司图片存储采用的是七牛云，当然七牛云后台是可以设置图片的水印； 但是我一看需求，好家伙果真不简单，原来不是几个字，而是多个元素叠加在一起的；水印的数据也是动态的，而七牛云后台只能设置一些静态属性或者图片地址，如果url地址加一些参数的情况，效果也是不可观的 而通过url地址拼接参数的情况：/image/<encodedkodocheme> : 水印的源路径，目前支持 kodo 资源。kodo 资源可由 kodo://<bucketname>/<key> 表示（此时 bucketname 需要与输入源在同一区域），均需要经过 urlsafe_base64_encode。 注意：更换图片水印时，建议更换图片的文件名。 这样的情况目前只支持 kodo的图片资源，如果使用这样的参数，那么我在上传前就要先上传动态数据的水盈图片，之后在上传要上传的图片； 虽然这样是可以做到，但是对于七牛云的存储容量和流量来讲，消耗是很大的；...
工作内容-支付中转页面
...
工作内容-移动端返回触发俩次
背景前端时间移动 APP 与 h5 的一个混合式开发项目中，遇到了一个比较搞笑的 bug；刚开始有点纳闷，后来静下心来才觉得这个问题有点可笑；h5 的项目采用的 vue3 + vant3 开发的，h5 页面的顶部tabBar结构为左中右，是对 vant 的二次封装； 复盘是一个怎样的问题？在开发项目中，因为是混合式开发， h5 会调用原生 app 的一些方法，例如文件上传，返回上级页面，跳转 app 页面等等； 一级页面为 h5 页面, 二级页面也是 h5 页面，在二级页面返回直接跳出，直接到了 app 原生页面首页；按理说这应该返回的是一级 h5 的页面； 浏览器打开 h5 一级页面模拟 bug 复现采用vue-router中的router.back() 和 router.go(page)方法，均在浏览器中返回的是一级页面；但是在app webview中直接跳出。执行了俩次； 使用调试手段. console日志 和 debugger 都会发现执行了俩次； 寻找问题来源 解决方案这个问题确实是粗心造成的；不过这个 bug...
