笔记 / BUG
遇到工作中的bug或一些常用的代码,随手记下来
喜欢吃青椒吗
这个作者很懒,什么都没留下…
展开
-
Vue中静态资源或css文件没有加载出来的说明
问题说明场景1:在Vue.js文件中,你想引入一个css样式文件,你发现引入的路径对的,却始终无法在页面上加载出来。场景2:你想用一张图片资源放到页面上,但是,尽管你的路径完全写对,但是却死活加载不出来。原因在Vue中,config目录下的index.js里面说明了index.html需要引用的静态资源路径。 // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), ..原创 2020-11-19 11:02:20 · 1995 阅读 · 1 评论 -
JSON.parse和JSON.stringify
问题提出在学习和工作中经常碰到一些这样的问题。明明已经从接口上拿到数据,用解构的方法去拿数据时却拿不到,出现undefined。这种问题是因为获取到的数据是JSON的格式,用解构的方法并不能获取到数据。比如res.aabb这种获取数据的方法只能基于JavaScript对象的形式来获取。JSON.parse把JSON格式的数据转化为JavaScript对象的形式。JSON.stringify功能恰恰相反。能把JavaScript对象转化为JSON的格式。JSON.parse(JSON.str.原创 2020-11-19 11:01:52 · 232 阅读 · 0 评论 -
echarch.js的基本使用
安装npm install echarts --save在main.js里import echarts from 'echarts'引入这个包。Vue.prototype.$echarts = echarts 往原型链上加上echarts这样就可以在组件中使用了。在Vue中开始一个例子<template> <div ref="projectMap" style="width: 100%;height:100%;"></div></temp..原创 2020-11-19 11:01:30 · 468 阅读 · 0 评论 -
如何在Vue+echarts开始画一个中国地图
第一步:先npm install echarts --save 在项目中下载好包。第二部:require("../../ndee_modules/map/js/china")在node_modules中引入中国地图。设置option属性(中国地图的各项属性)定义一个方法获取DOM并setOption就行了。var myChart = that.$echarts.init(that.$refs.map);myChart.setOption(that.option);...原创 2020-11-19 11:01:09 · 165 阅读 · 0 评论 -
v-for警告解决方法
<el-row v-for="item in servCostInfos"> //这样会警告<el-row v-for="(item,index) in servCostInfos" :key="index"> //这样就不会原创 2020-11-19 11:00:47 · 227 阅读 · 0 评论 -
Echarts.js常见参数设置
常见APIechartsecharts.init(dom,theme)。创建一个ECharts实例,返回echartsinstance,不能在单个容器上初始化多个ECharts实例。dom是实例容器,一般是一个具有宽高的div元素。必须要设置宽高。theme应用的主题。可以是一个主题的配置对象,也可以使用已经通过 使用已经通过 echarts.registerTheme 注册的主题名称。注册的主题名称。echarts.connect(group:string|Array)多原创 2020-11-19 10:59:58 · 3745 阅读 · 0 评论 -
toFixed()
数值.toFixed(2) 表示 保留小数点后两位。原创 2020-11-18 11:29:52 · 158 阅读 · 0 评论 -
常见的Date方法
var date=new Date('2016-01-10');var time=date.getTime()//返回该date对象对应的毫秒数,与valueOf返回的结果相同date.setTime(1);//以毫秒数设置日期,这常常会改变整个日期对象var year=date.getFullYear();//取得四位数的年份,如2016而非16date.setFullYear(2012);//设置年份,传入的参数必须是四位数字var month=date.getMonth();//返回该dat原创 2020-11-18 11:29:31 · 141 阅读 · 0 评论 -
Echarts定时刷新页面功能
问题提出背景:echarts的图层必须要定时刷新,一分钟或者5分钟向接口重新获取数据。data() { return { timer: null }},created() { this.timer = setInterval(()=>{ this.getUserCover() //一分钟调用接口一次 },60000)}destroyed() { clearInterval(this.timer) // 可以判断如果定时器还在运行就关闭 或者直接关闭}.原创 2020-11-18 11:29:13 · 1180 阅读 · 0 评论 -
Echarts的响应式布局
echarts中的响应式布局。单个图层var myChart = this.$echarts.init(this.$refs.depActive)//获取到dommyChart.setOption(this.depActive_option)//渲染dom // 窗口自适应window.onresize = function() { myChart.resize();}//但是这种方法只能对一个图层有用,如果同时对多个图层设置的话,只对最后一个图层有用。考虑到在Vue中,通常会把多..原创 2020-11-18 11:28:53 · 1063 阅读 · 0 评论 -
ref
ref在Vue中是用来给元素或是子组件注册引用信息到父组件或是Vue实例上,注册后的引用信息都会呈现在父组件Vue实例的$.refs上,这时,我们就可以通过 $.refs获取到引用的 DOM对象或是子组件信息。在使用 JS/Jquery 获取页面的DOM 元素时,我们一般是根据 id、class、标签、属性等其它标识来获取到页面上的 DOM元素。嗯,可以说,我们很难抛弃Jquery的一个重大原因,就是当我们需要获取到页面上的 DOM元素时,使用Jquery的 API相比于原生的 JS 代码,简单到极致。原创 2020-11-18 11:27:56 · 123 阅读 · 0 评论 -
后台管理系统的布局小解
<template> <div> <!-- 头部 --> <el-row class="vheader"> <el-col :span="24"> <vheader></vheader> </el-col> </el-row> <!-- 侧边及内容区 --> <el-row class="vbody原创 2020-11-18 11:27:34 · 216 阅读 · 0 评论 -
省市县联动插件 V - Distpicker
步骤一: npm install v-distpicker --save步骤二: 在main.js中全局使用。import VDistpicker from 'v-distpicker'Vue.component('v-distpicker', VDistpicker)步骤三:在组件中使用(推荐)import VDistpicker from 'v-distpicker'export default { components: { VDistpicker }}步骤四:使用&l原创 2020-11-18 11:26:52 · 219 阅读 · 0 评论 -
从接口获取到数据之后想要对数据进行操作,却失效的情况
比如获取到新数据,想对新数据进行操作。却发现操作的还是老数据。getData() { aaa().then(res => { console.log(res) //对res进行操作 this.table = res }) this.table.indexOf('杭州') //却发现对this.table操作的还是老数据 //但是,打印出来的是新数据。}原因在于,数据获取是异步操作,JavaScript会优先执行同步操作,对于异步操作会后于执行。所以解决方法是原创 2020-11-18 11:25:50 · 323 阅读 · 0 评论 -
Vue无法识别数组变动
Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。换句话说,vue对象内部不会设置访问器(观察者),你要改变他让它触发视图更新,可以手动调用this.$set()`data () { return { student: { name: '' }, teach:["李磊"] .原创 2020-10-30 10:48:50 · 248 阅读 · 0 评论 -
超出则隐藏
//一行超出隐藏.name-wrapper { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; // 溢出不换行,兼容IE,IE不能两行超出隐藏,只能一行}//多行超出隐藏overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;原创 2020-10-30 10:48:33 · 119 阅读 · 0 评论 -
表格分页
第一种情况:一次只展示一个页面的数据,下一页的数据需要发送数据向后台获取。<el-table> 表格</el-table><el-pagination @size-change="handleSizeChange" //改变一页/X条数据的点击事件 @current-change="handleCurrentChange" //第几页按钮 :current-page.sync="curPage" //当前是第几页 .原创 2020-10-30 10:48:15 · 235 阅读 · 0 评论 -
表尾合计
<el-table:summary-method="getSummaries"show-summary>//表格</el-table>getSummaries(param) { const { columns, data } = param; //解构params,抽出columns,data const sums = []; columns.forEach((column, index) => { if (in原创 2020-10-30 10:47:53 · 121 阅读 · 0 评论 -
利用模板字面量来动态写URL
let queryparams = `?type=${this.type}&page=${changeCurPage( this.curPage )}&pageSize=${this.pagesize}&queryVO=${encodeURIComponent( JSON.stringify(this.queryparam) )}`;getReq(URL.REPORT_SECURITY_REINFORCE + querypa原创 2020-10-30 10:46:27 · 78 阅读 · 0 评论 -
当get请求带参带的是对象怎么传
前端get请求有时候会带参给后端用来返回我们需要的值。这个参一般是字符串或者是number类型。但是如果是对象类型,前端应该怎么做?//这种传参是不对的,后端无法识别出来。http://localhost:8080/servlet/user?param={"accID":"milo","field":"nick_name,email"}//应该对路径进行转义,变成下面这种格式。queryVO为对象。http://nb-hz20130305.hikvision.com:81/dpm-report原创 2020-10-30 10:46:03 · 14741 阅读 · 3 评论 -
在表格中,很多行的状态都绑定在一个变量中,点击一个会修改全部的状态
比如一个表格的所有行都有一个显示详情的弹窗,这个弹窗与否与绑定一个变量,但是点击其中一行的话,改变状态,所有行都打开弹窗了。思路:这个变量改成数组,点击第一行,就修改数组[0]的值,第二个就修改数组[1]的值。data() { return { delayOpenB: [] }}//执行方法showDelayB(index, row) { this.delayOpenB[index] = true; }...原创 2020-10-30 10:45:05 · 117 阅读 · 0 评论 -
记一次项目优化
Webpack方面减少代码包大小,提高安全性。在config/index.js文件内,修改productionSourceMap: false。表示打包后不要map文件,map文件的作用是如果运行错误会出现报错信息,而改成false,可以对报错信息屏蔽。开启gzip压缩。在config/index.js文件内,设置productionGzip: true, productionGzipExtensions: ['js', 'css','svg']。 gzip(GNU- ZIP)是一种压缩技术..原创 2020-10-30 10:44:40 · 120 阅读 · 0 评论 -
Object.keys()
返回一个由一个给定对象的自身可枚举属性组成的数组。主要作用于以下2个:对象。Object.keys(对象) 返回的是对象的属性名。var obj = {a:"1111",b:"2222",c:"33333"}Object.keys(obj)结果:["a","b","c"]字符串。返回的的index,索引。var obj = "abc123"Object.keys(obj)结果:[0,1,2,3,4,5]经典例子: var obj = { a: "1111",原创 2020-10-16 13:26:13 · 95 阅读 · 0 评论 -
判断是否有空格
问题提出:留言板输入框不能输入空格和空。//点击事件addMessage() { var regu = "^[ ]+$" var re = new RegExp(regu) if (this.input === "" || re.test(this.input) == true) { return false //有则return掉 this.input = "" //并清空输入框 } }// 判断 this.原创 2020-10-16 13:25:47 · 769 阅读 · 0 评论 -
前端实现页内搜索
这里要讲清楚,搜索的是什么?页内搜索并不是ctrl+ f 这种搜索,它搜索的范围肯定是从后端拿到数据渲染在前端的数据,比如表格,列表等等。这里以表格为例,要实现填入关键字,然后筛选出对应的表格,展示在页面上。<el-input placeholder="搜索" v-model="value"> <el-button slot="append" type="primary" icon="h-icon-search" @click="doSearch(value)"></原创 2020-10-16 13:24:37 · 624 阅读 · 0 评论 -
将中国标准时间格式转换为yy-mm-dd的格式
var s = new Date(1262275200000); //s获取到的是中国标准时间格式var startTime = s.getFullYear() + "-" + (s.getMonth() + 1) + "-" + s.getDate() + " " + s.getHours() + ":" + s.getMinutes() + ":" + s.getSec原创 2020-10-16 13:23:55 · 1828 阅读 · 0 评论 -
遍历并切割字符串
res[0].timeline.forEach(item =>{ var arr = item.time.split("-") that.option.xAxis[0].data.push(arr[1]) })解析:forEach遍历res[0].timeline数组。[{time:12-2,index:0}....] item替代数组的每一项。 item.time代表着每一项的time属性。 item.time.split("-")代原创 2020-10-16 13:23:37 · 383 阅读 · 0 评论 -
JavaScript识别浏览器种类
//放在App.vue中,可以一打开就检测<el-alert type="error" center :closable="true" v-show="!browser().hasOwnProperty('chrome')"> <span slot="title" simple> 检测到当前浏览器非chrome内核浏览器,为了您的使用体验和程序运行速度,请使用chrome内核进行操作! <a href="http://softdo原创 2020-10-16 13:22:38 · 233 阅读 · 0 评论 -
数组与字符串相互转换
数组转字符串//用toString方法[1,2,3].toString(); //"1,2,3"['1','2','3'].toString(); //"1,2,3"//用join()方法[1,2,3].join(); //"1,2,3"[1,2,3].join('-'); //"1-2-3"//多维数组亦转化为字符串[1,2,[3,4],[5,6,7,[8,9]]].toString(); //"1,2,3,4,5,6,7,8,9"[1,2,[3,4],[5,6,7,[8,9]].原创 2020-10-16 13:22:09 · 59 阅读 · 0 评论 -
sort()方法的妙用
按照字母顺序排序//注意,未带参数的sort()只能排序英文字符串['bbd','ba','zsdd','a'].sort(); //["a", "ba", "bbd", "zsdd"]升序排列['12','1211','323','50','1'].sort((a,b)=> {return a-b}) //["1", "12", "50", "323", "1211"]降序排列['12','1211','323','50','1'].sort((a,b)=> {re.转载 2020-10-16 13:21:45 · 101 阅读 · 0 评论 -
Math.random()的用法
Math.random()原本作用Math.random(); //返回介于 0(包含) ~ 1(不包含) 之间的一个随机数 0.843870140263191取随机整数Math.floor(Math.random() * 10 + 1):数组随机打乱[1,2,3,4,5,6].sort(() => Math.random() - 0.5);...原创 2020-10-16 13:20:30 · 356 阅读 · 0 评论 -
跳转到页内指定位置
利用<a>标签的锚点<h3 name="top">唐诗300首</h3><a href="#top">顶部</a>//点击顶部可以跳转到唐诗300首利用location.href<p id="ddd">底部</p><button onclick="gobuttom()">底部</button>function goButtom() { location.hr.原创 2020-10-16 13:19:57 · 83 阅读 · 0 评论 -
JavaScript中如何计算时间差
思路:假如有timeA 和 timeB。我要得到他们的时间差。把timeA 转化为时间戳的格式。把timeB转化为时间戳的格式。时间戳好像是1979-01-01开始计算,单位是毫秒。然后两个时间的时间戳相减,得到两者之间的绝对数字。在将这个数字转化为 天/小时/分钟/秒。得到时间差。//例let e = params.row.trueDate //获取到时间let b = params.row.date //获取到时间let start = new Date(b原创 2020-10-15 08:46:39 · 629 阅读 · 0 评论 -
ZERRO 组件库(Angular.js)开发流程
项目启动与安装1. ng new 项目名字2. cd 项目名字3. ng add ng-zorro-antd在组件中如何具体使用?1. angular不同于vue,vue直接在main中直接导入。而angular需要在app.module.ts中配置。2. 如果你想用button按钮组件。 - 需要在app.modules.ts中直接导入。 import { NzButtonModule } from 'ng-zorro-antd/button'; - 再写入数组。 imports..原创 2020-10-15 08:37:18 · 169 阅读 · 0 评论 -
管道
管道用来对字符串,货币金额,日期和其他显示数据进行转换和格式化。管道是一些简单的函数,可以在模板表达式中用来接受输入值并返回一个转换后的值。# 常用的内置管道1. DatePipe:根据本地环境中的规则格式化日期值。2. UpperCasePipe:把文本全部转换成大写。3. LowerCasePipe :把文本全部转换成小写。4. CurrencyPipe :把数字转换成货币字符串,根据本地环境中的规则进行格式化。5. DecimalPipe:把数字转换成带小数点的字符串,根据本地环境中的.原创 2020-10-15 08:32:52 · 81 阅读 · 0 评论 -
angular文件目录说明
原创 2020-10-15 08:32:13 · 138 阅读 · 0 评论 -
当无法使用 ng 命令时
1. `npm install -g @angular/cli` 当我们安装了全局angular脚手架的时候。2. 想通过 `ng new` 来创建项目,但是却报错“ng 无法加载文件或没有ng 这个命令”。3. win10系统搜索 `Windows PowerShell`,选择管理员身份运行。4. 打开了命令行之后,输入`set-ExecutionPolicy RemoteSigned`。 然后更改权限为A。5. 最后通过 `get-ExecutionPolicy` 命令查看当前的状态。Remot原创 2020-10-15 08:31:56 · 1599 阅读 · 0 评论 -
解决`Can‘t bind to ‘ngModel‘ since it isn‘t a known property of ‘input‘.`的问题
# 原因没有引入FormModule# 解决方法1. 在app.module.ts中import { FootComponent } from './foot/foot.component';2. imports: [ FormsModule ]原创 2020-10-15 08:31:39 · 1147 阅读 · 0 评论 -
angular的生命周期
钩子方法用途时机ngOnChanges()当angular设置或重新设置数据绑定的输入属性时响应。这里发生的非常频繁,所以你在这里执行的任何操作都会显著影响性能。在ngOnInit()之前以及所绑定的输入属性的值发生变化时都会调用。ngOnInit()第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。在第一轮ngOnChanges()完成之后调用,只调用一次ngDoCheck()检测,并在发生angular无法检测或不愿意自己检测的变化时做出反应...原创 2020-10-15 08:31:04 · 67 阅读 · 0 评论 -
angular的 #
# $event对象<input (keyup)="onKey($event)">//$event 对象的属性取决于 DOM 事件的类型。//所有标准 DOM 事件对象都有一个 target 属性, 引用触发该事件的元素。 在本例中,target 是<input> 元素, event.target.value 返回该元素的当前内容。 # 传入$event是靠不住的做法类型化事件对象揭露了重要的一点,即反对把整个DOM事件传到方法中,因为这样组件会知道太多的模板信息。原创 2020-10-15 08:29:06 · 1272 阅读 · 0 评论