查看订单跟踪时,我想看哪些信息?

如今电商已经相当普及了,大部分人都会从网上购买东西,网购已经成为生活的一部分,我也会经常在网上购买一些东西,一次好的网购过程对于我来说是能够以最快的速度拿到购买的东西。

相比传统的实体店购买过程体验,从购买开始的挑选,到最后支付完拿到东西,网购会多一个物流配送的过程「其实传统购买也有配送,只是多数由自己完成这个过程」,这个过程在网购中也会反应用户能够多快速拿到东西,高效率的配送会随着物流体系的建设与完善大大缩短送达时间,在很多时候做电商的如京东、amazon、当当、还有当下的做O2O的,很大程度上其构建的壁垒来自仓储与物流体系。

这里面没有说淘宝及天猫,因为很少在这上面购买东西,挑选东西的成本太高,倒是老婆会经常在上面买些东西。

在这整个过程中商家会提供对购买东西的跟踪,以便让用户清楚知道什么时候能够得到东西。凑着这两天买东西对经常使用的电商平台的购买跟踪进行了比较,在这里说说自己对于购买跟踪的体验。

当产生订单以后我最关注的就是什么时候能够送达,进行分解后应该涵盖下面几点:

我买的东西现在发出去了没?
如果发出去了目前在路途中还是已经送达我所在的城市?
开始往我这里派送了没?
我能联系到派送人吗?

对于我这样一个普通用户来说,我不太关注什么分拣点啊,已经完成分拣什么之类的,同样我也不关注什么扫描入库或者什么扫描出库这类的,这跟我没太大的关系,也不是我想了解的。

先看看亚马逊的「包裹跟踪」,如下图:

amazon_trace

这个是几个对比电商企业中体验最好的一个,涵盖了我最关注的,跟踪详情还能减少一条,对我来说「正在运输途中、已经到郑州、配送员xxx在给你送达的途中」,这样三条信息足以。

再来看看京东的,京东提供给用户的是对整个订单的跟踪,如下图:

jingdong_trace

可以看到巨多的信息扑面而来,会告诉我提交订单、出库、打印、拣货、扫描、打包……等诸多的信息,看到这些信息我就醉了,这些信息跟我有几毛钱的关系呀,我还得对信息进行筛选再加工,体验对我来说及其不好。

最后看看当当的,当当也是提供基于订单来跟踪,如下图:

dangdang_trace

当当的文字与京东相比少一些,但同样包含入库、出库、扫描、打包、拣货等这些需要我进行二次加工的信息,体验也是很糟糕的。

以上这些仅代表自己的看法,是自己使用中最直观的感受,大部分时间其实我们是不太关注这些的,以前我也不关注这些,只是目前在从事产品相关的工作,在看很多东西的时候都会从自己使用的角度来分析一下产品,产品是可以持续改善的。

对订单跟踪这个需求面向两个类型用户,分别是企业自身与用户,关注点是不同的,对于信息所需也是不同的。

对于企业来说,对订单的跟踪越详细越好,通过详细的跟踪数据可以最大程度上对整个流程进行压榨,从而不断平衡效率与成本,在竞争的市场中获得竞争优势,建立竞争壁垒。

对于用户来说,不需要很详细大追踪信息,而且也不需要那么多的专业术语,只要能够尽快让用户收到东西就是最佳的体验,用户查看跟踪信息也是了解什么时候能收到东西,在出现特殊情况的时候能够了解并能够联系,这就足够了,对于我的最佳体验是「我今天下单,第二天就送到了,甚至当天就到了,而且东西完好」。

Mac Os X yosemite 中配置Apache

启动Apache

Mac自带Apache环境,所需要做的就是启动它然后进行相应的配置。

打开「终端(terminal)」,输入 「sudo apachectl -v」 ,可以看到Mac Os X Yosemite中内置的 Apache 版本。

在「终端」中输入 「sudo apachectl start」 启动 Apache。

打开浏览器在地址栏中输入「http://localhost」,会出现「It works!」页面。

页面默认的位置在 /Library/WebServer/Documents/ 下,这是 Apache 的默认根目录。 Apache 默认安装在 /etc/apache2/ 。

设置虚拟主机

修改 Apache 配置文件, 在 「/etc/apache2/httpd.conf」 ,使用 vim 进行编辑。

找到 「#include /private/etc/apache2/extra/httpd-vhosts.conf」 ,将其注释「#」删除。

重新启动 Apache , 「sudo apachectl restart」,虚拟主机设置开启。

