关于在Asp.net中编写接口并在Vue中进行调用

莫招烟云

已于 2023-12-28 10:36:58 修改

阅读量1.9k

点赞数 16

分类专栏： JavaScript # Vue 文章标签：前端 javascript 开发语言

于 2023-12-28 10:30:24 首次发布

本文链接：https://blog.csdn.net/MoZhaoyun/article/details/135262054

版权

Vue 同时被 2 个专栏收录

3 篇文章 1 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

Asp.net

我们在VisualStudio中新建的是ASP.NET Web 应用程序（.NET Framework）项目。

在项目中添加一个类，命名为Login，其代码如下：

public class Login
    {
        public string RequestType { get; set; }
        public string UserID { get; set; }
        public string PassWord { get; set; }
    }

在项目中“右键-添加”一个一般处理程序

在其中编写以下代码：

public static T HttpContextJsonStringTo<T>(HttpContext context)
        {
            string jsonString = string.Empty;
            using (StreamReader streamReader = new StreamReader(context.Request.InputStream))
            {
                jsonString = streamReader.ReadToEnd();
            }
            JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();
            T obj = javaScriptSerializer.Deserialize<T>(jsonString);
            return obj;
        }

public void ProcessRequest(HttpContext context)
        {
            HttpResponse response = context.Response;
            HttpRequest request = context.Request;
            response.ContentType = "application/json";
            Login login = HttpContextJsonStringTo<Login>(context);
            string requestType = login.RequestType;
            switch (requestType)
            {
                case "Login":
                    UserLogin(context，login);
                    break;
                default:
                    context.Response.Write("{\"Code\":\"0\",\"Message\":\"请求的接口不存在！\"}");
                    break;
            }
        }

private void UserLogin(HttpContext context，Login login)
        {
            string userID = login.UserID;
            string userPassWord = login.PassWord;
            UserLogin userLogin = new UserLogin(userID,userPassWord);
            if (GetUserLoginResult(userLogin))
            {
                context.Response.Write("成功");
            }
            else
            {
                context.Response.Write("失败");
            }
        }

函数HttpContextJsonStringTo

其中，函数HttpContextJsonStringTo的作用是，将httpcontext中的由前端传过来的参数数据经过StreamReader和JavaScriptSerializer类解析赋值到我们的Login类中，并返回一个Login实例。

函数ProcessRequest

其中，函数ProcessRequest是新建一般处理程序文件时，自动生成的函数，这个函数在接口被调用的时候，会触发，或者说运行至此。我们需要在此写好我们处理数据的逻辑。

目前写的这个是将context中的json格式数据解析赋值到Login类中，进而对Login实例的数据进行处理和操作，判断等逻辑。

函数UserLogin

其中，函数UserLogin是你对获取到的用户名和密码进行的操作逻辑，目的是判断帐号密码是否正确，或者说在数据库是否能正确的查询到。在这里，就不对如何判断帐号密码是否正确进而深层分析了。

到此，咱们已经完成了后端Asp.net的代码逻辑，剩下的就是前端进行调用咱们的接口了

Vue

我们可以在cmd命令窗口中，通过node安装vue脚手架，进而新建一个Vue项目，再次就不做演示了。

我已经完成了一个vue的代码逻辑，我放出关键代码，如下：

methods: {
    LoginButtonClick() {
      var userid = this.data.userid;
      var userpassword = this.data.userpassword;
      console.log(userid);
      console.log(userpassword);
      this.$axios
        // .post("/TXHApi/UserHandler.ashx?UserID=" + userid + "&UserPassWord=" + userpassword + "&RequestType=Login", {
        .post("/TXHApi/UserHandler.ashx", {
            UserID: userid,
            UserPassWord: userpassword,
            RequestType: "Login",
        })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.error("接口请求发生错误", err);
        });
    },
  },

函数LoginButtonClick

