前端工作过程遇到的问题总结(八)

 

目录

前端实现文件下载功能

前端实现图片上传功能

element ui 表单验证不通过

this.$nextTick(() => {})的作用

JavaScript 判断对象中是否有某属性的常用方法

JS根据身份证号码算年龄

element ui的表格鼠标定义右键菜单

vue 操作数组的变异方法和非变异方法

vue使用lodash

javascript页面刷新的几种方法

vue watch对象内的属性

通过window.sessionStorage.getItem获取的值，一定要 通过JSON.parse()转成对象

vue项目中，定义并使用 全局变量，全局函数

重构项目可能出现的问题

---

前端实现文件下载功能

原文文章：前端实现文件下载功能

1.最简单的，有文件的地址，直接使用a标签实现下载：

点击下载

 但是有个情况，比如txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的，而是会直接打开文件，这个时候就需要给a标签添加一个属性“download”;

2. window.open()方法，后端提供下载接口：

html：

window.open()方法下载

js：

var $eleBtn1 = $("#btn1");

//已知一个下载文件的后端接口：
https://codeload.github.com/douban/douban-client/legacy.zip/master
//方法一：window.open()
$eleBtn1.click(function(){
	var url = "https://codeload.github.com/douban/douban-client/legacy.zip/master";
	window.open(url);
});

3.通过form表单提交的方式：

html：

form方法下载

js:

var $eleBtn2 = $("#btn2");

