axios

封装 axios 模块 封装背景 使用axios发起一个请求是比较简单的事情，但是axios没有进行封装复用，项目越来越大，会引起越来越多的代码冗余，让代码变得越来越难维护。所以我们在这里先对 axios 进行二次封装，使项目中各个组件能够复用请求，让代码变得更容易维护。 封装要点 统一 url 配置 统一 api 请求 request (请求) 拦截器，例如：带上token等，设置请求头 response (响应) 拦截器，例如：统一错误处理，页面重定向等 根据需要，结合 Vuex 做全局的 loading 动画，或者错误处理 将 axios 封装成 Vue 插件使用 文件结构 在 src 目录下，新建一个 http 文件夹，用来存放 http 交互 api 代码。 config.js： axios 默认配置，包含基础路径等信息。 axios.js： 二次封装 axios 模块，包含拦截器等信息。 interface.js ：请求接口汇总模块，聚合模块 API。 index.js： 将 axios 封装成插件，按插件方式引入。 config.js export default { method: 'get' , // 基础url前缀 baseURL: 'http://localhost:8080/' , // 请求头信息 headers: { 'Content-Type':

相关背景： 老项目重构，后端返回xml格式数据。 前端有现有的vue项目底层框架可以复用，现有框架支持对后端返回的json数据进行解析，需要调整的就是对xml格式数据的解析。 前端对后端接口的请求使用axios进行封装，且有mock数据方便本地联调开发。 解决方案： 封装xml解析相关方法； 根据后端接口返回数据格式边写xml文件进行后端数据mock； mock数据的实现： json格式的数据可以直接编写json格式的数据进行模拟，可以很方便的进行解析。 xml格式的数据如果直接写成字符串格式的，更新管理起来会比较麻烦，因此可以直接编写xml文件进行模拟。 对于mock接口数据的xml文件，可以在mock数据请求封装中直接对xml文件进行读取解析。 xml解析相关函数封装： xmlLoad.js 1 /* * 2 * 加载xml文件 3 * @param {Object} dname 4 */ 5 function loadXMLDoc(dname) { 6 let xhttp 7 if (window.XMLHttpRequest) { 8 xhttp = new XMLHttpRequest(); 9 } else { 10 xhttp = new ActiveXObject("Microsoft.XMLHTTP" ); 11 } 12 xhttp.open("GET",

在我们开发Vue应用的时候，很多时候需要记录一些变量的内容，这些可以用来做界面状态的承载，也可以作为页面间交换数据的处理，处理这些内容可以归为Vuex的状态控制。例如我们往往前端需要访问后端数据，一般是通过封装的Web API调用获取数据，而使用Store模式来处理相关的数据或者状态的变化，而视图View主要就是界面的展示处理。本篇随笔主要介绍如何整合这三者之间的关系，实现数据的获取、处理、展示等逻辑操作。 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。关于Vuex的相关State、Getter、Mutation、Action、Module之间的差异和联系，详细可以参考下： https://vuex.vuejs.org/zh/ 1、前后端的分离和Web API 优先路线设计 Web API 是一种应用接口框架，它能够构建HTTP服务以支撑更广泛的客户端（包括浏览器，手机和平板电脑等移动设备）的框架， ASP.NET Web API 是一种用于在 .NET Framework/ .net Core 上构建 RESTful 应用程序的理想平台。 在目前发达的应用场景下，我们往往需要接入Winform客户端、APP程序、网站程序、以及目前热火朝天的微信应用等

前言 作为一位 Vuer（vue开发者），如果还不会这个框架，那么你的 Vue 技术栈还没被点亮。 Nuxt.js 是什么 Nuxt.js 官方介绍： Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。 我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。 Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。 如果你熟悉 Vue.js 的使用，那你很快就可以上手 Nuxt.js 。开发体验也和 Vue.js 没太大区别，相当于为 Vue.js 扩展了一些配置。当然你对 Node.js 有基础，那就再好不过了。 Nuxt.js 解决什么问题 现在 Vue.js 大多数用于单页面应用，随着技术的发展，单页面应用已不足以满足需求。并且一些缺点也成为单页面应用的通病，单页面应用在访问时会将所有的文件进行加载，首屏访问需要等待一段时间，也就是常说的白屏，另外一点是总所周知的 SEO 优化问题。 Nuxt.js 的出现正好来解决这些问题，如果你的网站是偏向社区需要搜索引擎提供流量的项目，那就再合适不过了。 我的第一个 Nuxt.js 项目 我在空闲的时间也用 Nuxt.js 仿掘金 web

目录 1. 前言 2. 关于vue-simple-uploader 3. 基于vue-simple-uploader封装全局上传组件 4. 文件上传流程概览 5. 文件分片 6. MD5的计算过程 7. 秒传及断点续传 7.1 对于前端来说 7.2 前端做分片检验：checkChunkUploadedByResponse 8. 源码及后记 8.1 关于第一个分片丢失问题 2019/8/6更新 1. 前言 之前公司要在管理系统中做一个全局上传插件，即切换各个页面的时候，上传界面还在并且上传不会受到影响，这在vue这种spa框架面前并不是什么难题。然而后端大佬说我们要实现 分片上传 、 秒传 以及 断点续传 的功能，听起来头都大了。 很久之前我写了一篇webuploader的文章，结果使用起来发现问题很多，且官方团队不再维护这个插件了， 经过多天调研及踩雷，最终决定基于 vue-simple-uploader 插件实现该功能，在项目中使用起来无痛且稳定。 如果你只是想实现基本的（非定制化的）上传功能，直接使用 vue-simple-uploader ，多读一下它的文档，不需要更多的二次封装。 如果你只是想实现全局上传插件，也可以参照一下我的实现。 如果你用到了分片上传、秒传及断点续传这些复杂的功能，恭喜你，这篇文章的重点就在于此。 本文源码在此： https://github.com

axios.js import axios from 'axios'; import api from './api'; // 创建一个axios实例 const axiosService = axios.create({ timeout: 5000, // 设置超时时间为5s }); // 添加请求拦截器 axiosService.interceptors.request.use( config => { //设置全局超时的请求次数，请求的间隙 config.retry = 4; config.retryDelay = 1000; // console.log('添加请求拦截器'); return config; }, error => { return Promise.reject(error); } ); // 添加响应拦截器 axiosService.interceptors.response.use( res => { const responseData = res.data; // 登录失效,请重新登录 if (responseData.code === '10002') { console.log(responseData); } return responseData; }, error => { // 超时重新连接 var config = error

实现 步骤1. data中定义一个titleMap对象，和一个dialogTitle属性，titleMap和dialogTitle关系相>当于一个键值对匹配一样（通过dialogTitle匹配titleMap中的值） titleMap对象中有两个属性，两个属性都有对应的属性值，分别表示点击方法弹出对话框的标题信息 titleMap : { addData : "添加数据" , updateData : "修改数据" } , dialogTitle : "" 步骤2. 通过双向数据绑定将titleMap对象，和dialogTitle属性绑定在组件上 < el-dialog :title = "titleMap[dialogTitle]" :visible.sync = "dialogFormVisible" > 步骤3. 通过点击事件（添加或修改）去改变dialogTitle属性的值，可以对话框标题的切换 主要：添加和修改用的是同一个对象接收添加或者修改的参数的，所以在添加时需要对接收数据的对象进行初始化（修改不需要） //修改 Theeditor() { this.dialogFormVisible = true; this.dialogTitle = "updataData" ; }, //添加 addData() { this.dialogFormVisible = true;

目录 1. 前言 2. 关于vue-simple-uploader 3. 基于vue-simple-uploader封装全局上传组件 4. 文件上传流程概览 5. 文件分片 6. MD5的计算过程 7. 秒传及断点续传 7.1 对于前端来说 7.2 前端做分片检验：checkChunkUploadedByResponse 8. 源码及后记 8.1 关于第一个分片丢失问题 2019/8/6更新 1. 前言 之前公司要在管理系统中做一个全局上传插件，即切换各个页面的时候，上传界面还在并且上传不会受到影响，这在vue这种spa框架面前并不是什么难题。然而后端大佬说我们要实现 分片上传 、 秒传 以及 断点续传 的功能，听起来头都大了。 很久之前我写了一篇webuploader的文章，结果使用起来发现问题很多，且官方团队不再维护这个插件了， 经过多天调研及踩雷，最终决定基于 vue-simple-uploader 插件实现该功能，在项目中使用起来无痛且稳定。 如果你只是想实现基本的（非定制化的）上传功能，直接使用 vue-simple-uploader ，多读一下它的文档，不需要更多的二次封装。 如果你只是想实现全局上传插件，也可以参照一下我的实现。 如果你用到了分片上传、秒传及断点续传这些复杂的功能，恭喜你，这篇文章的重点就在于此。 本文源码在此： https://github.com

How to fetch data with React Hooks? 在这篇教程中，我将通过React Hooks中的useState、useEffect来展示如何获取后端数据。您也可以实现一个自定义的Hook在您应用程序中的任何地方进行复用，或者亦可单独作为一个独立的node package发到npm。 如何使用React Hook与后端数据交互 先看一段代码，我们使用了useEffect hook，在它里面通过axios获取后端数据，然后通过setData更新数据。看起来一切很正常。 import React, { useState, useEffect } from 'react' import axios from 'axios' import './App.css' function App ( ) { const [data, setData] = useState({ hits : []}) useEffect( async () => { const result = await axios( "https://hn.algolia.com/api/v1/search?query=redux" ) setData(result.data) }) return ( < ul > {data.hits.map(item => ( < li key = {item

美国时间 6 月 22 日，特朗普宣布暂停 H-1B、H-2B、L 和 J 非移民工作签证的发放，白宫认为此举将为美国带来 50 多万工作岗位。然而，此举引发了包括美国科技界的愤怒和抵制。 机器之心报道，参与：魔王、泽南、小舟。 美国时间周一下午，特朗普政府发布公告，宣布将暂停发放部分种类工作签证，包括适用于技术型人才的 H-1B 签证、适用于跨国公司管理人员和专业人员的 L 签证，以及适用于园艺工人和其他工业领域工作人员的 H-2B 季节性工人签证等。 这项公告将于 6 月 24 日 12:01am 生效，并持续至 2020 年 12 月 31 日。 该公告适用于 公告生效时不在美国境内、无有效非移民签证，以及不具备除签证外准许其赴美和入境的官方旅行证件的外国人 。 美国合法永久居民、美国公民的配偶或子女、为美国食品供应链提供必要服务的外国工作人员，以及被美国国务卿、美国国土安全部长等认定符合美国国家利益的外国人不在此公告范围内。 此外，该公告还续签了 4 月份的绿卡暂停批准行政令，将期限延长至今年年底。 白宫表示，该公告有助于恢复遭受新冠肺炎打击的美国经济，为美国工人开放 52.5 万个工作岗位。但这一举措遭到许多企业的强烈反对。 在该公告涉及的签证中，H-1B 是美国最主要的工作签证类别，它是美国签发给在该国从事专业技术类工作的人士的签证。而白宫暂停 H-1B