ASP.NET MVC WebApi 返回数据类型序列化控制（json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面，各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目

ASP.NET MVC WebApi 返回数据类型序列化控制（json,xml)

我们都知道在使用WebApi的时候Controller会自动将Action的返回值自动进行各种序列化处理（序列化为json，xml等），但是如果Controller的自动序列化后的结果不是我们想要的该怎么办呢？其实在MVC中有一个GlobalConfiguration（命名空间System.Web.Http）类可以设置WebApi的Controller自动序列化机制，这里我们就通过WebApi的Controller自动序列化json来讲解怎么设置序列化json的机制。

首先我们来看一个例子，下面是一个普通的WebApi的Controller及其中一个Action

public class DataController : ApiController
{
    [AcceptVerbs("get","post")]
    public People GetPeople()
    {
        People people = new People();
        people.Name = "Jim";
        people.Age = 28;
        people.Id = 12345;

        return people;
    }
}

在WebApi Controller的默认序列化机制下，这段代码最后会得到如下json文本：

{"Name":"Jim","Age":28,"Id":12345}

现在假设我们觉得上面得到的json文本有点不尽人意，因为我并不知道这段json是由什么C#类型序列化而来的，怎么办呢？下面就该GlobalConfiguration类出场了，我们在MVC项目中的Global.asax文件的Application_Start方法中加入如下代码：

GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.TypeNameHandling = TypeNameHandling.All;

再次执行上面DataController的GetPeople方法，我们这次得到了如下json文本：

{"$type":"GlobalConfigurationDemoInMVC.Models.People, GlobalConfigurationDemoInMVC","Name":"Jim","Age":28,"Id":12345}

这次我们就可以从json文本的$type属性知道这段json是从类GlobalConfigurationDemoInMVC.Models.People序列化而来的了。因此我们可以知道WebApi的Controller在做Action返回值的序列化时，使用的是GlobalConfiguration类中属性的设置值。

仔细看看GlobalConfiguration类我们会发现，GlobalConfiguration.Configuration.Formatters就是序列化Action返回值的各种序列化模板，其中GlobalConfiguration.Configuration.Formatters.JsonFormatter就是序列化json的模板，GlobalConfiguration.Configuration.Formatters.XmlFormatter就是序列化xml的模板，当然你也可以将自定义模板（模板类要继承MediaTypeFormatter）加入到GlobalConfiguration.Configuration.Formatters中，实现将WebApi Controller的Action返回值序列化为自己想要的任何格式。

我们还可以发现GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings这个属性是Newtonsoft的Json.Net框架中的类型，说明WebApi是使用Json.Net框架来做Action返回值的json序列化的。所以只要我们将GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.TypeNameHandling设置为TypeNameHandling.All，就可以让WebApi Controller在将Action的返回值序列化为json时加上序列化类型了。我们也可以通过GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.Converters属性来增加自定义json转换器，从而让WebApi Controller将Action返回值序列化为json时，使用我们自定义的json转换器。

如果不明白TypeNameHandling.All是什么请点击本链接

说了这么多其实就想说明一点通过GlobalConfiguration类是可以控制WebApi Controller中Action返回值的序列化机制的，但是请注意到目前为止GlobalConfiguration类只能控制WebApi Controller中Action返回值的序列化机制，它不能控制WebApi Controller中Action参数的反序列化机制，更不能控制MVC Controller的Action序列化机制（经测试MVC Controller的Action参数和返回值的序列化机制都无法由GlobalConfiguration类来控制，GlobalConfiguration类的设置对于MVC Controller是完全不起作用的），所以它的使用范围还是很有限的。

用javascript在客户端删除某一个cookie键值对

下面这个方法展示如何在客户端浏览器上用javascript删除某一个cookie键值对。

//用javascript删除某一个cookie的方法，该方法传入要删除cookie的名称
function RemoveCookie(cookieName) {
    var cookies = document.cookie.split(";");//将所有cookie键值对通过分号分割为数组

    //循环遍历所有cookie键值对
    for (var i = 0; i < cookies.length; i++) {
        //有些cookie键值对前面会莫名其妙产生一个空格，将空格去掉
        if (cookies[i].indexOf(" ") == 0) {
            cookies[i] = cookies[i].substring(1);
        }

        //比较每个cookie的名称，找到要删除的那个cookie键值对
        if (cookies[i].indexOf(cookieName) == 0) {
            var exp = new Date();//获取客户端本地当前系统时间
            exp.setTime(exp.getTime() - 60 * 1000);//将exp设置为客户端本地时间1分钟以前，将exp赋值给cookie作为过期时间后，就表示该cookie已经过期了, 那么浏览器就会将其立刻删除掉

            document.cookie = cookies[i] + ";expires=" + exp.toUTCString();//设置要删除的cookie的过期时间，即在该cookie的键值对后面再添加一个expires键值对，并将上面的exp赋给expires作为值(注意expires的值必须为UTC或者GMT时间，不能用本地时间），那么浏览器就会将该cookie立刻删除掉
            //注意document.cookie的用法很巧妙，在对其进行赋值的时候是设置单个cookie的信息，但是获取document.cookie的值的时候是返回所有cookie的信息

            break;//要删除的cookie已经在客户端被删除掉，跳出循环
        }
    }
}

input点击链接另一个页面，各种操作。

1.链接到某页
<input type="button" name="Submit" value="确定" class="btn" onclick="location.href='filename.html'" />

2.返回(等同后退)
<input name="Submit2" type="button" class="btn" onclick="location.href='javascript:history.go(-1);'" value="返回" />

3.打开新网页
<input type="button" name="Submit2" value="确定" class="btn" onclick="window.open('filename.html')" />

