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

本文档详细介绍了如何在传统的jsp+jquery项目中引入和使用vue组件,以及如何设置request拦截器进行接口调用。首先,创建一个request拦截器,然后定义一个api声明文件,包括更新接口和获取列表接口的实现。接着,在项目中引用这个api文件,通过示例展示了如何调用接口并处理返回数据。此外,还提供了引用vue组件的教程链接。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

第一步:写一个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组件_-敏敏特穆尔-的博客-优快云博客

 


 

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值