自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

Beam

请输入博客描述

  • 博客(111)
  • 收藏
  • 关注

原创 package.json和package-lock.json

一、package.json定义了当前项目所需要引用的各个模块,可以手工修改配置,也可以删除后,使用npm init命令重新自动生成。但是该文件只锁定大版本号,也就是版本号的第一位,所以你会发现两个文件中同一个包的版本号不一致,但是第一位一定是一致的。1、锁定小版本如需锁定小版本,修改配置文件,去掉版本号前面的小尖尖即可。"dependencies": { "axios": "^0.21.1", "element-ui": "2.15.1",},例如:此处的axios,若执行npm

2022-03-30 16:58:13 4197

原创 【linux打包部署】问题集锦

问题一、Error: EACCES: permission denied现象:之前部署好好的,突然有一天用Jenkins部署的时候报错,于是手动去服务器上打包部署也报错。报错:Error: EACCES: permission denied, open '/var/lib/jenkins/workspace/141-sub-xxx/node_modules/vue-demi/lib/index.cjs' at Object.openSync (fs.js:440:3) at Ob

2022-03-30 16:27:26 3060

原创 XXX is not defined.eslint no-undef

代码<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=***&plugin=AMap.ControlBar,Map3D,AMap.DistrictSearch" ignore></script><script language="javascript" src="/static/js/xml2json.js" ignore>// JSO

2022-03-30 16:15:08 7440

原创 【element ui】问题集锦