4.打开无边框的新窗口
<input type="button" name="Submit2" value="确定" class="btn" onclick="javascript:window.open('filename.html','','width=720,height=500,resizable=yes,scrollbars=yes,status=no')" />

5.打开新网页同时指向另一页
<input type="button" name="Submit2" value="确定" class="btn" onclick="window.open('filename.html');location.href='http://www.cxybl.com'" />

6.打开无边框的新窗口同时指向另一页
<input type="button" name="Submit2" value="确定" class="btn" onclick="javascript:window.open('http://www.cxybl.com','','width=720,height=500,resizable=yes,scrollbars=yes,status=no'); window.location='filename.html';" />

7.点击按钮弹出确认alert窗口
方式一：
<input type="button" name="Submit1" value="确定" class="btn"
onClick="alert('是否确认提交？');location.href= 'filename.html';return false;" >
方式二：
<input type="button" name="Submit2" value="确定" class="btn"
onClick="if (confirm('是否确认提交？'))location.href= 'filename.html';return false;" >

C# 往线程里传参数的方法总结

Thread (ParameterizedThreadStart) 初始化 Thread 类的新实例，指定允许对象在线程启动时传递给线程的委托。
Thread (ThreadStart) 初始化 Thread 类的新实例。
由 .NET Compact Framework 支持。
Thread (ParameterizedThreadStart, Int32) 初始化 Thread 类的新实例，指定允许对象在线程启动时传递给线程的委托，并指定线程的最大堆栈大小。
Thread (ThreadStart, Int32) 初始化 Thread 类的新实例，指定线程的最大堆栈大小。
由 .NET Compact Framework 支持。
我们如果定义不带参数的线程，可以用ThreadStart,带一个参数的用ParameterizedThreadStart。带多个参数的用另外的方法，下面逐一讲述。

一、不带参数的

using System;  
using System.Collections.Generic;  
using System.Text;  
using System.Threading;  
 
namespace AAAAAA  
{  
  class AAA  
  {  
  public static void Main()  
  {  
  Thread t = new Thread(new ThreadStart(A));  
  t.Start();  
 
  Console.Read();  
  }  
 
  private static void A()  
  {  
  Console.WriteLine("Method A!");  
  }  
  }  
}

结果显示Method A!

二、带一个参数的

由于ParameterizedThreadStart要求参数类型必须为object,所以定义的方法B形参类型必须为object。

using System;  
using System.Collections.Generic;  
using System.Text;  
using System.Threading;  
 
namespace AAAAAA  
{  
  class AAA  
  {  
  public static void Main()  
  {   
  Thread t = new Thread(new ParameterizedThreadStart(B));  
  t.Start("B");  
 
  Console.Read();  
  }  
 
  private static void B(object obj)  
  {  
  Console.WriteLine("Method {0}!",obj.ToString ());  
 
  }  
  }  
}

结果显示Method B!

三、带多个参数的

由于Thread默认只提供了这两种构造函数，如果需要传递多个参数，我们可以自己将参数作为类的属性。定义类的对象时候实例化这个属性，然后进行操作。

using System;  
using System.Collections.Generic;  
using System.Text;  
using System.Threading;  
 
namespace AAAAAA  
{  
  class AAA  
  {  
  public static void Main()  
  {  
  My m = new My();  
  m.x = 2;  
  m.y = 3;  
 
  Thread t = new Thread(new ThreadStart(m.C));  
  t.Start();  
 
  Console.Read();  
  }  
  }  
 
  class My  
  {  
  public int x, y;  
 
  public void C()  
  {  
  Console.WriteLine("x={0},y={1}", this.x, this.y);  
  }  
  }  
}

结果显示x=2,y=3

四、利用结构体给参数传值。

定义公用的public struct,里面可以定义自己需要的参数，然后在需要添加线程的时候，可以定义结构体的实例。

//结构体  
  struct RowCol  
  {  
  public int row;  
  public int col;  
  };  
 
//定义方法  
public void Output(Object rc)  
  {  
  RowCol rowCol = (RowCol)rc;  
  for (int i = 0; i < rowCol.row; i++)  
  {  
  for (int j = 0; j < rowCol.col; j++)  
  Console.Write("{0} ", _char);  
  Console.Write("\n");  
  }  
  }

TCP/IP 协议

在日常生活中，我们要传递信息，以前最常用的手段是邮寄信件，想象一下你写信寄信的过程，写信产生数据，寄信传递数据，标准的信件格式是要在信封上写“收信人地址”和“寄信人地址”（由此引入IP地址），“收信人地址”对应数据包里IP头部中的“目的ip地址”，“寄信人地址”对应数据包里IP头部中的“源ip地址”，写上寄信、收信两个地址就可以保证信件可以邮寄到目的地了。

但信件邮寄到目的地址后由谁来收？从上面这封信的收件人地址检索到这个地址是“沈阳大学”的，沈阳大学里可能住着几万人，那你这封信是邮寄给居住沈阳大学里的那个人的？收件人不明确，邮局就算帮你把信件送到这个地址，也没办法帮你投递到具体的收信人。

因此，我们邮件信件需要填写“收件人姓名”、“收件人地址”和“寄件人姓名”、“寄件人地址”的组合，这样才能保证信件能准确投递到具体的收件人手中。

所以我们要在信件上添加收信人姓名和寄信人姓名（由此引入端口号），这个时候收件人姓名就对应数据包里TCP协议头部中的目的端口号，寄信人姓名对应数据包里TCP协议头部中的源端口号。

我们再来对比传递信件与传递数据包的过程：

