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对象,以制止下边包车型客车失实。上边是呼吁接口的多少个例证
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,你会意识早已发出了网络伏乞
与此同时,数据也欢欣的回到回来了:
假虚构增加接口数据,继续在dev-server.js中加多就可以了,post,get等等都得以。
小心,每一遍更换dev-server.js后供给重新npm run dev运转项目
如上便是本文的全部内容,希望对大家的读书抱有扶助,也希望大家多多协助脚本之家。