vs2019创建Webservice，发布，部署到IIS，并在前端调用

最新推荐文章于 2024-08-02 17:53:13 发布

猫猫Tayli

最新推荐文章于 2024-08-02 17:53:13 发布

阅读量4.7k

点赞数 3

分类专栏： GIS 文章标签： c# vue

本文链接：https://blog.csdn.net/fbc3173/article/details/114596766

版权

GIS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vs2019创建Webservice，发布，部署到IIS，并在前端调用

1.创建ASP.NET Web应用程序

在这里插入图片描述

2.添加web服务

在这里插入图片描述

3.添加成功后，写好自己想要的接口，并发布

在这里插入图片描述

4.在IIS上部署

在这里插入图片描述

右键“网站”，添加网站

浏览出现如下问题，解决方法为：双击“目录浏览”，并启用。

5.前端调用

（1）下载一个Vue.js文件，然后将其放到项目的根目录下：

在这里插入图片描述
下载地址：

（2）创建一个新的html文件，将以下代码粘贴进去：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app"></div>
    <script>
        new Vue({
            el: '#app',
            mounted() {
                axios
                    .post('http://192.168.3.89:8090/WebService1.asmx/DoWork',{
                        value: 1
                    })
                    .then(res => {
                        console.log(res)
                    })
            }
        })
</script>
</body>

</html>

post请求里面第一个数据是服务地址，这里需要替换成你自己的服务地址，后面跟函数名DoWork，然后传输一个对象，写法与JSON格式类似，属性名后面跟属性值：

.post('http://192.168.3.89:8090/WebService1.asmx/DoWork',{
                        value: 1
                    })

（3）修改web服务中的内容：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace WebApplication1
{
    /// <summary>
    /// WebService1 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。 
    [System.Web.Script.Services.ScriptService]
    public class WebService1 : System.Web.Services.WebService
    {

        //[WebMethod]
        //public string HelloWorld()
        //{
        //    return "Hello World";
        //}
        [WebMethod(Description = "查询")]
        public TestData DoWork(int value)
        {
            TestData myData = new TestData();
            myData.Value = value;
            return myData;
            
        }
    }
    public class TestData
    {
        public int Value { get; set; }
    }
}

（4）修改Web.config配置文件：

在配置文件中增加以下内容，解决跨域问题。

<configuration>	
	<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>
</configuration>