1.首先是位于南宁的李小明给沈阳的王小花通过QQ发送了一条消息，李小明的电脑将此消息打包成TCP数据包发送到计算机网络中，计算机网络通过数据包中的目的IP地址把该数据包准确传递到王小花的电脑。

2.王小花的电脑收到了李小明的电脑发送过来的数据包，但是王小花的电脑上同时运行有多个程序（例如图中的QQ和微信），虽然王小花的电脑知道这个数据包是传输给它的，但是它不知道该把这个数据包中的数据交给那个程序（就像上面讲的，信件虽然邮寄到了沈阳大学，但沈阳大学里住着那么多人，这封信上没有标示说是邮寄给谁的）。

3.针对以上的问题。如果我们使用数据包结构中的源端口号和目的端口号，根据不同的程序使用不同的端口号来发送和接受数据，这样数据包就能像邮寄信件一样准确投递到具体的电脑上指定的程序了。例如我们指定QQ和微信使用的端口号分别是8000和8080，那么只要你的电脑接收的数据包里目的端口号是8000，那这个数据包就是传输给QQ的。

由上面的例子我们还可以引申出数据包结构中的其他字段的作用，例如我们收到信后可以简单地通过信封是否完整来检查该信件是否被别人在传输途中拆开并篡改过信件内容，那么我们怎么保证我们收到的数据包里的数据有没有在中途被别人拆开修改过呢？数据包结构中有一个字段叫TCP校验和就是专门做这个工作的。由数据包的字段可以看出，很多字段都有其用处，只是我们一开始学的时候没必要学的那么仔细而已。

一定要形象地理解数据包，简单的想一下，计算机网络不就是帮助我们传递信息的吗？对于邮寄信件来说，信息的载体是信纸和信封，那计算机网络中信息的载体是什么？就是各种类型的数据包啊！数据包里有我们关心的信息，也有我们不关心的花销，我们要学的就是如何使网络按照我们的要求传递信息。例如，我们邮寄信件，有平信，有挂号信，根据不同的应用场景选择不同的邮寄方式。计算机网络里信息传输也是一样，针对不同的场景使用不同的协议，有些场景需要多种协议同时配合使用。

上面那个QQ的例子不太严谨，因为QQ和微信的信息都是通过腾讯服务器中转的，但你是初学者没必要一开始就深究这些细节，总之要学会把一切抽象的东西都对照生活中的一些场景使之形象化。这样你的学习过程就不会那么枯燥乏味了。

再来看一下为什么需要网络协议，我们看下图的简单类比：

从上图可以看出，我们邮寄信件只是想要把我们写在信纸信息传递出去，对于我们来说，邮寄信件需要购买信封和邮票，这对于我们来说是没有意义的，甚至我们会觉得连信纸都是多余的，因为还要购买信纸，我们只是想传递信息而已，信封、邮票和信纸对于我们来说是传递信息的额外花销，但是没有这些花销，你的信息就无法通过邮局传递。同理，在计算机网络里也是一样的，我们的通过计算机网络传递信息也需要额外的花销，这些花销体现在计算机网络里就是TCP/IP的各种协议数据包的头部（除去应用层数据之外的其他信息）。

你要知道计算机网络里的数据交换都是像我们日常邮寄信件一样通过各种的数据包来传递的，理解了数据包的作用之后你就应该开始学习计算机网络是如何把数据包传输到目的地的？例如我们的电脑在生成数据包时是怎么知道对方电脑的ip地址的，（由此引入DNS）？我们的信件是最开始是通过邮局帮我们邮寄的，那么我们的电脑的数据包应该由谁来帮我们传输呢？（由此引入网关），网关又是如何帮我们把数据包传输到目的地的？（由此引入各种路由协议）。

所以，你想要学习网络协议，就要先把一些基本的协议的作用和工作过程搞清楚，网络设备还没智能到人脑的程度，它是由人类创造出来的，它的工作过程肯定是符合人类的交流习惯，按照人类的交流习惯来设计的。所以要以人类的思维方式去理解这些协议。例如，你给别人打电话，不可能电话一接通你就啪啦啪啦地说一大通，万一对方接通电话后因为有事还没来得及倾听呢？这不太符合正常人类的交流习惯。一般是电话接通后，双方一般会有个交互的过程，一般是你说一声“你好”，然后对方也回复一声“你好”，双方通过各自一句“你好”明确对方的注意力都放在了电话沟通上，然后你们双方就可以开始交流了，这才是正常的人类交流方式，这个过程体现在计算机网络里就是网络协议！我们通过TCP协议在两台电脑建立网络连接之前要先发数据包进行沟通，沟通后再建立连接，然后才是信息的传输。而UDP协议就类似于我们的校园广播，广播内容已经通过广播站播放出去了，你能不能听到，那就与广播站无关了，正常情况下，不可能你说没注意听然后再让广播站再播放一次广播内容。

同理，我们来看一下网络广播，对于某一个网络的网络广播，只要发送一个网络广播包，这个子网里的所有电脑都能收到这些广播包，这是一个很方便的通知机制，但是会增加对广播数据不感兴趣主机的处理负荷。类似我们的校园广播，校园广播一开启播放，校园里的所有人都能听到，但是不是所有人都对广播内容感兴趣，有些人选择倾听，有些人选择忽略。但不管你是倾听还是忽略，广播的声音都会传到你的耳边。例如，校园广播一条失物招领通知，你根本没丢东西，所以这个广播内容与你无关，但是广播的声音还是会传到你的耳边。对比广场舞音乐，对于跳广场舞的大妈大婶来说，这就是音乐，对于想睡觉的您来说，这就是噪音。

