axios

前段时间写了一篇 前端vue项目实现mock数据方式 的文章，主要是在vue项目里使用mock数据，数据和项目耦合在一起，不太优雅，作为一个有追求的前端，怎么能容忍这种方法呢？特以此篇，记录利用koa2搭建服务端，提供mock数据的方法。 初始化vue项目 这里以vue项目为主，当然别的类型项目依然可以使用这种mock数据的方式。 vue create vue-koa2-demo 复制代码 前提是安装了vue-cli的脚手架，我电脑安装的是vue-cli3的版本。按照要求一步一步选择后，记得选择安装vuex，后续要使用，启动项目。 koa2项目初始化 前端项目弄好之后，开始安装koa mkdir koa-demo cd koa-demo npm koa koa-router koa-cors 复制代码 安装工作完成后，在项目根目录下新建一个server.js. let Koa=require( 'koa' ) let Router=require( 'koa-router' ) let cors=require( 'koa-cors' ) let fs=require( 'fs' ) const app=new Koa() const router=new Router() router.get( '/getData' ,async ctx=>{ // 允许cors跨域请求

默认vue项目中已经安装axios，基于element-ui开发，主要记录配置的相关。 axiosConfig.js import Vue from 'vue' import axios from 'axios' import qs from 'qs' import { Message, Loading } from 'element-ui' // 响应时间 axios.defaults.timeout = 5 * 1000 // 配置cookie // axios.defaults.withCredentials = true // 配置请求头 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8' // 静态资源 Vue.prototype.$static = '' // 配置接口地址 axios.defaults.baseURL = '' var loadingInstance // POST传参序列化(添加请求拦截器) axios.interceptors.request.use( config => { loadingInstance = Loading.service({ lock: true , text: '数据加载中，请稍后...

大文件上传 前端实现 使用vue+elementui进行前端开发, 实现在dialog中 带进度条的上传大文件页面 <el-form :model="ruleForm" ref="ruleForm" :label-width="formLabelWidth" :rules="theRules" > <el-form-item prop="jar" :label-width="formLabelWidth"> <label slot="lable" style="font-weight: lighter">上传文件</label> <el-upload ref="upload" action="" :http-request="handleFile" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :on-change="handleChange" :multiple="false" :limit="1" :file-list="fileList" accept=".tar"> <el-button slot="trigger" size="small" type="primary" :disabled="fileButtonDisabled">选择应用包</el

一、概述 二、构建项目 npm run build 将项目打包，默认会生成一个dist目录，构建工具会将整个项目路打包成HTML、CSS和JS文件。 然后将这些静态文件直接放在服务器中。 三、配置 vue.config.js 文件 四、课后题 完成一个学生管理系统： 需求 学生的添加、删除、修改功能。 可以设置学生的成绩。 功能开发完成后，部署到Koa服务器中。 技术要求 UI框架使用elementUI。 数据交互使用Axios 后台使用Koa。 数据存储在后台的内存中（使用变量存储数据）。 【融职教育】在工作中学习，在学习中工作 来源： oschina 链接： https://my.oschina.net/u/4125915/blog/4320373

为什么要提高代码扩展性 我们写的代码都是为了一定的需求服务的，但是这些需求并不是一成不变的，当需求变更了，如果我们代码的扩展性很好，我们可能只需要简单的添加或者删除模块就行了，如果扩展性不好，可能所有代码都需要重写，那就是一场灾难了，所以提高代码的扩展性是势在必行的。怎样才算有好的扩展性呢？好的扩展性应该具备以下特征: 需求变更时，代码不需要重写。 局部代码的修改不会引起大规模的改动。有时候我们去重构一小块代码，但是发现他跟其他代码都是杂糅在一起的，里面各种耦合，一件事情拆在几个地方做，要想改这一小块必须要改很多其他代码。那说明这些代码的耦合太高，扩展性不强。 可以很方便的引入新功能和新模块。 怎么提高代码扩展性？ 当然是从优秀的代码身上学习了，本文会深入 Axios ， Node.js ， Vue 等优秀框架，从他们源码总结几种设计模式出来，然后再用这些设计模式尝试解决下工作中遇到的问题。本文主要会讲 职责链模式 ， 观察者模式 ， 适配器模式 ， 装饰器模式 。下面一起来看下吧： 职责链模式 职责链模式顾名思义就是一个链条，这个链条上串联了很多的职责，一个事件过来，可以被链条上的职责依次处理。他的好处是链条上的各个职责，只需要关心自己的事情就行了，不需要知道自己的上一步是什么，下一步是什么，跟上下的职责都不耦合，这样当上下职责变化了，自己也不受影响

前言 最近没时间写博客，只好把以前写的博客整理到自己的博客网站上去 跨域 跨域解决的方案有好几种，熟练掌握 CORS 就行了，并晓得一些原理。 jsonp 基本告别了，了解即可。 将前端的域与后端保持一致就行了，通过 nginx 代理转发。 什么情况下会跨域呢？ 跨域是指从一个源去请求另一个源的资源，浏览器基于完全考虑并遵循同源策略，禁止跨域访问。 但是我们可以通过一些手段 JSONP 或者 CORS 来实现跨域。 <font color=red>跨域只会发生在浏览器中，后端服务之间的接口调用是没有跨域一说的。</font> 简单理解：当 url 中的协议/域名/端口不同时，就产生了跨域。 跨域的解决方案？ nginx 反向代理，将请求的接口全部转发就行了 jsonp cors nginx 反向代理解决跨域 location /api { proxy_pass http://192.168.202.50:8082/; } 匹配 url 中以 /api 开头的路径 http://192.168.202.50:8081/api --> http://192.168.202.50:8082 http://192.168.202.50:8081/api/users/2 --> http://192.168.202.50:8082/users/2 来自 8081 的页面请求了 /api

要搞一个小型的cms内容发布系统 因为小程序上线之后，直接对数据库进行操作的话，慧出问题的，所以一般都会做一个管理系统，让工作人员通过这个管理系统来对这个数据库进行增删改查 微信小程序其实给我们提供了这样的能力了 （也就是可以在自己已有的服务器来进行云操作，所以就可以通过这个CMS内容管理系统来对云数据库进行修改） 我们就要建立自己的web服务器--》搭建一个简易的服务器 https://koa.bootcss.com/ 这个是要node版本是7以上，可以在node官网去搭建，我这边之前按照过了，直接cmd打开，通过 node -v查看版本 然后还要下载一个 cnpm，这个主要是下载第三方模块用的 https://www.cnblogs.com/biglovevolcaner/p/6707746.html 打开cmd，直接输入这位大佬博客里面的语句进行安装即可了 这些都准备好了之后，就可以开始koa2的服务器搭建了 我们选择koa的脚手架 koa-generator https://blog.csdn.net/sinat_39049092/article/details/104575018 （跟这个博客到第三步就行） 然后我们就可以到想要搭建系统的文件中（我在d盘新建了一个weapp文件） 在cmd中输入 D:\weapp 之后输入 d：即可跳转 输入 koa2 miaomiao

后台返回的是 ResponseEntity< byte []> 格式 1、需要加参数，header的，如下，如果不需要这些，可去掉 export const getFileExport = async (url) => { const headers = await getHeaders () ; return await axios . get (url , { //downloadFiles 接口请求地址 params : { user : sessionStorage . getItem ( TOKEN_SESSION_CONFIG . USER )} , headers : headers , responseType : 'blob' }). then ((rs) => { const blob = new Blob ([rs. data ] , { type : "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }) const fileName = " 用户导入模板 .xlsx" ; if ( 'download' in document . createElement ( 'a' )) { // 非 IE 下载 const elink = document .