前端沒有後臺時需要使用mock情況
阿新 • • 發佈：2019-01-20
當前時間20180409
npm install [email protected] [email protected] --save-dev
一定要加上版本 因為koa2 需要最新的node 7.6以上才可以支援
var app = require('koa')();
var router = require('koa-router')();
// 訂單列表
const orderList = require('./orderlist/orderList.js')
router.get('/api/orderlist/:username', function *(next) {
console.log('訂單列表')
const params = this.params
const username = params.username
console.log('使用者名稱：' + username)
this.body = orderList
})
// 開始服務並生成路由
app.use(router.routes())
.use(router.allowedMethods());
app.listen(3000);
post請求
formdata: ?name=iwen&age=20
x-www-form-urlencode: {name: iwen,age:20}
qs 可以把下邊的xhr格式轉化為formdata格式
qs.stringify
vue2.0 推薦使用 axios
axios安裝 npm install axios --save 需要在生產環境中使用 所以不加入dev
在vue中axios 需要被掛在到vue的原型鏈上
Vue.prototype.$axios = Axios
GET請求
axios.get('/user?ID=12345')
或
axios.get('/user', {
params: {
ID: 12345
}
})
then。。。
POST請求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
then。。。
axios擁有攔截器 這使得你在傳送請求和接受資料的時候都可以取到和後臺互動的資料流
// 新增請求攔截器
Axios.interceptors.request.use(function(config) {
if (config.method == "post") {
config.data = qs.stringify(config.data)
}
return config;
}, function(error) {
// 對請求錯誤做些什麼
return Promise.reject(error);
});
// 新增響應攔截器
Axios.interceptors.response.use(function(response) {
return response;
}, function(error) {
// 對響應錯誤做點什麼
return Promise.reject(error);
});
這裡使用了qs 這個內建的一個模組 該模組不需要安裝 可以讓你的引數不需要穿的那麼痛苦 正常傳參就可以了
使用vue的 config中index proxy這個變數
proxyTable: {
'/api': {
target: 'http://localhost:3000',
secure: false
}
},
這個變數是vue2.0內建的webpack 中的proxy 這個代理屬性 可以再開發環境中實現跨域 但是 在真正的生產環境中不可以這樣做 生產環境讓
後臺來處理跨域
這種最好要在main.js中宣告一個全域性的host 這樣在$axios url使用的時候可以統一的用this.HOST來呼叫 在生產環境的時候要把這行賦值為
空
Vue.prototype.HOST = '/apis'
npm install [email protected] [email protected] --save-dev
一定要加上版本 因為koa2 需要最新的node 7.6以上才可以支援
var app = require('koa')();
var router = require('koa-router')();
// 訂單列表
const orderList = require('./orderlist/orderList.js')
router.get('/api/orderlist/:username', function *(next) {
console.log('訂單列表')
const params = this.params
const username = params.username
console.log('使用者名稱：' + username)
this.body = orderList
})
// 開始服務並生成路由
app.use(router.routes())
.use(router.allowedMethods());
app.listen(3000);
post請求
formdata: ?name=iwen&age=20
x-www-form-urlencode: {name: iwen,age:20}
qs 可以把下邊的xhr格式轉化為formdata格式
qs.stringify
vue2.0 推薦使用 axios
axios安裝 npm install axios --save 需要在生產環境中使用 所以不加入dev
在vue中axios 需要被掛在到vue的原型鏈上
Vue.prototype.$axios = Axios
GET請求
axios.get('/user?ID=12345')
或
axios.get('/user', {
params: {
ID: 12345
}
})
then。。。
POST請求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
then。。。
axios擁有攔截器 這使得你在傳送請求和接受資料的時候都可以取到和後臺互動的資料流
// 新增請求攔截器
Axios.interceptors.request.use(function(config) {
if (config.method == "post") {
config.data = qs.stringify(config.data)
}
return config;
}, function(error) {
// 對請求錯誤做些什麼
return Promise.reject(error);
});
// 新增響應攔截器
Axios.interceptors.response.use(function(response) {
return response;
}, function(error) {
// 對響應錯誤做點什麼
return Promise.reject(error);
});
這裡使用了qs 這個內建的一個模組 該模組不需要安裝 可以讓你的引數不需要穿的那麼痛苦 正常傳參就可以了
使用vue的 config中index proxy這個變數
proxyTable: {
'/api': {
target: 'http://localhost:3000',
secure: false
}
},
這個變數是vue2.0內建的webpack 中的proxy 這個代理屬性 可以再開發環境中實現跨域 但是 在真正的生產環境中不可以這樣做 生產環境讓
後臺來處理跨域
這種最好要在main.js中宣告一個全域性的host 這樣在$axios url使用的時候可以統一的用this.HOST來呼叫 在生產環境的時候要把這行賦值為
空
Vue.prototype.HOST = '/apis'