axios | 易学教程

How to use Vue.prototype or global variable in Vue 3?

阅读更多关于 How to use Vue.prototype or global variable in Vue 3?

问题 Like the title, I want to add Axios into Vue prototype. So when I want to use it, I can use it like this.$axios instead of importing it every time. CODE: //plugins/axios.ts import axios from 'axios' import router from '../router/index' const errorHandle = (): void => {}; const instance = axios.create({ // baseURL: process.env.NODE_ENV == 'development' ? '' : '' baseURL: 'http://localhost:3000', timeout: 1000 * 12 }); instance.defaults.headers.post['Content-Type'] = 'application/x-www-form

基于react/vue开发一个专属于程序员的朋友圈应用

阅读更多关于基于react/vue开发一个专属于程序员的朋友圈应用

前言今天本来想开源自己写的 CMS 应用的，但是由于五一期间笔者的 mac 电脑突然崩溃了，所有数据无法恢复，导致部分代码丢失，但庆幸的是 cms 的打包文件已上传服务器，感兴趣的朋友可以在文末链接中访问查看。今天要写的 H5朋友圈也是基于笔者开发的 cms 搭建的，我将仿照微信朋友圈，带大家一起开发一个能发布动态（包括图片上传）的朋友圈应用。有关服务端部分笔者在本文中不会细讲，后续会在 cms2.0 中详细介绍。你将收获使用 umi 快速创建一个H5移动端应用基于 react-lazy-load 实现图片/内容懒加载使用 css3 基于图片数量动态改变布局利用FP创建一个朋友圈form 使用 rc-viewer 查看/旋转/缩放朋友圈图片基于 axios + formdata 实现文件上传功能 ZXCMS 介绍应用效果预览朋友圈列表查看朋友圈图片发布动态正文在开始文章之前，笔者想先粗略总结一下开发H5移动端应用需要考虑的点。对于任何移动端应用来说，我们都要考虑如下问题：首屏加载时间适配问题页面流畅度动画性能交互友好提供用户反馈这些不仅仅是前端工程师需要考虑的问题，也是产品经理和交互设计师考虑的范畴。当然还有很多实际的考虑点需要根据自身需求去优化，以上几点大致解决方案如下：提高首屏加载时间可以采用资源懒加载+gzip

Vue elementUi input查询、el-table数据表、el-pagination分页的使用

阅读更多关于 Vue elementUi input查询、el-table数据表、el-pagination分页的使用

<template> <div> <el-input v-model="input" placeholder="请输入关键字"></el-input> <el-table ref="multipleTable" :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" > <el-table-column type="selection" width="55"></el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"></el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table

Vue.js

阅读更多关于 Vue.js

这个星期把Vue学习了一下。Vue.js是对JavaScript进行了封装，语法风格和小程序很像，比如双大括号{{}}都是插值表达式。也许它们有相互借鉴的地方，所以说只要熟悉了一门语言，再学习其他语言就会融会贯通。 Vue的官方文档是https://cn.vuejs.org/v2/guide/ W3c的教程是https://www.w3cschool.cn/vuejs/ 简单的教程就不说了，这里我搭建了一个springboot+vue的工程，通过axios动态请求获取数据然后显示在table里效果工程结构 SpringBoot的搭建过程我就不说了，详见我的博客https://www.cnblogs.com/anni-qianqian/p/11270229.html 前端代码如下 user.html <!DOCTYPE html> < html > < head > < meta charset = "UTF-8" > < title > v-fot遍历对象 </ title > < script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > </ script > < script src = "https://unpkg.com/axios/dist/axios.min.js" > </ script > </

axios 跨域 sessionid 每次访问不一致的问题

阅读更多关于 axios 跨域 sessionid 每次访问不一致的问题

百度一晚上，都是说要设置 axios.defaults.withCredentials=true; 然后在controller 上加上 @CrossOrigin(origins = "http://localhost:9080", maxAge = 3600) 其实根本不好用，还少一个参数 allowCredentials = "true" 下面这样才行因为 allowCredentials 默认是 "false" @CrossOrigin(origins = "http://localhost:9080", maxAge = 3600,allowCredentials = "true") 来源： oschina 链接： https://my.oschina.net/u/2623727/blog/1930452

Vue中axios踩坑之路-POST传参

阅读更多关于 Vue中axios踩坑之路-POST传参

