- 博客(43)
- 收藏
- 关注
RSS订阅原创 基于docker jenkins nginx gitee实现前端自动化部署
随着devops的发展，前端部署变得越来越简单，可控性也越来越高，本文基于docker+nginx+jenkins+gitee来实现前端自动化部署流程，具体实现效果为开发人员在本地开发，开发push提交代码到指定分支，自动触发jenkins进行持续集成和自动化部署。部署完成后会收到邮件的通知，构建成功后会将打包后的文件上传到服务器，通过nginx反向代理展现页面。构建失败则打印出错误日志。而docker是我们整个部署方案中很重要的一块，由docker构建镜像，保证了环境的统一
2021-12-10 14:42:44
3407
2
原创 electron实现远程更新
背景之前一直都是vue项目，打包成dist，然后放到electron的项目里，通过electron-packager打包，然后通过setup，打包成.exe文件，再把生成的exe发送给测试人员，在公司内部可以发送给测试人员，如果项目部署到酒店，那么每次更新再去给每个酒店发exe包，那就很麻烦，所以需要远程更新功能。下面就来说说如何实现electron实现远程更新electron版本：8.0.01. electron官网下载electron-quick-start项目electron官网git cl
2021-08-26 13:38:29
2105
9
原创 clientWidth丶offsetWidth丶scorllHeigth丶scrollTop丶offsetTop丶clientX丶pageX丶screenX丶offsetX
clientWidth / clientHeiht：包括到padding，但是不包括滚动条offsetWidth / offsetHeiht: 包括到border。包括滚动条scorllHeiht 和 scorllTop：offsetTop：clinetX / clientY: 鼠标距离浏览器的距离（不随滚动条改变）pageX / pageY: 鼠标距离浏览器的距离（随滚动条改变） pageX = clientx+滚动的距离screenX / screenY: 鼠标距离屏幕的距离s
2021-07-22 10:33:00
182
2
原创 vue项目本地跨域、线上跨域、本地链接线上地址跨域、https站点使用ws协议跨域问题解决
vue项目本地跨域、线上跨域、本地链接线上地址跨域、https站点使用ws协议跨域问题解决
2021-06-07 11:59:25
4042
1
原创 element-表单resetFields方法不生效问题
问题描述当我点击修改按钮，数据回显，这时候点击叉，在点击新增按钮的时候表单数据没有重置（清空），但是我在新增按钮的回调里，明明调用了表单的resetFields()方法，这个方法为什么不生效呢？代码分析伪代码当我点击修改按钮的时候，直接给表单赋值this.form = {...row}点击新增按钮调用resetFields()方法if (this.$refs['ref_form'] !== undefined) { this.$refs['ref_form'].resetFiel
2021-06-07 10:09:09
402
3
原创 form表单数据回显双向绑定失效的原因
问题描述点击修改按钮，回显表单数据的时候，假设第一个下拉框为1的时候显示另一个下拉框，这个时候我点击另一个下拉框的时候没反应，不知道为什么， 一开始我以为又是element组件库的问题，后来发现不是代码分析伪代码点击修改按钮的方法里 我直接用row给这个表单赋值了this.user_form.id = row.idthis.user_form = {...row}然后在点击第一个下拉框的change回调方法里，我直接给另一个下拉框双向绑定的值赋值空this.user_form.
2021-06-07 09:54:55
1360
原创 vue项目页面上传图片至oss
之前上传图片都是先通过接口将/xxx/xx/xxx(图片本地路径)传递给后端，后端将图片上传至oss，然后返回线上地址，然后我在展示，后来说考虑网络带宽，资源消耗，上传改成页面上传，提交表单的时候，直接给后端返回线上oss图片地址，下面我们来看看如何实现页面上传。1.下载阿里云oss包npm i ali-oss2. utils下面创建client.js文件(连接oss和封装上传方法)//client.jsconst OSS = require('ali-oss');//引入ossimpor.
2021-06-07 08:38:52
954
3
原创 如何优化vue项目首屏加载白屏(加载过慢)的问题
发现问题昨天项目上线，访问线上地址整整加载了15秒，看了之后气的能砸电脑在优化之后 首屏加载速度在1.2秒左右，当然还有优化空间，后期还可以考虑做个骨架屏，loading什么的提高用户体验优化方案优化之前下载webpack-bundle-analyzerwebpack-bundle-analyzer 是 webpack的可视化资源分析工具npm i webpack-bundle-analyzer配置vue.config.jschainWebpack(config){ config.
2021-05-12 11:48:14
2514
9
原创 element组件库-el-switch组件 .stop修饰符不生效问题(阻止不了事件冒泡)
问题所在点击第一个事件打开dialog，没问题，点击switch组件不希望打开dialog，但是现在点击switch组件也打开dialog了，肯定有问题，第一反应肯定是事件冒泡了，触发子的点击事件，事件向外冒泡，又触发了父的打开dalog的事件给change加.stop修饰符 阻止时间冒泡 不生效然后又换成click事件 还是不生效 其实el组件只提供了change事件 当时就想试试 还是不行然后我把switch换成按钮 给按钮加了.stop修饰符 看看点击按钮会不会打开dialog .
2021-05-10 08:25:03
2282
3
原创 vue项目使用mqtt
什么是mqttMQTT（Message Queuing Telemetry Transport，消息队列遥测传输协议），是一种基于发布/订阅（publish/subscribe）模式的"轻量级"通讯协议，该协议构建于TCP/IP协议上。MQTT协议是轻量、简单、开放和易于实现的，这些特点使它适用范围非常广泛。在很多情况下，包括受限的环境中，如：机器与机器（M2M）通信和物联网（IoT）。其在，通过卫星链路通信传感器、偶尔拨号的医疗设备、智能家居、及一些小型化设备中已广泛使用。实现MQTT协议需要客户
2021-05-10 08:05:14
1352
2
原创 vue项目使用webscoket
什么是webscoket?websocket 是一种网络通信协议，一般用来进行实时通信会使用到,webscoket是html5开始提供的一种在TCP连接上的全双工通讯协议。 webscoket是的客户端和服务端之间交换数据变得更加简单。允许服务端主动向客户端推送数据。在webscoket API中，浏览器和服务器只需要完成一次握手，两者之间就可以创建永久性的连接，并且进行双向数据传输。现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发
2021-05-10 07:33:52
1831
1
原创 记录读element源码收货=＞持续更新
button按钮感觉没什么好说的，就是接受参数 加类名 改改样式就行cssbox-sizing : border-box / content-boxborder-box： 元素的高 包括padding 和 bordercontent-box: 元素本身的高with-space:nowarp
2020-12-28 15:30:16
117
原创 uniapp心得
如果设置整个页面的背景色刚开始是这么写的 ⤵️<style lang="scss" scoped> .contanier { backgorund:#ccccc height:100vh }</style>这样问题：当页面for循环一些数据超过手机可视区域，背景色就不生效了正确写法，今天菜摸索出来的<style> page{ backgorund:#ccccc }</style><style lang="scss
2020-12-09 10:42:12
371
原创 uniapp扫静态码跳转到小程序内部指定页面AND小程序跳其他小程序
扫静态码跳转到小程序内部指定页面前置条件功能暂不支持个人小程序小程序必须上线去wx小程序后台开通扫一扫功能开发 ⇒ 开发设置添加配置后台配置 (与前端无关)添加配置里面有一个校验文件，下载下来发给后端，需要后端把这个文件配置到后台，与前端无关转换二维码配置完成后，跳回去就可以看到二维码地址，这个地址是一串url，通过草料二维码将url转为普通二维码，扫静态码即可跳转小程序内部指定的页面了小程序跳其他小程序前置条件需要知道你要跳转小程序的appid即可uni.nav
2020-11-04 14:20:08
4297
原创 处理数据
1.let arr = [ { "id": 72, "business_id": 1, "parent_id": 0, "name": "肉类", "children": [ { "id": 81, "business_id": 1,
2020-10-30 17:12:33
165
1
原创 mysql常用指令整理(入门)
mysql第1章 SQL语句1-1 SQL语句分类DDL(data Definition language)数据定义语言用来定义数据库对象:数据库 表 列 关键词：create drop alter showDML(data manipulation language)数据操作语言用来对数据库中表的数据进行增删改 关键词：insert delete updateDQL(data Query language)数据查询语言用来对数据中表的数据进行查询 关键词：select
2020-10-28 14:23:06
157
1
原创 git常用指令整理
git指令整理git全局设置git config --global user.name “你的名字”git config --list user.email “你的邮箱”git配置项的作用 ==> 生成秘钥的时候需要，秘钥可以显示是谁上传了代码基本查看版本 git --version初始化 git init打印打印commit历史版本 git log查看状态 git status上库代
2020-10-28 14:21:56
127
原创 macos操作系统常用快捷键
常用快捷键command + q 关闭应用command + w 关闭窗口command + m 最小化窗口command + control + F 最大化窗口command + option + J 打开chrome 的 consolecommand + shift + T 恢复刚关闭的窗口command + d 刷新浏览器command + space 打开聚焦搜索编辑器里的快捷键command + option + 左右键 可以切换文件comman
2020-09-17 20:29:54
772
原创 关于接口设计个人一些见解(前端)
关于key的规范要求语义化来命名key，并且遵循驼峰式和下划线式的规范前端的key和后端的key要保持一致包含多个结果的字段，用复数的形式{ "tags": ["食物", "粤菜", "卤水"],}如果是数组对象的形式的时候，名词 + list结尾（一般循环遍历显示的时候，需要这种数据形式）{ "memberList": [ { "uid": 111, "name": "张三", "age": 22 },
2020-09-17 18:51:09
284
原创 uniapp中调用相机相册/上传/扫码整理
调用相机相册uni.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['camera','album'], //这要注意，camera掉拍照，album是打开手机相册 success: (res)=> { console.log(res); const tempFilePaths = res.tempFilePaths; }});这个api调完之后
2020-09-07 16:47:50
9536
1
原创 uniapp中登录和支付整理
uniapp中登录授权首先调用**uni.login（）**方法,获取到code / authCode然后将这个code 发送给后端，后端会用这个code去和wx / zfx 要 open_id 和 session_key / userid 和 token然后后端将获取到的这些发给前端，前端用这两个东西，可以干其他的事情如： 1. 获取用户信息 2.支付的时候需要传递open_id / userid给后端吗uni.login({ provider: 'weixin', succes
2020-08-27 21:11:38
936
原创 uniapp中使用vuex（表单验证 /生命周期/vx调试注意）
后台管理后台管理 权限菜单 + 增删改查分页 + e-charts图标 权限菜单不太会 增删改查分页就很简单 有空看一下vue-admin由后台管理引发得一个思考，如果纯用ele组件库写，开发效率还是很低，如果能二次封装一下ele，写起来会更快，就是二次封装一个表单，表格，还有不同得弹出框，然后表单，表格得内容都可以自定义，传递一个什么type下去，就显示什么。 e-charts图表用的也比较平凡，也可以封装一个。小程序vuex (在uniapp中使用) 背景是这样：首页有一个活动
2020-08-20 14:11:35
1400
原创 记录封装组件和项目中防抖的使用
封装组件需求：封装一个组件，当我，于999，正常显示，，如果不是交易金额大于1000就显示1,000 ; 29,088 ,是交易金额的话大于999且小于10000的时候显示￥1.00万元
2020-08-07 16:17:59
237
1
原创 记录遇到的bug和一些工作心得
后端交互问题传递的参数是什么数据类型接口是什么端口是什么返回值的参数是什么错误码是什么请求方式需不需要添加请求头用postman测试，如果要传递入参的话，那么在raw/json格式，传递入参7.6遇到的问题1.请求不到数据，一直返回undefinedexport const dataWarnRank = data =>Http.post(VIEW_IP + '/nanning/v4/controller/warn/rank',data).catch(response =&g
2020-07-06 21:14:15
363
原创 关于防抖和节流我的一些理解
防抖和节流会造成什么样的影响？连续触发的事件会对造成服务器压力过大，或者内存占用过多，可以使用防抖和节流来缓解。什么是防抖？防抖就是指连续触发的事件，在n秒钟之后在执行回调，如果n秒钟之内又触发了事件，那么就是重新计算。使用场景： 比如表单提交按钮防抖代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="view
2020-07-05 17:48:08
346
原创 自己整理一些散的知识点
函数的定义方法之 => 构造函数const sum = new Function('a', 'b' , 'return a + b')console.log(sum(5,10)); //15this指向问题var objList = { name: 'methods', getSum: function() { console.log(this) }}objList.getSum()//指向objlist，谁调用指向谁function foo() {
2020-06-27 20:27:35
144
原创 关于for...in和for...of和Obeject.keys()的区别
//for in 遍历数组 得到的是下标 但是不建议用for in遍历数组，因为还会遍历开发者对数组对象自定义的可枚举属性及其原型链上的可枚举属性//for in 遍历对象得到的是key 还会遍历原型链上可枚举的属性；//for of 遍历数组的到的是value// for of 不能遍历对象 如果想遍历对象的话需要配合Obeject.keys() 但是可以遍历类数组对象 map set集合暂时先写这么多，明天又面试，改天在整理加代码...
2020-06-22 21:18:00
186
原创 面试题
1px细线问题 ===> 我说以iphone6为例：他的dpr为2，一个逻辑像素等于两个物理像素，当你逻辑像素是1的时候，他内部会用一个22的物理像素点来填充，所以可以通过缩放0.5来解决这个问题，他又问我可不可以0.1 0.2 0.3 0.4？ 这个是通过dpr来的，如果是二倍图的话就缩放0.5，如果是三倍图就缩放0.333来实现。一般是二倍图，因为二倍图在二倍的手机上不会失真，在三倍的手机上虽然他会用33的物理像素点来填充，但是用户可以接受。如果是三倍图的，在二倍图的手机上就会更加清晰，但是.
2020-06-20 09:39:27
99
原创 关于react中this指向丢失的问题
大家都知道在react中，如果我们不去绑定this，this指向会丢失，指向undefind，这是为什么呢？下面用一段代码来解释一下。<style> #box{ width: 50px; height: 50px; background: red; }</style></body><div id="box">11111</div><script>//
2020-06-14 12:30:00
413
原创 记录
nodenode --version / node -vnrmnpm install --global nrm 全局安装nrm test 测试nrm use 镜像源地址gulp 自动化打包工具npm install --global gulp 全局安装gulp --version 检测npm cache clear -f 清楚缓存git 下载安装git --version 测试4.首次安装完毕需要设置一些全局项 4-1 检测全局配置项 + 打开命令
2020-05-28 18:13:15
118
原创 关于设计模式
什么是设计模式？针对特定的问题，给出简介而优化的方案，在特点的情况，特定的时期，针对特点的问题使用的。单例模式？在何种情况下会使用单例模式呢？当你想要一个构造函数，一辈子只能new一个对象的时候使用使用场景：每个网页有肯定要有很多弹出框，如果不使用单例模式的话，每new就是创造一个div，这样会导致代码冗余和内存溢出，如果使用单例模式，每次new的都是第一次div，只是文字内容改变了。核心代码：var Person = (function fn(){ function Student
2020-05-27 19:58:41
88
原创 关于let变量提升的问题
let声明的变量到底有没有变量提升？我们都知道var声明的变量，会存在变量提升，就是在变量声明之前，就可以被访问。代码如下(function(){ console.log(x) //undefind var x = "1111"}())这里的x打印出来的是undefind，就是因为变量提升，这个大家都知道没问题我们在来看一段代码var x = y = "global"(function(){ console.log(x) //global console.log(y) //glob
2020-05-18 11:55:58
746
原创 学习Vue框架第六天心得
1.如何注册自定义指令当要操作真实DOM元素时，需要用到自定义指令Vue.directive(“名字”，配置项） 调用的时候 => v-名字 全局自定义指令directives：{名字：{配置项}} 注册局部自定义指令<div id="box"> <!--通过v-focus来去使用自定义指令--> &...
2020-03-26 14:35:19
104
原创 学习Vue框架第四天心得
1.虚拟DOM在vue的内部的化，其实又虚拟dom的存在，虚拟dom其实是里面内存形对象存数据 真实dom的一种映射虚拟dom：当数据发生变化的时候大量操作的是虚拟dom，而虚拟dom属于内存数据，操作起来性能要高于操作真实的dom，虚拟dom只有在追加的那一刻才会操作真实dom，大大提升了性能浏览器加载一个html文件的大致流程是这样的：在内存中生成一颗虚拟dom树将内存中的...
2020-03-25 01:30:12
124
原创 学习vue框架第三天的心得
1.mixins混入在Vue里可以使用mixins来做代码的抽离复用，便于维护一个mixin其实就是一个存粹的对象，上面挂载着抽离出来的配置在某一个实例中，通过mixins选项导入后，此实例就拥有导入的mixin的配置并且不会与原配置相互覆盖，而是合并到一起2.数据请求的三种方式vue-resource请求引入vue-resource之后，那么他就可以在vue实例/组件 上面绑...
2020-03-24 22:03:54
182
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人