配置虚拟主机,用 vim 打开 「/etc/apache2/extra/httpd-vhosts.conf」 进行配置,配置代码如下。


  DocumentRoot "/Library/WebServer/Documents"
  ServerName localhost
  ErrorLog "/private/var/log/apache2/localhost-error_log"
  CustomLog "/private/var/log/apache2/localhost-access_log" common



  DocumentRoot "/Users/yourLoginName/Sites"
  ServerName sites
  ErrorLog "/private/var/log/apache2/sites-error_log"
  CustomLog "/private/var/log/apache2/sites-access_log" common
  
    Options Indexes FollowSymLinks MultiViews
    AllowOverride None
    Order deny,allow
    Require all granted
  

配置完成后保存文件,在hosts配置文件「/etc/hosts」中增加「127.0.0.1 sites」,重新启动Apache,中浏览器中输入「http://sites」即可正常访问。

jQuery事件处理

在浏览器交互过程中特定事件发生时脚本会进行相应的处理, jQuery 会针对不同的事件进行特定的处理。

浏览器检测到自身发生变化或遇到错误时,抛出的事件称为浏览器事件。比如浏览器页面内容发生滚动时会触发 scroll 事件,浏览器出错会触发 error 事件。可分别对应事件绑定相应的事件处理函数,这样当事件发生时就会调用此函数。

//当一个image标签指定要加载的图片不存在时,产生错误
$("<img>", {
  "src" : "not/an/bb.png",
  "alt" : "no image"
})
.error(function() {
  console.log("图片无法加载");
})
.appendTo("body");

//当滚动浏览页面内容时,触发 scroll 事件
$(window)
  .scroll(function() {
    console.log("窗口滚动");
  });

通常在页面中的 javascript 会在页面加载完成后才能开始执行,为了防止脚本过早执行,而页面中的元素还未加载而导致异常,通常会使用 ready 函数来保证等 DOM 准备好可以接受处理时才触发进行处理,通常会把整个脚本做成一个回调函数传递给 ready 函数。

$(document).ready(function() {
  //脚本
});

在浏览器中可以触发很多事件,jQuery 提供很多快捷方法对应相应的事件,常见的事件有 click 、 blur 、 focus 、 mousedown 、 mouseup 、submit 等,给对应的元素绑定事件及其处理函数可在事件发生时进行相应的响应。

bind()

可以给元素绑定事件处理函数,可最多接受三个参数,第一个参数为事件名,第二个参数为事件处理函数,可以一次为多个事件绑定同一个事件处理函数,也可以为不同的事件绑定不同的事件处理函数。如果为多个事件绑定同一个事件处理函数,在第一个参数中用空格分隔不同的事件。如果要为不同的事件绑定不同的事件处理函数,需要给bind方法传递一个 JSON 对象。另外可接受的第三个参数用于向事件处理函数传递数据,这个参数是一个 JSON 对象,该参数的数据会绑定到事件处理函数的 event 对象,从而完成数据的传递。

//给段落绑定 click 事件,点击段落输出段落被点击信息
$("p").bind("click", function() {
  console.log("段落被点击");
});

//给段落绑定 click, mouseover 事件,并输出事件发生信息
$("p").bind("click mouseover", function() {
  console.log("事件发生");
});

//给段落绑定 click, mouseover 事件,并输出不同的信息
$("p")
  .bind({
    "click" : function() {
      console.log("Click Event");
    },
    "mouseover" : function() {
      console.log("MouseOver Event");
    }
  });

//给事件处理函数传递数据
var Msg = "message 1";
$("#bar").bind("click", {m:Msg}, function(event) {
  console.log(event.data.m);
});

var Msg = "message 2";
$("p.foo").bind("click", {m:Msg}, function(event) {
  console.log(event.data.m);
});

unbind()

可以使用 unbind 方法移除元素的事件,如果不带参数调用该方法,则会移除当前元素的所有绑定事件,如果需要指定移除那个事件,就把该事件名作为第一个参数传递给 unbind 方法,如果要移除指定的事件处理函数,就把准备移除的事件处理函数作为第二个参数传递给 unbind 方法。

//删除绑定在段落中的所有事件
$("p").unbind();

//仅删除绑定在段落中的click事件
$("p").unbind("click");

//删除指定事件处理函数
var fun1 = function() {
  console.log("event one triggered!");
},
    fun2 = function() {
  console.log("another one event!");
};
$("#bar").bind("click",fun1)
         .bind("click",fun2)
         .trigger("click")
         .unbind("click", fun1);

live() 和 die()

live 和 die 跟 bind 和 unbind 类似,也是负责为元素绑定事件和事件处理函数,所不同的是能为动态添加到 DOM 中的匹配元素绑定事件和事件处理函数,用 live 绑定的事件处理和事件处理函数必须使用 die 来解除绑定, 在 jQuery 1.7 以后 live 以过时,应该使用on方法。

one()

跟bind功能唯一的区别就是使用one绑定的事件及事件处理函数是一次性的,事件触发后自动解除绑定,其他功能跟bind相同。

