Beam007-CSDN博客

原创 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 3546

原创【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 3038

原创 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 7367

原创【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 1995

原创 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 2660

原创 Jenkins部署前端服务

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

2021-11-30 13:17:49 7978 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 857

原创微前端部署配置

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

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

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

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

2021-08-23 09:56:01 1678

原创 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 2860

原创 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 1265

原创【浏览器】问题集锦

一、浏览器设置跨域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 2133

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

使用自定义指令绑定拖拽官方文档：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 1108

原创【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 239

原创【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 873 2

原创 NPM私库搭建-verdaccio

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

2021-07-13 13:53:39 9703

原创 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 1603

原创微前端问题汇总

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

2021-03-17 16:54:36 6054 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 1792 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 1016

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

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

2021-01-19 13:27:07 1574

原创 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 1803 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 3038 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 1838

原创 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 984

原创 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 1237 2

原创 websocket断网重连

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

2020-08-28 11:01:59 3776 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 974 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 816

原创 js有意思了

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

2020-06-18 17:04:24 165

原创修改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 787

原创 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 8660 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 783

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

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

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

空空如也

空空如也