前端
wode路
这个作者很懒,什么都没留下…
展开
-
使用Web Components 构建前端微服务
介绍前端微服务,即将微服务的理念应用于web端,将web应用由单一的单体应用转变为多个小型前端应用聚合为一体的应用。前端框架的多样性、版本的多样性导致很多前端项目技术战不统一,所用框架版本不统一。如vue经历了从2.0到3.0更新之后,提供了全新的组织代码的思维方式,这个时候如果在使用vue2的旧的项目上升级vue3,重构成本会很高,甚至会影响线上项目的稳定运行。所以较多的解决情况是:旧的项目仍然使用vue2,新的项目开始采用vue3,即在不重写原来项目的基础上,又可以开始开发新的任务。微前端的优势就原创 2022-01-20 09:25:20 · 1136 阅读 · 0 评论 -
阻止浏览器回退、刷新、关闭页面事件(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原创 2021-12-23 11:12:42 · 4711 阅读 · 1 评论 -
ember请求数据流程
原创 2021-11-20 13:37:44 · 319 阅读 · 0 评论 -
vue 在组件中绑定的监听事件触发多次原因
在mounted生命周期中,使用document.addEventListener("click", event => { console.log("click-listener")})如果组件在父组件中多次引用,会导致多次执行上面这段代码,触发点击事件时也会执行多次。找到执行多次的原因就好解决了...原创 2021-10-11 16:07:05 · 2278 阅读 · 1 评论 -
可下拉可输入的输入框实现方法
如图所示,需求为可选择下拉框内容,若下拉框没有要选择的信息,则输入新的值。<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="合.原创 2021-01-18 14:43:29 · 1330 阅读 · 0 评论 -
js中的宏任务和微任务
宏任务和微任务的关系从代码入手最好理解,如下:setTimeout(() => { //执行后 回调一个宏事件 console.log('内层宏事件3')}, 0)console.log('外层宏事件1');new Promise((resolve) => { console.log('外层宏事件2'); resolve()}).then(() => { console.log('微事件1');}).then(()=>{原创 2021-01-13 15:20:21 · 171 阅读 · 0 评论 -
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原创 2021-01-12 10:33:19 · 873 阅读 · 0 评论 -
JavaScript中立即执行函数有什么用,什么情况下需要使用
js立即执行函数模式是一种语法,可以让你的函数在定义后立即被执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行。jQuery开篇用的就是立即执行函数。立即执行函数常用于第三方库,好处在于隔离作用域,任何一个第三方库都会存在大量的变量和函数,为了避免变量污染(命名冲突),开发者们想到的解决办法就是使用立即执行函数。什么是 立即执行函数首先了解一下函数声明、函数表达式及匿名函数:js立即执行函数:1.使用()运算符2.使用 !,+,-,=,void等运算符,最常见的是!和vo原创 2020-12-23 11:27:12 · 1161 阅读 · 0 评论 -
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循环中的效果是一样的,运行到移动设备的时原创 2020-12-21 15:27:53 · 735 阅读 · 0 评论 -
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原创 2020-12-18 10:44:10 · 597 阅读 · 0 评论 -
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原创 2020-12-18 09:52:45 · 3360 阅读 · 1 评论 -
防抖和节流操作
防抖防抖操作,我的理解就是,第一次触发事件时,不立即执行操作,设置一个n秒的期限,如果n秒内没有再次触发这个事件,就执行函数;如果n秒内再次触发了事件,则将计时器清零重新开始计时,直到计时器达到n秒,才执行函数。这样就达到了短时间内多次触发同一个事件,只会执行一次函数的效果。实现:<button type="primary" @click="clickHandler(2)">提交</button>export default { data(){ return {原创 2020-12-17 16:06:22 · 135 阅读 · 0 评论 -
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.原创 2020-12-15 10:36:56 · 2800 阅读 · 1 评论 -
IE8浏览器跳转页面或弹框报错
排查了好久,发现是因为路径中有中文参数。。。而且这个问题原来还遇到过。。。解决方法.在发送请求的时候也需要这样处理:原创 2020-10-20 16:34:39 · 258 阅读 · 0 评论 -
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原创 2020-10-20 13:40:09 · 4563 阅读 · 2 评论 -
vue-cli新建一个项目
sudo npm install -g vue-cli安装vue-cli忘记root的密码了,用sudo passwd root重置了密码000000, wodelu执行步骤一命令,一路yes下去生成项目之后,npm install npm run dev启动即可原创 2020-10-19 20:12:59 · 100 阅读 · 0 评论 -
关掉chrome的network中的东西
如下如所示,点击设置图标,将✔的地方去掉,就可以了原创 2020-10-19 14:08:52 · 687 阅读 · 0 评论 -
layui页面在IE11刷新页面时走浏览器缓存,不会请求服务器数据刷新页面
尝试了每次接口换不同参数,不好使最终还是把所有的get请求都改成了post请求才解决问题原创 2020-09-29 11:20:09 · 453 阅读 · 0 评论 -
使用throw new Error终止循环并抛出自定义异常
$('div').each(function() { if(a > b) { throw new Error("a不能大于b"); //执行到这里时候会终止一切循环 }})原创 2020-09-22 15:28:59 · 913 阅读 · 0 评论 -
去除金额中的千分符,并将字符串转换为数字
//去除千分位,参数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);}示例:...原创 2020-09-22 15:24:46 · 700 阅读 · 0 评论 -
金额加千位分隔符并保留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原创 2020-09-22 15:19:16 · 1216 阅读 · 0 评论 -
span标签无法设置宽度问题
开发的时候,发现对span标签设置宽度没有效果,这是因为,对象是inline对象时,width属性会被忽略。需要在span的css中增加display属性,将span设置为block类型,如下:span { text-align: center; display: block; float: left; min-width: 40px; height: 20px;}...原创 2020-09-18 12:34:34 · 1609 阅读 · 0 评论 -
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原创 2020-09-16 14:52:11 · 1388 阅读 · 0 评论 -
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模板只能有一个根对象用一个标签包原创 2020-09-15 23:04:53 · 280 阅读 · 0 评论 -
uni-app报错 caniuse-lite is outdated 解决方案
uni-app的项目运行时莫名开始报错如上图,解决方案:找到uni-app文件夹如下目录:\HBuilderX\plugins\uniapp-cli启动命令行运行原创 2020-09-15 19:30:23 · 2004 阅读 · 0 评论 -
elementui select 数据回显匹配数据字典不显示label值,显示的是数字
原因就是前后端没有协调好字段类型,前端需要string类型,后端返回了bumber类型,转换一下即可。原创 2020-09-15 13:23:48 · 1622 阅读 · 0 评论 -
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原创 2020-08-11 14:58:16 · 8971 阅读 · 0 评论 -
解决layui框架在IE中刷新有缓存,只有手动清除缓存才能刷新数据问题
1.使用window.parent.location.reload()子级页面关闭并刷新父页面;2.给请求接口加上随机参数(解决问题必需步骤)IE浏览器下使用GET发送请求时,如果两次请求的地址和参数相同,在不刷新页面的情况下,浏览器会缓存第一次请求的内容,服务端更新后浏览器仍然显示第一次的内容。解决办法:GET请求URL后加随机数,让服务器认为不是相同的请求。也可以传一个随机的参数,如:http://www.example.com/index.php?time=” + new Date原创 2020-08-07 10:20:28 · 1665 阅读 · 0 评论 -
IE8中,回车键自动触发layui中button的lay-event事件
原因:IE中回车键会自动绑定button的submit事件解决:将button加上type="button"属性一般可解决问题。若上述方法不行,将可在这些按钮前加上一个type=“submit”的隐藏button,亲测设置display:none不好用,可尝试将button背景色设置和背景颜色相同或设置宽度为0等方法隐藏。...原创 2020-08-07 10:07:14 · 4078 阅读 · 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-原创 2020-07-08 14:14:56 · 1336 阅读 · 1 评论 -
elementui 不重新渲染页面,表头和标题数据对不齐问题
如上图所示,只需加一行样式:/* 解决表头和内容不能对齐问题 */.el-table th.gutter{ display: table-cell!important;}原创 2020-07-03 10:17:18 · 553 阅读 · 0 评论 -
JQuery DOM clone(true)在IE8使用时克隆对象的绑定事件不能一起克隆问题
clone()表示复制标签本身,clone(true)会将标签绑定的事件一起复制。但是在IE8中使用clone(true)后,点击事件仍旧不生效,经排查发现IE8中克隆对象的click事件消失了。可做如下处理,手动给需要绑定事件的元素绑定,再次调用触发事件的函数即可。另外,IE8中trigger('click') 这种写法会有问题。//添加点击事件$(copyTable).find(".peoplekz").attr('onclick', 'peoplekzFun(this)'); //触发点原创 2020-06-29 20:56:49 · 513 阅读 · 0 评论 -
JS/JQuery获取元素的方法
jQuery获取:jQuery.parent(expr),找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class")jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素jQuery.children(expr),返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点jQuery.contents(),返回下面的所有内容,包括节点和文本。原创 2020-06-29 19:17:38 · 131 阅读 · 0 评论 -
layui的select监听事件在页面加载时是否调用
layui的select监听事件在页面加载时不会主动调用,如果调用了,一定有类似下面的触发事件://修改查看页面默认触发select下拉事件$('select[name=businessType]').next().find('.layui-this').click();原创 2020-06-29 18:04:29 · 766 阅读 · 1 评论 -
VueTreeselect 插件使用
VueTreeselect 地址:https://www.vue-treeselect.cn/使用@select监听树形下拉选中事件:<template slot-scope="scope"> <treeselect v-model="scope.row.departId" @select="departTreeSelected" :disable-branch-nodes="false" :show-count="false" :m原创 2020-06-22 14:31:18 · 4521 阅读 · 0 评论 -
前端报错跨域问题,可能是请求类型写错了
后端把get请求写成了post请求,再改回get就好了(或者前端改为post)原创 2020-06-19 19:18:52 · 184 阅读 · 0 评论 -
js 根据标识截取字符串;遍历对象并拼接数组
js截取两个字符串之间的内容:var str = "aaabbbcccdddeeefff";str = str.match(/aaa(\S*)fff/)[1];alert(str);//结果bbbcccdddeeejs截取某个字符串前面的内容:var str = "aaabbbcccdddeeefff";tr = str.match(/(\S*)fff/)[1];alert(str);//结果aaabbbcccdddjs截取某个字符串后面的内容:var str = "aaabbbccc原创 2020-06-19 13:49:18 · 851 阅读 · 0 评论 -
element-ui 控制输入框只可以输入数字
<el-input :readonly="!isWrite" v-model="days" :class="{'global_writeinput' : isWrite}" must='天数' oninput="value=value.replace(/[^\d]/g,'')" ></el-input>其中oninput属性是控制只可以输入数字的。参考文档:https://juejin.im/post/5ce77ebcf265da1b9612de0a...原创 2020-06-19 09:55:06 · 648 阅读 · 0 评论 -
jq操纵dom数组赋值
需求:点击计税按钮,发送计税请求,将返回的数组中的数据根据对应证件号码填写到相应位置。返回数据格式如下:callAPI(url, {id: urlId}, function(data,msg) { $(data).each(function(index1, elem1) { var cardNum = elem1.cardNumber; var finalAmount = elem1.amount; var finalTaxAmount = elem1.taxAmount; $('原创 2020-06-17 13:16:18 · 205 阅读 · 0 评论 -
vue+elementUI学习
1. vue监听键盘回车事件:@keyup.enter.native=“search(1)”vue监听键盘回车事件,可写成<input v-on:keyup.enter="submit"> <input @keyup.enter="submit">但是使用了封装组件,比如elementUI,这时候按键修饰符需要加上.native:<el-input v-model="account" placeholder="请输入账号" @keyup.enter.native=原创 2020-06-06 09:41:52 · 168 阅读 · 0 评论