在本地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，加一些代码，如下：
<configuration>
<system.web>
<webServices>
<protocols>
<add name="HttpSoap"/>
<add name="HttpPost"/>
<add name="HttpGet"/>
<add name="Documentation"/>
</protocols>
</webServices>
<compilation debug="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" />
</system.web>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>
<add name="Access-Control-Allow-Headers" value="x-requested-with,content-type,Accept"/>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>配置跨域…
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.7.2"/>
<httpRuntime targetFramework="4.7.2"/>
<!--配置跨域Start-->
<webServices>
<protocols>
<add name="HttpGet"/>
<add name="HttpPost"/>
<add name="HttpSoap"/>
<add name="Documentation"/>
</protocols>
</webServices>
<!--配置跨域End-->
</system.web>
<!--配置跨域Start-->
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>
<add name="Access-Control-Allow-Headers" value="x-requested-with,content-type"/>
<add name="Access-Control-Allow-Origin" value="*"/>
</customHeaders>
</httpProtocol>
</system.webServer>
<!--配置跨域End-->
对照着自己的Web.config添加代码。
然后是发布，右键项目名，点击发布，获得一个文件夹，内容如下：
这样一个WebService接口就写好了，然后就是在本地IIS发布，IIS的下载安装请自行百度，发布步骤如下：
打开IIS管理器，右键网站，点击添加，弹出添加网站的界面如下：
需要填写的有网站名称（自定义），物理路径（就是你刚刚发布WebService接口的路径），IP地址（选择本机地址），端口（随便，只要别被占用就行）。让后点击确定就行了。
网站新建完成后，在中间面板的IIS块中双击目录浏览，然后 ==启用== 回到功能视图，在右边的操作面板中点击浏览网站即可打开网站，在网站中你可以看到你发布的文件夹的内容，点击其中的asmx文件就能看到你编写的方法，也是我们在AJAX中要调用的方法。
接口的创建和发布到这里就完成了，接下来是网页的编写。
二、编写HTML网页并在IIS中发布
网页的编写就不多加描述，直接看代码。
这里在网页添加一个table：
<table id="getData" class="getData" >
<tr class="tableHeader">
<td>齐套码</td>
<td>机种名</td>
<td>工位名</td>
<td>小项名</td>
<td>日期</td>
</tr>
<tr v-for="site in sites">
<td>{{site.neatCode}}</td>
<td>{{site.productName}}</td>
<td>{{site.processName}}</td>
<td>{{site.minterm}}</td>
<td>{{site.workDate}}</td>
</tr>
</table>调用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
