小马超会养兔子 2023-04-06 04:27 采纳率: 72.7%
浏览 77
已结题

WPS加载项报Network Error

问题描述

我在写一个WPS的加载项,写到发送请求拿到数据,但是就是一直Network Error。然后我用同样的请求在另外一个普通的Vue项目中试了一下发现完全没问题。

img

img

相关代码

WPS加载项的

这是TaskPane.vue


<template>
  <div>
    
    <el-select v-model="value" placeholder="请选择" size="small">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
    <basic-search :keywords="keywords" v-on:search="search"></basic-search>
    <DocItem></DocItem>
    <DocItem></DocItem>

  </div>
</template>

<script>
...

export default {
  name: 'TaskPane',
  components: {DocItem, BasicSearch},
  methods: {
    ...
    search(keywords) {
      // alert(keywords);
      this.$axios({
        method: 'get',
        url: 'http://localhost:8080/myzproduct/getAllByTitle',
        params: {
          title: "iphone",
        }
      }).then(res=>{
        alert("suceess");
        alert(res.data);
        console.log(res.data);
      },err=>{
        alert("错误是" + err);
        console.log(err);
      })
    },
    ...
}
</script>

这是main.js


import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
// 完整引入,main.js写入以下代码
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'

Vue.use(ElementUI)
Vue.use(VueRouter)
Vue.prototype.$axios = axios
Vue.config.productionTip = false

const routerCfg= [
  {
    path: '/', 
    name: '默认页',
    component:()=>import('./components/Root.vue')
  },{
    path: '/taskpane', 
    name: '任务窗格',
    component:()=>import('./components/TaskPane.vue')
  }
]

new Vue({
  render: h => h(App),
  router: new VueRouter({routes:routerCfg}),
  created: function () {
    //
  }
}).$mount('#app')

这是package.json

{
    "name": "cyanfox_1",
    "addonType": "wps",
    "version": "1.0.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve --port 3889",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "axios": "^0.19.2",
        "core-js": "^3.6.4",
        "element-ui": "^2.15.13",
        "vue": "^2.6.11",
        "vue-router": "^3.1.3"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "~4.2.0",
        "@vue/cli-service": "~4.2.0",
        "vue-template-compiler": "^2.6.11",
        "wps-jsapi": "latest"
    },
    "eslintConfig": {
        "root": true,
        "env": {
            "node": false
        },
        "extends": [
            "plugin:vue/essential",
            "eslint:recommended"
        ],
        "parserOptions": {
            "parser": "babel-eslint"
        },
        "rules": {},
        "globals": {
            "wps": "readonly"
        }
    },
    "browserslist": [
        "> 1%",
        "last 2 versions"
    ]
}

这是vue.config.js


// const { defineConfig } = require('@vue/cli-service')
module.exports = {
    "publicPath": "",
    "productionSourceMap": false,
    devServer: {
        proxy: "http://localhost:8081" // 这里存放的是真正的服务器
    }
}

普通Vue项目的

这是vue.config.js


```javascript
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  //关闭eslint
  lintOnSave:false,
  devServer: {
    proxy: "http://localhost:8081" // 这里存放的是真正的服务器
  }
})

这是发送请求的

```javascript
mounted() {
    this.$axios({
      method: 'get',
      url: 'http://localhost:8080/myzproduct/getAllByTitle',
      params: {
        title: "iphone",
      }
    }).then(res=>{
      alert("suceess");
      alert(res.data);
      console.log(res.data);
    },err=>{
      alert("错误是" + err);
      console.log(err);
    })
  },

操作环境

Win11,2023.4.6为止最新的WPS,后端是用SSM写的

要求

请尽可能详细描述,采纳标准为我成功在WPS加载项中拿到数据

  • 写回答

4条回答 默认 最新

  • Excel效率人 2023-04-07 16:29
    关注

    你TaskPane.vue端口号是8080,后面的端口号是8081,不太懂vue,还是不行的话先用 jsonp 将就下,这里用wpsjs create HelloWps创建一个Excel加载项简单说明。
    nodejs后端代码,前提安装koa包

    const Koa = require('koa');
    const app = new Koa();
    const items = [{ id: 1, title: '“情人节讲屁话没用,让别人也单身”' }, { id: 2, title: '那年廿八,还是单身,站着如喽啰' }]
    
    app.use(async (ctx, next) => {
      if (ctx.path == '/api/jsonp') {
        const { cb, id } = ctx.query;
        const title = items.find(item => item.id == id)['title']
        ctx.body = `${cb}(${JSON.stringify({title})})`;
        return;
      }
    })
    console.log('示例链接: http://localhost:8080/api/jsonp?id=1&cb=jsonpCallback')
    app.listen(8080)
    

    在前端taskpane.html页面插入一个script标签输入以下代码,或者直接写js文件引入也可以。

    <script>
        function JSONP({
            url,
            params = {},
            callbackKey = 'cb',
            callback
        }) {
            // 定义本地的唯一callbackId,若是没有的话则初始化为1
            JSONP.callbackId = JSONP.callbackId || 1;
            let callbackId = JSONP.callbackId;
            // 把要执行的回调加入到JSON对象中,避免污染window
            JSONP.callbacks = JSONP.callbacks || [];
            JSONP.callbacks[callbackId] = callback;
            // 把这个名称加入到参数中: 'cb=JSONP.callbacks[1]'
            params[callbackKey] = `JSONP.callbacks[${callbackId}]`;
            // 得到'id=1&cb=JSONP.callbacks[1]'
            const paramString = Object.keys(params).map(key => {
                return `${key}=${encodeURIComponent(params[key])}`
            }).join('&')
            // 创建 script 标签
            const script = document.createElement('script');
            script.setAttribute('src', `${url}?${paramString}`);
            document.body.appendChild(script);
            // id自增,保证唯一
            JSONP.callbackId++;
        }
    </script>
    

    taskpane.js 的onbuttonclick函数下的switch语句添加两个 case

    function onbuttonclick(idStr) {
        if (typeof (wps.Enum) != "object") { // 如果没有内置枚举值
            wps.Enum = WPS_Enum
        }
        switch (idStr) {
            case "addString": {
                let curSheet = wps.EtApplication().ActiveSheet;
                if (curSheet) {
                    JSONP({
                        url: 'http://localhost:8080/api/jsonp',
                        params: {
                            id: 1
                        },
                        callbackKey: 'cb',
                        callback(res) {
                            curSheet.Cells.Item(1, 1).Formula = "请求数据成功 " + res.title
                        }
                    })
                }
                break;
            }
            case "getDocName": {
                let curSheet = wps.EtApplication().ActiveSheet;
                if (curSheet) {
                    JSONP({
                        url: 'http://localhost:8080/api/jsonp',
                        params: {
                            id: 2
                        },
                        callbackKey: 'cb',
                        callback(res) {
                            curSheet.Cells.Item(2, 1).Formula = "请求数据成功 " + res.title
                        }
                    })
                }
                break
            }
        }
    }
    

    动图效果

    img

    jsonp跨域的问题参考这篇文章:前端跨域jsonp的细节,挡住面试官的连环提问

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 4月21日
  • 已采纳回答 4月13日
  • 创建了问题 4月6日

悬赏问题

  • ¥50 R语言读取nc按月均值转为tif
  • ¥15 用这个函数清除字符串空格为什么会出现问题?
  • ¥30 智能车串级pid调参
  • ¥15 visual studio code翻译老是错误
  • ¥20 卫星测高数据的高程转换
  • ¥20 PHP+javascript文本框之间字符串逻辑判断
  • ¥15 爬取招聘网站数据信息
  • ¥15 安装完tensorflow,import tensorflow as tf后报错,如何解决?
  • ¥15 ultralytics库导出onnx模型,模型失去预测能力
  • ¥15 linux下点对点协议连接2个USB串口的硬件流量控制问题