//已知一个下载文件的后端接口：
https://codeload.github.com/douban/douban-client/legacy.zip/master
$eleBtn2.click(function(){
	var $eleForm = $("
");

	$eleForm.attr("action","https://codeload.github.com/douban/douban-client/legacy.zip/master");

	$(document.body).append($eleForm);

	//提交表单，实现下载
	$eleForm.submit();
});

还有几个参考文章：

• vue实现点击下载图片到本地
• vue+axios实现文件下载
• vuejs怎么根据url下载文件
• window.open
• JS兼容IE怎么实现下载图片在本地

我在项目中使用的是第一种方法，顺便把代码贴出来（表格的点击事件）：

 handleDownload (index,row) {   // row为当前行的数据
    let cV = row.cV;
    let applyUrl = this.$sourcePrefix + cV; //this.$sourcePrefix为资源前缀
    if(cV!='' && cV !=undefined) {
      let url = applyUrl;
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', cV);
      link.setAttribute('target', "_blank");
      document.body.appendChild(link);
      link.click();
    } else {

    }
}

前端实现图片上传功能

直接上代码：最好是把组件的props、data、computed、watch、mounted、methods来看参数、函数的作用，这样更容易明白

• 头像上传：

 使用：

 配置(data中定义)：

uploadConfig: {
        previewWidth: 110,
        previewHeight: 110,
        label: "",
        itemMessage: {
          instruction: "请提交你的头像", //String/html标记语言（换行用
） 表单上传提示语/提示语+上传文件规则
          extraDescribe: []
        },
        imgRequirement: {
          format: ["jpg", "jpeg", "png"]
          /*  width:1920,//Number[px] 图片宽度
          height:768,//Number[px] 图片高度
          maxSize:4096,//Number[kb] 文件大小 */
        }
 }

方法：

// 上传头像的事件
    updateFile (msg) {
      window.sessionStorage.setItem("avatar", msg);
      let params = {
        'icon': msg
      };
      this.$http.hosCommon.editUserInfo(params).then(data => {
        this.$message({
          message: '编辑用户头像成功',
          type: 'success'
        });
        this.$store.commit("SET_AVATAR", msg);
      })
    }

 注意：this.$http.hosCommon.editUserInfo是我封装的方法

• 图片上传：

使用：

这里的图片上传就不做赘述了，请看上面的头像上传的详细说明

参考文章：

• Element ：upload组件实例
• input和formdata文件上传，formdata在append上传的文件file之后，formdata还是空的？
• HTML5的 input:file上传类型控制

element ui 表单验证不通过

参考问题：element ui 表单验证 this.$refs[formName].validate()里面的内容死活不执行

this.$nextTick(() => {})的作用

参考问题：vue中mounted函数中添加setTimeout有什么作用

JavaScript 判断对象中是否有某属性的常用方法

原文文章：JavaScript 判断对象中是否有某属性的常用方法

• 第一种：点( . )或者方括号( [ ] )

通过点或者方括号可以获取对象的属性值，如果对象上不存在该属性，则会返回undefined。当然，这里的“不存在”指的是对象自身和原型链上都不存在，如果原型链有该属性，则会返回原型链上的属性值。

// 创建对象
let test = {name : 'lei'}
// 获取对象的自身的属性
test.name   //"lei"
test["name"]   //"lei"
 
// 获取不存在的属性
test.age    //undefined
 
// 获取原型上的属性
test["toString"]  //toString() { [native code] }
 
// 新增一个值为undefined的属性
test.un = undefined
 
test.un    //undefined 不能用在属性值存在，但可能为 undefined的场景

所以，我们可以根据 Obj.x !== undefined 的返回值 来判断Obj是否有x属性。

这种方式很简单方便，局限性就是：不能用在x的属性值存在，但可能为 undefined的场景。 in运算符可以解决这个问题

• 第二种：in 运算符

MDN 上对in运算符的介绍：如果指定的属性在指定的对象或其原型链中，则in 运算符返回true。

'name' in test  //true
'un' in test    //true
'toString' in test //true
'age' in test   //false

示例中可以看出，值为undefined的属性也可正常判断。

这种方式的局限性就是无法区分自身和原型链上的属性，在只需要判断自身属性是否存在时，这种方式就不适用了。这时需要hasOwnProperty()

• 第三种：hasOwnProperty()

test.hasOwnProperty('name')  //true 自身属性
test.hasOwnProperty('age')   //false 不存在
test.hasOwnProperty('toString') //false 原型链上属性

可以看到，只有自身存在该属性时，才会返回true。适用于只判断自身属性的场景。

参考的文章：

• js检测对象中是否存在某个属性
• 判断一个对象是否有某一个属性

JS根据身份证号码算年龄

原文文章：JS根据身份证号码算年龄

element ui的表格鼠标定义右键菜单

上代码：

使用：

 commandList: [
          {
            label: "编辑患者信息",
            hasAuth: true,
            command: this.handleEdit,
            commandAvailable: function() {
              return true;
            }
          },
          {
            label: "下达医嘱",
            hasAuth: true,
            command: this.handleRDAdvice,
            commandAvailable: function() {
              return true;
            }
          },
          {
            label: "预约住院",
            hasAuth: true,
            command: this.handleAhospitalization,
            commandAvailable: function() {
              return true;
            }
          },
          {
            label: "打印预约入院证明",
            hasAuth: true,
            command: this.handlePrint,
            commandAvailable: function() {
              return true;
            }
          },
          {
            label: "完成看诊",
            hasAuth: true,
            command: this.handleCVisit,
            commandAvailable: function() {
              return true;
            }
          },
          {
            label: "撤回",
            hasAuth: true,
            command: this.handleRetract,
            commandAvailable: function() {
              return true;
            }
          }
]

这些方法就可以在methods中使用了

参考的文章：

• JS简单实现自定义右键菜单
• Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页
• 基于vue和elementUI封装框选表格组件

vue 操作数组的变异方法和非变异方法

文章地址： vue 操作数组的变异方法和非变异方法

vue文档：变异方法 (mutation method)

变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组：

• push( )
• pop( )
• shift( )
• unshift( )
• splice( ) 
• sort( )
• reverse( )

也有非变异 (non-mutating method) 方法，例如：

• filter( )
• concat( )
• slice( )

这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组

vue使用lodash

原文文章：vue使用lodash

使用lodash可以做什么：

• JS中深拷贝数组、对象、对象数组方法
• js判断对象是否为空对象的几种方法
• 在JavaScript中，如何判断数组是数组？
• javaScript遍历对象、数组总结
• JS 对象的深拷贝和浅拷贝
• 数据类型的转换

javascript页面刷新的几种方法

原文文章：javascript页面刷新的几种方法

vue watch对象内的属性

原文文章：vue watch对象内的属性

通过window.sessionStorage.getItem获取的值，一定要 通过JSON.parse()转成对象

原文文章：通过window.sessionStorage.getItem获取的值，一定要 通过JSON.parse()转成对象

vue项目中，定义并使用 全局变量，全局函数

原文文章：vue项目中，定义并使用 全局变量，全局函数

重构项目可能出现的问题

• nodejs 升级后， vue+webpack 项目 node-sass 报错的解决方法
• 升级vue-cli3报错(You are using the runtime-only build of Vue where the template compiler is not available. Either pre)
• webpack与ts版本不兼容
• babel 7.x 和 webpack 4.x 配置vue项目
• webpack踩坑--webpack 2.x升级至4.x