怎样才能更好地理解常见的网络协议？学习网络协议就是要先学习它的工作过程，例如DHCP协议，协议大概是这样讲的：启用了DHCP协议的电脑启动后便会发送广播数据包网络中寻找DHCP服务器，如果网络中有DHCP服务器，这台DHCP服务器便会发送广播数据包与你的电脑进行响应。

这个过程很简单，就是我想要获取ip地址，然后你给我提供一个。想象一下如果你是DHCP协议的设计者，你会考虑到在ip获取和分配过程中会有哪些特殊情况呢？

第一种，如果在你启动电脑的过程中网络中的dhcp服务器刚好宕机了，这时怎么办？让你的电脑一直徒劳地发送寻找DHCP服务器的广播包吗？还是在发现没有DHCP服务器与你响应后就再也不发了？还是每隔一段时间就再发送一次寻找DHCP服务器的广播包？

第二种，如果DHCP服务器的可用ip地址刚好已经分配完了，那又怎么处理？

第三种，如果网络中同时有两台以上的DHCP服务器，那又该怎么处理？

第四种，对于已经分配出去的ip地址就这么一直保持分配出去的状态吗？还是要回收？如果要回收？是我去问你还要不要使用这个ip地址？还是我设定一个回收的时间？只要你在这个时间段内你没有再次联系我重新获取这个ip地址我就把它回收？等等。。。

通过这样的思考你可以发现，网络协议其实也是按照人的思维方式在工作，但是网络设备不会像人一样思考，所以我们当初给它设计各种协议的时候就要尽可能地为它想到这些协议所要应对的场景。例如，你可以先学习ARP协议的工作过程，然后再百度搜索ARP攻击是怎么回事？就是利用ARP协议设计的不严谨，伪造ARP数据包篡改网络里其他电脑的ARP缓存列表。ARP协议采用广播发送协议数据包，这就导致里网络里的每一台电脑都会收到ARP的协议数据包，而ARP协议规定即使你的电脑没有发出arp请求，只要有ARP回应包到达你的主机，你就要对这些协议包进行处理，并将回应包中的mac和ip对应关系放入自己的arp缓存。如果ARP回应包里面的网关IP与ARP对应关系是正确的，这个问题不大，但如果有人在网络中伪造了错误的网关IP与ARP对应关系并广播到网络里，那就出问题了，你可能也意识到你上不了网是因为网关IP对应的ARP对应关系出错，但是没有办法，因为你的电脑上运行的ARP协议规定，你的电脑必须要接受这个错误的对应关系，这就是网络协议设计的不严谨，设计和实现ARP协议的时候没有想到居然会有人在网络中伪造ARP回应包并广播到网络中。

如果你看《TCP/IP详解》这套书觉得很吃力，那就建议暂时不要看了，强烈建议你先看《计算机网络自顶向下方法与Internet特色》这本书，这本书对常见的网络协议的工作过程进行了分析，可读性很强，看起来比《TCP/IP详解》轻松多了，了解了常见协议的工作过程你就可以动手做实验来验证这个协议的工作过程了，建议先使用模拟器来做实验，像cisco packet tracer 就很好用，它有个模拟功能可以像看动画一样看到网络数据包是如何在网络拓扑结构中传输和交互的，对了解协议的工作过程非常有用，还有抓取数据包的功能，可以抓去指定协议的数据包进行查看。

使用真实设备通过在电脑上安装抓包工具进行抓包也可以，只不过没有模拟器上看得那么直观，对于初学者还是建议先以模拟器做实验为主，因为你可以很直观地观察你所设计的网络的运行情况，更容易把心放在学习网络协议的工作过程上。

作者：知乎用户
链接：https://www.zhihu.com/question/51074319/answer/124733136
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

如果这篇文章对你有帮助的话,评论或推荐下吧！(转载请注明原作者！)

用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图

先上结果：

　　之前在公司业务中用过java+Selenium+ChromeDriver ，使用起来非常顺手，可以完美模拟真实的用户浏览行为。最近休息的时候想用C#也试一下，于是有了本文。

　　实现原理一样，只是由java换成了C#。（ps:个人感觉就业务开发代码来说，熟悉之后两种语言可以无缝切换。）

　　事先声明，代码中会采集用户登录咕咚网站之后的个人数据接口，如果此行为损害了咕咚网站的利益，请联系我删除或修改本文（我对采集行为一直本着每一次调用之后sleep的原则，毕竟不是为了把人家的网站搞死）。文中使用的数据是我自己的跑步数据，不涉及到其他用户的数据。

　　项目结构：为了方便跑友使用，用的winform程序，附nuget包

