前端工程化-Github Action实现CICD
前言CI/CD（Continuous Integration and Continuous Delivery）即指持续集成与持续交付。它是一种软件开发流程和方法论，旨在通过自动化和频繁的代码集成、构建、测试和部署，实现快速、可靠的软件交付。实现的方式有很多比如gitlab、Jenkins、docker、k8s 。本文要手把手带大家实现最简单的方式Github Actions。本文部署的是React的项目，大致思路与是PR触发Github Actions，先安装项目依赖环境，再执行Build，最后使用Rcync同步打包后的文件到服务器指定路径中。
workflows文件创建在项目根目录下创建./github/workflows/main.yml文件。并将下面的yml内容粘进去。on是监听触发事件，我这里使用的PR触发方式，你可以改成push指定分支触发。jobs是一系列的任务流，可以根据你的需求更改，因为的项目使用了pnpm维护，所以需要执行npm install -g pnpm，没有test程序则可以跳过。
name: FileMaster frontend 生产环境部署# ...
标准github工作流程
前言本文介绍一种使用最多的github工作方法，无论维护自己的项目还是开源项目，掌握这套流程就够了。
从clone到push
git clone
git checkout -b xxx 切换至新分支xxx（相当于复制了remote的仓库到本地的xxx分支上）
修改或者添加本地代码（部署在硬盘的源文件上）
git diff 查看自己对代码做出的改变
git add 上传更新后的代码至暂存区
git commit 可以将暂存区里更新后的代码更新到本地git
git push origin xxx 将本地的xxxgit分支上传至github上的git
发起PR写自己的代码过程中发现远端GitHub上代码出现改变，则需要与远程更新合并
git checkout main 切换回main分支
git pull origin master(main) 将远端修改过的代码再更新到本地
git checkout xxx 回到xxx分支
git rebase main 我在xxx分支上，先把main移过来，然后根据我的commit来修改成新的内容
中途可能会出现，rebase confli ...
前端工程化-规范项目创建React+Vite+TS
前言随着前端技术的快速发展，前端工程化已经成为现代化前端开发的必备技能。本篇文章。来带大家实现一个标准化前端项目。主要技术有技术栈为React + Vite + TS，用到规范工具有eslint+prettier+stylelint，规范化Git提交流程工具husky + commitlint + lint-staged，还有vite与tsconfig的配置。
项目安装前的准备
vscode先提前装好eslint，prettier，stylelint这三个插件。
后面统一使用pnpm包管理工具,pnpm是什么，先理解就是一个强大的包管理工具。
npm install -g pnpm
配置淘宝镜像源
pnpm config set registry https://registry.npm.taobao.org/
初始化项目注意：这里加右划线转义,实际并不用输入
pnpm create vite react-starter --template react-swc-tspnpm ipnpm i @types/node -D
package.json 中配 ...
宝塔部署Django(2023最新踩坑记录)
前言随着各个软件的迭代升级，网上的教程、b站的视频都不是最新的。我跟着做了十几份过时教程，折腾了好久，踩了不少坑。才有这篇文章，问题汇总在最后，希望能帮到你。
环境
CentOs7.9
宝塔7.9.10
python项目管理器2.5
python 3.6.8
Nginx 1.22.1
MySQL 5.7.40
Django 3.2.19
PyMySQL 1.0.2
这些环境之间大部分都是兼容的，但需要注意Django和MySQL的版本对应关系，版本不兼容就会报奇怪的错误。
安装环境安装
安装宝塔 安装请百度搜索，这里不赘述。
宝塔塔安装python项目管理器，目前最新版本是2.5，可以把首页显示顺手打开。
宝塔安装MySQL，搜索直接安装，注意版本和Django版本的对应关系。
项目配置
上传Django工程目录
修改setting.py文件，这个文件的位置在 project-name/setting.py。修改两处地方
DEBUG = False
ALLOWED_HOSTS = [‘*’],或者改成你的域名，或者是IP地址
在项目根目录下新建uw ...
windows10下NVM安装与使用
NVMnvm是node环境版本管理工具，类型python的anaconda。下载地址，vscode可以通过配置选择默认的的node版本
安装完的配置
配置镜像源在安装路径下找到这个settings.txt文件。添加下面两行代码。
node_mirror: https://npm.taobao.org/mirrors/node/npm_mirror: https://npm.taobao.org/mirrors/npm/
检查环境变量这是自动添加的，只是检查一遍，
手动安装npm（先确定是否有安装npm）注意：部分nodejs版本不会自动安装npm，需要手动安装，注意版本号对应关系，下载对应版本的npm。
将下载下来的安装包解压后重命名为npm ，放到nvm对应nodejs版本下的node_module包中
将npm 模块下的【npm、npm.cmd、npx、npx.cmd】文件复制一份放到node_module文件下同级别下
执行命令npm use 14.19.0
检查是否安装成功 npm -v
nvm常用命令nvm ls //nodejs环境 ...
Echarts自定义警戒线+图例
前言实习中要画个这种折线图，这种效果全网搜不到，所以就自己实现吧！
话不多说，先上图是不是你想要的效果？文末附HTML完整代码，需要引入自己的echarts文件
需求：1.实现数据分段显示，每段对应不同的颜色，2.画图对应区域的警戒线3.图例显示不同区域的警戒线
难点：1.实现多段警戒、多段折线2.实现不同区段的警戒线与图例颜色统一3.实现legend与line脱离，因为要显示不同区段的颜色（我查过，只有图例能解决这个问题）
代码注释已写入代码，若看不明白可去 Echart查询对应API
<!DOCTYPEhtml><html> <head> <metacharset=utf-8> </head> <body> <divid="chart"style="width:800px;height:400px"></div> <scriptsrc="./echarts.min.js& ...
JS设计模式(文末附源码)
23种设计模式分类一、创建型模式 工厂模式、抽象工厂、单例模式、建造者模式、原型模式二、结构型模式 装饰器模式、适配器模式、代理模式、外观模式、桥接模式、组合模式、享元模式三、行为型模式 策略模式、观察者模式、模板方法模式、责任链模式、迭代子模式、备忘录模式、命令模式、访问者模式、中介者模式、状态模式、解释器模式
SOLID五大设计原则：
单一职责原则（Single Responsibility Principle）单一原则要求一个类只做一件事情，并且将这件事情做好
开放封闭原则（Opened Closed Principle）对于扩展是开放的，对于修改是封闭的。也就是说，在不修改现有代码的情况下，通过扩展已有代码的方式来实现新的功能或需求
里式替换原则（Liskov Substitution Principle）任何使用父类对象的地方，都可以用其子类对象来代替，而且不会产生意想不到的结果
接口隔离原则（Interface Segregation Principle）客户端不应该依赖于它不需要的接口。也就是说，将复杂的接口进行拆分，让客户端只依赖需要的部分
依赖反转原则（Depe ...
手把手教你部署的node前后端程序
前言这篇文章将手把手教你使用宝塔面板部署自己的node前后端服务。至于为什么用宝塔，不敲一行命令实现前后端部署，相对于他原生部署方式，比如Nginx、Apache、Docker简单省事，对前端使用者更友好。
实验环境云服务器：ubuntu18.4PC：windows10
宝塔部署node后端服务宝塔工具安装pc上安装堡塔远程工具，ssh连上服务器。其他ssh工具也可以，比如putty、xshell等，运行堡塔面板安装命令wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh ed8484bec
如果是其他linux版本系统安装命令则不同：https://www.bt.cn/new/download.html，在这里找
安装完出现：外网面板地址: http://47.113.185.74:12482/95ea64dd内网面板地址: http://172.19.143.18:12482/95ea64ddusername:ysipxkuwp ...
解决输入法切换问题---最好用的输入法模式
问？
你是否有过想输入中文，发现输入法是英文，想输入英文有发现输入法是中文
shift输入大写字母，有不小心且换了中英输入法
切换输入法过程中出现问题，还要耽误几秒钟多切换几次，打断写代码和写注释，属实可恶
输入法分析像不像你的输入法？
这里的三个（简体，中国）输入法都是中文输入法，但是也可以通过shift按键切换成英文输入法
但是我们常用的输入法就只有一个，比如我喜欢用搜狗拼音输入法个数越多切换越麻烦，不信就Ctrl+shift切换试试吧
添加美式英文输入法美式英文是纯英文输入法，不会导致shift误触，谁想打电动时误触呢？点击图中的“语言首选项”=>点击添加语言=>输入美国选English=>去掉可选语言功能=>点击安装；再看输入法是不是多了一个美式键盘
删除多余的中文输入法同样是“语言首选项”=>中文的选项=>选好不用的输入法点击删除；此时的键盘是一个中文一个英文
修改切换快捷键系统默认的快捷键是win+空格，如果你不习惯就这样更改，我更改的是ctrl+shift同样是“语言首 ...
声呐综合处理系统
前言非常荣幸能够从2021年9月参与，推动整个项目的从零到2022年11月的最终交付。在这个过程中，我们面临了许多艰巨的挑战，不断迭代和完善各种新的需求，最终客户满意并顺利完成交付。所有的工作可以大致分为三部分，我和另外两位同门用gitee私仓协作开发，我做的第一部分。
多个协议的前视、侧扫格式数据解析、GUI架构设计、瀑布流实现、增删目标、在线解析
拼接部分：负责声呐图像拼接、航迹线绘制、集成到Qt
检测部分：负责目标检测算法改进、检测目标存储、集成到Qt
项目简介本项目实现了声呐文件解析、瀑布流展示、检测目标、数据库存储、增删目标、图像拼接、航轨线展示等功能。
功能：
前视、侧扫版多种格式支持
文件解析、加载进度条
侧扫声呐实现瀑布流效果
AI算法检测，将检测到的目标信息存入数据库
解析完成后可查看大图，放大、缩小、整个文件
漏检目标标注，和误检目标删除
支持多文件批量操作
支持多种AI算法模型选择
支持模型参数设置，比如PR、IOC
拼接图像，放大、缩小、平移
拼接地图大小自动扩充
航轨线显示
拼接地图经纬度跳转
独立的前视、侧扫开关，优化加载速度
大文件切割与存储
在线解 ...
