在本地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管理器,右键网站,点击添加,弹出添加网站的界面如下:
![](/qrcode.jpg)
需要填写的有网站名称(自定义),物理路径(就是你刚刚发布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