zoukankan      html  css  js  c++  java

  • 创建Web API

       引言

       在公司中用到的都是webAPI的应用程序，这个东西之前没有接触过。但是这个并不是什么新鲜的东西，因我们

    之前有mvc的基础，所以说学习这个东西还是比较容易的，在开始的时候自己可能突然蒙圈了。因为在人家项目中用

    到的东西自己之前都没有接触过，感觉非常的陌生甚至整个混乱了。但是当我们静下心来好好想想的话是非常容易

    的，就是在某些写法上不太一样，其余的都差不多，下面就给大家创建第一个程序。

      创建一个Web API程序

     

       启动VS2012创建一个新项目，在已经安装的模板中选择 ASP.NET MVC4 Web API程序

     

       在ASP.NET MVC项目对话框中选择Web API项，点击确定 

           

       创建成功之后工程中会自动添加一个Web API服务控制器，上面并附带访问地址 

        

       项目解决方案，选择Models文件夹右键 添加一个Model类 

     

       代码如下： 

     
    namespace Git.Framework.WebAPI.Models
    {
        public class Contact
        {
            public int ID { get; set; }

            public string Name { get; set; }

            public string Sex { get; set; }

            public DateTime Birthday { get; set; }

            public int Age { get; set; }
        } }
     

     工程解决方案选择Controllers文件夹右键添加一个新的Web API controller

     

     在添加控制器弹出对话框中选择模板： 空API控制器

           

       控制器中添加如下代码： 

     
    namespace Git.Framework.WebAPI.Controllers
    {
        public class ContactController : ApiController
        {
            Contact[] contacts = new Contact[] 
            { 
                new Contact(){ ID=1, Age=23, Birthday=Convert.ToDateTime("1977-05-30"), Name="情缘", Sex="男"},
                new Contact(){ ID=2, Age=55, Birthday=Convert.ToDateTime("1937-05-30"), Name="令狐冲", Sex="男"},
                new Contact(){ ID=3, Age=12, Birthday=Convert.ToDateTime("1987-05-30"), Name="郭靖", Sex="男"},
                new Contact(){ ID=4, Age=18, Birthday=Convert.ToDateTime("1997-05-30"), Name="黄蓉", Sex="女"},
            };

            /// <summary>
            /// /api/Contact
            /// </summary>
            /// <returns></returns>
            public IEnumerable<Contact> GetListAll()
            {
                return contacts;
            }

            /// <summary>
            /// /api/Contact/id
            /// </summary>
            /// <param name="id"></param>
            /// <returns></returns>
            public Contact GetContactByID(int id)
            {
                Contact contact = contacts.FirstOrDefault<Contact>(item=>item.ID==id);
                if (contact == null)
                {
                    throw new HttpResponseException(HttpStatusCode.NotFound);
                }
                return contact;
            }

            /// <summary>
            /// 根据性别查询
            /// /api/Contact?sex=女
            /// </summary>
            /// <param name="sex"></param>
            /// <returns></returns>
            public IEnumerable<Contact> GetListBySex(string sex)
            {
                return contacts.Where(item => item.Sex == sex);
            }
        }}
     

     浏览器访问API路径

     

    Controller Methed

    URI

    GetListAll

    /api/Contact

    GetListBySex

    "/api/Contact?sex=" + sex

    GetContactByID

    /api/Contact/"+id

       在IE浏览器中浏览出现如下效果

        

       如果在Chrome 或者 FireFox 中浏览会先下如下效果

     

     Javascript访问Web API

     

     在项目中添加一个About View视图

       

      代码如下：

    [csharp] view plain copy
     
    print?在CODE上查看代码片派生到我的代码片
    1. <span style="font-family:SimSun;font-size:18px;">@{  
    2.     Layout = null;  
    3. }  
    4.   
    5. <!DOCTYPE html>  
    6.   
    7. <html>  
    8. <head>  
    9.     <meta name="viewport" content="width=device-width" />  
    10.     <title>About</title>  
    11.     <script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js"></script>  
    12.     <script type="text/ecmascript">  
    13.         $(document).ready(function () {  
    14.             $("#btnAll").click(function () {  
    15.                 $.getJSON("/api/Contact", function (data) {  
    16.                     var html = "<ul>";  
    17.                     $(data).each(function (i, item) {  
    18.                         html += "<li>"+item.ID+":"+item.Name+":"+item.Sex+"</li>";  
    19.                     });  
    20.                     html += "</ul>";  
    21.                     $("#contactAll").html(html);  
    22.                 });  
    23.             });  
    24.   
    25.   
    26.             $("#btnID").click(function () {  
    27.                 var id = $("#txtID").val();  
    28.                 $.getJSON("/api/Contact/"+id, function (data) {  
    29.                     var html = "<ul>";  
    30.                     $(data).each(function (i, item) {  
    31.                         html += "<li>" + item.ID + ":" + item.Name + ":" + item.Sex + "</li>";  
    32.                     });  
    33.                     html += "</ul>";  
    34.                     $("#contactID").html(html);  
    35.                 });  
    36.             });  
    37.   
    38.             $("#btnSex").click(function () {  
    39.                 var sex = $("#ddlSex").val();  
    40.                 $.getJSON("/api/Contact?sex=" + sex, function (data) {  
    41.                     var html = "<ul>";  
    42.                     $(data).each(function (i, item) {  
    43.                         html += "<li>" + item.ID + ":" + item.Name + ":" + item.Sex + "</li>";  
    44.                     });  
    45.                     html += "</ul>";  
    46.                     $("#contactSex").html(html);  
    47.                 });  
    48.             });  
    49.         });  
    50.     </script>  
    51. </head>  
    52. <body>  
    53.     <p>  
    54.         <input type="button" id="btnAll" value="查询所有" />   
    55.     </p>  
    56.     <p>  
    57.         <input type="text"  id="txtID" name="txtID"/>  
    58.         <input type="button" id="btnID" value="根据ID查询" />   
    59.     </p>  
    60.     <p>  
    61.         <select id="ddlSex" name="ddlSex">  
    62.             <option value="男">男</option>  
    63.             <option value="女">女</option>  
    64.         </select>  
    65.         <input type="button" id="btnSex" value="根据性别查询" />   
    66.     </p>  
    67.     <div id="contactAll">  
    68.     </div>  
    69.     <div id="contactID">  
    70.     </div>  
    71.     <div id="contactSex">  
    72.     </div>  
    73. </body>  
    74.   
    75. </html></span>  
    <span style="font-family:SimSun;font-size:18px;">@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>About</title>
    <script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/ecmascript">
        $(document).ready(function () {
            $("#btnAll").click(function () {
                $.getJSON("/api/Contact", function (data) {
                    var html = "<ul>";
                    $(data).each(function (i, item) {
                        html += "<li>"+item.ID+":"+item.Name+":"+item.Sex+"</li>";
                    });
                    html += "</ul>";
                    $("#contactAll").html(html);
                });
            });


            $("#btnID").click(function () {
                var id = $("#txtID").val();
                $.getJSON("/api/Contact/"+id, function (data) {
                    var html = "<ul>";
                    $(data).each(function (i, item) {
                        html += "<li>" + item.ID + ":" + item.Name + ":" + item.Sex + "</li>";
                    });
                    html += "</ul>";
                    $("#contactID").html(html);
                });
            });

            $("#btnSex").click(function () {
                var sex = $("#ddlSex").val();
                $.getJSON("/api/Contact?sex=" + sex, function (data) {
                    var html = "<ul>";
                    $(data).each(function (i, item) {
                        html += "<li>" + item.ID + ":" + item.Name + ":" + item.Sex + "</li>";
                    });
                    html += "</ul>";
                    $("#contactSex").html(html);
                });
            });
        });
    </script>
