## Axios 使用方式
在根項目/src/main.js 進行全局引用
~~~
import Axios from "axios"
Vue.prototype.$axios = Axios
import qs from "qs"
Vue.prototype.HOST = '/v1'//調取跨域 config/index
~~~
~~~
//請求封裝
import helper from "../build/helper.js";
Vue.prototype.helper = helper
~~~
~~~
// 添加請求攔截器
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) {
if (response.status !== 200){
return;
}
// 對響應數據做點什么
return response;
}, function (error) {
// 對響應錯誤做點什么
return Promise.reject(error);
});
~~~~~~
```
new Vue({
router,
})
```
### 封裝Axios請求 創建 build/helper.js
~~~
import Vue from "vue";
import Axios from "axios" //引用 axios
import qs from "qs" //引用 axios
Vue.prototype.HOST = '/v1'//調取跨域 config/index
let localhosts = '/v1'; //版本
const md5 = require('./md5.min.js'); //引用MD5加密
const getnow = Date.now || function() {
return new Date().getTime();//獲取當前時間
};
export default {
//sing進行排序加密
setSign: function(options = []) {
options.sort();
let str = options.join("&");
return md5(str);
},
//獲取當前時間 11位
time:15,
now: function() {
let time = getnow();
return Math.ceil(time / 1000)
},
filters: {
//控制顯示字數
content:function(data,rs='10'){
let content = data.replace(/<[^>]+>/g,"");
let dataslice=content.slice(0,rs);
return dataslice+'...';
},
//時間戳轉換日期
parsetime:function(time, cFormat) {
if (arguments.length === 0) {
return null
}
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
time = parseInt(time)
}
if ((typeof time === 'number') && (time.toString().length === 10)) {
time = time * 1000
}
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
const value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
return value.toString().padStart(2, '0')
})
return time_str
}
},
//封裝Axios請求
req: function(options) {
let api = options.api == undefined ? "" : options.api;
let header = options.header ==undefined ?{}:options.header;
let data = options.data == undefined ? {} : options.data;
let method = options.method == undefined ? "POST" : options.method;
let timestamp = options.timestamp ==undefined ?"":options.timestamp;
let sign = options.sign ==undefined ?"":options.sign;
//對參數進行處理
return new Promise((reslove, reject) => {
Axios({
method: method,
header: header,
url:localhosts+api+'?timestamp='+timestamp+'&sign='+sign,
data: data
})
.then(res =>{
if (res.data.message == undefined) {
this.open3('請求異常')
return;
}
//發送成功
if (res.data.message == 'ok') {
reslove(res);
} else {
this.open3('操作異常')
return;
}
})
.catch(error =>{
console.log(error)
//this.open3(error)
return;
});
});
},
}
~~~
- 湖北速建時代平
- 后臺功能簡介
- 網站配置管理
- 欄目管理
- 文檔管理
- 權限管理
- vue如何使用api使用
- vue安裝
- vue設置跨域
- 使用Axios請求數據
- Axios在vue中配置
- 封裝Axios請求使用方式
- 模塊封裝引用
- 安裝Element
- 速建速度cms操作指南
- 如何創建欄目
- 普通圖文發文操作
- 文章外部跳轉
- 發布圖片集
- 視頻發布
- 文章審核
- 如何發布英文文章
- 首頁頭部圖片如何更換,二級頁面中的大圖如何修改
- 網站備份
- oss配置
- api接口使用
- 第1章獲取網站配置
- 第2章獲取頭部導航
- 第3章獲取底部導航
- 第4章獲取文章列表
- 第5章 獲取sign簽名
- 第6章 文章檢索
- 第7章獲取當前欄目詳情及子欄目