以下是form1.cs的代码，删除了部分提示的 MessageBox.Show()，从产品角度来讲，应该添加loading提示和进度条，这里就只放代码了。需要安装最新的chrome浏览器+代码中使用的chromedriver是 v2.9.248315

  1 using Newtonsoft.Json;
  2 using OpenQA.Selenium;
  3 using OpenQA.Selenium.Chrome;
  4 using System;
  5 using System.Collections.Generic;
  6 using System.ComponentModel;
  7 using System.Data;
  8 using System.Drawing;
  9 using System.IO;
 10 using System.Linq;
 11 using System.Net;
 12 using System.Text;
 13 using System.Threading;
 14 using System.Threading.Tasks;
 15 using System.Windows.Forms;
 16 
 17 namespace GuDongLine
 18 {
 19 public partial class Form1 : Form
 20 {
 21 public Form1()
 22 {
 23 
 24 InitializeComponent();
 25 label2.Text = "请根据提示进行操作，本产品需要最新版本Chrome浏览器支持，网络良好的情况下运行，内部交流，不作为商业软件，如有侵权请扫中间微信二维码联系我。祝各位跑友生活愉快，身体健康，happy PB";
 26 }
 27 delegate void ChangeInvoke(int num);
 28 public int Fun1;
 29 private void button1_Click(object sender, EventArgs e)
 30 {
 31 try
 32 {
 33 Thread thread = new Thread(go);
 34 thread.Start();
 35 
 36 }
 37 catch (Exception)
 38 {
 39 MessageBox.Show("操作异常，请重新打开，或联系我");
 40 }
 41 
 42 }
 43 private void ChangeNum()
 44 {
 45 MessageBox.Show("正在运行请等待！运行完毕后会有提示！");
 46 }
 47 public void go()
 48 {
 49 if (MessageBox.Show("下面请登录咕咚，本软件只会向咕咚官网发送和接受数据，如果发现软件向其他网址发送数据，说明本软件被修改，可能有病毒", "登录咕咚账号", MessageBoxButtons.OKCancel).Equals(DialogResult.OK))
 50 {
 51 ChromeOptions options = new ChromeOptions();
 52 options.AddArguments("--test-type", "--ignore-certificate-errors");
 53 IWebDriver driver = new ChromeDriver(System.Environment.CurrentDirectory, options);
 54 driver.Url = "http://www.codoon.com/home";
 55 Thread.Sleep(10000);
 56 
 57 driver.Navigate().GoToUrl("http://www.codoon.com/gps_sports/my_routes");
 58 
 59 
 60 Thread.Sleep(5000);
 61 int runCount = int.Parse(driver.FindElement(By.Id("current_index")).Text) / 3;
 62 for (int i = 0; i < runCount + 5000; i++)
 63 {
 64 try
 65 {
 66 driver.FindElement(By.ClassName("more_data")).Click();
 67 Thread.Sleep(800);
 68 }
 69 catch (Exception)
 70 {
 71 if (i > runCount + 100)
 72 {
 73 break;
 74 }
 75 
 76 }
 77 }
 78 Thread thread2 = new Thread(ChangeNum);
 79 thread2.Start();
 80 string userId = driver.FindElement(By.ClassName("home_user_header")).GetAttribute("src").Substring(33, 36);
 81 string data = "";
 82 dynamic va = driver.FindElements(By.ClassName("detail_sports_content"));
 83 foreach (IWebElement iwe in va)
 84 {
 85 using (var client = new WebClient())
 86 {
 87 Thread.Sleep(200);
 88 var responseString = client.DownloadString("http://www.codoon.com/gps_sports/route?user_id=" + userId + "&route_id=" + iwe.FindElement(By.TagName("table")).GetAttribute("id") + "&need_next=1&_=1520349266435");
 89 
 90 
 91 var DynamicObject = JsonConvert.DeserializeObject<dynamic>(responseString);
 92 string ss = "";
 93 foreach (var s in DynamicObject.line)
 94 {
 95 ss += ((double)s[1] + 0.0062).ToString() + "," + ((double)s[0] + 0.00135).ToString() + ";";
 96 }
 97 ss = ss.Remove(ss.Length - 1);
 98 data += ss + "&";
 99 }
100 }
101 data = data.Remove(data.Length - 1);
102 driver.Close();
103 string html = @"<!DOCTYPE html><html lang='zh - CN\'>
104 <head>
105 
106 <meta charset = 'utf-8'>
107 
108 <meta http - equiv = 'X-UA-Compatible' content = 'IE=edge'>
109 
110 <meta name = 'viewport' content = 'width=device-width, initial-scale=1'>
111 
112 <title> my_all_run_lines </title>
113 
114 <link rel = 'stylesheet' href = 'http://cache.amap.com/lbs/static/main1119.css' />
115 </head>
116 <body>
117 <div id = 'container' class='container'></div>
118 <script src = 'http://webapi.amap.com/loca?key=6ac3f558819c2c4711ea0c0a37192137'></script>
119 <script src='http://a.amap.com/Loca/static/dist/jquery.min.js'></script>
120 <script>
121 
122 var map = Loca.create('container', {
123 key: '1e387d3db027b46a23600cf7f2ed7344',
124 mapStyle: 'amap://styles/grey',
125 features: ['bg', 'road'],
126 zoom: 10
127 });
128 
129 var layer = Loca.visualLayer({
130 container: map,
131 type: 'line',
132 shape: 'line',
133 });
134 
135 $.get('http://a.amap.com/Loca/static/mock/buslines.txt', function (data) {
136 data = '" + data + "';" + "" +
137 "" +
138 "" +
139 "" +
140 "" +
141 "" + @"var lines = data.split('&').map(function (item) {
142 return {
143 linePath: item.split(';').map(function(lnglat) {
144 return lnglat.split(',');
145 })
146 };
147 });
148 
149 layer.setData(lines, {
150 lnglat: 'linePath'
151 });
152 layer.setOptions({
153 style: {
154 opacity: 0.2,
155 lineWidth: 2,
156 stroke: '#b7eff7',
157 }
158 });
159 
160 layer.render();
161 })
162 
163 </script>
164 </body>
165 </html>";
166 
167 string path = System.Environment.CurrentDirectory + "\\map.html";
168 File.WriteAllText(path, html);
169 }
170 else
171 {
172 System.Environment.Exit(0);
173 }
174 }
175 
176 }
177 }
178 
179

　　说一下思路:

　　　　1.确定使用的语言和采集框架。

　　　　2.确定数据来源，从咕咚app还是咕咚网站，如果咕咚网站没有提供接口，估计就得去研究app了。本文中耗费时间的一个点就在研究咕咚网站的请求数据的规则上了，原则来说，只要正常用户能打开的网页，无法挡住采集工具。