现象:在el-dialog弹出框中使用到el-table列表时,右侧操作栏设置了fixed=“right”,第一次打开弹框正常,关闭后再次打开,发现操作栏全都往下移动了一行,导致表格行错位。解决:官方文档有提供方法doLayout,但没明确什么情况下使用,或许此时就能用。监听data变化后,需要重新渲染el-table时,调用doLayout该方法即可。代码:watch: { '$attrs.data': { handler (val) { this.$refs.com

2022-03-29 16:57:16 2049

原创 echarts 提示框组件tooltip调请求异步展示

废话少说先附代码import axios from 'axios'const toHTML = (res) => { console.log(res.data.errorMessage, 123456) return res.data.errorMessage}tooltip: { trigger: 'axis', confine: true, // 将 tooltip 框限制在图表的区域内 防止超出div被遮盖 triggerOn: 'click', // 点击时触发

2022-03-24 16:39:12 2719

原创 Jenkins部署前端服务

一、Jenkins简介官方说明:Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件项目可以进行持续集成。官网地址:https://www.jenkins.io/index.html总之:使用Jenkins,可以实现一键部署发布。Jenkins从SVN拉取代码 > 部署至发布项目的服务器 > 并启动服务。代替人工运行buil命令打包 > 上传至服务器 > 重启服务。二、安装Jenkins

2021-11-30 13:17:49 8548 2

原创 【Vue Router】问题集锦

问题一、重复点击报错连续点击同一个路由,第二次点击时报错NavigationDuplicated。如图所示:vue-router引入的地方加上如下代码段即可import VueRouter from 'vue-router'// 解决重复点击菜单导航报错:NavigationDuplicated 的问题const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push (location,

2021-11-30 13:10:12 865

原创 微前端部署配置

微前端部署配置方法及优缺点总结方法一:一个nginx搞定,配置多个server监听多个端口。配置见nginx202.conf优点:配置简单方便缺点:无法单独重启单个服务,这样违背了微前端子服务单独部署启动的原则。方法二:使用docker部署配置见docker-compose.isok.yml和nginx.isok.conf优点:配置一个docker容器,nginx配置同上,简单方便缺点:同上(无法单独重启单个服务,这样违背了微前端子服务单独部署启动的原则。)差别:与上一个方法的差

2021-08-23 10:30:47 2352 3

原创 el-menu 菜单组件的优化

问题:选中菜单,路由跳转了,但需要点击两次才有选中的颜色。F12查看,第一次点击时没有绑定上.isactive,第二次点击才绑定该样式。原来使用router模式是没有这个问题的,但是现在不用router模式,通过select方法跳转路由。原因:router模式下,路由根据index绑定值进行跳转。而index绑定值需要唯一,如果存在路由为空串’'容易出现点击空串的节点展开了全部等问题。并且系统中容易出现路由不唯一的情况,只有code\id\sn才能保证唯一性。于是只能舍弃router模式,@

2021-08-23 09:56:01 1706

原创 el-tree 设置默认值

el-tree 单选树设置默认值<el-tree ref="tree" :data="treeMenus" :props="defaultProps" accordion @node-click="handleNodeClick" :node-key="nodeId" :filter-node-method="filterNode" highlight-current :expand-on-click-node="true" :default-expanded-keys="[defaultId]"&

2021-08-20 17:22:06 2935

原创 http替换成https遇到的坑

1、引入高德地图,需要改http为https引入。改<script language="javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=你的密钥&plugin=AMap.ControlBar,Map3D,AMap.DistrictSearch"></script>为<script language="javascript" src="https://webapi.amap.com/ma

2021-08-20 17:12:58 1281

原创 【浏览器】问题集锦

一、浏览器设置跨域1、复制一个浏览器2、右键-属性-在目标栏追加 --disable-web-security --user-data-dir=C:\MyChromeDevUserData注意:–前有一个空格,确保该文件夹存在C:\MyChromeDevUserData。二、浏览器控制台报错:Error saving setting with name: consoleHistory, value length: 5549354. Error: Failed to set the 'consol

2021-08-20 16:32:21 2205

原创 添加拖拽条改变外层容器宽度

使用自定义指令绑定拖拽官方文档:https://cn.vuejs.org/v2/guide/custom-directive.html#%E7%AE%80%E4%BB%8B<div></div><div v-barDrag></div><div></div>Vue.directive('barDrag', { bind (el, binding, vnode, oldVnode) { Vue.nextTick(

2021-08-20 15:11:54 1146

原创 【js】问题集锦

一、JSON.parse对象转换问题obj = JSON.parse(data)时候报错:SyntaxError: Unexpected token . in JSON at position 0原因:data已经是对象了。JSON.parse():将JSON字符串转换成JSON对象JSON.stringify():将JSON对象转换成JSON字符串...

2021-08-20 10:43:09 244

原创 【css】问题集锦

一、fixed超出窗口大小部分无法滚动问题:使用fixed固定一个div,当这个div高度大于窗口高度后,超出的内容无法滚动查看。解决办法:在设置fixed的div添加样式 height:100%;overflow:auto; 即可。据说还可以设置样式 max-height:100%;overflow:auto; 即可。具体还是根据情况设置当前div的宽度,若当前div宽度是个固定值不想设置成百分数,则:可以在外层包裹一个div设置为position:fixed;height:100%;ove

2021-08-20 10:42:47 1030 2

原创 NPM私库搭建-verdaccio

背景沿用微前端的思想,需要把公共组件部分抽成包,提供给各子服务导入使用。于是需要一个管理包的仓库,也就是要搭建属于项目组的npm仓库。网上随手一搜都是sinopia,而且上手还挺快的分分钟就启动好了,但是!!后续的上传下载包各种问题,搞了好久,发现这玩意这么多年没更新了,再一查现在都用verdaccio了。血泪教训啊!!!技术选型一定要注意文章的时间!然后注意npm上的下载量和修改时间!!官方文档:https://www.npmjs.com/package/verdaccio参考官方文档,我先

2021-07-13 13:53:39 9803

原创 HTTPS免费证书的申请与配置

前言继上一篇 HTTPS证书的生成与配置 链接如下:https://blog.csdn.net/Beam007/article/details/102524012本次不同的是,通过sslforfree生成【免费的证书】,申请链接如下:https://www.sslforfree.com/优点:简单、免费、浏览器不会提示不安全。缺点:免费的只支持90天。90天后需重新申请,或看需求付费。一、sslforfree登录注册sslforfree官网打开长这样申请时需要登录,登录后长这样这个样

2021-03-25 17:26:35 1648

原创 微前端问题汇总

一、沙箱设置的简单理解strictStyleIsolation = false可以获取到子应用的dom节点,主应用可修改子应用样式,但是子应用不可修改主应用的样式。需要注意样式不能冲突。strictStyleIsolation = true样式严格分离,不可获取到子应用的dom节点。二、res中无法拿到router对象在js文件比如axios的返回拦截res中无法拿到router对象进行路由跳转挂到原生方法上即可。if (!window.__POWERED_BY_QIANKUN__) {

2021-03-17 16:54:36 6294 2

原创 微前端搭建记录

主项目的搭建一、创建主项目vue create hello-main二、安装qiankunnpm install qiankun --save(注意:子项目无需安装qiankun)其他常用组件的安装:npm install jsencrypt --savenpm install element-ui --savenpm install axios --save三、创建vue.config.js配置对外访问的端口号module.exports = { devServer: {

2021-01-19 15:54:56 1805 8

原创 首选项配置+Eslint+prettier+Vetur

1、设置首选项文件-首选项-设置配置如下:(即setting.json文件){ // 每次保存自动格式化 "editor.formatOnSave": true, // 每次保存的时候将代码按eslint格式进行修复 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, // vue文件默认格式化方式vetur "[vue]": { "editor.defaultFormatter": "o

2021-01-19 15:00:29 1027

原创 SVG字体的问题导致元素定位相同显示位置不同

问题:同样一个SVG文件,直接用浏览器打开和通过embed嵌入系统后展示,元素位置存在偏差。如图所示:(直接打开图)(embed嵌入图)元素一模一样,但是显示位置就是不同。纠结了半天,结果是因为嵌入系统的,因为字体不一样,导致的错位!!!修改样式如下即可:font-family: Arial, Helvetica, sans-serif;...

2021-01-19 13:27:07 1643

原创 el-upload文件单独上传和同接口信息一起上传

需求一:录入信息和图片,分成两个接口,图片选中后直接上传,将返回的ID存入录入信息接口的相应字段。代码:<el-form-item label="营业执照" prop="businessLicense"> <label slot="label">营业执照&emsp;(请上传20M以内的图片)</label> <el-upload :disabled="justCheck" ref="proUpload" action="`后台文件上传接

2020-12-11 16:53:15 1824 2

原创 EffectComposer、OutlinePass特效引发的问题和卡顿

给场景中的设备描边关键代码import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'let composer = nulllet outlinePassRing = null // 光圈composer = new EffectComposer(renderer)outlinePassRing = new OutlinePass(new THREE.Vector2(div3D.clientW

2020-11-26 10:00:59 3110 21

原创 同时获取el-select的value和label

方法一:数组循环遍历匹配value值相等通过对el-option绑定的数组循环遍历匹配value值相等时获取label缺点:如果el-option绑定的数组可动态变化就糟糕了。方法二:value上绑定对象 不是绑定值缺点:value绑定对象对赋值处理增加了难度方法三:通过ref获取<el-select ref="labelSelect" @change="changeSelect"> <el-option v-for="item in testArr" :key="it

2020-11-26 09:09:25 2148

原创 vue中地图(高德、百度)的引入

一、引入js包:index.html:// 百度地图<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=`申请的秘钥`"></script>// 高德地图<script language="javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=`申请的秘钥`&plugin=AM

2020-11-25 17:13:50 991

原创 websocket通过webpack\nginx转发代理

代码如下websock = new WebSocket('ws://' + location.host + '/wsProxy/')注意此处必须使用location.host,获取localhost和端口号,因为部署到服务器你这端口号不能写死吧。webpack配置:'/wsProxy/': { target: 'http://后台服务IP:后台服务PORT', // 后台的websocket服务地址 changeOrigin: false, ws:

2020-10-27 17:09:28 1264 2

原创 websocket断网重连

解决问题:因为计算机休眠、网络不稳定等原因,导致实时监视页面的websocket数据推送断了,数据不再更新没有实时性。目的效果:当websocket断开连接时马上重连,依然断开则1分钟后再重连,直到连接成功为止。注意:当切换页面等正常销毁websocket排除在此机制外。可通过设置timerFlagWS以及关闭时的状态码e.code判断是否重连。代码:let websock = nulllet socketTimer = nulllet socketParam = { type: 'te

2020-08-28 11:01:59 3844 2

原创 SVG的animate动画

箭头闪烁:<polyline transform = "rotate(180.000,1072.00,212.00)" stroke="#FFFF00" stroke-width="5" fill="#FFFF00" points="1072.0 212.0,1112.0 212.0,1092.68 209.41,1092.68 214.59,1112.00 212.00"> <animate attributeName="visibility" values="hidden;v

2020-07-29 10:07:35 992 2

原创 token鉴权前端操作

前言:就一天天听说后台用的OAuth 2.0进行token鉴权,那前端需要怎么做呢?前端需要确认的是,后台使用的哪种类型的token。参考文档:https://blog.csdn.net/weixin_39973810/article/details/84673548思考:我记得以前用的是basic、digest鉴权,现在用上了Bearer token。其实不管是哪种类型,前端需要做的只是拿到这个token,存起来,然后使用规定的传递方式在每次请求的时候带上它传到后台即可。操作:1、登录后获

2020-07-29 10:04:13 838

原创 js有意思了

一、js计算精度丢失二、js判断是否为null

2020-06-18 17:04:24 166

原创 修改el-dialog动画导致在有threejs的页面闪动的问题

修改el-dialog动画代码如下:/* dialog框显示和隐藏的动画效果 改浮现方式从左往右出现 */@keyframes dialog-fade-in { 0% { transform: translate3d(-100%, 0, 0); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; }}@keyframes dialog-fade-out { 0% {

2020-06-18 16:57:38 806

原创 three.js监听鼠标点击事件

优化了好几次的threejs中鼠标点击事件,直接上代码。// 监听鼠标点击事件 展示详情页面const onMouseClick = (event) => { let raycaster = new THREE.Raycaster() let mouse = new THREE.Vector2() // 通过鼠标点击的位置计算出raycaster所需要的点的位置,以屏幕中心为原点,值的范围为-1到1. let div3DLeft = div3D.getBoundingClientR

2020-06-18 16:50:53 8690 18

原创 自动eslint格式校验

前言看同事用vscode保存代码都自动进行格式校验,且符合eslint规则。于是开始了我的十万个为什么?vscode保存不自动校验格式Prettier - Code formatter不生效Prettier格式校验和eslint冲突规则不一致结果搜了个遍也没有满意答案,后来发现是编辑器首选项的设置问题。文件-首选项-设置参考https://blog.csdn.net/weixin_36222137/article/details/80040758满意的首选项{ "editor

2020-06-18 16:39:16 789

原创 blender物体缩放倍数和保存时物体炸开

问题一:物体缩放倍数奇奇怪怪有时候看着两个blender的模型场景,比如一栋楼。我复制A.beldner里面的门粘贴到B.blender里面来,啥也看不到,通过按【S】进行缩放之后看到了,可是为啥会放大呢?有时候将blender导出的A.glb通过threejs导入代码,获取其中门的坐标,发现高宽好大呀,然后scale缩小了好多倍呀,不方便代码操作定位啊。难怪当初复制过来,突然会变得巨大,那咋搞呢?注意了:按【A】全选物体,【Ctrl+A】选择全部变换,所有物体的原点就回到了世界坐标原点,这样才统一

2020-06-18 16:15:30 6953 2

原创 el-table自定义表头顺序错乱,以及sortable排序混乱

前提:自定义报表,需要自定义表头层级。关键代码:// el-table<el-table :data="reportData" width="100%" height="100%"> <navReport :navReports="reportHeader"></navReport></el-table>// 自定义表头组件<template> <div> <!-- <el-table-col

2020-06-08 16:51:33 5779 4

原创 高德3D地图使用问题集锦

1、报错ReferenceError: AMap is not defined通常script应该放到body后,但是地图引入放到body后,刷新页面时,报错:ReferenceError: AMap is not defined因为加载app的时候调用了AMap,你放到后面AMap是啥啊?当然未定义报错了。所以需要把引入:<script language="javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=你申请的k

2020-05-22 16:29:23 3062 2

原创 nginx配置问题集锦

1、报错unknown directive无法启动编码格式不对,使用sublime text另存为时选择UTF-8编码格式。关键是我放到服务器上一修改就不行了,非得本地修改保存UTF-8再复制过去。

2020-05-22 16:07:10 172

原创 深层拷贝对象的问题

现有文件aaa.json,内容如下:{ "data": [{ "id": "0", "name": "报表demo-此处是表头", "dataField": "", "childs": [ { "id": "1", "name": "第一个", "dataField": "date", "childs": [] }, { "id": "2",

2020-05-22 16:00:02 261

原创 vue-cli3+创建项目

最近疯狂新建项目,于是记录一下使用vue-cli3+创建项目的过程。1、对应文件夹下执行cmd创建项目2、选择手动配置后回车3、选上所需项后回车4、选择eslint的配置本人选的标准配置5、eslint校验时间点本人选择保存时6、这些配置专门存放一个文件还是放在package.json中7、是否保存项目配置8、配置保存命名便于下次创建项目快速调用相同配置9、创建完成10、创建好的项目结构...

2020-05-21 17:20:00 274

原创 IIS服务器部署前端的各种问题

IIS错误配置IIS配置web.config如下<?xml version="1.0" encoding="UTF-8"?><configuration> <system.webServer> <rewrite> <rules> <rule name="test" patternSyntax="Wildcard">

2020-05-12 17:29:55 1936

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除