node vue soap 调用webservice 示例

这里是一个简单的 Node.js + Vue.js 调用 SOAP Web Service 的示例，假设你已经安装了 Node.js 和 Vue.js。

1. 首先，安装 soap 模块：

npm install soap --save

2. 创建一个 Node.js 服务端代码，用于调用 SOAP Web Service：

const soap = require('soap');

const url = 'http://webservice.webxml.com.cn/WebServices/MobileCodeWS.asmx?wsdl'; // Web Service 的 URL
const args = { mobileCode: '手机号码', userID: '' }; // Web Service 的参数

soap.createClient(url, function(err, client) {
  if (err) {
    console.error(err);
  } else {
    client.getMobileCodeInfo(args, function(err, result) { // 调用 Web Service 的方法
      if (err) {
        console.error(err);
      } else {
        console.log(result);
      }
    });
  }
});

3. 创建一个 Vue.js 前端页面，用于输入手机号码并调用 Node.js 服务端代码：

<template>
  <div>
    <input type="text" v-model="mobileCode" placeholder="请输入手机号码">
    <button @click="getMobileCodeInfo">查询</button>
    <p>{{ info }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mobileCode: '',
      info: ''
    };
  },
  methods: {
    getMobileCodeInfo() {
      const vm = this;
      const url = 'http://localhost:3000'; // Node.js 服务端的 URL

      fetch(`${url}/mobilecode?mobileCode=${this.mobileCode}`)
        .then(response => response.json())
        .then(data => {
          vm.info = data;
        });
    }
  }
};
</script>

4. 创建一个 Node.js 服务端路由，用于处理 Vue.js 发送的请求并调用 Node.js 服务端代码：

const express = require('express');
const router = express.Router();
const soap = require('soap');

router.get('/mobilecode', function(req, res, next) {
  const url = 'http://webservice.webxml.com.cn/WebServices/MobileCodeWS.asmx?wsdl'; // Web Service 的 URL
  const args = { mobileCode: req.query.mobileCode, userID: '' }; // Web Service 的参数

  soap.createClient(url, function(err, client) {
    if (err) {
      console.error(err);
      res.send(err);
    } else {
      client.getMobileCodeInfo(args, function(err, result) { // 调用 Web Service 的方法
        if (err) {
          console.error(err);
          res.send(err);
        } else {
          res.send(result);
        }
      });
    }
  });
});

module.exports = router;

5. 启动 Node.js 服务端代码：

node app.js

6. 启动 Vue.js 前端页面：

npm run serve

7. 打开浏览器访问 Vue.js 前端页面，输入手机号码并点击查询按钮，即可调用 SOAP Web Service 并显示查询结果。