axios

1.同步API与异步API 同步API：只有当前API执行完成后，才能继续执行下一个API； 异步API：当前API的执行不会阻塞后续代码的执行； 区别： ①同步API可以从返回值中拿到API执行的结果，但是异步API不可以。 ②代码执行顺序不同 2.异步API都有哪些呢？ 常见的异步调用有：定时任务（setTimeout），Ajax以及在此基础之上封装的axios等。 因为异步API的代码执行顺序不同，那么在异步API中，后面的代码需要依赖异步API的结果，那应该如何处理呢？ 方式一：嵌套 把后面代码写到异步API的回调函数中，以Ajax请求举例如下： $ . ajax ( { url : 'http://localhost:3000/data' , success : function ( data ) { console . log ( data ) $ . ajax ( { url : 'http://localhost:3000/data1' , success : function ( data ) { console . log ( data ) $ . ajax ( { url : 'http://localhost:3000/data2' , success : function ( data ) { console . log ( data ) } } ) ;

//router import Vue from 'vue' import Router from 'vue-router' //一级路由 import Index from '../views/admin-index/Index' Vue.use(Router) const router = new Router({ mode: "history", routes: [ { path: '*',//输错路由回首页 redirect: '/manage/404', meta: { keepAlive: false, page: '输错路由回首页', level: 0 } }, { path: '/',//默认路由 redirect: '/login', meta: { keepAlive: false, page: '默认路由', level: 0 } }, //登录 { path: '/login', name: 'login', component: r => require.ensure([], () => r(require('../views/login/Login')), 'Login'), meta: { keepAlive: false, page: '登录', level: 0 } }, //找回密码 { path: '/forgotPassword', name

github 地址： https://github.com/liangfengbo/vue-cli-project 点击进入 vue-cli-project 已构建配置好的vuejs全家桶项目，统一管理后端接口 | 获取数据 | 请求数据，已包含vue-router，vuex，api，axios. webpack, 储存用vue-ls, 异步async/await, css less. 下载即使用项目开发。 喜欢或对你有帮助的话请点star✨✨，Thanks. A Vue.js project 使用 # 安装服务 npm install # 启动服务 npm run dev 说明 src架构 ├── App.vue ├── api │ ├── doctor.js │ └── fetch.js ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue ├── libs │ └── util.js ├── main.js ├── router │ └── index.js ├── store │ ├── index.js │ ├── modules │ └── mutation-types.js └── views └── doctor 处理数据页面这2大块，把数据和页面分离，在vuex里面做请求数据

　　我们经常会遇到当前页面未加载完毕时跳转路由或者返回操作, 但是通过network会发现, 若网络环境较差的情况下, 会一直pending, 切换路由后在network中添加新的请求但是正在pending的请求依然存在. 当我们在项目中做了一个上拉加载分页的时候会一直加载中, 用户等待不耐烦后可能会主动触发返回操作, 但是此刻即使用户触发返回操作, 加载分页的请求还是存在, 页面还是会一直提示加载中, 直到该请求加载成功或超时才肯罢休。最终给用户造成一些不必要的结果，同时也对web性能造成一定的影响。 　　那么如何解决这个问题呢，方法就是监听路由，在路由切换前将上个页面的请求取消。 　　第一步： 　　axios请求头设置　　 import axios from 'axios' import { store } from './store' // 引入vuex axios.interceptors.request.use( config => { config.cancelToken = new axios.CancelToken(function (cancel) { store.commit('pushToken', {cancelToken: cancel}) }) return config } ) 　　第二步： 　　利用vuex，新建一个store.js，将取消方法

简介 之前的技术路线本来是angular的，后来经过一段时间的开发还是打算选择vue，原因是vue简单丰富，尽管angular规范强大，但是组件库都不太符合国人风格。看到GitHub上Vue Element Admin这么高的人气后就毫不犹豫的选择了这个后台管理框架。作为一个后端开发，刚刚下载Vue Element Admin框架时确实无从下手，但是一番研究之后也就适应了，今天就介绍下改造Vue Element Admin登录并对接vNext授权服务。vNext授权服务使用的是ids4框架，所以使用ids4框架授权的服务都可以参考该登录。 代码分析 根据Vue Element Admin作者的介绍，该框架登录需要两步，获取token和获取userinfo（用户信息）。Vue Element Admin作者公司的后端设计应该是用户信息中包括用户权限，所以Vue Element Admin（后称Admin）登录只需调两次接口。 在view路径的login中可以看到login的click事件： handleLogin() { this .$refs.loginForm.validate(valid => { if (valid) { this .loading = true this .$store.dispatch("user/userLogin", this .loginForm)

背景 公司要开发新官网(教育公司)，网站需要考虑引流、推广、关键字搜索排名等，所以网站需要做SEO。Vue.js 是构建客户端应用程序的框架，默认情况下可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM，像这种客户端渲染方式，并不利于SEO优化，特别是网站中使用ajax去获取新闻列表、新闻详情等信息，百度爬虫是没发抓取到的，所以官网需要考虑一种服务器端渲染(SSR)页面的方式。 Nuxt.js介绍 从头搭建一个服务端渲染的应用是相当复杂的。幸运的是，使用 Nuxt.js 让这一切变得较简单。Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。 服务器端渲染 (SSR) 的优势主要在于： 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面 更快的内容到达时间 (time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。 案例说明 以下所有介绍主要围绕官网所需功能来列举Nuxt.js的一些关键配置，并不包含Nuxt.js的所有功能。 DEMO地址： HelloNuxt 1. html头部 做SEO优化，不仅要考虑服务器端渲染，还要考虑页面的Meat标签，比如标题、描述、关键字等 默认全局配置放在nuxt.config.js文件中： head: { title: '*******官网

**摘要：**Jquery该退役了 原文： 为什么越来越少的人用jQuery 作者： Lemonade Fundebug 经授权转载，版权归原作者所有。 最早期的开发，大多都使用jQuery，它给我们带来了很多的便利：快速选取元素，方便操作DOM元素的API，各个浏览器之间完美的兼容性，链式操作，动画、ajax等等都是jQuery为前端开发人员来带的好处。为什么现在越来越少人用了呢？我来分以下几点，阐述我的想法： 一、JS更新带来的冲击 1. 快速选取DOM节点 对于大部分使用jQuery的开发工程师来说，能够快速选取DOM节点，这个无疑是一个重要的原因，但是就目前情况来说，这个优势显然已经荡然无存了，为什么呢？跟大家说两个API，这两个API已经非常多的人在用了，就是document.querySelector和document.querySelectorAll方法。这两个方法可以通过传入css选择器形式的字符串，就可以匹配到预期的DOM节点。以下是目前两个API的兼容情况： 从图中可以看到，这两个API已经很好的兼容各个浏览器。 Vue中也是使用此API进行元素获取的： 所以说jQuery快速选择DOM节点的优势已经不存在了。 2. 方便操作DOM元素的API 可以方便操作DOM元素的API，比如addClass 、removeClass 、toggleClass

假如二维码后台传的是图片流，前端展示图片 // 获取二维码图片 getCodeImg() { this.getUUID(); let UUID = window.sessionStorage.getItem("UUID"); this.$axios .get("getImg", { responseType: "arraybuffer", params: { clientId: UUID } }) .then(res => { return ( "data:image/png;base64," + btoa( new Uint8Array(res.data).reduce( // String.fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串 (data, byte) => data + String.fromCharCode(byte), "" ) ) ); }) .then(data => { this.imgUrl = data; //赋值给img标签的src属性 }); }, <img :src="imgUrl" alt="二维码图片" v-show="showCode" class="QRcode" /> 来源： oschina 链接： https://my.oschina.net/u/2612473/blog/3274181

前后端分离————VUE+node（express） vue作为前端的框架，node(express)作为后端的框架。无数据库，使用端口保存数据。 VUE: 使用vue-cli构建vue项目（vueapp）。 npm install -g vue-cli（安装，安装过的就不用了） vue init webpack vueapp axios：（与ajax相似） import axios from 'axios' var url="http://localhost:3000" //express服务器的地址 axios.get(url+'/product') //放数据的接口 .then(function (response) { //收到的数据 console.log(response); console.log(response.data); //展示数据（看看是否拿到，和数据长啥样） var nodeData=response.data; }) .catch(function (error) { console.log(error); }); axios没安装的记得装一下。（安装不细说） node（express）： 启动>>>npm start