sp+jquery（非vue）项目中怎样正常使用vue组件如何调接口

第一步：写一个request拦截器，并在项目中或者首页引入

这是我写的：jsp+jquery项目中正常使用vue组件并调用接口封装的request拦截器-互联网文档类资源-优快云下载

我写得js文件需要注意的是，下面这些地方需要根据你们自己和后台约定的情况而定：

 

 第二步：创建一个api申明的js文件，内容如下

var api= {
    //更新接口
    update: function (query) {
        return request({
            url: `XXX`,
            method: "post",
            // config: true,
            data: query,
            transformRequest: [
                function (data) {
                    let ret = ''
                    for (let it in data) {
                        ret += encodeURIComponent(it) + '=' +         
                          encodeURIComponent(data[it]) + '&'
                    }
                    ret = ret.substring(0, ret.lastIndexOf('&'));
                    return ret
                }
            ],
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        })
    },
   //拉取列表接口
    getList:function (query) {
        return request({
            url: `XXX`,
            method: "get",
            params:query,
        })
    },
}

 第三步：在指定项目或者在首页引用上面的文件，引入之后，使用如下

       var params = {}  //对应的参数
       api.getList(params).then(res => {
            //业务逻辑处理
            let {page} = res.data;
            let records= page.list
            records = records==null?[]:records
            records.forEach((n,index)=>{
                n.order = index+1;
            });
            this.tableData = records
            this.paginationOpt.total = page.totalResults;
           }).catch((res)=>{
                 //异常处理
               alert(res.erroMessage)
          })

 

如果不知道怎么引用vue组件看这篇文章： 

干货：jsp+jquery（非vue）项目中怎样正常使用vue组件_-敏敏特穆尔-的博客-优快云博客