ASP.NET Core 一步步搭建个人网站（5）_Api模拟和网站分析 - Lancel0t
source link: https://www.cnblogs.com/lizzie-xhu/p/8258904.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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 /// <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数据导出
现在我们很方便的在百度统计中查看各种统计数据了，比如流量分析、来源分析、访问分析、转化分析等等，接下来需要获取这些数据，来移植到我们自己的网站中来。百度提供了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);
用地图显示区域分析功能至此就已经大体完成，我们加上图表数据的显示，这样内容更丰富些，最后，我们看下效果：
Recommend
-
66
Unity3D手机斗地主游戏开发实战（01）_发牌功能实现 欢迎大家前往
-
72
欢迎大家前往我的个人博客，获取更好的阅读体验和更多分享文章~ Hi，之前有同学说要我把源码发出来，那我就把半成品源码的链接放在每篇文件的最后，有兴趣的话可以查阅参考，有问题可以跟我私信...
-
95
欢迎大家前往我的个人博客，获取更好的阅读体验和更多分享文章~ 上一章，我们实现了用户的注册和登录，登录之后展示的是我们的主页，页面的左侧是多级的导航菜单，定位并展示用户需要访问的不同...
-
48
Github + Hexo + Travis Github 源文件和网站资源的管理 Hexo 网站内容的生成...
-
22
[个人网站搭建]·极简方式实现打赏功能 可以查看我的个人主页，参看效果--> https://xiaosongshine.github.io/ 个人网站搭建github地址：
-
12
2020年02月19日 阅读 3136 一步步带你用VuePress来搭建个人网站 VuePress可以让你非常方便的在Markdown文档中编写V...
-
15
...
-
7
从0到1搭建个人网站 八-django中集成ckeditor 全栈技术...
-
15
...
-
2
再小的网站都有自己的价值，Webify 致力于帮助有情怀的站点先跑起来。 为了让更多开发者聚焦于网站本身的内容建设，而无需操心部署流程以及访问量与托管费用不对等的情况。Webify 特别推出个人站点扶持计划：将博客/论坛/官网等...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK