威尼斯人线上娱乐

选用mock数据的演示代码,消除vue中使用Axios调用接口时出现的ie数据管理难题

11 8月 , 2019  

1.先用node+express+mysql简单布署一下后台

1.问题

本文介绍了vue 运用mock数据的演示代码,分享给大家,具体如下:

近些日子告诉项目需求,用到了vue。

const express = require('express');
const mysql = require('mysql');
const static = require('express-static');

const db = mysql.createPool({
  host: 'localhost',
  user: 'nodejs',
  password: 'nodejs',
  database:'resume',
  port: 3306
});

var app = express();
// ====》设置了一个 /resume 的接口,并将从数据库获取的数据data,send到前台(接口名字随便取的)
app.use('/resume', (req, res)=>{
  db.query(`SELECT * FROM about_table`, (err, data)=>{
    "use strict";
    if(err){
      res.status(500).send('databases error').end();
    }else{
      res.send(data).end();
    }
  })

})

app.listen(8080);
app.use(static('./static/'));

最近几年在利用vue2 + axios
调用接口时遭遇三个IE中很奇葩的难题,让小编看不惯了比较久。

早先化你的项目

刚开始搭框架的时候用的是vue-resource后边看到官方推荐axios就换过来了
顺便封装了弹指间

2. 前台央浼接口,调用数据来渲染页面(vue + vue-resource)

废话不多扯,正是在其余浏览器中调用接口重回数据然后可以很顺畅的进行拍卖,但在IE(9-11)中开掘发送哀告是打响的还要也能抓到服务端再次来到来的数量。却发今后拍卖重返来的数目标时候管理的多少难点,怎么搞即是十二分。

话不用啰嗦,首先开头化你的档期的顺序,最简易的正是选择vue-cli啦

//引入axios
import axios from 'axios'

let cancel ,promiseArr = {}
const CancelToken = axios.CancelToken;
//请求拦截器
axios.interceptors.request.use(config => {
 //发起请求时,取消掉当前正在进行的相同请求
 if (promiseArr[config.url]) {
  promiseArr[config.url]('操作取消')
  promiseArr[config.url] = cancel
 } else {
  promiseArr[config.url] = cancel
 }
  return config
}, error => {
 return Promise.reject(error)
})

//响应拦截器
axios.interceptors.response.use(response => {
 return response
}, error => {
 return Promise.resolve(error.response)
})

axios.defaults.baseURL = '/api'
//设置默认请求头
axios.defaults.headers = {
 'X-Requested-With': 'XMLHttpRequest'
}
axios.defaults.timeout = 10000

export default {
 //get请求
 get (url,param) {
  return new Promise((resolve,reject) => {
  axios({
   method: 'get',
   url,
   params: param,
   cancelToken: new CancelToken(c => {
   cancel = c
   })
  }).then(res => {
   resolve(res)
  })
  })
 },
 //post请求
 post (url,param) {
  return new Promise((resolve,reject) => {
  axios({
   method: 'post',
   url,
   data: param,
   cancelToken: new CancelToken(c => {
   cancel = c
   })
  }).then(res => {
   resolve(res)
  })
  })
  }
 }

===》
js                                                                                                                 

2.管理进程及方法

vue init webpack

说明

  // 引入 vue
<script src="//cdn.bootcss.com/vue/2.1.0/vue.js" type="text/javascript" charset="utf-8"></script>
// 引入 vue-resource                                                    <script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.js" type="text/javascript" charset="utf-8"></script>
<script>
  window.onload = function () {
   new Vue({
     el: '#demo',
     data:{
      aboutData:[] //建一个空数组,用来保存调用接口获取的数据
     },
     created: function () {
      this.getRoute()
     },
     methods: {
      getRoute: function () {
        var that = this; 
        that.$http({
         method: 'GET',
         url: '/resume' //这里填写刚刚后台设置的接口
        }).then(function(response){
         this.aboutData = response.data; // promise的then成功之后,将response返回的数据data,保存到aboutData数组里
        },function (error) {
         console.log(error);
        })
      }
     }

   })
  }
