首页 前端知识 写cloudCC/index.html可能使用到的cdk引入(vue element-ui jquery/vue-ajax)

写cloudCC/index.html可能使用到的cdk引入(vue element-ui jquery/vue-ajax)

2024-05-18 18:05:19 前端知识 前端哥 805 388 我要收藏
//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)

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8742.html
标签
评论
发布的文章

video 自定义视频播放控件

2024-05-26 01:05:25

HTML5 画布绘制海报

2024-05-26 01:05:13

HTML5学习(三)

2024-05-26 01:05:43

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!