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。带多个参数的用另外的方法，下面逐一讲述。

1、不带参数的

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!

2、带一个参数的

因为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!

3、带多个参数的

因为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

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

定义公用的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 模式中显示。