　　　　3.数据的展示：找了百度地图和高德地图的api接口，两个也都分别试了一下，其实咕咚网本身是使用的谷歌的，但是谷歌的接口研究起来不太方便，最后从数据展示的效果上选择了高德地图，顺便说一下，从咕咚采集的跑步数据其实是一组一组的经纬度坐标，而且是被阉割的经纬度，精确度不够，所以地图上显示的时候会有偏差，随着跑步距离的增长，数据量也比较大，以文中1700公里的跑量，生成的展示html是2.42M ，我家里的古董笔记本加载的时间比较长。

　　另：很久以前跟咕咚的客服打过电话，想要一个集成自己所有跑步路线的功能，貌似答应的很好，但是没发现app中有此功能（本文的由来？），当然，如果提供这个功能，一下加载这么多数据，对服务器来说不太好，但是可以迂回一下嘛，比如只生成一个月之前的？申请之后生成？个人感觉有许多解决办法，而且也能做成一种营销活动。

　　欢迎探讨，欢迎指教，谢谢大家，希望每一个程序员身体健康。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　by：跑过16+17北马的coder

(转)值得学习百度开源70+项目

百度，一家让人既爱又恨的企业，血友吧贴吧被卖，魏则西事件的持续发酵，一时间将百度推到了舆论的风口浪尖上。是非对错，我们在这里也不多做评判，本文呢为大家整理了百度开源的70+项目，看看有没有感兴趣的。本文内容综合整理自oschina、github。

1. JavaScript图表库 ECharts

ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

2. 分布式配置管理平台 Disconf

Distributed Configuration Management Platform(分布式配置管理平台)专注于各种分布式系统配置管理的通用组件/通用平台, 提供统一的配置管理服务。

3. 移动WebApp开发框架 Clouda

Clouda是基于node.js的Webapp开发框架，在使用Clouda时需要安装node.js和MongoDB。

4. 全新 3D 可视化库 ECharts-X

ECharts-X是 ECharts 团队推出的全新 3D 可视化库，它是基于 ECharts 的扩展，底层深度整合了 WebGL 库QTEK和 Canvas2D 库ZRender。

5. 百度的Javascript库 Tangram

Tangram是Baidu开发的一套简单可依赖的Javascript库。

6. 在线富文本编辑器 UMeditor

UMeditor，简称UM，是为满足广大门户网站对于简单发帖框，或者回复框需求所定制的在线富文本编辑器。 UM的主要特点就是容量和加载速度上的改变，全版本的代码量为125k，而且放弃了使用传统的iframe模式，采用了div的加载方式，以达到更快的加载速度和零加载失败率。

7. Android自动化测试框架 Cafe

Cafe 测试框架是一款来自百度QA部门的具有开创性意义的Android平台的自动化测试框架，框架覆盖了Android自动化测试的各种需求。框架致力于实现跨进程测试、快速测试、深度测试，解决了Android自动化测试中的诸多难题，比如业界一直没有解决的跨进程测试问题。

8. Web 端的 UI 框架 BlendUI

BlendUI 是百度公司的一个 Web 前端 UI 框架。BlendUI 能让Webapp的体验和交互与Native媲美。

9. 百度音乐播放内核 MuPlayer

MuPlayer 是一款跨平台、轻量级的音频播放解决方案，是百度@音乐前端团队开发维护的浏览端音频播放内核，它基于HTML5 Audio及Flash音频技术，已在百度音乐多个线上产品线中应用，具备很强的灵活性和稳定性。

10. 轻量级UI组件 Magic

Magic是用JavaScript脚本开发的轻量级UI组件，具有性能高效、代码量小、支持多种初始化方式等方面的优势，Web前端开发者可以使用Magic快速搭建前端功能比较复杂的网站。Magic的每个组件都有非常丰富的接口和事件处理，网站也提供了详细的使用文档和Demo演示。Web前端开发者可以通过定制组件、初始化方式和插件获得最轻量级版本。

11. 高性能RPC框架 BGCC

BGCC(音：[bigsisi:])是百度具有完全知识产权的跨平台、多语言、面向对象与服务的轻量级高性能RPC框架。它支持事务级别的服务端消息主动推送，强大的接口级事务管理功能，包含自定义的通信协议、接口描述语言(bidl)、强大的代码生成引擎(bidl2sl)，Java、C++通信无缝整合。

12. 分布式表格系统 Tera

Tera 是一个高性能、可伸缩的数据库系统，被设计用来管理搜索引擎万亿量级的超链与网页信息。为实现数据的实时分析与高效访问，我们使用按行键、列名和时间戳全局排序的三维数据模型组织数据，使用多级Cache系统，充分利用新一代服务器硬件大内存、SSD盘和万兆网卡的性能优势，做到模型灵活的同时，实现了高吞吐与水平扩展。

13. 基于 Node 的 JavaScript 同构解决方案 rebas

基于 Node 的 JavaScript 同构解决方案。提供了 saber 的服务端运行环境，使其具备从 SPA 到 MPA，从前端渲染到后端渲染的深度响应式能力。

14. 面向c/c++语言的构建工具 Broc

broc是一款面向c/c++语言的构建工具，提供了编译、分支依赖、依赖模块下载等功能。不同于make, cmake等以库文件链接的编译方式，broc将依赖库源代码与程序源代码一并同时进行编译，这种方式可以避免程序源代码与依赖库编译选项或平台不一致导致的软件兼容性问题；broc支持编译结束后自动运行单元测试用例；借助Jenkins broc还能完成软件的持续集成。

15. 富文本编辑器 Ueditor

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点。

