axios请求接口http_使用Vue_axios请求WebService服务接口流程

在本地IIS上发布一个HTML网站和WebService接口并对接的方法。

一、编写WebService接口，用的是VS2019。

新建一个空网站，添加一个WEN服务(ASMX)，编写一个方法从数据库获取数据，这是我的方法：

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.ComponentModel.ToolboxItem(false)]

// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。

[System.Web.Script.Services.ScriptService] //这一句本来是注释掉的，但要用AJAX就必须取消注释

public class forWeb : System.Web.Services.WebService

{

[WebMethod]

public string selDP()

{

SQLconn con = new SQLconn();

DataTable dt = con.getData();

string JsonString = string.Empty;

JsonString = JsonConvert.SerializeObject(dt);

return JsonString;

}

}

因为要被AJAX调用，所以需要设置Web.config，加一些代码，如下：

配置跨域…

对照着自己的Web.config添加代码。

然后是发布，右键项目名，点击发布，获得一个文件夹，内容如下：

这样一个WebService接口就写好了，然后就是在本地IIS发布，IIS的下载安装请自行百度，发布步骤如下：

打开IIS管理器，右键网站，点击添加，弹出添加网站的界面如下：

需要填写的有网站名称(自定义)，物理路径(就是你刚刚发布WebService接口的路径)，IP地址(选择本机地址)，端口(随便，只要别被占用就行)。让后点击确定就行了。

网站新建完成后，在中间面板的IIS块中双击目录浏览，然后 ==启用== 回到功能视图，在右边的操作面板中点击浏览网站即可打开网站，在网站中你可以看到你发布的文件夹的内容，点击其中的asmx文件就能看到你编写的方法，也是我们在AJAX中要调用的方法。

接口的创建和发布到这里就完成了，接下来是网页的编写。

二、编写HTML网页并在IIS中发布

网页的编写就不多加描述，直接看代码。

这里在网页添加一个table：

齐套码

机种名

工位名

小项名

日期

{{site.neatCode}}

{{site.productName}}

{{site.processName}}

{{site.minterm}}

{{site.workDate}}

调用WebService的方法：

new Vue({

el: '#getData',

data(){

return {

sites: ""

}

},

created: function(){

var self = this;

$.ajax({

type:"post",

url:"http://IP地址/forWeb.asmx/selDP", //接口地址，后面加上 /方法名即可

contentType: "application/json",

dataType:"json",

success:function(inf){

self.sites = JSON.parse(inf.d); //将获取的JSON字符串转化成JSON对象

console.log(inf); //在控制台输出获取的数据形式

},

error:function(){

alert("获取数据失败！");

}

});

}

})

这里要注意一点，AJAX从WebService接口获取的JSON字符串是在返回对象的一个d字段中的，所以我们使用JSON.parse(inf.d)这一句代码将其提取出来并转化成JSON对象，供vue使用。

到这里网页的编写也完成了，网页在IIS上的发布也和接口一样，这里就不赘述了。

最后打开网页就可显示用你的方法从数据库中获取的数据了。

以上就是在本地IIS服务器上发布网页和WebService接口并对接的全部内容了。

WebService返回的是XML类型，如何转换成JSON格式呢？

改变数据的返回方式，用 Context.Response.Write代替return 语句， 即可返回正确的Json格式数据。

创建一个静态一个静态类

客户端：

End-2020-04-07 00:40