该代码是一个页面script标签中的一部分，其中函数LoginButtonClick写在methods中，当点击登录按钮后，将执行该函数，通过axios的post请求并附带了三个参数给后端。

注意

在此之前，你得给vue项目安装一个axios。

你可以输入此命令：npm i axis -S

将会安装到你的vue项目中。

关于Asp.net

ASP.NET（Active Server Page .NET）又称为ASP+，不仅仅是ASP的简单升级，而是微软公司推出的新一代脚本语言。ASP.NET基于.NET Framework的Web开发平台，不但吸收了ASP以前版本的最大优点并参照Java、VB语言的开发优势加入了许多新的特色，同时也修正了以前的ASP版本的运行错误。

ASP.NET具备开发网站应用程序的一切解决方案，包括验证、缓存、状态管理、调试和部署等全部功能。在代码撰写方面特色是将页面逻辑和业务逻辑分开，它分离程序代码与显示的内容，让丰富多彩的网页更容易撰写。同时使程序代码看起来更洁净、更简单。

Asp.net的一些功能

Response

Response对象是属于Page对象的成员。不用声明便可以直接使用。它的主要功能是将HTTP的信息封装后，从ASP.NET的服务器端响应到用户浏览的网页上，以供用户浏览，其类名称为HttpResponse。Response将用于回应客户浏览器，告诉浏览器回应内容的报头、服务器端的状态信息以及输出指定的内容。

它的主要属性如下

BufferOutput：设定HTTP输出是否要做缓冲处理，预设为True。

Cache：传回目前网页快取的设定。

Charset ：设定或取得HTTP的输出字符编码。

Cookies：传回目前请求的Httpcookieco}lection对象的集合。该对象将在本章第二节使用cookie小节中进行详细介绍。

IsCIientconnected：传回客户端是否仍然和服务器连接。

Statuscode：传回或设定输出至客户端浏览器的HTTP状态码，预设是200。

StatusDescription：传回或设定输出至客户端浏览器的HTTP状态说明字符串．预设是OK。

SuppressContent：设定是否将HTTP的内容送至客户端浏览器，若为True则网页将不会传至客户端。

它常用的方法如下

AppendToLog：将自定义的记录信息加到IIs的记录文件中。

AppendHeader：将自定义的标头信息加入到所输出的网页。

BinaryWrite：将一个二进制的字符串写入HTTP输出串流。

Clear：将缓冲区中的内容清除。

CIearHeaders：将缓冲区中所有的页面标头清除。

CIose：关闭客户端的联机。

End：将缓冲区中所有的内容送到客户端然后关闭联机。

Flush：将缓冲区中所有的数据送到客户端。

Redirect：将网页重新导向另一个地址。

Write：将数据输出至客户端。

WriteFile：将一个文件直接输出至客户端。

Request

Request对象也是Page对象的成员之一，在程序中不需声明便可以直接使用。它主要是让服务器取得客户端浏览器的一些数据。Request对象实际上操作system．web名字空间中的HttpRequest类。当用户发出请求执行ASP.NET程序时，CLR会将客户端的请求信息包装在Request对象中。这些请求信息包括请求报头、客户端的请求信息、请求方法、参数名、参数值等。

它的主要属性如下：

AppIicationPath：传回目前正在执行的服务器端的虚拟目录。

Browser：传回有关客户端浏览器的功能信息。

Clientcertificate：传回目前客户端所发出的网页浏览请求的联机ID。

ContentEncoding：传回客户端所支持的字段设定。中文Intemet ExpIorer预设ChineseTraditional（Big5）。

ContentType：传回目前需求的MIME内容类型。

Cookies：传回一个HttpcOOkiecoIIection对象的集合。

FiIes：传回客户端上传的文件集合。

Form：传回有关窗体变量的集合。

HttpMethod：传回目前客户端HTTP数据传输的方式是Get或Post。

IsAuthenticated：传回目前HTTP联机是否有效。