ASP.NET Core 一步步搭建我的網站（5）_Api模擬和網站分析

時間 2019-11-08

標籤 asp.net asp core 步步搭建我的網站 api 模擬分析欄目 ASP 简体版

原文原文鏈接

前言

通過前面幾章，咱們的網站已經最基本的功能，接下來就是繼續拓展其餘的功能，這期一塊兒來實現一個該網站流量分析的工具，統計出這個網站天天用戶相關數據，不只要知足了咱們對流量統計數字的基本要求，而且用更簡單的圖形顯示方式，讓咱們一目瞭然地獲取頁面熱度、點擊率信息等等。有了這個想法之後，那怎麼實現呢，跟着筆者一步步來吧。html

首先，須要考慮怎麼才能得到用戶訪問網站時的相關數據呢？咱們不必本身去記錄這些信息，目前已經有不少成熟的解決方案，提供捕獲這些信息的免費接口，咱們只用去訪問這些接口就能夠了。json

在衆多的方案中，有2款目前是比較流行的，分別是google analytics和百度統計。怎麼說呢，google的確實是行業的大牛，不只很成熟，並且有詳盡的技術文檔，數據收集過程很順利，可是數據呈現須要fanqiang(緣由大家懂得)，這塊是硬傷，一個開放的網站無法要求用戶都要fanqiang吧，也是因爲這個緣由，讓我忍痛放棄了google analytics。那只有一個選擇了：百度統計。想比較而言，百度統計的相關技術文檔不忍多說，都是淚，筆者在坑中摸爬滾打好久，才弄明白怎麼調用和訪問。api

方案定下來，由於咱們要訪問百度統計的開放API，之後會常常調用到外網的各類API，爲了磨刀不費砍柴工，咱們開發一個API的模擬工具，用來調試。服務器

API模擬工具

