//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)