16. 在线脑图编辑器 Kity Minder

KityMinder 是百度FEX团队的f-cube小组（原UEditor小组）的又一力作。作为一款在线的脑图编辑工具，它有着很多Native编辑工具的交互体验。KM与UE有着一样的宗旨，就是注重最终用户的使用体验。同时，它充分发挥了Web云存储的优势，可以直接将编辑中的脑图同步到云端。此外，借由独创的 “云盘分享”功能，用户可以一键将当前编辑的脑图直接生成在线链接共享给其他用户，实现无缝沟通。

17. 轻量级的Canvas类库 ZRender

zrender（Zlevel Render）是一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型，让canvas绘图大不同！

18. 文件上传组件 WebUploader

WebUploader 是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，延用原来的FLASH运行时，兼容IE6+，Andorid 4+，IOS 6+。两套运行时，同样的调用方式，可供用户任意选用。

19. 手势识别与事件库 Touch.js

Touch.js是移动设备上的手势识别与事件库, 由百度云Clouda团队维护，也是在百度内部广泛使用的开发工具。

20. 地图可视化工具库 Mapv

Mapv 是一款基于百度地图的大数据可视化开源库，可以用来展示大量的点、线、面的数据，每种数据也有不同的展示类型，如直接打点、热力图、网格、聚合等方式展示数据。

21. 专注于移动端的滑动解决方案 iSlider

iSlider 是个非常平滑的滑块，支持移动端 WebApp，HTML5App 和混合型的 App。

22. 百度UI库 ESUI

ESUI是一套简单的UI Library，提供一系列的控件，能满足基本页面交互功能。ESUI的API与默认视觉皮肤遵循BAIDU ECOMUI标准。

23. jQuery的弹窗插件 wBox

wBox轻量级的弹出窗口jQuery插件，基于jQuery1.4.2开发，主要实现弹出框的效果，并且加入了很多有趣的功能，比如callback函数，显示隐藏层，Ajax页面，iframe嵌入页面等功能。

24. 百度BI平台 BiPlatform

百度开源的新一代一站式敏捷bi平台，提供报表和OLAP服务的敏捷BI平台。

25. 前端集成解决方案 F.I.S

F.I.S（FIS）所提供的集成解决方案依托于一套灵活高效的编译工具，F.I.S借助该编译平台对前端开发资源进行整合。接触F.I.S，可以从该平台入手。

26. 移动端组件库 Global Mobile UI

GMU（Global Mobile UI）是百度前端通用组开发的移动端组件库，具有代码体积小、简单、易用等特点，组件内部处理了很多移动端的bug，覆盖机型广，能大大减少开发交互型组件的工作量，非常适合移动端网站项目。

27. RPC框架 sofa-pbrpc

sofa-pbrpc(sofa protobuf-based rpc)是使用Boost::Asio实现的基于Google Protocol Buffers RPC框架的网络通信库，在百度公司各部门得到广泛使用。

28. 百度文件系统 BFS-Baidu

百度的核心数据库Tera将数据持久化在分布式文件系统上，分布式文件系统的性能、可用性和扩展性对整个上层搜索业务的稳定性与效果有着至关重要的影响。

29. 企业级标准加载器 ESL

ESL 是一个浏览器端、符合AMD的标准加载器，适合用于现代Web浏览器端应用的入口与模块管理。

30. 前端移动框架 Saber

Saber 是模块化、组合式的前端移动框架。

31. 百度mysql分库分表中间件服务器 heisenberg

heisenberg 是百度的熊照同学(id:brucexx)编写的一款基于MySQL协议之上的分库分表中间件服务器，支持各种灵活（velocity脚本自定义）的分库分表规则，做到应用和分库分表相隔离，并且为mysql进行dbproxy,减少了db的连接IO压力，并且可做到读写分离以及replication的手工切换。

32. doc 文档在线编辑和预览 wordonline

wordonline 是在线编辑和预览 .doc 和 .docx 文档的工具。

33. JS模板引擎 BaiduTemplate

baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎。

34. 在线文件管理器 UFinder

UFinder 是百度前端团队基于页面级的文件管理应用。

35. webSlide

webSlide是用于在线PPT演示文档的javascript框架。

36. 网络幻灯片 nodePPT

nodePPT 是使用nodejs写的网络幻灯片。

37. 前端模块化解决方案 fis-pure

fis-pure 是基于FIS的纯前端模块化解决方案pure。

pure是基于FIS二次封装能力封装而成的解决方案，可以直接使用，也可以参考fis-pure自行封装或组合使用插件来构建属于自己的一体化解决方案。

38. J2EE Velocity 前端集成方案 jello

jello 是针对服务端为 JAVA + Velocity 的前端集成解决方案。jello 为优化前端开发而生，提供前后端开发分离、自动性能优化、模块化开发机制等功能。

39. protobuf的Java开发包 jprotobuf

jprotobuf是针对Java程序开发一套简易类库，目的是简化java语言对protobuf类库的使用，使用jprotobuf可以无需再去了解.proto文件操作与语法，直接使用java注解定义字段类型即可。

40. 人工智能软件 WARP-CTC

WARP-CTC 是百度硅谷 AI 研究所 (SVAIL) 开源的百度关键人工智能 (AI) 软件。

41. 百度云Go语言SDK bcsgo

百度云存储服务Go语言SDK。

42. 前端模块加载解决方案 modJS

modJS 是一套的前端模块加载解决方案。与传统的模块加载相比，modJS 会根据产品实际使用场景，自动选择一种相应的方案，使最终的实现非常轻量简洁。

43. 公式编辑器 KityFormula