單獨給API模擬工具增長一個菜單項，菜單管理-->新增菜單，增長一個根節點菜單下的一個子菜單：「工具箱」。之後一些經常使用的開發工具菜單，就放置該目錄，而後在「工具箱」菜單下，再新建一個子菜單：「API模擬」。
那C#中怎麼調用遠程API方法呢，通常用HttpClient能夠訪問，這裏咱們稍微再封裝一下，分爲Get請求（傳遞url參數）和Post請求（傳遞url和content參數）：

 1 public static class HttpClientExtensions
 2 {
 3     /// <summary>
 4     /// Get請求API
 5     /// </summary>
 6     /// <param name="client"></param>
 7     /// <param name="url"></param>
 8     /// <param name="jsonValue"></param>
 9     /// <param name="headers"></param>
10     /// <returns></returns>
11     public static async Task<string> HttpGetAsync(this HttpClient client, string url)
12     {
13         //初始化內容
14         var responseMessage = await client.GetAsync(url);
15         if (responseMessage.IsSuccessStatusCode)
16         {
17             return await responseMessage.Content.ReadAsStringAsync();
18         }
19         else
20         {
21             return $"訪問API地址:{url}出錯,錯誤代碼:{responseMessage.StatusCode},錯誤緣由:{responseMessage.ReasonPhrase}";
22         }
23     }
24 
25 
26     /// <summary>
27     /// Post請求API
28     /// </summary>
29     /// <param name="client"></param>
30     /// <param name="url"></param>
31     /// <param name="jsonValue"></param>
32     /// <param name="headers"></param>
33     /// <returns></returns>
34     public static async Task<string> HttpPostAsync(this HttpClient client, string url, string jsonValue)
35     {
36         //初始化內容
37         var content = new StringContent(jsonValue, Encoding.UTF8, "application/json");
38 
39         var responseMessage = await client.PostAsync(url, content);
40         if (responseMessage.IsSuccessStatusCode)
41         {
42             return await responseMessage.Content.ReadAsStringAsync();
43         }
44         else
45         {
46             return $"訪問API地址:{url}出錯,參數:{jsonValue},錯誤代碼:{responseMessage.StatusCode}
　　　　　　　　　,錯誤緣由:{responseMessage.ReasonPhrase}";
47         }
48     }

參考上一章的內容中，咱們將Api的相關配置，好比url地址，url請求類型，參數等等，都配置到json文件中，並定義相應的數據結構MyRequest。後續依賴注入IOptions<MyRequest> myRequest便可訪問。
Areas/Tools/Controllers建立對應的控制器ApiSimulatorController

InvokApi方法：根據讀取的Api請求類型，想遠程API服務商發送請求並傳遞參數，返回json格式給UI端；
Index方法：根據用戶在下拉框中選擇的Api，切換顯示Api相關信息；

 1 [Area("Tools")]
 2 public class ApiSimulatorController : AppController
 3 {
 4     private readonly MyRequest _myRequest;
 5 
 6     public ApiSimulatorController(IOptions<MyRequest> myRequest)
 7     {
 8         _myRequest = myRequest.Value;
 9     }
10 
11     /// <summary>
12     /// API模擬主頁
13     /// </summary>
14     /// <param name="selectedApiCode"></param>
15     /// <returns></returns>
16     public IActionResult Index(string selectedApiCode = null)
17     {
18         UpdateDropDownList(selectedApiCode);
19         if (selectedApiCode == null)
20         {
21             return View("Index", new ApiRequest());
22 
23         }
24         var selectedApi = _myRequest.ApiRequests.FirstOrDefault(s => s.ApiCode == selectedApiCode);
25         if (selectedApi != null && selectedApi.Methord == "POST")
26             selectedApi.ApiDatas = selectedApi.ApiDatas.ToJsonString();
27         return View("Index", selectedApi);
28     }
29 
30     /// <summary>
31     /// 調用API
32     /// </summary>
33     /// <param name="request"></param>
34     /// <returns></returns>
35     public async Task<IActionResult> InvokApi(ApiRequest request)
36     {
37         var hc = new HttpClient();
38 
39         if (request.Methord == "GET")
40         {
41             var getUrl = request.Url + "?";
42             foreach (var para in request.ApiParas)
43             {
44                 getUrl += "&" + para.ParaName + "=" + para.ParaValue;
45             }
46 
47             ViewBag.SendContent = getUrl;
48             ViewBag.ReturnResult = (await hc.HttpGetAsync(getUrl)).ToJsonString();
49         }
50         else if (request.Methord == "POST")
51         {
52             if (!string.IsNullOrEmpty(request.ApiDatas))
53             {
54                 ViewBag.SendContent = request.Url;
55                 ViewBag.ReturnResult = (await hc.HttpPostAsync(request.Url, request.ApiDatas)).ToJsonString();
56             }
57             else
58             {
59                 ModelState.AddModelError(string.Empty, "請輸入Json格式請求參數");
60             }
61         }
62         else
63         {
64             ModelState.AddModelError(string.Empty, "請求方式非法");
65         }
66 
67         UpdateDropDownList(request.ApiCode);
68         return View("Index", request);
69     }
70 
71     /// <summary>
72     /// 初始化下拉選擇框
73     /// </summary>
74     private void UpdateDropDownList(string selectedApiCode = null)
75     {
76         List<SelectListItem> listApiName = new List<SelectListItem>();
77         foreach (var request in _myRequest.ApiRequests.Select(s => new { s.ApiName, s.ApiCode }))
78         {
79             listApiName.Add(new SelectListItem
80             {
81                 Value = request.ApiCode,
82                 Text = request.ApiName,
83                 Selected = request.ApiCode == selectedApiCode
84             });
85         }
86         ViewBag.ApiCodes = listApiName;
87     }
88 }

Areas/Tools/Views建立對應的視圖Index數據結構

 1 <div class="form-group">
 2     <label asp-for="ApiCode">API名稱:</label>
 3     <select asp-for="ApiCode" class="form-control input-sm select2" asp-items="ViewBag.ApiCodes">
 4         <option value="">-- 請選擇 --</option>
 5     </select>
 6 </div>
 7 <div class="form-group">
 8     <label asp-for="Url">API地址:</label>
 9     <input asp-for="Url" class="form-control input-sm" readonly>
10 </div>
11 <div class="form-group">
12     <label asp-for="Methord">請求方式:</label>
13     <input asp-for="Methord" class="form-control input-sm" readonly>
14 </div>
15 <div class="form-group">
16     <label for="params" class="">請求參數：</label>
17     @if (Model.Methord == "GET")
18     {
19         <div style="overflow-x:auto;">
20             <table class="table table-bordered table-striped table-condensed" id="params">
21                 <thead>
22                     <tr>
23                         <td>參數名</td>
24                         <td>類型</td>
25                         <td>是否必填</td>
26                         <td>說明</td>
27                         <td>值</td>
28                     </tr>
29                 </thead>
30                 <tbody>
31                     @for (var i = 0; i < Model.ApiParas.Count(); i++)
32                     {
33                         <tr>
34                             <td>
35                                 <span>@Model.ApiParas[i].ParaName</span>
36                                 @Html.TextBoxFor(a => a.ApiParas[i].ParaName,
37                                new { @class = "form-control input-sm", type = "hidden" })
38                             </td>
39                             <td>
40                                 <span> @Model.ApiParas[i].ParaType</span>
41                                 @Html.TextBoxFor(a => a.ApiParas[i].ParaType,
42                                new { @class = "form-control input-sm", type = "hidden" })
43                             </td>
44                             <td>
45                                 <span>@(Model.ApiParas[i].Required ? "是" : "否")</span>
46                                 @Html.TextBoxFor(a => a.ApiParas[i].Required,
47                                new { @class = "form-control input-sm", type = "hidden" })
48                             </td>
49                             <td>
50                                 <span>@Model.ApiParas[i].Description</span>
51                                 @Html.TextBoxFor(a => a.ApiParas[i].Description,
52                                new { @class = "form-control input-sm", type = "hidden" })
53                             </td>
54                             <td>
55                                 @Html.TextBoxFor(a => a.ApiParas[i].ParaValue,
56                                new { @class = "form-control input-sm" })
57                         </td>
58                     </tr>
59                     }
60                 </tbody>
61             </table>
62         </div>}
63     else if ((Model.Methord == "POST"))
64     {
65         @Html.TextAreaFor(m => m.ApiDatas, 
66        new { @class = "form-control", rows = "8", placeholder = "輸入Json格式 ..." })
67     }
68 </div>
69 <button type="submit" class="btn btn-success"><i class="fa fa-send-o margin-r-5"></i>發送請求</button>

json文件中增長「手機號碼歸屬地」、「百度統計」相關API的配置，咱們來測試一下：app

流量分析工具

有了上面API模擬工具，如今能夠很方便的調試咱們百度統計接口了。百度統計是怎麼獲取這些網站用戶訪問的相關信息的呢？原理其實很簡單，百度針對你的註冊服務提供一段js代碼，其中包含標識你在百度統計的id。你在網頁中添加這段代碼後，每當用戶訪問該網站時，會下載這段js腳本，加載完畢和離開頁面的時候，都會發送一次請求和傳遞參數，百度統計服務中心從而捕獲到這些信息，維護在服務器中。調用百度統計API傳遞你的id，會根據id返回你的網站對應分析數據。async

關於流量統計原理，有興趣詳見揭祕百度統計和Google Analytics的工做原理工具

註冊百度統計

知道了原理，那首先第一步咱們註冊百度統計用戶。註冊完成後，咱們找到代碼管理-->代碼獲取，將百度統計幫你自動生成好的js腳本複製過來，粘貼到site.js文件中。因爲_layout母版頁引用了site.js文件，這樣的話，網站域名下全部的用戶訪問，都會被統計。開發工具

安裝完百度統計的代碼，發佈網站程序，能夠用百度統計中代碼檢查，看看本身統計代碼有沒有被正確的安裝，若是安裝成功，估計20分鐘後，就能夠在百度統計中查看網站的訪問狀況了。固然，你也能夠添加多個域名的網站。測試

申請Tongji API數據導出

如今咱們很方便的在百度統計中查看各類統計數據了，好比流量分析、來源分析、訪問分析、轉化分析等等，接下來須要獲取這些數據，來移植到咱們本身的網站中來。百度提供了Tongji API，咱們能夠調用API來查詢本身網站的分析數據，從而進一步組織增長的分析視圖了。

要訪問Tongji API，須要提供一個token值，這個須要開通申請，在百度統計-->管理-->其餘設置-->數據導出服務中，請求開通，開通後百度統計會提供給你一個token字符串，之後用這個token就能夠訪問Tongji API。Tongji API具體的請求格式說明詳見：百度統計開發平臺

好比咱們須要請求站點列表，使用API模擬工具，請求類型POST，url地址：https://api.baidu.com/json/tongji/v1/ReportService/getSiteList，這裏注意請求的data參數格式應該以下：

1 {
2     "header": {
3         "account_type": 1,
4         "password": "<密碼>",
5         "token": "<token>",
6         "username": "<用戶名>"
7     },
8     "body": {}
9 }

輸入百度統計的用戶名和密碼及訪問使用的token，便可正常訪問咱們的註冊的全部站點，這裏咱們能夠拿到站點的site_id(也能夠經過百度統計頁面查看)，後面請求該站點的分析數據會用到。

地域分佈數據獲取

百度統計提供的數據類型不少，咱們選取其中一個來試驗下效果。好比咱們須要得到訪問網站用戶的地域信息，不一樣省份的用戶訪問狀況。

使用API模擬工具調試：請求類型POST，url地址：https://api.baidu.com/json/tongji/v1/ReportService/getData，請求的data參數格式以下：

 1 {
 2     "header": {
 3         "account_type": 1,
 4         "password": "<密碼>",
 5         "token": "<token>",
 6         "username": "<用戶名>"
 7     },
 8     "body": {
 9         "site_id": <站點id>,
10         "method": "visit/district/a",
11         "start_date": "30daysago",
12         "end_date": "today",
13         "metrics": "pv_count,pv_ratio,visit_count,visitor_count,new_visitor_count,new_visitor_ratio,
　　　　　　　　　　　　　　ip_count,bounce_ratio,avg_visit_time,avg_visit_pages,trans_count,trans_ratio",
14         "order": "pv_count,desc",
15         "max_results": 0
16     }
17 }

能夠看到，正常返回按照不一樣省份區域的網站統計數據。

實現控制器邏輯：按照上面提供的json格式，配置到json文件中，並定義MyRequest對象，映射咱們全部的API請求，MyRequest存放的是全部API請求的配置信息，經過API請求的id，加載不一樣的API配置信息。Areas/Tools/Controllers建立對應的控制器SiteAnalyticsController，主要實現GetVisitDistrictAnalytics方法，用來根據時間範圍，獲取相應的區域分析json數據：

 1 [Area("Tools")]
 2 public class SiteAnalyticsController : AppController
 3 {
 4     private readonly IList<ApiRequest> _requests;
 5 
 6     public SiteAnalyticsController(IOptions<MyRequest> myRequest)
 7     {
 8         _requests = myRequest.Value.ApiRequests;
 9     }
10 
11     public IActionResult Index()
12     {
13         return View();
14     }
15 
16     /// <summary>
17     /// 獲取百度訪客區域統計數據
18     /// </summary>
19     /// <returns></returns>
20     public async Task<JsonResult> GetVisitDistrictAnalytics(string startDate, string endDate)
21     {
22         var hc = new HttpClient();
23         var request = _requests.FirstOrDefault(s => s.ApiCode == "BaiduGetVisitDistrict");
24         var data = request.ApiDatas.Replace("30daysago", startDate).Replace("today", endDate);
25         return Json(await hc.HttpPostAsync(request.Url, data));
26     }
27 
28     /// <summary>
29     /// 獲取百度趨勢分析數據
30     /// </summary>
31     /// <returns></returns>
32     public async Task<JsonResult> GetTrendAnalytics(string startDate, string endDate)
33     {
34         var hc = new HttpClient();
35         var request = _requests.FirstOrDefault(s => s.ApiCode == "BaiduGetTrend");
36         var data = request.ApiDatas.Replace("30daysago", startDate).Replace("today", endDate);
37         return Json(await hc.HttpPostAsync(request.Url, data));
38     }
39 }

區域分析顯示

有了區域分析的數據，接下來考慮要怎麼顯示。

咱們設計各個省份的訪問量，能夠經過地圖展示，根據實際訪問量的多少，經過顏色的深淺表現；
表格的形式，具體顯示不一樣省份的訪問量和佔比；
柱狀圖的形式，顯示最近7天的訪問量趨勢；

地圖展示，採用jvectormap插件，它是矢量地圖，且有本身的API，仍是很是好用的，具體使用方法，推薦訪問官網：http://jvectormap.com/

Areas/Tools/Views建立視圖Index：

 1 <!-- 分佈地圖 -->
 2 <div class="col-md-6 col-sm-6">
 3     <div class="box-body">
 4         <div id="map-markers" class="text-center" style="height: 420px;">
 5             <div>瀏覽量地域分佈</div>
 6         </div>
 7     </div>
 8 </div>
 9 <!-- 分佈表格 -->
10 <div class="col-md-4 col-sm-4" style="height: 440px; overflow: auto;">
11     <table class="table table-bordered" id="districtTable">
12         <tbody>
13             <tr>
14                 <th style="width: 10px">#</th>
15                 <th>省份</th>
16                 <th>瀏覽量(PV)</th>
17                 <th>佔比</th>
18             </tr>
19         </tbody>
20     </table>
21 </div>
22 <!-- 近一週統計 -->
23 <div class="col-md-2 col-sm-2">
24     <div class="pad box-pane-right bg-green" style="min-height: 280px">
25         <div class="description-block margin-bottom" id="trend_pv_count">
26             <div class="sparkbar pad" data-color="#fff"></div>
27             <h5 class="description-header"></h5>
28             <span class="description-text">瀏覽量(PV)</span>
29         </div>
30         <div class="description-block margin-bottom" id="trend_visitor_count">
31             <div class="sparkbar pad" data-color="#fff"></div>
32             <h5 class="description-header"></h5>
33             <span class="description-text">訪客數(UV)</span>
34         </div>
35         <div class="description-block" id="trend_ip_count">
36             <div class="sparkbar pad" data-color="#fff"></div>
37             <h5 class="description-header"></h5>
38             <span class="description-text">IP數</span>
39         </div>
40         <div class="description-block" id="trend_avg_visit_time">
41             <div class="sparkbar pad" data-color="#fff"></div>
42             <h5 class="description-header"></h5>
43             <span class="description-text">平均訪問時長</span>
44         </div>
45     </div>
46 </div>

SiteAnalytics.js中，定義jvectormap顯示樣式，動態獲取區域分析數據後，設置數據集mapObject.series.regions[0].setValues(visitorsData);

 1 var options = {
 2     map: 'cn_mill',
 3     backgroundColor: 'transparent',
 4     regionStyle: {
 5         initial      : {
 6         fill            : 'rgba(210, 214, 222, 1)',
 7         'fill-opacity'  : 1,
 8         stroke          : 'none',
 9         'stroke-width'  : 0,
10         'stroke-opacity': 1
11       },
12       hover        : {
13         'fill-opacity': 0.7,
14         cursor        : 'pointer'
15       },
16       selected     : {
17         fill: 'yellow'
18       },
19       selectedHover: {}
20     },
21     series: {
22         markers: [{
23             attribute: 'fill',
24             scale: ['#C8EEFF', '#0071A4'],
25             normalizeFunction: 'polynomial',
26             values: [408, 512, 550, 781],
27             legend: {
28                 vertical: true
29             }
30         }],
31         regions: [
32             {
33                 scale: ['#ebf4f9', '#92c1dc'],
34                 normalizeFunction: 'polynomial'
35             }
36         ]
37     },
38     onRegionLabelShow: function (e, el, code) {
39         var html = '';
40         html += '<div style="width:120px;">';
41         html += '<div style="border-bottom:1px solid;padding-bottom:5px;">' + el.html() + '</div>';
42         html += '<div style="margin-top:5px;"><i class="fa fa-circle text-success margin-r-5"></i>瀏覽量(PV)<span class="pull-right">';
43         if (typeof visitorsData[code] != 'undefined') {
44             html += visitorsData[code];
45         } else {
46             html += 0;
47         }
48         html += '</div>';
49         html += '<div style="margin-top:5px;"><i class="fa fa-circle text-primary margin-r-5"></i>佔比<span class="pull-right">';
50         if (typeof pecentData[code] != 'undefined') {
51             html += pecentData[code];
52         } else {
53             html += 0;
54         }
55         html += ' %</div>';
56         el.html(html);
57     }
58 }
59 
60 $('#map-markers').vectorMap(options);