weixin_44249754的博客

原创 vue3使用

node升级到v12以上安装vue-cli yarn global add @vue/cli@next安装vue3 npm install vue@next创建项目 vue create vue3-demo查看vue-cli版本 vue -V查看vue版本 npm list vue安装webpack和webpack-cli npm install webpack webpack-cli -g -D执行 webpack -v查看版本 启动项目 npm run serve...

原创 解决vscode大量ts文件报错问题

ts、js文件代码下划线报错

原创 使用Web Components 构建前端微服务

介绍前端微服务，即将微服务的理念应用于web端，将web应用由单一的单体应用转变为多个小型前端应用聚合为一体的应用。前端框架的多样性、版本的多样性导致很多前端项目技术战不统一，所用框架版本不统一。如vue经历了从2.0到3.0更新之后，提供了全新的组织代码的思维方式，这个时候如果在使用vue2的旧的项目上升级vue3，重构成本会很高，甚至会影响线上项目的稳定运行。所以较多的解决情况是：旧的项目仍然使用vue2，新的项目开始采用vue3，即在不重写原来项目的基础上，又可以开始开发新的任务。微前端的优势就

原创 阻止浏览器回退、刷新、关闭页面事件（ember / vue 框架）

以ember框架为例：封装的service：import Service from '@ember/service'import { inject as service } from "@ember/service"import fetch from 'fetch'import { tracked } from '@glimmer/tracking'import { action } from '@ember/object'export default class BrowserEvent

原创 ember请求数据流程

原创 vue 在组件中绑定的监听事件触发多次原因

在mounted生命周期中，使用document.addEventListener("click", event => { console.log("click-listener")})如果组件在父组件中多次引用，会导致多次执行上面这段代码，触发点击事件时也会执行多次。找到执行多次的原因就好解决了...

原创 AWS执行上传、删除操作，发送消息到SNS中，触发Lambda函数，并将最终结果打印到CloudWatch

创建SNS 主题，注意访问策略要的权限问题，可能会导致s3配置消息通知时报下面的错误：我改成了访问策略的订阅者和发布者都是所有人后，报错消失。2.配置s3存储桶的属性，选择创建事件通知，填写事件名称，勾选相应的事件类型，目标选择SNS主题，并选择刚刚创建的SNS主题，点击保存更改，会看到属性中的事件通知多了一条。3.创建Lambda函数your-function-name，会随之创建函数 (/aws/lambda/your-function-name) 的日志组。4.选择刚刚创建的SNS主题.

原创 可下拉可输入的输入框实现方法

如图所示，需求为可选择下拉框内容，若下拉框没有要选择的信息，则输入新的值。<div class="layui-inline"> <label class="layui-form-label">合同期限<b class="must">*</b></label> <div class="layui-input-block"> <input type="text" name="contractTimeLimit" bi="合.

原创 js中的宏任务和微任务