Kity Formula 为您提供公式表达式解析，可视化公式编辑，公式完美展示于一身的web端的整体解决方案。

44. 高品质的 WebGL 类库 Qtek

Qtek (WebGL Graphic Library) 是一个高品质的 WebGL 类库，目前仍处于实验阶段。

物理组件：

https://github.com/pissang/qtek-physics

2D 组件

https://github.com/pissang/qtek-2d

45. 集群操作系统 Galaxy

Galaxy是一个数据中心操作系统，目标是最大化资源的利用率与降低应用部署运维代价，支持万台集群资源调度与管理，目前主要服务于百度网页搜索离线架构业务，解决分布式文件系统，分布式表格系统，以及上层计算模块运维与部署问题。

46. 富浏览器端web应用框架 ER

ER 是百度公司的一个富浏览器端web应用的框架，适用于并能很方便地构建一个整站式的AJAX web应用。

47. 深度学习平台 PaddlePaddle

PaddlePaddle（并行分布式深度学习）是一个易于使用的、高效的、灵活的和可扩展的深度学习平台，它最初是百度的科学家和工程师为了能让百度产品能提供深度学习而开发的。

48. 前端统计框架 ALog

ALog 是前端统计框架。

49. Baidu Push SDK

Baidu Push SDK 是百度的云推送 SDK 开发包。

50. 企业级前端应用开发平台 EDP

EDP是基于 Node 的前端应用开发平台，是一个企业级前端应用的开发平台，提供了常用的项目管理工具、包管理工具、调试工具、构建工具、代码生成工具、代码检测工具等一系列开发时的支持，并允许用户自定义自己的扩展。

51. HTML5 音乐播放器 Player

Player 是 HTML5 版本音乐播放器，支持 iOS 设备。

演示地址：http://4.qdemo.sinaapp.com/html5/chrome/

52. jQuery 遮罩插件 SlipHover

SlipHover 是一个基于 jQuery 的插件，它能够感知鼠标移动方向，并在相应的方向（或反方向）以动画的方式显示出一个遮罩层，用来显示标题或描述，应用到幻灯片或相册中是个不错的选择。 SlipHover 还支持自定义遮罩高度、动画时间、字体颜色、背景颜色、文字排版等等。

53. 模板引擎 ETPL

ETPL是一个灵活、具有强大复用能力的高性能的模板引擎，适用于WEB前端应用中视图的生成，特别是SPA(Single Page APP)类型的应用。

54. 基于 LESS 的样式工具库 EST

EST(ECOM Styling Toolkit)是一个基于 LESS 的样式工具库，帮助您更轻松地书写 LESS 代码。EST提供了一系列方便快捷的 mixin，只在调用时才输出代码。est 不希望提供直接给 HTML 调用的类名，用「样式类」污染 HTML 代码的语义。当然您也可以根据自己的项目需求基于 est 搭建样式类库，提供类名接口来进行快速开发。

演示地址：http://ecomfe.github.io/est/fiddle/

55. 基于 SVG 的矢量图形库 Kity

Kity 是一个基于 SVG 的矢量图形库，帮助你快速在页面上创建和使用矢量元素。

56. 前端资源聚合平台 Lights

Lights 是FIS包管理工具。提供便捷、易用的资源安装、发布、搜索，管理工具。用于团队间快速共享资源，提升开发效率。

57. EDP 扩展 edpx-zhixin

edpx-zhixin 是 edp 的一个扩展，提供给百度的FE开发搜索结果页模板的工具。

58. 服务虚拟化 Terminator

服务虚拟化指的就是虚拟出不稳定、不可用、未开发完全的服务。

59. 前端集成解决方案 baidu yogurt

yogurt 是基于 fis 扩展针对服务端为 express.js 的前端集成解决方案。

60. 移动 Web 的 CSS 样式工具库 Rider

rider是一个基于 Stylus、专注于移动 Web 的 CSS 样式工具库。

61. kraken.js 扩展 Yog

Yog 是一个基于 Express.js 的 Node.js Web 应用引导模块，扩展了 kraken.js。

62. 基于Nodejs 的前端工具集 FEinit

FEinit 是基于Nodejs 的前端工具集，因为是在windows系统开发，所以目前仅适合 windows 系统。

63. Node Log 统计方案 yog-log

yog-log 是 Node Log 统计方案，是yog框架的log统计模块，支持中间件或者单独使用等方式，兼容ODP日志格式与配置。

64. 轻量级覆盖率测试工具 logcover

logcover 是一款非常便捷的统计测试用例异常日志覆盖率的工具。可清晰地分析出程序源代码中异常日志的覆盖情况，检验测试充分度，指导测试用例完善。

65. 知心组件库 moye

Moye 是 ECOM UI 1.1 规范的一个轻量级实现。

66. fis-postprocessor-amd

fis-postprocessor-amd 能识别 js 中 amd 依赖，自动包转 isMod 的 js 为 amd。

67. EDP 的移动端扩展 EDPM

edpx-mobile（EDPM）是 EDP 的移动端扩展。EDPM 是对 edp 功能的补充，为移动项目提供项目初始化、脚手架、调试服务器等功能。

68. 前端代码风格工具 FECS

FECS 是基于 Node.js 的前端代码风格工具。

69. WEB 组件规范 xspec

xspec 是一系列基于WEB COMPONENTS的组件规范，致力于借助规范的力量让组件发挥更大的价值。

70. yog-pm

yog-pm是在pm2的基础上提供了几个增强命令，提高pm2的易用性和稳定性。

71. Express.js 中间件 yog-view

yog-view 是一个 Express.js 中间件，用来优化 js/css 输出排序，允许在 bigpipe 模式中显示。