</head>
<body>
    <p>
        <input type="button" id="btnAll" value="查询所有" /> 
    </p>
    <p>
        <input type="text"  id="txtID" name="txtID"/>
        <input type="button" id="btnID" value="根据ID查询" /> 
    </p>
    <p>
        <select id="ddlSex" name="ddlSex">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        <input type="button" id="btnSex" value="根据性别查询" /> 
    </p>
    <div id="contactAll">
    </div>
    <div id="contactID">
    </div>
    <div id="contactSex">
    </div>
</body>

</html></span>


       运行结果效果图

        

      Web API总结

     

        1.Web API 控制器(Controller) 继承ApiController

        2. Api 的 Url Map： api/{controller}/{id} 每个"Action"是通过 Http谓词(GET/POST/PUT/DELETE)映射的

       3.客户端可以通过 Http Header 的 Accept 指定返回数据的格式。默认是支持：appliction/xml 和

     application/json，当想返回比如 image/jpeg 这样的图片格式时，需要添加 MediaTypeFormatter 。比如：当

    指定某个 Task 时，通过指定 Accept : image/jpeg 获取该 Task 的图片信息。

        
  • 相关阅读:
    JVM1
    JVM
    安卓权威编程指南 -笔记（19章 使用SoundPool播放音频）
    安卓权威编程指南 -笔记（18章 处理assets）
    安卓权威编程指南 挑战练习 16章
    安卓权威编程指南 -挑战练习 15章。
    安卓权威编程指南 挑战练习 13.8 用于RecyclerView的空视图
    安卓权威编程指南 挑战练习13.7-优化字符串资源显示
    关于List比较好玩的操作
    安卓权威编程指南 挑战练习13.6 14.8
  • 原文地址：https://www.cnblogs.com/zhangxiaolei521/p/5803749.html
Copyright © 2011-2022 走看看