宏任务和微任务的关系从代码入手最好理解，如下：setTimeout(() => { //执行后 回调一个宏事件 console.log('内层宏事件3')}, 0)console.log('外层宏事件1');new Promise((resolve) => { console.log('外层宏事件2'); resolve()}).then(() => { console.log('微事件1');}).then(()=>{

原创 jq控制checkbox只能选中一个

<div class="memoRadio" id="memoRadio"> <label><input type="checkbox" onclick="checkboxClickFun(this)" name="checkboxname1" value="退票" title="退票" >退票</label> <label><input type="checkbox" onclick="checkboxClickFun(this)" n

原创 JavaScript中立即执行函数有什么用,什么情况下需要使用

js立即执行函数模式是一种语法，可以让你的函数在定义后立即被执行，这种模式本质上就是函数表达式(命名的或者匿名的)，在创建后立即执行。jQuery开篇用的就是立即执行函数。立即执行函数常用于第三方库，好处在于隔离作用域，任何一个第三方库都会存在大量的变量和函数，为了避免变量污染（命名冲突），开发者们想到的解决办法就是使用立即执行函数。什么是 立即执行函数首先了解一下函数声明、函数表达式及匿名函数：js立即执行函数：1.使用（）运算符2.使用 ！，+，-，=，void等运算符，最常见的是！和vo

原创 javascript中的变量提升以及for循环中let和var的区别

变量提升js中函数及变量的声明都将被提升到函数的最顶部。变量可以在使用后再声明，也可以总是先声明再使用。需要注意，只有声明的变量会提升，初始化的不会。x=6;console.log(x);var x; //声明变量x//控制台输出6console.log(x);var x = 6; //初始化x//控制台输出 undefinedfor循环中let和var的区别（这个问题在使用uni-app写app的时候出现的，h5运行时var和let在for循环中的效果是一样的，运行到移动设备的时

原创 javascript获取某年某月份的第一天和最后一天

获取每个月天数：//value格式202012function getMonthLastDateFn(value){ // year, mon：mon取值范围为0-11 let year = value.slice(0, 4); //2020 let mon = Number(value.slice(4)); //12 let dateObj = new Date(year,mon,0); let theMonthDay = dateObj.getDate(); //结果为31 return

原创 vue中使用axios发送请求，多种baseURL的配置方法

配置config/dev.env.js：'use strict'const merge = require('webpack-merge');const prodEnv = require('./prod.env');module.exports = merge(prodEnv, { NODE_ENV: '"development"', APP_NAME: '"一体化管理信息平台"', API_ROOT: '"http://xxx.xxx.xxx.xx:xxxx"'});con

原创 防抖和节流操作

防抖防抖操作，我的理解就是，第一次触发事件时，不立即执行操作，设置一个n秒的期限，如果n秒内没有再次触发这个事件，就执行函数；如果n秒内再次触发了事件，则将计时器清零重新开始计时，直到计时器达到n秒，才执行函数。这样就达到了短时间内多次触发同一个事件，只会执行一次函数的效果。实现：<button type="primary" @click="clickHandler(2)">提交</button>export default { data(){ return {

原创 uniapp执行switchTab跳转，不调用跳转页面onLoad的方法解决办法

利用reLaunch跳转页面wx.reLaunch（）：关闭所有页面，打开到应用内的某个页面，会执行onLoad操作wx.reLaunch({ url:'/pages/index/index'})使用页面栈doLogin() { uni.switchTab({ url: '/pages/index/index', success: (res) => { let page = getCurrentPages().pop(); if (page == un.

原创 动态创建elementUI表格合计行

elementui加上合计行非常简单，在表格组件上，将show-summary设置为true就会在表格尾部展示合计行。定义自己的合计逻辑，使用summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中。<el-table ref="table" show-summary :summary-method="summaryMethod">// 合计行summaryMethod(param) { let that = this; co

原创 IE8浏览器跳转页面或弹框报错

排查了好久，发现是因为路径中有中文参数。。。而且这个问题原来还遇到过。。。解决方法.在发送请求的时候也需要这样处理：

原创 npm安装express及查看版本，基本使用

1.首先确定你已经安装了 Node.js，然后去你创建的项目目录下打开命令窗口，执行sudo npm install express -g2.执行npm list express查看版本3.在项目下新建一个server.js文件，输入以下代码：const express = require('express');const app = express();app.get('/', function(req, res) { res.send('<h1>2222222222222

原创 vue-cli新建一个项目

sudo npm install -g vue-cli安装vue-cli忘记root的密码了，用sudo passwd root重置了密码000000, wodelu执行步骤一命令，一路yes下去生成项目之后，npm install npm run dev启动即可

原创 关掉chrome的network中的东西

如下如所示，点击设置图标，将✔的地方去掉，就可以了

原创 vue打包时候报错：the request of a dependency is an expression

发现是某一个button定义了click事件，但是click事件没有任何操作造成的，去掉就好了。

原创 elementui 表格合计行随着滚动条向下隐藏 解决办法

点击下一步再返回合计行所在页面，就可以正常显示。在页面最外层加上v-loading属性： <div class="table_container" v-loading="loading">在data中定义： data() { return { loadingWrap:true, active: 1, //下一步下标 }}在请求完页面数据接口时：this.$http.get(url).then(res => { this.loadingW

原创 layui页面在IE11刷新页面时走浏览器缓存，不会请求服务器数据刷新页面

尝试了每次接口换不同参数，不好使最终还是把所有的get请求都改成了post请求才解决问题

原创 使用throw new Error终止循环并抛出自定义异常

$('div').each(function() { if(a > b) { throw new Error("a不能大于b"); //执行到这里时候会终止一切循环 }})

原创 去除金额中的千分符，并将字符串转换为数字

//去除千分位,参数num必须为数字、逗号、小数点组成的字符串function delcommafy(num) { if(num == undefined || num == null) { num = 0; } num = num.toString(); num = num.replace(/[ ]/g, ""); //去除空格 num = num.replace(/,/gi, ''); return Number(num);}示例：...

原创 金额加千位分隔符并保留2位小数位

/* * toThousands(s,type) * 功能：金额按千位逗号分割 * 参数：s，需要格式化的金额数值. * 参数：type,判断格式化后的金额是否需要小数位.传0无小数位，不传或传其他 * 值保留两位小数 * 返回：返回格式化后的数值字符串. */function toThousands(s, type) { if(s == 0.00){ s = 0; } if(/[^[\-|0-9][0-9]*]/.test(s)) return "0"; i

原创 uni-app 添加顶部导航栏并且更换图标；动态判断导航栏消息提醒的小红点是否显示

https://www.cnblogs.com/zjy850984598/p/10770657.html

原创 span标签无法设置宽度问题

开发的时候，发现对span标签设置宽度没有效果，这是因为，对象是inline对象时，width属性会被忽略。需要在span的css中增加display属性，将span设置为block类型,如下：span { text-align: center; display: block; float: left; min-width: 40px; height: 20px;}...

原创 vue 控制日期范围选择的后一个日期不能小于前一个日期

效果图：日期选择：<el-form-item label="颁布时间" class="el-form-cell billDataAll"> <div class="el-form-cellcon"> <el-date-picker v-model="searchValue.enactDateBegin" format="yyyy - MM - dd" value-format="yyyy-MM-dd" type="date" @ch

原创 vue（uni-app）报错：Component template should contain exactly one root element.

报错信息如下：代码片段如下：<template> <view class="status_bar"> <view class="top_view"></view> </view> <view class="top_nav"> <text>移动平台</text> </view></template>原因：vue模板只能有一个根对象用一个标签包

原创 uni-app 全局去掉顶部原生导航栏；uni-app 页面单独设置不使用原生导航

想要去掉所有的原生导航，只需要在pages.json中加上配置："globalStyle": { //去掉默认导航 "navigationStyle": "custom", "app-plus": { "titleNView": false }, },去掉某个页面的原生导航，只需要在pages.json中加上配置："pages": [{ { "path": "pages/index/index", "style": { "navigationS.

原创 uni-app报错 caniuse-lite is outdated 解决方案

uni-app的项目运行时莫名开始报错如上图，解决方案：找到uni-app文件夹如下目录：\HBuilderX\plugins\uniapp-cli启动命令行运行

原创 elementui select 数据回显匹配数据字典不显示label值，显示的是数字

原因就是前后端没有协调好字段类型，前端需要string类型，后端返回了bumber类型，转换一下即可。

原创 IE浏览器开发者工具打不开问题

1.打开开发者工具，打开任务管理器，右键点击最大化2.ctrl+p打开

原创 layui中select设置disabled

1.选择器直接选择到下拉框好用，如下：$('select[name=departId]').attr("disabled","disabled");下面这种不好使：$('#_ut').find('select').attr("disabled",'disabled');2. 对于设置了lay-search的下拉框，若想在设置不可下拉的同时去掉输入属性，需要将input属性设置为readonly,且必须在form.render()之前设置select，之后设置input，如下：//去掉下拉$('s

原创 解决layui框架在IE中刷新有缓存，只有手动清除缓存才能刷新数据问题

1.使用window.parent.location.reload()子级页面关闭并刷新父页面；2.给请求接口加上随机参数（解决问题必需步骤）IE浏览器下使用GET发送请求时，如果两次请求的地址和参数相同，在不刷新页面的情况下，浏览器会缓存第一次请求的内容，服务端更新后浏览器仍然显示第一次的内容。解决办法：GET请求URL后加随机数，让服务器认为不是相同的请求。也可以传一个随机的参数，如：http://www.example.com/index.php?time=” + new Date

原创 IE8中，回车键自动触发layui中button的lay-event事件

原因：IE中回车键会自动绑定button的submit事件解决：将button加上type="button"属性一般可解决问题。若上述方法不行，将可在这些按钮前加上一个type=“submit”的隐藏button，亲测设置display:none不好用，可尝试将button背景色设置和背景颜色相同或设置宽度为0等方法隐藏。...

原创 elementui下拉框选中值后未显示在下拉框内，页面发生变化（如在输入框输入，页面大小变化）后下拉框的值才会改变

el-select加上@change就好用了 <el-select @change="searchSelectChange" v-model="shipName" placeholder="请选择"> <el-option v-for="item in dict[value.dict]" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-

原创 elementui 不重新渲染页面，表头和标题数据对不齐问题

如上图所示，只需加一行样式：/* 解决表头和内容不能对齐问题 */.el-table th.gutter{ display: table-cell!important;}