ASP.NET Core 一步步搭建个人网站（5）_Api模拟和网站分析
程序员文章站
2022-08-09 19:58:36
前言 经过前面几章，我们的网站已经最基本的功能，接下来就是继续拓展其他的功能，这期一起来实现一个该网站流量分析的工具，统计出这个网站每天用户相关数据，不仅要满足了我们对流量统计数字的基本要求，并且用更简单的图形显示方式，让我们一目了然地获取页面热度、点击率信息等等。有了这个想法以后，那怎么实现呢，跟 ......
前言
经过前面几章，我们的网站已经最基本的功能，接下来就是继续拓展其他的功能，这期一起来实现一个该网站流量分析的工具，统计出这个网站每天用户相关数据，不仅要满足了我们对流量统计数字的基本要求，并且用更简单的图形显示方式，让我们一目了然地获取页面热度、点击率信息等等。有了这个想法以后，那怎么实现呢，跟着笔者一步步来吧。
首先，需要考虑怎么才能获得用户访问网站时的相关数据呢？我们没必要自己去记录这些信息，目前已经有很多成熟的解决方案，提供捕获这些信息的免费接口，我们只用去访问这些接口就可以了。
在众多的方案中，有2款目前是比较流行的，分别是google analytics和百度统计。怎么说呢，google的确实是行业的大牛，不仅很成熟，而且有详尽的技术文档，数据收集过程很顺利，但是数据呈现需要*(原因你们懂得)，这块是硬伤，一个开放的网站没法要求用户都要*吧，也是由于这个原因，让我忍痛放弃了google analytics。那只有一个选择了：百度统计。想比较而言，百度统计的相关技术文档不忍多说，都是泪，笔者在坑中摸爬滚打很久，才弄明白怎么调用和访问。
方案定下来，因为我们要访问百度统计的开放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的配置，我们来测试一下：
有了上面API模拟工具，现在可以很方便的调试我们百度统计接口了。百度统计是怎么获取这些网站用户访问的相关信息的呢？原理其实很简单，百度针对你的注册服务提供一段js代码，其中包含标识你在百度统计的id。你在网页中添加这段代码后，每当用户访问该网站时，会下载这段js脚本，加载完毕和离开页面的时候，都会发送一次请求和传递参数，百度统计服务中心从而捕获到这些信息，维护在服务器中。调用百度统计API传递你的id，会根据id返回你的网站对应分析数据。
关于流量统计原理，有兴趣详见揭秘百度统计和Google Analytics的工作原理
注册百度统计知道了原理，那首先第一步我们注册百度统计用户。注册完成后，我们找到 代码管理-->代码获取，将百度统计帮你自动生成好的js脚本复制过来，粘贴到site.js文件中。由于_layout母版页引用了site.js文件，这样的话，网站域名下所有的用户访问，都会被统计。
安装完百度统计的代码，发布网站程序，可以用百度统计中代码检查，看看自己统计代码有没有被正确的安装，如果安装成功，估计20分钟后，就可以在百度统计中查看网站的访问情况了。当然，你也可以添加多个域名的网站。
现在我们很方便的在百度统计中查看各种统计数据了，比如流量分析、来源分析、访问分析、转化分析等等，接下来需要获取这些数据，来移植到我们自己的网站中来。百度提供了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);
小结
用地图显示区域分析功能至此就已经大体完成，我们加上图表数据的显示，这样内容更丰富些，最后，我们看下效果：