随笔分类 - 前端
摘要：一、HTTP 简介 HTTP（Hyper Text Transfer Protocol，超文本传输协议）是一个用于传输超媒体文档（例如 HTML）的应用层协议，被设计用于 Web 浏览器与 Web 服务器之间的通信（但也可以用于其他目的），它通常基于 TCP/IP 协议传输数据。 简单来说就是客户端
阅读全文
摘要：1. 使用JSON.stringify()将对象转换为json字符串 这个方法比较讨巧，也是最容易想到的。我们都知道JSON.stringify()的作用是将Javascript对象转换为JSON字符串。所以，可以通过该方法判断对象是否为空： const obj = {} const obj2 =
阅读全文
摘要：判断对象中是否含有某个属性也是实际项目中常见的场景，现总结如下几种方法来判断。 本文关联文章之js遍历对象的几种方法 一、点( . )或者方括号( [ ] ) + undefined判断 我们知道，通过点或者方括号可以获取对象的属性值，如果对象上不存在该属性，则会返回 undefined。这种方式可
阅读全文
摘要：作为经常使用对象的我们，在有些业务场景下需要对对象的属性进行遍历，下面我总结了几种常用的 JS 遍历对象属性的方法。 本文关联文章之js判断对象中是否含有某个属性 太长不看版： JS 遍历对象的主要方法有 for...in 、Object.keys()、Object.getOwnPropertyNa
阅读全文
摘要：对于 axios api 我想大家已经用过很多次了。在本文中，我列出了一些常用的 axios api 请求的语法，在你可能忘记 api 的时候可以翻出来查看，而不是在旧的项目中寻找之前使用过的请求语法。 1. 安装引用 安装：npm install axios 引入：import axios fro
阅读全文
摘要：最近在项目中又遇到了一个接口的请求需要依赖另一个接口的请求结果和处理高并发的场景了，所以即兴在这里简单总结和分享下，欢迎指正和补充。 一、Promise 简要回顾 Promise 是一个构造函数，作为 ES6 中最重要的特性之一，它有 all、resolve、reject、race ... 眼熟的方
阅读全文
摘要：在开发过程中，我们难免会遇到 token 存储、 代码缓存、 图片存储等，以及其它一些可能存在的前端存储问题。 今天我们从本地存储入手，从前端的角度来了解缓存应用的场景，以及在日常开发中，我们需要缓存的地方和使用缓存带来哪些优势 or bug 一、什么是本地存储 客户端数据的存储 本地存储可以使用在
阅读全文
摘要：在做vue项目的时候，要求用户在页面访问前先登录，或在离开页面前发出提醒。vue官方提供的路由管理器 vue-router 提供的导航钩子，通过跳转或取消的方式守卫导航。以下总结了路由钩子函数的使用方法和一些使用场景。 一、全局守卫 router.beforeEach 路由改变前的钩子 const
阅读全文
摘要：1. Object.assign() Object.assign() 用于将所有可枚举属性的值从一个或多个源对象，复制到目标对象。 语法：Object.assign(obj, ...sources) obj：目标对象 sources：源对象，可以是多个 返回目标对象 复制一个对象 const obj
阅读全文
摘要：常见场景：点击列表的详情，跳转到详情内页，在内页根据传递的参数获取详情数据。 路由传参一般有如下几种方式，下面主要介编程式导航 router.push 的传参方式： 方法一：通过 params 传参 路由配置如下： { path: '/detail/:id', //若id后面加?代表这个参数是可选的
阅读全文
摘要：接上篇，有导入也就有导出需求。 导出excel需求，当点击下载模板或下载反馈结果，axios发起后端接口请求，返回的数据获取 response 时出现乱码，如图： 现总结如下几种处理方法。 1、通过 url 下载 即后端提供文件的地址，直接使用浏览器去下载 通过 window.location.hr
阅读全文
摘要：具体需求场景如下： 选择excel文件后，需要把导入的excel文件手动上传到后台服务器，并将导入成功后的统计结果显示出来。官网也有手动上传的示例，通过 action="url" 传入地址的方式，但在实际项目中请求需要自己配置，下面具体说明实现的方法。 说明： 在上传文件到展示统计结果，我们后端给了
阅读全文
摘要：在实际的项目中，和后台的数据交互是少不了的，我通常使用的是 axios 库，所以以下示例也是以 axios 为基础来进行封装的。如果对 axios 不了解的，请看这里 axios 文档 1、安装 首先是 npm 安装 axios 很简单：npm install axios 2、没有封装存在的问题 如
阅读全文
摘要：Promise 是ES6中新出来的API。其实就是对于回调函数的另一种写法，可以帮助我们避免回调地狱。 Promise 是一个构造函数，new Promise 返回一个 promise 对象，接收一个带有 resolve 和 reject 两个参数的函数，这个函数在 Promise 构造函数返回所创
阅读全文
摘要：数组中提供了一系列元素相关的API操作，其中有 三个静态 api： Array.from() Array.isArray() Array.of() 三十一个原型 api： Array.prototype.concat() Array.prototype.copyWithin() Array.prot
阅读全文
摘要：在很多前端的后管项目中会存在很多表格，表格数据过多就需要分页和按条件筛选搜索查询，于是就对el-table进行了二次封装。 页面结构如图： PS：以前做的组件了，大家可以酌情参考，也可根据实际情况进行修改扩展。 1、首先创建一个 searchForm.vue 文件，放置筛选查询条件和按钮。 <tem
阅读全文
摘要：日常项目开发中，会有一些重复使用的数据处理函数，于是就抽离出来封装在组件的工具类中。 1、判断是否是对象 /** * @param {Object} obj 对象 */ export const isObj = (obj) => { // return Object.prototype.toStri
阅读全文
摘要：关于 element-ui 使用中的其他问题请点这里 一、el-table 翻页序号连续 方法一： <el-table-column label="序号" type="index" width="50" align="center"> <template v-slot="{ $index }"> <
阅读全文
摘要：定义： reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。 reduce() 与forEach()、map()、filter()这些方法一样，也会对数组中的每一项进行遍历，但是reduce() 可以将遍历的前一个数组项产生的结果与当前
阅读全文
摘要：最近在项目打包时，出现如下一些错误： 这些错误本可以避免的，前面把编辑器卸载重装忘记设置了，真是自己坑了自己 o(╥﹏╥)o 在项目中使用ESLint校验附带了大量的规则，ESLint的官方rules文档，我们可以自定义规则设置，但设置规则时必须将值设置为以下值之一： "off" or 0：停用这个
阅读全文
浙公网安备 33010602011771号