一、原項目結構
- html
- css
- js
- images
- font
沒有項目管理工具
二、技術棧
js + jquery
三、需求
在老項目的基礎上，增加新的頁面。
由於jquery玩的不熟，且包比較重，所以想加入vue來改造成自己習慣的技術棧
四、改造後的頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>創建訂單</title>
<link rel="stylesheet" href="./css/creatOrder.css">
</head>
<body>
<div id="app">
被vue管理的內容
</div>
</body>
<!-- js要在dom以後引入，否則獲取不到dom節點 -->
// 引入vue並且創建vue實例，就可以使用vue了
<script src="./js/vue.min.js"></script>
// 使用axios發送請求（一下三個配合） 參考博客：https://www.cnblogs.com/dreamcc/p/10752604.html
<script src="./js/axios.min.js"></script>
<script src="./js/qs.js"></script>
<script src="./js/request.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
},
mounted: function () {
var data = {
planId: 123456,
xyId: 123456
}
request.getList(Qs.stringify(data), function (res) {
console.log(res);
})
},
methods: {
}
})
</script>
</html>
五、request.js 接口文件
// axios配置
var token = getCookie('token');
// 創建axios實例，並且對請求進行自定義改造
var instance = axios.create({
baseURL: url(),
timeout: 30000,
headers: {
'x-token': token,
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
});
// 所有請求統一對象
var request = {
// 封裝axios的get
_get: function (url, callback) {
var requestObj = instance;
var requestUrl = '/api/' + url;
if (url.indexOf('http') == 0) {
requestObj = axios;
requestUrl = url;
}
requestObj.get(requestUrl).then(function (response) {
if (response && response.data) {
if (callback) {
// console.log(response.data)
callback(response.data)
}
}
}).catch(function (error) {
if (error.response) {
} else if (error.request) {
console.log(error.request)
} else {
alert('Error', error.message)
}
})
},
// 封裝axios的post
_post: function (url, data, callback) {
var requestObj = instance;
var requestUrl = '/api/' + url;
if (url.indexOf('http') == 0) {
requestObj = axios;
requestUrl = url;
}
requestObj.post(requestUrl, data).then(function (response) {
if (response && response.data) {
if (callback) {
// console.log(response.data)
callback(response.data)
}
}
}).catch(function (error) {
if (error.response) {
console.log(error.response)
} else if (error.request) {
console.log(error.request)
} else {
console.log('Error', error.message)
}
})
},
// 測試接口
getList: function (data, callback) {
this._post("order/list", data, callback)
},
}