前端
文章平均质量分 71
大雨倾城
女程序猿一枚,正在努力写bug...
展开
-
前端权限点的封装优化
将权限点(变量)解藕,归纳到单独页面中管理;函数通过vuex解藕,能够独立调用,方便管理。// 财账 - 权限// 权限常量‘/api....’只出现一次,方便统一管理export const BACKEND_BEGINTOAUDITING = '/api.edu.admin.edu.v1.EduAdminEdu/BeginToAuditing' // 提交审核权限。原创 2023-02-27 16:11:54 · 245 阅读 · 0 评论 -
Vue 的实用开发技巧
因此相比于 v-if 不断删除和创建函数新的 DOM,v-show 仅仅是在更新现有 DOM 的显隐值,所以 v-show 的开销要比 v-if 小的多,当其内部 DOM 结构越复杂,性能的差异就会越大。但是 v-show 相比于 v-if 的性能优势是在组件的更新阶段,如果仅仅是在初始化阶段,v-if 性能还要高于 v-show,原因是在于它仅仅会渲染一个分支,而 v-show 把两个分支都渲染了,通过 style.display 来控制对应 DOM 的显隐。原创 2023-02-17 09:45:00 · 917 阅读 · 0 评论 -
关于promise的总结
关于promise的总结文章目录关于promise的总结promise是什么?promise解决了什么问题?如何创建一个promise对象?promise常用的API有哪些呢?promise的特点?手写一个promise使用手写的promise直接使用promise对象?promise是什么?promise从语法上来说是一个类,可以创建实例(new Promise)。promise是异步编程的一种解决方案。比传统的回调函数去解决异步要更合理。promise还是一个容器,里面保存着一个异步操作的最原创 2021-03-15 19:18:20 · 257 阅读 · 0 评论 -
network看不到请求发送出的url信息
有可能是基础路径少写了http例如:正确:const domain = 'http://192.168.16.228:9999';错误:const domain = '192.168.16.228:9999'; 没有http://,无法进行http请求,无法在network上看到url信息。原创 2020-07-07 11:30:11 · 3105 阅读 · 0 评论 -
将视频图片截图后,在前端压缩图片再上传
文章目录要点:方案:canvas绘制矩形的函数canvas绘制路径(轮廓)的函数添加样式和颜色绘制文本canvas操作视频完整案例要点:图片的大小由分辨率(长像素点*宽像素点)和位深度(由生成的图片是png/jpeg)决定(图像数据量大小=图像中的像素总数×图像深度 ÷ 8 ÷ 1024),图像深度决定图像能够显示的颜色种类。jpg是有损压缩格式,png是无损压缩格式。同一张图片,jpg的大小比png格式的大小小1.5倍。jpeg使用的一种失真压缩标准方法;PNG格式是无损数据压缩方法。canva原创 2020-06-30 10:29:41 · 601 阅读 · 0 评论 -
element-ui 三级联选择器的使用 el-cascader
<el-cascader :options="options" // 存放省市县数据的变量 v-model="selectedOptions" // 存放被选择数据的变量 expand-trigger="hover" // 实现鼠标悬停时调用下方绑定的函数handleItemChange placeholder="请选...原创 2020-05-08 10:20:47 · 1289 阅读 · 0 评论 -
记一次vue 的keep-alive踩坑之路 —— active和deactivated()函数不执行
现象:路由頁面被缓存,销毁阶段函数不执行,active和deactivated()函数不执行,进入页面的created函数(创建期函数)执行。原因:<template> <div id="app"> <keep-alive v-if="$route.meta.keepAlive"> <div> //未激活 ...原创 2019-12-11 15:36:45 · 4779 阅读 · 0 评论 -
报错:t.get is not a function
发现是浏览器的版本太低不支持formData.get()方法xx.get is not a function 说明是不支持get()方法原创 2019-10-28 17:48:51 · 4259 阅读 · 0 评论 -
Unhandled promise rejection
这是由于发送请求时没有写.catch(res=>{})方法去获取有可能的错误,才报的错误getUserRoles().then(json=>{console.log(‘success’)}).catch(function (err) {console.log(err);})}...原创 2019-10-28 17:45:38 · 8606 阅读 · 0 评论 -
vue项目优化之侦听器watch防抖版
watch: { firstName: function(val) { console.log(520); clearTimeout(this.firstTimeout); this.firstTimeout = setTimeout(() => { this.fullName = val + " " + this.lastNam...原创 2019-08-01 11:28:45 · 943 阅读 · 0 评论 -
vue将电话号码中间的几位数隐藏显示
1字符串转化成数组2.将数组中的4-7位变成* phoneNumFilter (phone) { // 1字符串转化成数组 let phoneArr = [...phone]; // 2.将数组中的4-7位变成* phoneArr.map((res, index) => { if (index > 2 &&...原创 2019-08-08 09:31:55 · 7125 阅读 · 4 评论 -
[vue-router] Duplicate named routes definition
浏览器告警信息 [vue-router] Duplicate named routes definition: { name: “index”, path: “/index” }说明路由重复举 例 { path: ‘’, name: ‘index’, redirect: ‘/fiibox/personHome’ },改正: { path: ‘’, name: ’ ', redirect:...原创 2019-08-02 09:49:41 · 70920 阅读 · 1 评论 -
vue 中无法上传同一张图片的问题
1.原因:同一张图片,无法触发chang事件2.解决:将图片push进变量保存(多张图片)将input的value值清空 reader.onload = function () { // 读取完成后,将图片push进函数保存 that.adviceImg.push(this.result); } c...原创 2019-08-07 10:28:35 · 856 阅读 · 0 评论 -
vue中实现监听滚动事件的方法
实现监听局部滚动HTML代码 <section @scroll="scrollEvent" ref="scrollDiv"> <router-view></router-view> //滚动部分 </section>js代码 scrollEvent () { console.log(th...原创 2019-08-23 18:56:17 · 6568 阅读 · 0 评论 -
vue中获取Error: timeout of 50ms exceeded
现象:解决1.axios请求超时,返回的error是一个对象,用typeof检测是object,error对象的具体内容如下图:2.如何得到 timeout of …,用返回的对象调用message即可,例如error.message3.axios.defaults.timeout = 50; // 超时时间(在拦截器中统一设置超时时间)4.具体如何设置请求时间点击此处...原创 2019-08-16 16:01:25 · 15481 阅读 · 5 评论 -
vue 跨域问题XMLHttpRequest cannot load http://xxx.xxx No 'Access-Control-Allow-Origin'
在根目录下建立vue.config.js文件如下配置:方法一:module.exports = { devServer: { disableHostCheck: true, https: false, // https:{type:Boolean} // open: true, // 配置自动启动浏览器 proxy: 'h...原创 2019-08-21 20:05:03 · 1942 阅读 · 0 评论 -
开发中遇到的实际问题
问题一:给mint-ui的loading添加样式,例如: document.querySelector(’.mint-indicator’).classList.add(‘editInfoIndicator’),发现执行了Indicator.close()后添加的样式消失(没有添加上去),不知道原因。但是用 document.querySelector(’.mint-indicator’)....原创 2019-08-29 11:40:22 · 102 阅读 · 0 评论 -
H5页面镶嵌到安卓,报错:undefined is not a function错误解决
描述:在网页调试时,没有报错,去安卓端后报错,并且不发送请求,排除安卓端错误后,发现是安卓端不支持FormData.get(‘url’)的函数。解决思路:1.逐渐缩小范围,定位问题2.在该功能的每一个函数前后都加上打印,看函数执行到哪里停止。...原创 2019-09-09 17:41:39 · 3032 阅读 · 0 评论 -
Js常用空与非空判断小结
判断是否为空 Object(空对象)JSON.stringify(a) === '{}',如果a是一个空对象则为true,如果a是有值的对象则为false判断是否为空 Array(空数组)a.length=== 0,如果a是一个空数组则为true,如果a是有值的则为false其他情况if(a){} //undefined,null,0,-0,NaN,"",'' 结果为 false,空数...原创 2019-09-26 13:47:30 · 302 阅读 · 1 评论 -
实现非父子组件传值(router-view)
实现功能:当点击路由组件a某一处时(a组件显示在b组件中),让b组件(含有的组件)接受到参数。方法一:a:组件中代码HTML代码<span class="close" @click.stop="myDelete()"><i>×</i></span> //stop阻止冒泡js代码 import connect from "../../pa...原创 2019-04-13 11:41:11 · 432 阅读 · 0 评论 -
vue上传文件(图片),并预览图片的方法(不使用第三方库)
+思路:1.点击 input标签,打开文件库,点选图片后,执行uploadFile(event)函数.<fontcolor=red>注意:要是change事件</font>2.在uploadFile(event)函数 .<font color=red>注意:要是change事件</font&...原创 2019-07-26 11:26:50 · 5268 阅读 · 0 评论 -
POST请求(Form Data格式 )后端拿不到值的解决方法
1.需求后台要求请求头是Content-Type:application/x-www-form-urlencoded(设置请求头的意思是告诉后端传过去的数据是原生的表单格式,但是并没有改变传给后端的数据格式,所以需要对数据格式进行转换)2.方法解决方法一:安装qs插件在main中引入import qs from ‘qs’;将传给后端的参数进行转化qs.stringify({key1:...原创 2019-07-01 18:36:22 · 30060 阅读 · 1 评论 -
js代码报错—调试方法(1)
在这里插入代码片<input type="button" value="查看消息" onclick="message()" />**//JavaScript 语句 try 和 catch 是成对出现的。**<script>var txt="";function message(){ try { //将发生异常的js代码放入try 语句中。 add...原创 2019-04-30 16:50:04 · 501 阅读 · 0 评论 -
git问题
问题描述:as a Git root, but no Git repositories were found there.解决方法:在as中的version contral选中不存在的项目删除即可翻译 2019-05-08 14:57:58 · 220 阅读 · 0 评论 -
webstorm问题 Cannot load settings from file...
问题一:Cannot load settings from file ‘E:\F\TanWork\G-s\U.idea \s.iml’: content truncated File content will be recreated解决方法:删除项目下生成的.idea文件。原创 2019-05-08 14:49:52 · 1781 阅读 · 0 评论 -
瀑布流
瀑布流,实现横向布局效果(不适用于vue)123456实质:通过定位,将除了第一行以外的图片定位到第一列盒子(图片)高度最小的地方在这里插入代码片 waterfall() { const that = this; //取得展示框对象 const box = document.getElementsByClassName("img_bo...原创 2019-04-09 20:48:12 · 90 阅读 · 0 评论 -
Vue3.0报错error: Unexpected console statement (no-console) 解决办法
在package.json中的eslintConfig:{}中的 “rules”: {加入"no-console":“off”},在这里插入代码片`示例: "eslintConfig": {"root": true,"env": { "node": true},"extends": [ "plugin:vue/essential", "eslint:recommended"...原创 2019-04-02 17:25:35 · 6974 阅读 · 7 评论 -
vue一次性为多条评论(或者其他)点赞(收藏)改变标签样式的方法
用途:如图,可以一次性将所有心点亮或者变灰,达到互不影响效果。方法一:在这里插入代码片 <span @click=" activeLike(index)"> <span><i class="fa fa-heart" :class="{'red':'active'}[item.color]"></i></span>``</...原创 2019-04-11 10:16:51 · 1364 阅读 · 0 评论 -
lable标签和lable for的作用与含义以及lable标签造成冒泡事件的解决方法
菜鸟教程解释的非常好http://www.runoob.com/tags/att-label-for.htmllabel 标签为 input 元素定义标注(标记)。label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会 自动将焦点转到和标签相关的表单控件上。label标签的 f...原创 2019-03-12 19:45:47 · 1098 阅读 · 1 评论 -
理解JavaScript 表单验证
在这里插入代码片function validateForm() { var x = document.forms["myForm"]["fname"].value; forms是一个表单集合(对象);比如有多个form,其中一个是myForm,相当于keyforms["myForm"]就是一种对象取值的方法 if (x == null || x == "") { ...原创 2019-04-30 18:06:10 · 296 阅读 · 0 评论 -
css元素水平居中
问题:想让元素X(不是文本)水平居中方法一: text-align:center;(text-align属性指定元素文本的水平对齐方式。)要求: text-align:center,作用在X元素的父元素上,并且x不能是块级元素(因为块级元素会填充满整个父元素),准确一点来说,就是X的宽要小于父元素的。要是想让X元素中的文本居中,给X或者X父元素加一个text-align属性即可。方法二:...原创 2019-05-09 10:55:51 · 170 阅读 · 0 评论 -
vue获取promise中的值
方法一:async和await要一起用async res => { const result = await getPanelData('', this.from_uid); }方法二const result = getPanelData('', this.from_uid).then(function (result) { console.log(result) }...原创 2019-05-28 20:10:59 · 36687 阅读 · 1 评论 -
利用css3修改input[type=radio]样式&&mintUI中的radio并列显示
方法一: HTML代码 <div class="warning_box_radio"> <input type="radio" name="trouble" checked id="question"> <label for="question" class="question">&l...原创 2019-05-17 15:06:13 · 1444 阅读 · 0 评论 -
封装vue 点赞或者收藏组件
直接上封装代码<template> <div class="isZan-container"> <span @click="addLike()" :class="{'isLike':likeClass}" class="container-inner"> <transition @before-ente...原创 2019-05-25 18:29:53 · 2904 阅读 · 0 评论 -
vue绑定多个动态class的方法
方法一icon可以是变量也可以是常亮,isLike只能是字符串,是类名,且likeClass为true时才有<i :class="[icon,{'isLike':likeClass}]"></i>方法二:classB和classC都是类名,都是字符串<i :class=" { classB: true, classC: isC }"></...原创 2019-05-25 18:20:28 · 16234 阅读 · 0 评论 -
vuex&&刷新后数据丢失&&异步请求(页面无数据)
刷新后数据丢失(一)原因一: 异步请求(页面无数据)原因:页面渲染完成,数据还没有请求回来解决方法:监听或者深度监听或者计算属性代码实现: 监听执行,但是数据依旧没有,是因为获取数据的函数没有被调用。 // 异步监听得到的数据 watch: { 'Search_history': { //(Search_history变化,执行下方函数) hand...原创 2019-05-15 19:59:59 · 1220 阅读 · 0 评论 -
css 垂直居中方法
方法一:弹性盒子布局(实现上下左右都居中)display:flex方法二:单元格布局(实现垂直居中).parent {display: table;width: 300px;height: 300px;text-align: center;}.son {display: table-cell;vertical-align: middle;height: 200px;ba...原创 2019-05-10 20:20:05 · 161 阅读 · 0 评论 -
前端403权限问题(报错:CSRF Failed: CSRF token missing or incorrect get)
一、请求方式:delete(和get请求机制类似)解决方法:( headers要写在第二个参数中) delete(){ this.$http.delete(API.delete, { data:{auth_code: 4}, ...原创 2019-05-10 10:40:49 · 5875 阅读 · 0 评论 -
js数组处理
描述:已知数组元素,如何得到下标。indexOf()方法返回在数组(或者字符串中)可以找到一个给定元素的第一个索引,如果不存在,则返回-1。**用法:**arr.indexOf(要查找的元素, fromIndex)参数二:fromIndex指开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵...原创 2019-05-09 16:34:54 · 298 阅读 · 0 评论 -
Vue 点击后添加元素方法
1.方法一: <label v-for="(item,index) in createNumber" :key="index" >//createNumber是数组或者数字 步骤{{index + 1}} <input> <span class=...原创 2019-05-06 20:22:28 · 8939 阅读 · 1 评论