</script>

小编利用了console大法去化解那一个难点,具体是这么的:作者先将服务器再次来到过来的数目打字与印刷到浏览器调控台,结果开采都能打字与印刷出来,那一年就郁闷了,明明有数据为何在IE上只怕极其吗,于是自身用typeOf
来查阅重返数据的门类发掘axios在IE时管理的回到数据竟然是string类型。那下化解措施就出来了。

引入mock.js

1、为严防发起呼吁时,当前正在张开的平等央求,在央浼拦截器中参与了hash判别,将同一诉求url拦截

威尼斯人线上娱乐 ,===》 html

var newData;

if (typeOf data === 'string') {

newData = JSON.parse(data)

} else {

 newData = data

}

安装 mockjs

2、将axios中get,post公共配置抽离出来

<div id="demo">
  <div class="item" v-for="value in aboutData"> // v-for 遍历数组后,即可将数据以{{value.xxx}}的方式渲染出来
    <h2>{{value.title}} {{value.name}}</h2>
    <p>{{value.content}}</p>
  </div>
</div>

下一场对newData实行拍卖就能够化解了。

npm install --save-dev mockjs
axios.defaults.baseURL = '/api'
//设置默认请求头
axios.defaults.headers = {
 'X-Requested-With': 'XMLHttpRequest'
}
axios.defaults.timeout = 10000

如上正是本文的全体内容,希望对大家的学习抱有帮忙,也可望大家多多帮助脚本之家。

如上那篇解决vue中使用Axios调用接口时现身的ie数据管理难点便是作者分享给我们的全部内容了,希望能给我们贰个参照,也期待我们多多扶助脚本之家。

选用mock数据的演示代码,消除vue中使用Axios调用接口时出现的ie数据管理难题。引进到Vue原型上,方便使用

3、get,post乞请的封装
只怕您会问,这里的axios重回的正是promise对象,为何还要再一次对get,post封装叁回promise.因为笔者那边的话,在开垦中利用async
await会产出数量央求失败的事态,报的错正是回到的不是promise对象。(ps:可async
await再次来到的正是promise呀,那一个难点持续再搞一下)就直接return了一个promise对象,以制止下边包车型客车失实。上边是呼吁接口的多少个例证

你可能感兴趣的小说:

  • vue怎么着从接口乞求数据

你大概感兴趣的篇章:

  • vue-cli
    axios供给格局及跨域管理难题
  • vue使用axios跨域乞请数据难题详解
  • vue2.0
    axios前后端数据管理实例代码
  • 消除vue第22中学使用axios
    http诉求出现的标题
 import mockjs from 'mockjs'
 Vue.prototype.$mock = Vue.$mock = mockjs.mock
import req from '../api/requestType'
/**
 * 拼团详情
 */
export const groupDetail = param => {
 return req.get('/RestHome/GroupDetail',param)
}

如上引进到Vue原型上,能够选择 this.$mock直接发生mock数据

上面是数量的收获

请看这里Vue.prototype

async getData() {
 const params = {
  TopCataID: 0,
  pageNumber: this.pageNumber,
  pageSize: this.pageSize
 }
 const res = await groupList(params)
},

请看这里mockjs

到此处大家就概括的包装了一晃相符本人项目标axios

在项目支出中,前后台分离,做了假数据,项目采纳vue2.0重构,后台也推到重来了,为了不推延开垦进程,作者做了设想的多少央求,使用vue-cli脚手架搭建的花色文件中dev-server搭建虚构api伏乞,访问自身mock的假数据虚构哀告后台的形式,具体做法如下

装进理由:

在build/dev-server.js文件中

1、能够和后端商讨好错误码在那统一提醒统一管理,省去不须求的分神

在var app = express()那么些实例的上边增加如下代码

2、如果做接口全报文加解密都得以在此管理

