Electron+HTML做界面,C#做後臺(五)使用http請求處理處理數據

Electron+HTML做界面,C#做後臺(四)中,我們已經實現了前後端的數據交互,奈何,如果後端返回數據字符過長,就回導致前端接受失敗,因此,我們需要加入 【winform http服務】當然它的作用就很簡單了,只需要監聽固定端口,獲取請求的url即可。

創建 http服務 ,類似的文章有很多,可以百度,這裏只介紹簡單的做法

1.創建HttpServices.cs類,並加入一下內容,並且調用上片文章創建的反射方法

using System;
using System.IO;
using System.Net;

namespace ElectronHTMlCSharp
{
    public class HttpServices
    {
        private readonly string URL;
        public HttpServices(string url)
        {
            URL = url;
        }
        public void Run()
        {
            Controller con = new Controller();
            using (var listerner = new HttpListener())
            {
                listerner.AuthenticationSchemes = AuthenticationSchemes.Anonymous;//指定身份驗證 Anonymous匿名訪問
                                                                                  //   listerner.Prefixes.Add("http://localhost:8080/web/");
                listerner.Prefixes.Add(URL); //http://localhost/web/
                listerner.Start();
                Console.WriteLine("開啓監聽:" + URL);
                while (true)
                {
                    //等待請求連接
                    //沒有請求則GetContext處於阻塞狀態
                    var ctx = listerner.GetContext();
                    ctx.Response.StatusCode = 200;//設置返回給客服端http狀態代碼
                    //Console.WriteLine("url:" + ctx.Request.Url.ToString());
                    //Console.WriteLine("httpMethod:" + ctx.Request.HttpMethod.ToString());
                    //var queryString = ctx.Request.QueryString;
                    //Console.WriteLine("參數個數" + queryString.Count);
                    //Console.WriteLine("第一個參數鍵" + queryString.Keys[0]);
                    //Console.WriteLine("第一個參數值" + queryString[queryString.Keys[0]]);
                    //Console.WriteLine("rawUrl:" + ctx.Request.RawUrl.ToString());
                    ctx.Response.AddHeader("Access-Control-Allow-Origin", "*");
                    ctx.Response.ContentType = "text/html";
                    ////使用Writer輸出http響應代碼
                    using (var writer = new StreamWriter(ctx.Response.OutputStream))
                    {
                        var url = ctx.Request.RawUrl.ToString();
                        url = url.Substring(1, url.Length - 1);
                        //判斷是請求方法
                        var responseText = con.EventHander(url,null);

                        writer.WriteLine(responseText);
                    }

                }
            }
        }
    }
}

在這裏插入圖片描述

2.在App.config文件中的<appSettings>中添加一下內容

	 <!--http-->
    <add key="httpPort" value="9910"/>
    <add key="addr" value="127.0.0.1"/>    

在這裏插入圖片描述

3.在Program.cs中創建方法,並在Main方法中調用創建的方法調用方法寫在 socket 方法之前

 		/// <summary>
        /// 開啓 http 服務監聽 9910
        /// </summary>
        public static void StartHttp()
        {
            var url = string.Format("http://{0}:{1}/", AppTools.Get("addr"), AppTools.Get("httpPort"));
            HttpServices httpServer;
            httpServer = new HttpServices(url);
            var thread = new Thread(new ThreadStart(httpServer.Run));
            thread.Start();
        }

在這裏插入圖片描述

4.在hander.js文件裏,添加http請求的方法

4.1 修改GetSocketConf()

function getSocketConf() {
    return {
        ip: '127.0.0.1',
        port: '9909',
        httpPort:'9910',
    }
}

4.2.添加方法

/**
 * 發送http請求
 * 依賴項:jQuery ,最好 2.0版本以上
 * 
 * @param {string} action 請求地址 及參數 action!method?par1=1&par2=2&parn=n&....
 * @param {function(object)} callback 回調函數
 * @param {bool} isObject 是否將返回值轉爲對象 
 */
function HanderHttp(action, callback, isObject) {
    isObect = !isObect ? false : true;
    var http = "http://" + getSocketConf()["ip"] + ":" + getSocketConf()["httpPort"] + "/" + action;
    $.ajax({
        url: http,
        dataType: "text",
        success: function (res) {
            if (isObect) {
                res = eval('(' + res + ')')
            }
            callback(res);
        }
    });

}

5.修改index.html 文件,在文件中添加按鈕和按鈕事件

  <input type="button" id="sendHttp" value="發送Http請求" />  
 //偵聽 發送Http請求按鈕 事件,並將返C#端返回的數據 綁定到接受區域
   $("#sendHttp").on("click", function(){
         var msg = "Test!Test2?name=張三&age=20&sex=男&info=1427953302";
         HanderHttp(msg, function(res) {
             var html = $("#msg").html();
             $("#msg").html(html + res);
         })
     });

在這裏插入圖片描述

6.啓動?等等,我們還需要去TestController類中創建Test2方法


        public string Test2()
        {
            return "['110000 北京市', ' 110100  市轄區','110101   東城區'," +
                    "'110102   西城區', '110105   朝陽區', '110106   豐臺區'," +
                    "'110107   石景山區','110108   海淀區','110109   門頭溝區'," +
                    "'110111   房山區','110112   通州區', '110113   順義區'," +
                    "'110114   昌平區', '110115   大興區','110116   懷柔區'," +
                    "'110117   平谷區', '110118   密雲區','110119   延慶區'," +
                    "'120000 天津市', ' 120100  市轄區', '120101   和平區'," +
                    "'120102   河東區', '120103   河西區', '120104   南開區'," +
                    "'120105   河北區', '120106   紅橋區', '120110   東麗區'," +
                    "'120111   西青區','120112   津南區','120113   北辰區'," +
                    "'120114   武清區','120115   寶坻區','120116   濱海新區']";
        }

在這裏插入圖片描述

7.啓動程序

在這裏插入圖片描述

如此HTTP請求就完成了,方法的返回值最好是string,int,bool等,如果方法的返回值是DataTable怎麼辦呢?序列化,對就是序列化 參考文章(建議使用參考文章的方法3

如此 Electron+HTML界面,C#做後臺,基本上已經完結了。雖然還存在一些問題,但我要說的東西已經在 滿滿的乾貨中說清楚了。祝大家生活愉快,升職加薪。

如果覺得不錯,請打賞我,或者用錢侮辱我~_~!

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章