trigger()

触发事件使用trigger,接受两个参数,第一个参数是被触发的事件名,第二个参数可选,为数组类型,用于给事件处理函数传递数据。

//给 id = bar 的元素绑定 click 事件,然后触发
$("#bar").bind("click", function() {
  console.log("Clicked!");
}).trigger("click");

//给事件处理函数传递数据
var notice = "I was triggered!";
$("#bar").bind("click", function(event, msg) {
  var log = msg || "I was clicked!";
  console.log(log);
}).trigger("click", [notice]);

2015年-让咱们带着梦想一起奔跑

奔跑吧2015
景安网络[1]经过10年发展,随着在数据中心的建设与运维以及云计算领域的持续投入,形成了景安网络云计算基础服务体系。在现有业务的稳定且长期在中原地区保持领先的情况下,我们一直在想着是否能够更进一步,能够再为企业用户做点什么?经过反复的讨论,我们选择在企业管理信息化上做一些挑战,以 SaaS (软件即服务)的方式为企业用户提供「简单、高效、好用的企业管理工具套件」,以全新的理念重新定义企业服务软件,为用户提供合适的产品。

「智管 360」由此诞生,我们再次开始新的征程,产品属于内部孵化的创业项目,使用独立的公司与独立的品牌进行运作,从团队创建伊始很快半年过去了,经过了半年的试错与探索,从最初对市场的懵懂逐渐找到了一些用户的需求,也有了一些产出与思索,如今新的一年开始了,一年之计在于春,总结过往后,2015年我们带着梦想一起继续向前奔跑。

1. 求贤

人乃任何时候都是重中之重,经过已发布工程维修追溯应用和审批应用的内测,我们收获无数的友谊,同时也伴随着海量的 BUG 和改进建议,在这些鼓励面前,「智管360」团队越来越觉得在做的事情很有意思也面临很大的挑战,从开始的不靠谱逐渐能看到一点曙光,为了加快曙光的来临,我们需要大量的四有青年跟我们一起奔跑。

你要有一个善良的内心

善良是人之根本,如果没有一颗善良的内心,我们所做的一切都毫无意义,我们的创业团队希望在善良的内心之上,建立相互信任、彼此尊重的价值观,一起冒险。

你要有成功的心态

整个创业的历程是希望获得一个又一个的成功,在激烈的竞争中「赢」,如果没有成功的心态,很难想象能够享受创业的刺激与快感。我们的创业团队需要丰富多彩的工作和生活,没有成功心态的同学是不热爱生活的同学,我们认为他无法做出打动人心的产品。

你要有一定的水准

不管愿望多么美好,现实往往残酷,没有一定的水准,在创业途中就无法填哪些一个个大大小小的坑,我们需要在滚滚的同业创业大潮中拼出自己的一席之地,我们认为有一定的水准是恰到好处满足当前的工作,并能够通过持续的学习做各自专业领域的破坏者,有说干就干的工程实践能力,能够将一件事做到极致,否则无法生存。

你要有梦想

梦想每个人都有,区别在于有些人保持持续的激情并长期坚持去实现梦想,而很多人停留在想一下的状态,创业是一件苦力活,会有很多无法想象的困难,也会碰到无数的挫折,我们需要能保持持续的激情坚持向梦想迈进的伙伴。

说了这么多,我们能够提供什么?

共同实现触手可及的精彩未来
共同经历紧张快乐无序的野蛮创造过程,会面对各种苦逼
足够的生活保障,创业也会保证足够的生活品质,我们拒绝只干活不挣钱

目前开放的职位

1) 看到代码双眼冒光的优质攻城狮(Java、python、iOS、Android)
2) 立志于在产品领域奋斗终生的产品人(产品助理)

如果你不是为了创业而创业,如果在你的心中还有小小的梦想,如果你愿意心无旁骛的做一件极致的事情,如果你有安定的大后方,我们期待你的加入。请给 liutao@zzidc.com 发一份你自认为最成功的案例,我们会认真回复。当然您也可以分析一下我们目前所作的工作, 点击随后的链接直接进入目前我们的产出 「http://zhiguan360.cn 」。

2. 咱们准备做些什么

咱们在2015年准备做些什么呢?咱们会在企业信息化管理方面继续进行尝试,以用户需求驱动产品的持续快速迭代,咱们会一起继续围绕企业人员、工程维修追溯与结合地图定位的轻协作这三部分做好做优。

另外咱们会一起逐步在产品中建立与用户的最直接的交流通道,接受用户最直接的反馈并让用户参与进来与咱们一起创建产品。当然咱们也会逐步借助新媒体工具,尝试将咱们的产品推向市场,给用户解决问题的同时体现产品的价值,体现自身的价值。