刚开始使用Vue，里面的坑是一个接一个，今天就遇到一个axios POST传参的问题，我需要在请求中传递参数，然后按官方文档的格式开始操作，代码如下： axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 注：此处是官方示例：点击打开链接打开控制台，报400，报错信息是：传递的参数不存在，但在请求中看的到参数，只是参数的格式是Request Payload，具体也没看懂是什么，总之知道就是参数格式不对，查阅资料找到两种解决办法，代码如下： 1. var qs = require('qs'); axios.post('/foo', qs.stringify({ 'bar': 123 })); 2. var params = new URLSearchParams(); params.append('param1', 'value1'); params.append('param2', 'value2'); axios.post('/foo', params); 参考：https://github

axios请求接口的踩坑之路

阅读更多关于 axios请求接口的踩坑之路

1、跨域问题除了前端安装插件还需要后端php设置，设置如下 Access-Control-Allow-Headers: Origin, X-Requested-With, Content- Type, Accept, token Access -Control-Allow- Methods: OPTIONS,POST Access -Control-Allow-Origin: * 如果设置以后还不行，那就是phptinkp5带来的bug，查下文档即解决！！！！ 2、使用axios（跨域）请求接口的时候，发现会同时请求2次接口，一次是post/get请求一次是options. 这个是由于浏览器会先进行一次预请求，看所求的接口是否可以请求，如果可以就会进行真正的请求（post/get）！！ 3、使用axios（跨域）请求接口的时候会出现发送给后端的数据是object的格式！后端会接收不到参数解决方法如下，引用qs进行全局参数转换设置！！！！来源： oschina 链接： https://my.oschina.net/u/4267631/blog/3680897

vue.js 使用axios实现下载功能

阅读更多关于 vue.js 使用axios实现下载功能

Ajax无法下载文件的原因浏览器的GET(frame、a)和POST(form)请求具有如下特点： response会交由浏览器处理 response内容可以为二进制文件、字符串等 Ajax请求具有如下特点： response会交由Javascript处理 response内容仅可以为字符串因此，Ajax本身无法触发浏览器的下载功能。 Axios拦截请求并实现下载为了下载文件，我们通常会采用以下步骤：发送请求获得response 通过response判断返回是否为文件如果是文件则在页面中插入frame 利用frame实现浏览器的get下载我们可以为axios添加一个拦截器： import axios from 'axios' // download url const downloadUrl = url => { let iframe = document.createElement('iframe' ) iframe.style.display = 'none' iframe.src = url iframe.onload = function () { document.body.removeChild(iframe) } document.body.appendChild(iframe) } // Add a response interceptor axios

ElementUI tree的取值与回显

阅读更多关于 ElementUI tree的取值与回显

ElementUI tree的取值与回显目的场景一选择树的节点后，希望提交当前选中的节点，以及节点对应的父级节点。比如下面结构，当我选中字典管理时，我希望能够获取到的ids = [1,2,3] { "id": "1", "label": "资源", "type": "menu", "children": [ { "id": "2", "label": "系统设置", "type": "menu", "children": [ { "id": "3", "label": "字典管理", "type": "menu", "children": [] }, { "id": "4", "label": "公共配置", "type": "menu", "children": [] } ] } ] } 场景二回显处理：将上述数据回显时，默认情况会选中所有，因为elementui的树是根据父级的选中状态自动选中所有子节点。解决方案场景一思路提交时获得最底层的选中节点；可以通过遍历子节点，分别获取父级节点标识；需要利用递归。相关代码 // 获取完全选中的节点 var treeKeys = this.$refs.tree2.getCheckedKeys() // 最终选中的包括半选中的节点数组 var ids = [] // 调用获取所有节点的方法 this

vue + element 图片上传

阅读更多关于 vue + element 图片上传

vue-cli3 + element 图片上传，图片上传前验证格式，自定义上传; el-upload组件 <el-upload class="upload-demo" action="/uploadImg" :file-list="bankImgList" list-type="picture" :http-request="uploadAccountBank" :before-upload="beforeUpload"> <el-button type="primary">点击上传</el-button> </el-upload> 验证图片格式 // 上传图片前的验证只能是jpg格式的图片 beforeUpload(file) { const isJpg = file.type === 'image/jpeg' ? true : file.type === 'image/jpg' ? true : false; if (!isJpg) { this.$message.error('请选择jpg或jpeg格式的文件!'); } return isJpg; }, 上传 async function uploadImage(a) { // 图片是否上传成功 let uploadSuccess = false; // 图片id let id = 0; let fromData = new

订阅 axios