//vue2
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.1/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script> //ajax
//ui样式
<link
href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.css"
rel="stylesheet"
/>
在写coloudCC的时候使用的就是index.html页面进行开发然后将样式,js以及html放到新建的cloudcc页面上,可以使用vue实现但是html不支持使用vue语法,js也同样只能使用原始ajax请求非常麻烦,cdk引入就解决了这一系列的麻烦
引入vue的时候引入就可以使用他的语法需要使用ui的话需要引入elemen-ui还有ui样式
适用ajax请求暂时只知道三种方式
1.vue-resource
引入cdn
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
语法使用:
//post方法
headers: { "Content-Type": "application/json" },
allocation() {
if (!this.custom || !this.customerContract.tableData.length) return;
let nowamount = this.customerContract.tableData.reduce(
(prev, item) => {
prev += Number(item.hkje);
return prev;
},
0
);
let data = {
water: this.custom,
plans: this.customerContract.tableData,
};
const httpRequestUrl = this.baseURL + "/collection/return";
Vue.http
.post(httpRequestUrl, data, { headers: this.headers })
.then((res) => {
window.close();
});
},
//get方法
getlist() {
const httpRequestUrl = this.baseURL + "/commission/getXsy";
let params = {
pageNUM: this.dialogPagination.page,
pageSize: this.dialogPagination.size,
};
Vue.http.get(httpRequestUrl, { params }).then((res) => {
this.table.tableData = res.data.data;
this.dialogPagination.total = res.data.totalCount;
this.setCurrentRow();
});
},
2.jquery
引入cdk
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
语法使用
// get
const _this = this
.ajax({
type: "GET",
url: _this.baseUrl + "/contract/getConractProductName/",
dataType: "json",
contentType: "application/json;charset=UTF-8",
success: function (ajaxResult) {
console.log(1111);
// if (ajaxResult.returnCode == 1) {
// _this.projectNameArr = ajaxResult.data;
// } else {
// _this.projectNameArr = [];
// _this.$message({
// type: "error",
// message: ajaxResult.returnInfo,
// });
// }
},
error: function (err) {
alert("发生错误:" + err.status);
},
});
//post
.ajax({
type: "POST",
url: _this.baseUrl + "/businOpport/addBusinOpport/",
dataType: "json",
contentType:"application/json;charset=UTF-8",
beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("binding", _this.getCookie("binding"));
},
data: JSON.stringify(data),
success: function (ajaxResult) {
_this.loading = false
if (ajaxResult.returnCode == 1) {
_this.$message({ type: 'success', message: "新增成功" })
setTimeout(()=>{
if(window.opener==null){
window.location.href = "/query.action?id=" + ajaxResult.data + "&m=query"
}else{
window.opener.location.reload();
window.close();
}
},1000)
}else{
_this.saveLoading = false
_this.$message({ type: 'error', message: ajaxResult.returnInfo })
}
},
error: function (err) {
_this.loading = false
_this.saveLoading = false
alert("发生错误:" + err.status);
}
});
3.axios
引入sdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
语法使用
// get请求
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
//post请求
参数一:地址,参数二 携带参数 参数三 请求携到其他的参数例如请求头
{
headers: {
'Content-Type': 'multipart/form-data; boundary=<calculated when request is sent>',
'binding': _this.getCookie("binding")
}
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
详情请看官方文档
axios
axios中文文档 (javasoho.com)
jqurey
jQuery ajax() 方法 | 菜鸟教程 (runoob.com)
vue-resource
vue-resource: The HTTP client for Vue.js (asprain.cn)