我们期待你带着梦想加入我们,共同成长,一起做一些有意思的事情,在人人都在思考互联网思维的当下,我们认为针对企业的 SaaS 市场存在很多的需求与亟待解决的问题,这是我们的机会也是我们前进的方向,2015年让咱们一起朝这个方向奔跑。

jQuery数据集处理函数及动画效果函数

map / each / show / hide / fadeOut / fadeIn / fadeTo / slideUp

slideDown / slideToggle /animate

本文中代码其测试页面点击此处可以查看

map & each

使用回调函数对结果集内的每个元素进行处理,回调函数接受两个参数,分别是当前元素索引和当前元素。二者的区别在于map返回回调函数返回值的新对象,each返回受回调函数影响的原始对象。
比如给所有的段落和类为foo的元素追加标签名和索引。

$("p,.foo").map(function(index, ele) {
  $(this).append("  " + ele.tagName + "  #" + index);
});

可同样使用each完成同样的功能,但是如果对追加了标签名和索引的元素集合进一步处理,比如给标签为,类为foo的元素设置一个红色的字体,黄色的背景,则应该使用each,如果使用map则无法达到期望的结果。

$("p,.foo")
  .each(function(index,ele) {
    $(this).append("  " + ele.tagName + "  #" + index);
  })
  .find("span.foo").css({"color" : "red", "background" : "yellow"});

show & hide

不带参数调用这两个函数会对元素的样式添加或删除display:none;
如 $(“#bar”).hide(); 或 $(“#bar”).show();
这样调用没有动画效果,直接显示或者直接隐藏,没有过度效果,可以通过增加过度时间参数来增加效果。
如 $(“#bar”).hide(2000); 或 $(“#bar”).show(2000);

fadeOut 、fadeIn、fadeTo

可以实现元素淡入淡出效果,fadeOut淡出,通过将元素透明度从1调整到0,来实现元素的淡出,元素淡出结束后设置元素display:none;样式,可设置持续时间参数,默认持续时间为400ms,也接受回调函数参数,在结束后被调用。fadeIn淡入,通过将元素透明度从0调整到1,来实现元素的淡入,元素淡入结束后如果元素有display:none;样式,则会移除该样式。fadeTo可指定淡入或淡出的透明度,为0至1之间的一个数值。必须提供两个参数,一个是持续时间,另一个是目标透明度,也可以通过回调函数作为第三个参数用于在调用结束后被调用。
淡入淡出函数接受两个文本的快捷持续时间,分别是fast和slow,分别对应200ms和600ms。
如将表单元素淡出,并输出对应淡出信息,再讲表单元素淡入,输出对应淡入信息。

$("form")
  .fadeOut(1000, function() {
    console.log("淡出!");
  })
  .fadeIn(1000, function() {
    console.log("淡入!");
  });

将表单淡出到50%透明度,并输出对应信息。

$("form").fadeTo(1000, 0.5, function() {
  console.log("50%透明度");
});

slideUp、slideDown、slideToggle

可以实现元素的收缩与展开,slideUp向上收缩元素,slideDown向下展开元素,slideToogle是展开和收缩的开关,当前元素处于展开状态,应用slideToggle则会收缩,当处于收缩的时候应用则会展开,收缩与展开结束后通过设置元素display:none;样式或删除该样式给用户视觉展现。都可以接受两个参数,分别是持续时间和回调函数。

$("p.foo")
  .slideUp(1000, function() {
    console.log("收缩!");
  })
  .slideDown(1000, function() {
    console.log("展开!");
  });

同样针对类为foo的段落使用slideToggle。

$("p.foo").slideToggle(1000, function() {
  $bar = $("p.foo").attr("style");
  if ($bar === "display: none;") {
    console.log("slide Up");
  } else {
    console.log("slide Down");
  }
});

animate

能利用元素绝大多数可视CSS属性制作动画,其接受两种格式的多种参数,其中第二种格式的参数有更多的选项​,分别是
animate({json target css}, duration, action, succ callback)
animate({json target css}, {json animate options})
我们给id=bar的段落增加背景色和边框,然后5秒内完成段落的长宽缩放,并输出完成信息。

$("#bar")
  .css({
    "background" : "yellow",
    "border" : "1px solid black"
  })
  .animate(
    {
      "width" : "500px",
      "height" : "100px"
    },
    5000,
    "swing",
    function() {
      console.log("animate complete!");
    });

采用第二种格式的参数代码如下,效果与前段一样。

$("#bar")
  .css({
    "background" : "yellow",
    "border" : "1px solid black"
  })
  .animate({
               "width" : "500px",
               "height" : "100px"
           },
           {
             "duration" : 5000,
             "easing" : "swing",
             "complete" : function() {
               console.log("Animate complete!");
             }
          });