一、原项目结构
- 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)
},
}