4 10月 0

ASP.NET Core 一步步搭建个人网站（5）_Api模拟和网站分析

前言

经前几节，我们的网站就尽核心的职能，接下便累拓展其他的功效，这期并来实现一个该网站流量分析的工具，统计有此网站每天用户相关数据，不仅使满足了我们对流量统计数字的主导要求，并且为此重新简便易行的图形显示方式，让我们看清地得页面热度、点击率信息等等。有了是想法之后，那怎么落实呢，跟着笔者一步步来吧。

首先，需要考虑怎么才会获得用户访问网站经常的有关数据吧？我们从不必要自己失去记录这些信息，目前就来为数不少秋之缓解方案，提供捕获这些消息的免费接口，我们只有所以去拜访这些接口就可以了。

于重重底方案被，有2款目前凡是于盛行的，分别是google
analytics和百度统计。怎么说呢，google的真是行的大牛，不仅充分成熟，而且出详尽的技能文档，数据搜集过程格外顺利，但是数量见得fanqiang(原因你们知道)，这块是刚伤，一个开的网站没法要求用户都使fanqiang吧，也是由于这原因，让自家忍痛放弃了google
analytics。那不过出一个选择了：百度统计。想比较而言，百度统计的连带技能文档不忍多说，都是泪液，笔者于坑中搜寻爬滚打大长远，才为明白怎么调用和看。

方案定下来，因为我们而拜百度统计的盛开API，以后会经常调用到外网的各种API，为了磨刀不费砍柴工，我们出一个API的模拟工具，用来调节。

API模拟工具

单身为API模拟工具增加一个菜单项，菜单管理–>新增菜单，增加一个根节点菜单下之一个子菜单：“工具箱”。以后有常用的开发工具菜单，就放该目录，然后以“工具箱”菜单下，再新建一个子菜单：“API模拟”。
那C#遭逢怎么调用远程API方法为，一般用HttpClient可以拜，这里我们聊更装进一下，分为Get请求（传递url参数）和Post请求（传递url和content参数）：

1 public static class HttpClientExtensions
2 {
3 ///

4 /// Get请求API
5 ///

6 /// 7 /// 8 /// 9 /// 10 ///
11 public static async Task 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 ///

27 /// Post请求API
28 ///

29 /// 30 /// 31 /// 32 /// 33 ///
34 public static async Task 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)
7 {
8 _myRequest = myRequest.Value;
9 }
10
11 ///

12 /// API模拟主页
13 ///

14 /// 15 ///
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 ///

31 /// 调用API
32 ///

33 /// 34 ///
35 public async Task 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 ///

72 /// 初始化下拉选择框
73 ///

74 private void UpdateDropDownList(string selectedApiCode = null)
75 {
76 List listApiName = new List();
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                                 @Model.ApiParas[i].ParaName
36                                 @Html.TextBoxFor(a => a.ApiParas[i].ParaName,
37                                new { @class = "form-control input-sm", type = "hidden" })
38                             </td>
39                             <td>
40                                  @Model.ApiParas[i].ParaType
41                                 @Html.TextBoxFor(a => a.ApiParas[i].ParaType,
42                                new { @class = "form-control input-sm", type = "hidden" })
43                             </td>
44                             <td>
45                                 @(Model.ApiParas[i].Required ? "是" : "否")
46                                 @Html.TextBoxFor(a => a.ApiParas[i].Required,
47                                new { @class = "form-control input-sm", type = "hidden" })
48                             </td>
49                             <td>
50                                 @Model.ApiParas[i].Description
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的安排，我们来测试一下：

流量分析工具

有矣端API模拟工具，现在可以老有益之调节我们百度统计接口了。百度统计是怎抱这些网站用户访问的连带信息之啊？原理其实挺简短，百度针对你的注册服务提供相同段落js代码，其中蕴含标识你当百度统计的id。你以网页中补充加这段代码后，每当用户访问该网站时，会生充斥这段js脚本，加载了和去页面的时光，都见面发送一潮呼吁与传递参数，百度统计服务基本之所以捕获到这些信，维护以服务器遭到。调用百度统计API传递你的id，会根据id返回您的网站对承诺分析数据。

关于流量统计原理，有趣味详见揭露百度统计以及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”: ““,
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             浏览量(PV)
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             访客数(UV)
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             IP数
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             平均访问时长
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)';
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>占比';
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);

小结

据此地图显示区域分析功能至此就已大约完成，我们添加图表数据的示，这样内容还丰富些，最后，我们看下力量：

admin

.NET Core, .NET技术, ASP.NET Core, Bootstrap, web

个人档案