// 本地json-server服务器搭建代码
// 引入数据库文件
var appData = require('../mock.json')
// 引入数据库
var getBoardList = appData.getBoardList
var apiRoutes = express.Router()
// 使用api的方法来创建连接时候的请求
apiRoutes.post('/getBoardList', function (req, res) {
 res.json({
 errno: 0 ,
 data: getBoardList
 });
})
// 调用api
app.use('/api', apiRoutes)

接口统一归类: 

里头 appData
重视的mock.json文件是团结mock的假数据的文本,依照前后台须求和谐mock或然应用mock.js制作假数据

const serviceModule = { 
 getLocation: { 
 url: ' service/location/transfor', 
 method: 'get' 
 } 
} 
const ApiSetting = {...serviceModule } 

export default ApiSetting 

getBoardList是贰个接口,var getBoardList = appData.getBoardList
就是在appData定义了那三个接口数据。

分拣好处:

var apiRoutes = express.Router()
是创办了三个api的路由,apiRoutes.post是创办三个post接口,那几个post接口有贰个req和多少个res参数,分别实行乞求和重返,当再次回到的时候会给大家一个json,那么些json包蕴三个气象码errno和重回的数量data(data指向了接口数据getBoardList)。

1、早先时期接口晋级大概接口名转移便于维护

下一场当大家调用api的时候app.use(‘/api’,
apiRoutes),就会寻常使用这些服务了

http调用:

此间自个儿动用了vue2.0推荐介绍的axios须求数据,代码如下

<script> 
import http from "../../lib/http.js"; 
import ApiSetting from "../../lib/ApiSetting.js"; 
export default { 
 created: function() { 
 http(ApiSetting.getLocation,{"srChannel": "h5",}) 
 .then((res)=>{ 
  console.log(res) 
 },(error)=>{ 
  console.log(error)  
 }) 
 }, 
 methods: { 

 } 
} 
</script> 
this.$http.post('/api/getBoardList')
 .then(function (response) {
  console.log(response.data.data);
  alert('成功了');
 })
 .catch(function (code) {
  alert('失败了');
  console.log(code);
 });

上述就是本文的全体内容,希望对大家的就学抱有辅助,也冀望大家多多帮忙脚本之家。

开采浏览器的调控台的network,你会意识早已发出了网络伏乞

您恐怕感兴趣的稿子:

  • 详解Vue 2.0封装axios笔记
  • vue 里面使用axios
    和包装的示范代码
  • 浅谈在Vue-cli里基于axios封装复用诉求
  • Vue二回封装axios为插件使用详解
  • vue 2.x 中axios 封装的get
    和post方法
  • vue2.0学习之axios的卷入与vuex介绍
  • 详解vue中axios的封装
  • vue中axios的包装难点(简易版拦截,get,post)
  • 详解vue axios一遍封装
  • vue中Axios的卷入与API接口的治本详解

威尼斯人线上娱乐 1

与此同时,数据也欢欣的回到回来了:

威尼斯人线上娱乐 2

假虚构增加接口数据,继续在dev-server.js中加多就可以了,post,get等等都得以。

小心,每一遍更换dev-server.js后供给重新npm run dev运转项目

如上便是本文的全部内容,希望对大家的读书抱有扶助,也希望大家多多协助脚本之家。

你也许感兴趣的篇章:

  • node+koa达成数量mock接口的法子
  • 客户端(vue框架)与服务器(koa框架)通讯及服务器跨域配置详解
  • 详解基于Vue+Koa的pm2配置
  • vue+mockjs模拟数据达成内外端分离开荒的实例代码
  • vue+vuecli+webpack中应用mockjs模拟后端数据的以身作则
  • vue-cli项目中怎么利用mock数据
  • 详解在vue-cli项目中动用mockjs(需要数据删除数据)
  • 详解vue-cli项目中用json-sever搭建mock服务器
  • 接纳vue + koa2 +
    mockjs模拟数据的方法教程


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图