The NoteBook of EricKong

关于怎么写商业策划书的，解读的非常详尽，包括商业策划书的内容、撰写格式、思路等，仅供商业爱好者参考。

商业策划书的目的很简单，它就是创业者手中的武器，是提供给投资者和一切对创业者的项目感兴趣的人，向他们展现创业的潜力和价值，说服他们对项目进行投资和支持。因此，一份好的商业计划书，要使人读后，对下列问题非常清楚：、

1、公司的商业机会；

2、创立公司，把握这一机会的进程 ；

3、所需要的资源；

4、风险和预期回报；

5、对你采取的行动的建议。

商业计划不是学术论文，它可能面对的是非技术背景但对计划有兴趣的人，比如可能的团队成员，可能的投资人和合作伙伴，供应商，顾客，政策机构等，因此，一份好的商业计划书，应该写得让人明白，避免使用过多的专业词汇，聚焦于特定的策略、目标、计划和行动。商业计划的篇幅要适当，太短，容易让人不相信项目的成功；太长，则会被认为太罗嗦，表达不清楚。适合的篇幅一般为20-40页长（包括附录在内）。

从总体来看，写商业策划的原则是：简明扼要；条理清晰；内容完整；语言通畅易懂；意思表述精确。商业计划书一般包括如下十大部分的内容：

一、执行总结

是商业计划的一到两页的概括。包括：

1、本商业（business）的简单描述（亦即“电梯间陈词”）

2、机会概述

3、目标市场的描述和预测

4、竞争优势

5、经济状况和盈利能力预测

6、团队概述

7、提供的利益

二、产业背景和公司概述

1、详细的市场描述，主要的竞争对手，市场驱动力

2、公司概述应包括详细的产品/服务描述以及它如何满足一个关键的顾客需求。

3、一定要描述你的进入策略和市场开发策略

三、市场调查和分析

这是表明你对市场了解程度的窗口。一定要阐释以下问题：

1、顾客

2、市场容量和趋势

3、竞争和各自的竞争优势

4、估计的市场份额和销售额

5、市场发展的走势（对于新市场而言，这一点相当困难，但一定要力争贴近真实）

四、公司战略

阐释公司如何进行竞争，它包括三个问题

1、营销计划 （定价和分销；广告和提升）

2、规划和开发计划（开发状态和目标；困难和风险）

3、制造和操作计划 （操作周期；设备和改进）

五、总体进度安排

公司的进度安排，包括以下领域的重要事件

1、收入

2、收支平衡点和正现金流

3、市场份额

4、产品开发介绍

5、主要合作伙伴

6、融资

六、关键的风险、问题和假定

1、创业者常常对于公司的假定和将面临的风险不够现实

2、说明你将如何应付风险和问题（紧急计划）

3、在眼光的务实性和对公司的潜力的乐观之间达成仔细的平衡

七、管理团队

1、介绍公司的管理团队。一定要介绍各成员与管理公司有关的教育和工作背景

2、注意管理分工和互补

3、最后，要介绍领导层成员，商业顾问以及主要的投资人和持股情况

八、企业经济状况

介绍公司的财务计划，讨论关键的财务表现驱动因素。一定要讨论如下几个杠杆：

1、毛利和净利

2、盈利能力和持久性

3、固定的、可变的和半可变的成本

4、达到收支平衡所需的月数

5、达到正现金流所需的月数

九、财务预测

1、包括收入报告，平衡报表，前两年为季度报表，前五年为年度报表

2、同一时期的估价现金流分析

3、突出成本控制系统

十、假定公司能够提供的利益

这是你的“卖点”，包括

1、总体的资金需求

2、在这一轮融资中你需要的是哪一级

3、你如何使用这些资金

4、投资人可以得到的回报

5、你还可以讨论可能的投资人退出策略

当你在写商业计划的时候，应该达到下列目标：

1、力求表述清楚简洁。

2、关注市场，用事实说话，因此需展示市场调查和市场容量。

3、解释潜在顾客为什么会掏钱买你的产品或服务。

4、站在顾客的角度考虑问题，提出引导他们进入你的销售体系的策略。

5、在头脑中要形成一个相对比较成熟的投资退出策略。

6、充分说明为什么你和你的团队最合适作这件事。

7、请你的读者做出反馈。

当你做商业计划并向投资者提交时，必须避免下列问题：

1、对产品/服务的前景过分乐观，令人产生不信任感。

2、数据没有说服力，比如拿出一些与产业标准相去甚远的数据。

3、导向是产品或服务，而不是市场。

4、对竞争没有清醒的认识，忽视竞争威胁。

5、选择进入的是一个拥塞的市场，企图后来居上。

6、商业计划显得非常不专业，比如缺乏应有的数据、过分简单或冗长。

7、不是仔细寻求最有可能的投资者，而是滥发材料。

商业策划书形式与内容

目 录

执行概要 …………………………………………………

第一部分 公司基本情况…………………………………

第二部分 公司管理层……………………………………

第三部分 产品/服务………………………………………

第四部分 研究与开发……………………………………

第五部分 行业及市场情况………………………………

第六部分 营销策略………………………………………

第七部分 产品制造………………………………………

第八部分 管理……………………………………………

第九部分 融资说明………………………………………

第十部分 财务计划………………………………………

第十一部分 风险控制………………………………………

第十二部分 项目实施进度…………………………………

第十三部分 其它……………………………………………

备查资料清单……………………………………………………

1．创办企业的目的？为什么要冒风险，花精力、时间、资源、资金去创办风险企业？

2．创办企业所需的资金？为什么要这么多的钱？为什么投资人值得为此注入资金？

一、怎样写好商业计划书

1．关注产品 2．敢于竞争 3．了解市场 4．表明行动的方针 5．展示你的管理队伍 6．出色的计划摘要

二、商业计划书的内容

1．计划摘要

计划摘要一般要有包括以下内容：公司介绍、主要产品和业务范围、市场概貌、营销策略、销售计划、生产管理计划、管理者及其组织、财务计划、资金需求状况等。

在介绍企业时，首先要说明创办新企业的思路，新思想的形成过程以及企业的目标和发展战略。其次，要交待企业现状、过去的背景和企业的经营范围

企业家的素质对企业的成绩往往起关键性的作用。在这里，企业家应尽量突出自己的优点并表示自己强烈的进取精神，以给投资者留下一个好印象。

在计划摘要中，企业还必须要回答下列问题：

（1）企业所处的行业，企业经营的性质和范围；

（2）企业主要产品的内容；

（3）企业的市场在那里，谁是企业的顾客，他们有哪些需求；

（4）企业的合伙人、投资人是谁；

（5）企业的竞争对手是谁，竞争对手对企业的发展有何影响。

摘要要尽量简明、生动。特别要详细说明自身企业的不同之处以及企业获取成功的市场因素。

2．产品（服务）介绍

在进行投资项目评估时，投资人最关心的问题之一就是，风险企业的产品、技术或服务能否以及在多大程度上解决现实生活中的问题，或者，风险企业的产品（服务）能否帮助顾客节约开支，增加收入。

（1）顾客希望企业的产品能解决什么问题，顾客能从企业的产品中获得什么好处？

（2）企业的产品与竞争对手的产品相比有哪些优缺点，顾客为什么会选择本企业的产品？

（3）企业为自己的产品采取了何种保护措施，企业拥有哪些专利、许可证，或与已申请专利的厂家达成了哪些协议？

（4）为什么企业的产品定价可以使企业产生足够的利润，为什么用户会大批量地购买企业的产品？

（5）企业采用何种方式去改进产品的质量、性能，企业对发展新产品有哪些计划等等。

3．人员及组织结构

有了产品之后，创业者第二步要做的就是结成一支有战斗力的管理队伍。

企业的管理人员应该是互补型的，而且要具有团队精神。

4．市场预测

当企业要开发一种新产品或向新的市场扩展时，首先就要进行市场预测。

市场预测首先要对需求进行预测：市场是否存在对这种产品的需求？需求程度是否可以给企业带来所期望的利益？新的市场规模有多大？需求发展的未来趋向及其状态如何？影响需求都有哪些因素。其次，市场预测还要包括对市场竞争的情况？？企业所面对的竞争格局进行分析：市场中主要的竞争者有哪些？是否存在有利于本企业产品的市场空档？本企业预计的市场占有率是多少？本企业进入市场会引起竞争者怎样的反应，这些反应对企业会有什么影响？等等。

在商业计划书中，市场预测应包括以下内容：市场现状综述；竞争厂商概览；目标顾客和目标市场；本企业产品的市场地位；市场区域和特征等等。

5．营销策略

营销是企业经营中最富挑战性的环节，影响营销策略的主要因素有：

（1）消费者的特点；

（2）产品的特性；

（3）企业自身的状况；

（4）市场环境方面的因素。最终影响营销策略的则是营销成本和营销效益因素。

在商业计划书中，营销策略应包括以下内容：

（1）市场机构和营销渠道的选择；

（2）营销队伍和管理；

（3）促销计划和广告策略；

（4）价格决策。

6．制造计划

商业计划书中的生产制造计划应包括以下内容：产品制造和技术设备现状；新产品投产计划；技术提升和设备更新的要求；质量控制和质量改进计划。

在寻求资金的过程中，为了增大企业在投资前的评估价值，风险企业家应尽量使生产制造计划更加详细、可靠。一般地，生产制造计划应回答以下问题：企业生产制造所需的厂房、设备情况如何；怎样保证新产品在进入规模生产时的稳定性和可靠性；设备的引进和安装情况，谁是供应商；生产线的设计与产品组装是怎样的；供货者的前置期和资源的需求量；生产周期标准的制定以及生产作业计划的编制；物料需求计划及其保证措施；质量控制的方法是怎样的；相关的其他问题。

7．财务规划

财务规划需要花费较多的精力来做具体分析，其中就包括现金流量表，资产负债表以及损益表的制备。流动资金是企业的生命线，因此企业在初创或扩张时，对流动资金需要有预先周详的计划和进行过程中的严格控制；损益表反映的是企业的赢利状况，它是企业在一段时间运作后的经营结果；资产负债表则反映在某一时刻的企业状况，投资者可以用资产负债表中的数据得到的比率指标来衡量企业的经营状况以及可能的投资回报率。

财务规划一般要包括以下内容：

（1）商业计划书的条件假设；

（2）预计的资产负债表；预计的损益表；现金收支分析；资金的来源和使用。

企业的财务规划应保证和商业计划书的假设相一致。事实上，财务规划和企业的生产计划、人力资源计划、营销计划等都是密不可分的。要完成财务规划，必须要明确下列问题：

（1）产品在每一个期间的发出量有多大？

（2）什么时候开始产品线扩张？

（3）每件产品的生产费用是多少？

（4）每件产品的定价是多少？

（5）使用什么分销渠道，所预期的成本和利润是多少？

（6）需要雇佣那几种类型的人？

（7）雇佣何时开始，工资预算是多少？等等

商业策划书的撰写

美国的一位著名风险投资家曾说过，“风险企业邀人投资或加盟，就象向离过婚的女人求婚，而不像和女孩子初恋。双方各有打算，仅靠空口许诺是无济于事的”。商业计划书对那些正在寻求资金的风险企业来说，就是“金钥匙”,决定着投资的成败。对刚开始创业的风险企业来说，商业计划书的作用尤为重要，通过制订商业计划书，把正反理由都书写下来,然后再逐条推敲，会发现原本还在“雏型”的项目已经变得清晰可辨，也更利于风险企业家认识和把握该项目。

商业计划书首先是把计划中要创立的企业推销给了风险企业家自己。其次，商业计划书还能帮助把计划中的风险企业推销给风险投资家，公司商业计划书的主要目的之一就是为了筹集资金。因此，商业计划书必须要说明：

(1)创办企业的目的??为什么要冒风险，花精力、时间、资源、资金去创办风险企业?

(2)创办企业所需的资金??为什么要这么多的钱?为什么投资人值得为此注入资金?

对已建的风险企业来说，商业计划书可以为企业的发展定下比较具体的方向和重点，从而使员工了解企业的经营目标，并激励他们为共同的目标而努力。更重要的是，它可以使企业的出资者以及供应商、销售商等了解企业的经营状况和经营目标，说服出资者(原有的或新来的)为企业的进一步发展提供资金。正是基于上述理由，商业计划书将是风险企业家所写的商业文件中最主要的一个。那么，如何制订商业计划书呢?

第一部分：摘要

摘要是风险投资者首先看到的部分。通过摘要，风险投资者对你和你的计划书形成第一印象，所以摘要必须形式完美，叙述清楚流畅。

第二部分：公司及未来

这部分要使风险投资者对你公司的几个主要项目及未来的发展战略有一定程度的了解，各专题既要独具特色，又要构成一个相关的整体。

1．概述：只要你提供的公司名称、地址、电话号码、联系人等资料皆清楚无误，则风险投资者将不会提出任何问题。如果可能，可提出行业分类标准，请注意，千万不要给人无法收到的电话号码，如果你不在，应建立接转电话的服务机构或请朋友代转。

2．公司的自然情况：这里，你要力求用最简练的一段话描述公司的业务情况。更重要的是，要用最简短的一句话使风险投资者可以概略认识你的公司。如果你公司已是计算机网络成员，则你对公司的描述应与在计算机中的描述一致，这样，风险投资者可以依据你的行业分类目录概略认识你公司，如果你的文字欠简明扼要，则对方可能要求你解释，以确认你公司所属行业。

3．历史情况：这里，风险投资者主要寻求一个概略性的认识。即使对方已读过公司历史这节，他可能还要求你描述公司的历史，他们欲详细了解过去发生了哪些事件。这节似乎很难确定问题的基本类型，但对方很可能提出与公司特殊历史事件相关的问题。其中一类典型问题可能是：”为什么你人帮了这件事或做了那件事?” 另一类典型问题则可能是：”你公司发展历史上有哪些重要的里程碑?为什么有实现这些历史转折?”

4．公司管理：该部分主要介绍公司的管理情况，领导者及其他对公司业务有关键影响的人。通常，小公司不超过三个关键人物。风险投资对关键人物十分关心。你应该从最高层起，依次介绍，而且注意，关键人物不等于有成就者。主要包括董事和高级职员、关键雇员、管理者之职业道德、薪金等方面。

5．公司未来的发展规划：这里，风险投资者还是寻求有关公司未来可完成的里程碑的信息。他们可能提出涉及及未来关键阶段的问题，其基本问题可能是：”你如何完成计划书规定的关键指标?”

6．唯一性（管理唯一、产品服务唯一或投资基础唯一等）：这里，你必须回答的问题是：”本公司独特的原因何在?”这个问题变换说法为：”与世界上所有小公司比较，有哪些因素使你公司兴旺发达?”在公司总体范畴之内，大公司通常优越于小公司，如果认为这条规律有一定道理，那么，在你不得不与大公司竞争时，如何保证你公司必胜?为使风险投资者满意放心，你必须明确提出本公司之不寻常的优势，可以确保成功。如果你只是”此外，我也差不多”式的回答，对方很可能听听睡着了。

7．产品或服务介绍：这里，风险投资者要了解你出售什么，以及市场上需要什么样的产品和满意的服务；他要努力评估你产品的可销售程度和创新程度；他还关心你公司产品处于产品生命周期的哪一阶段。他的问题可能是：”为什么这种产品或服务有实用价值?它为用户提供哪些功能?用户的购买动机是什么”本产品寿命周期如何?何时可能被新产品取低?有无计划出新产品或以现存的产品冲出你的产品市场?这种冲出有利还是有害?你的产品责任是什么?若用户使用你的产品而受到伤害，你要承担哪些责任?你的产品价格受到哪些限制?价格弹性多少?产品耐用性如何?如何进行产品技术改进?在产品生命周期曲线中，你产品处于哪个阶段?”

8．行业情况：这里，风险投资者钭千方百计分析认识你的行业。他的问题可能是：”你在你行业中成功之关键何在?如何保证你公司和产品与你行业协调一致?此外还有一些基本问题，像”你如何了解确认你行业之总销售额与增长速率?你行业基本发展趋势如何?哪些行业变化对你公司盈利水准影响最大?你行业有哪些贸易壁垒?第三者初次进入你所属的行业圈难度如何?与同行其它产品比较，你的产品新颖处何在?本行业销售受哪些季节性因素影响?你的销售范围圈有多广，是地方、地区、全国还是全世界?”

应该注意的是，你所介绍的本行业一定时期内的销售额，不能包括未被你产品占领的领域的销售额。例如：若一个公司只制造微型电脑，则不能说已占领了全部电脑市场。微型电脑市场只是整个电脑市场的一部分，对应的行业只是微电脑市场，而不是全部电脑市场，事实上，目前的微电脑市场已很广阔了。

9．竞争者：这里，风险投资者希望了解：谁是竞争者，其实力如何，有何优势，以及你自身有哪些优势。其典型的问题可能是：”你有哪些超过竞争对手的优势?关于价格、性能、服务和保证措施，你公司与竞争对手优劣如何?竞争对手有哪些超过你的优势?谁是你最主要的竞争对手? 谁是你的行业伙伴?你与谁在高层次基础上竞争?你的产品有无替代品?如果有，谁制造这种产品?其地替代频繁程度怎样?你与竞争对手的价格差异如何?有无竞争对手加入你的行业?如果你打算选择某一市场与竞争对手共享，你的具体措施如何?希望竞争对手如何做出反应?你的竞争对手有股票公开上市的公司吗?”

10．销售策略：这里，风险投资者将集中精力分析研究你的市场行销战略，它希望了解你产品从生产现场最终转到用户手中的全部过程。某些基本问题可能为：” 描述你的产品的分销管道，即说明你产品从生产现场转到最终用户的全过程。你的产品有哪些行销环节?是本公司直接零售，还是通过行业销售网销售?广告在市场行销战略中地位如何?你的基本广告策略是什么?其成本怎样?你的销售对广告的敏感程度怎样?你曾采用过哪些市场渗透策略?现计划采用哪些市场渗透策略?若你的产品和行业进入成熟期计划采用何种市场战略?目前销售难度如何?需要直接推销否?即销售人员是否需要直接对用户叫卖?销售复杂且周期长；还是相当简单且直接推销?购买单件产品费用是高还是低?用户购买产品时是否一定要事前做预算?从与购买者签约到最终销售的时间长短如何?政府对市场交易是否有严格管制?”。

第三部分：投资说明

关于投资，你应该提出自己的融资方案，即对贷款、认股权、优先股、普通股等多种投资形式阐明自己的意见，意见要尽可能具体，使对方全面准确了解己方到底准备采用何种融资方式，并愿意付出多大代价。

第四部分：风险因素

投资者向你公司投资可能会遇到何种风险？你应从政策、经营、资源、财务等各方面加以叙述。在说明过程中，只正面叙述，不做评论性说明，主要包括：经营历史的限制、资源限制、管理经验限制、市场不确定性限制、生产不确定性限制、破产对关键管理者的依赖程度等。

第五部分：投资回报与退身之路

这是投资者非常关心的问题。因为大多数风险投资者并无真正意愿想长期持有公司的股权，而是希望能在条件成熟时“金蝉脱壳”，从而通过股票的增值获取收益。一般来说风险投资者可提出三种投资变现方式，主要包括股票上市，出售公司和买回等。你应指出自己希望采用何种方式。

第六部分：经营分析与预测

该部分主要基于公司历史的经营业绩分析，据以预测未来的经营情况，这里主要应以公司过去财务数据为基础，预测未来经营可能的收入、成本与费用，同时，通过比率分析预测出未来经营效率的高低及经营成果的好坏。

第七部分：财务报告

计划书中应包含你公司当前的财务报告，并附有适当的说明。无论如何，无当前财务报表的计划书是无法让人接受的。一份没有当年财务报告的项目是难以引起风险投资者的兴趣的。

第八部分：财务预测

对公司未来5 年的财务状况进行预测，还需预测以年的资金流量表，以便每个读者能确切了解公司资金流动状态。

第八部分：关于产品的报道、介绍、样品与图片

为增加计划书的说服力，你可以收集一些自己公司的综合介绍文献、搜集行业产品目录、收集某些产品图片等情况等。这些对争取投资均有一定作用，但不宜过多，否则会起喧宾夺主的反作用。需要声明的是，这些只能作为计划书的附件。

总述：

以上介绍的是计划书的全部内容，根据公司及项目的具体情况，可以结合实际情况在此基础上增添或删改，这都是为了满足项目的需要。

后记：

商业地产的策划要从策划的本源上说起，即什么是“策划”。按照中国文字的意思进行理解：策划就是运用谋略和计策去取得一种超出常规的良好结果。如果这个诠释能被接受的话，那么商业地产的策划就易于理解了。

首先商业地产策划是一种智慧的创造，它能在商业地产的开发活动中创造出新的价值；如“海上海”的建筑创意，就使“上实”多收二三斗。如“巴比伦生活”的策划，使得物业的区域价值被凸现出来，“金点子”或者单纯的灵感或创意活动；创建性、系统性、完整性、可导入性，更重要的是可以执行才是策划的本质，它能改变项目，产品的形象市场地位，解决或排除某些商业地产开发过程中某些阻碍和难题。策划不能等同于“包装”，“包装”是策划活动中经常运用的一种常规手段，它只能起到“锦上添花”的作用，如果通过包装手段把不利条件变成有利条件了，那么这种包装行为是有欺诈嫌疑的。

商业地产策划活动没有公式（否则就不是策划了），但有以下几条策划的规律是需要掌据的。一是价值发现，就是要在商业地产的价值挖掘方面要独具慧眼，找出别人没有看到的价值；二是以理服人，商业地产不相信煽情。商业地产是投资性物业，是固化的资本，投资者比消费者理性，过分热炒概念是没有作用的，有用的是完美演绎盈利模式，合理推导要符合商业逻辑，这才是商铺市场乐于接受的引导；三是以品牌策划的手法去策划商业地产；商业地产开发的过程就是这个项目商业品牌树立的过程，有了市场广泛的认可，商业就会繁荣，商业繁荣的结果就是这个商业物业升值或价值兑现快捷。

Nodejs给Javascript赋予了服务端应用的生命，Jquery让Javascript成为浏览中开发的利器。 最近学习了Nodejs的Express3.0的开发框架，本来是按照“node.js开发指南”书中介绍，但“node.js开发指南”讲的是Express2.x的，从Express2.x到Express3.0自己模索中还是走了不少弯路的。写篇文章总结一下。

关于作者

张丹(Conan), 程序员Java,R,PHP,Javacript
weibo：@Conan_Z
blog: http://blog.fens.me
email: bsspirit@gmail.com

转载请注明出处：
http://blog.fens.me/nodejs-express3/

程序代码已经上传到github有需要的同学，自行下载。
https://github.com/bsspirit/nodejs-demo

从零开始nodejs系列文章

从零开始nodejs系列文章，将介绍如何利Javascript做为服务端脚本，通过Nodejs框架web开发。Nodejs框架是基于V8的引擎，是目前速度最快的Javascript引擎。chrome浏览器就基于V8，同时打开20-30个网页都很流畅。Nodejs标准的web开发框架Express，可以帮助我们迅速建立web站点，比起PHP的开发效率更高，而且学习曲线更低。非常适合小型网站，个性化网站，我们自己的Geek网站！！

目录

此文重点介绍Express3.0的开发框架，其中还会涉及到Mongoose,Ejs,Bootstrap等相关内容。

1. 建立工程
2. 目录结构
3. Express3.0配置文件
4. Ejs模板使用
5. Bootstrap界面框架
6. 路由功能
7. Session使用
8. 页面提示
9. 页面访问控制

开发环境：

Win7旗舰版 64bit

MonogoDB: v2.4.3

Tue May 14 09:24:50.118 [initandlisten] MongoDB starting : pid=1716 port=27017 dbpath=./data 64-bit host=PC201304202140
Tue May 14 09:24:50.119 [initandlisten] db version v2.4.3
Tue May 14 09:24:50.119 [initandlisten] git version: fe1743177a5ea03e91e0052fb5e2cb2945f6d95f
Tue May 14 09:24:50.119 [initandlisten] build info: windows sys.getwindowsversion(major=6, minor=1, build=7601, platform=2, service_pack='Service Pack 1') BOOST_LIB_VERSION=1_49
Tue May 14 09:24:50.119 [initandlisten] allocator: system
Tue May 14 09:24:50.119 [initandlisten] options: { dbpath: "./data" }
Tue May 14 09:24:50.188 [initandlisten] journal dir=./data\journal
Tue May 14 09:24:50.189 [initandlisten] recover : no journal files present, no recovery needed
Tue May 14 09:24:50.441 [initandlisten] preallocateIsFaster=true 3.26
Tue May 14 09:24:50.778 [initandlisten] preallocateIsFaster=true 5.88
Tue May 14 09:24:51.827 [initandlisten] waiting for connections on port 27017
Tue May 14 09:24:51.827 [websvr] admin web console waiting for connections on port 28017

nodejs: v0.10.5, npm 1.2.19

node -v
v0.10.5
npm -v
1.2.19

1. 建立工程

进入工程目录

cd D:\workspace\project

全局安装express，express作为命令被安装到了系统中

npm install -g express

查看express版本

express -V
3.2.2

使用express命令创建工程，并支持ejs

D:\workspace\project>express -e nodejs-demo

create : nodejs-demo
create : nodejs-demo/package.json
create : nodejs-demo/app.js
create : nodejs-demo/public
create : nodejs-demo/public/javascripts
create : nodejs-demo/public/images
create : nodejs-demo/public/stylesheets
create : nodejs-demo/public/stylesheets/style.css
create : nodejs-demo/routes
create : nodejs-demo/routes/index.js
create : nodejs-demo/routes/user.js
create : nodejs-demo/views
create : nodejs-demo/views/index.ejs

install dependencies:
$ cd nodejs-demo && npm install
run the app:
$ node app

根据提示，下载依赖包

cd nodejs-demo && npm install

express@3.2.2 node_modules\express
├── methods@0.0.1
├── fresh@0.1.0
├── buffer-crc32@0.2.1
├── range-parser@0.0.4
├── cookie-signature@1.0.1
├── cookie@0.0.5
├── qs@0.6.3
├── commander@0.6.1
├── debug@0.7.2
├── mkdirp@0.3.4
├── send@0.1.0 (mime@1.2.6)
└── connect@2.7.8 (pause@0.0.1, bytes@0.2.0, formidable@1.0.13)

模板项目建立成功，启动模板项目。

D:\workspace\project\nodejs-demo>node app.js
Express server listening on port 3000

本地的3000端口被打开，通过浏览器访问: localhost:3000

通过node启动程序，每次代码修改都需要重新启动。 有一个工具supervisor，每次修改代码后会自动重启，会我们开发省很多的时间。

npm install supervisor

再启动服务

D:\workspace\project\nodejs-demo>supervisor app.js

DEBUG: Running node-supervisor with
DEBUG: program 'app.js'
DEBUG: --watch '.'
DEBUG: --ignore 'undefined'
DEBUG: --extensions 'node|js'
DEBUG: --exec 'node'

DEBUG: Starting child process with 'node app.js'
DEBUG: Watching directory 'D:\workspace\project\nodejs-demo' for changes.
Express server listening on port 3000

 

2. 目录结构

D:\workspace\project\nodejs-demo>dir

2013/05/14 09:42 877 app.js
2013/05/14 09:48 <DIR> node_modules
2013/05/14 09:42 184 package.json
2013/05/14 09:42 <DIR> public
2013/05/14 09:42 <DIR> routes
2013/05/14 09:42 <DIR> views

目录介绍：

• node_modules, 存放所有的项目依赖库。(每个项目管理自己的依赖，与Maven,Gradle等不同)
• package.json，项目依赖配置及开发者信息
• app.js，程序启动文件
• public，静态文件(css,js,img)
• routes，路由文件(MVC中的C,controller)
• Views，页面文件(Ejs模板)

3. Express3.0配置文件

打开app.js文件

/**
* 模块依赖
*/
var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path');

var app = express();

//环境变量
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

// 开发模式
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}

// 路径解析
app.get('/', routes.index);
app.get('/users', user.list);

// 启动及端口
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});

 

4. Ejs模板使用

让ejs模板文件，使用扩展名为html的文件。

修改：app.js

app.engine('.html', ejs.__express);
app.set('view engine', 'html');// app.set('view engine', 'ejs');

修改后，ejs变量没有定义，supervisor的程序会一直报错

ReferenceError: ejs is not defined
at Object. (D:\workspace\project\nodejs-demo\app.js:17:21)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
at startup (node.js:119:16)
at node.js:901:3
DEBUG: Program node app.js exited with code 8

在app.js中增加ejs变量

var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path')
, ejs = require('ejs');

访问localhost:3000，程序报错

Error: Failed to lookup view "index"
at Function.app.render (D:\workspace\project\nodejs-demo\node_modules\express\lib\application.js:495:17)
at ServerResponse.res.render (D:\workspace\project\nodejs-demo\node_modules\express\lib\response.js:756:7)
at exports.index (D:\workspace\project\nodejs-demo\routes\index.js:7:7)
at callbacks (D:\workspace\project\nodejs-demo\node_modules\express\lib\router\index.js:161:37)
at param (D:\workspace\project\nodejs-demo\node_modules\express\lib\router\index.js:135:11)
at pass (D:\workspace\project\nodejs-demo\node_modules\express\lib\router\index.js:142:5)
at Router._dispatch (D:\workspace\project\nodejs-demo\node_modules\express\lib\router\index.js:170:5)
at Object.router (D:\workspace\project\nodejs-demo\node_modules\express\lib\router\index.js:33:10)
at next (D:\workspace\project\nodejs-demo\node_modules\express\node_modules\connect\lib\proto.js:190:15)
at Object.methodOverride [as handle] (D:\workspace\project\nodejs-demo\node_modules\express\node_modules\connect\lib\middleware\methodOverride.js:37:5)
GET / 500 26ms

重命名：views/indes.ejs 为 views/index.html

访问localhost:3000正确

 

5. 增加Bootstrap界面框架

其实就是把js,css文件复制到项目中对应该的目录里。 包括4个文件：

复制到public/stylesheets目录

bootstrap.min.css
bootstrap-responsive.min.css

复制到public/javascripts目录

bootstrap.min.js
jquery-1.9.1.min.js

接下来，我们把index.html页面切分成3个部分：header.html, index.html, footer.html

header.html, 为html页面的头部区域
index.html, 为内容显示区域
footer.html，为页面底部区域

header.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><%=: title %></title>
<!-- Bootstrap -->
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- <link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen"> -->
</head>
<body screen_capture_injected="true">

index.html

<% include header.html %>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<% include footer.html %>

注：express3.0时，ejs嵌入其他页面时使用include，express2.x用法不一样。

footer.html

<script src="/javascripts/jquery-1.9.1.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
</body>
</html>

访问localhost:3000正确。

我们已经成功的使用了EJS模板的功能，把公共的头部和底部从页面中分离出来了。

并已经引入了bootstrap界面框架，后面讲到“登陆界面”的时候，就会看到bootstrap界面效果了。

 

6. 路由功能

我们设计一下用户登陆业务需求。

访问路径：/，页面：index.html，不需要登陆，可以直接访问。
访问路径：/home，页面：home.html，必须用户登陆后，才可以访问。
访问路径：/login，页面：login.html，登陆页面，用户名密码输入正确，自动跳转到home.html
访问路径：/logout，页面：无，退出登陆后，自动回到index.html页面
打开app.js文件，在增加路由配置

app.get('/', routes.index);
app.get('/login', routes.login);
app.post('/login', routes.doLogin);
app.get('/logout', routes.logout);
app.get('/home', routes.home);

注：get为get请求，post为post请求，all为所有针对这个路径的请求

我们打开routes/index.js文件，增加对应的方法。

exports.index = function(req, res){
res.render('index', { title: 'Index' });
};
exports.login = function(req, res){
res.render('login', { title: '用户登陆'});
};
exports.doLogin = function(req, res){
var user={
username:'admin',
password:'admin'
}
if(req.body.username===user.username && req.body.password===user.password){
res.redirect('/home');
}
res.redirect('/login');
};
exports.logout = function(req, res){
res.redirect('/');
};
exports.home = function(req, res){
var user={
username:'admin',
password:'admin'
}
res.render('home', { title: 'Home',user: user});
};

创建views/login.html和views/home.html两个文件

login.html

<% include header.html %>
<div class="container-fluid">
<form class="form-horizontal" method="post">
<fieldset>
<legend>用户登陆</legend>
<div class="control-group">
<label class="control-label" for="username">用户名</label>
<div class="controls">
<input type="text" class="input-xlarge" id="username" name="username">
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">密码</label>
<div class="controls">
<input type="password" class="input-xlarge" id="password" name="password">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">登陆</button>
</div>
</fieldset>
</form>
</div>
<% include footer.html %>

注：使用了bootstrap界面框架，效果还不错吧.

home.html

<% include header.html %>
<h1>Welcome <%= user.username %>, 欢迎登陆！！</h1>
<a claa="btn" href="/logout">退出</a>
<% include footer.html %>

修改index.html，增加登陆链接
index.html

<% include header.html %>
<h1>Welcome to <%= title %></h1>
<p><a href="/login">登陆</a></p>
<% include footer.html %>

路由及页面我们都写好了，快去网站上试试吧。

 

7. Session使用

从刚来的例子上面看，执行exports.doLogin时，如果用户名和密码正确，我们使用redirect方法跳转到的home

res.redirect('/home');

执行exports.home时，我们又用render渲染页面，并把user对象传给home.html页面

res.render('home', { title: 'Home',user: user});

为什么不能在doLogin时，就把user对象赋值给session，每个页面就不再传值了。

session这个问题，其实是涉及到服务器的底层处理方式。

像Java的web服务器，是多线程调用模型。每用户请求会打开一个线程，每个线程在内容中维护着用户的状态。

像PHP的web服务器，是交行CGI的程序处理，CGI是无状态的，所以一般用cookie在客户的浏览器是维护用户的状态。但cookie在客户端维护的信息是不够的，所以CGI应用要模仿用户session，就需要在服务器端生成一个session文件存储起来，让原本无状态的CGI应用，通过中间文件的方式，达到session的效果。

Nodejs的web服务器，也是CGI的程序无状态的，与PHP不同的地方在于，单线程应用，所有请求都是异步响应，通过callback方式返回数据。如果我们想保存session数据，也是需要找到一个存储，通过文件存储,redis,Mongdb都可以。

接下来，我将演示如何通过mongodb来保存session，并实现登陆后用户对象传递。

app.js文件

var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path')
, ejs = require('ejs')
, SessionStore = require("session-mongoose")(express);
var store = new SessionStore({
url: "mongodb://localhost/session",
interval: 120000
});
....
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser());
app.use(express.cookieSession({secret : 'fens.me'}));
app.use(express.session({
secret : 'fens.me',
store: store,
cookie: { maxAge: 900000 }
}));
app.use(function(req, res, next){
res.locals.user = req.session.user;
next();
});
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

注：app.js文件有顺序要求，一定要注意！！！

安装session-mongoose依赖库

D:\workspace\project\nodejs-demo>npm install session-mongoose
D:\workspace\project\nodejs-demo\node_modules\session-mongoose\node_modules\mongoose\node_modules\mongodb\node_modules\bson>node "D:\toolkit\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild
C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\Microsoft.Cpp.InvalidPlatform.Targets(23,7): error MSB8007: 项目“kerberos.vcxproj”的平台无效。平台为“x64”。您会看到此消息的可能原因是，您尝试在没有解决方案文件的情况下生成项目，并且为
oose\node_modules\mongoose\node_modules\mongodb\node_modules\bson\build\bson.vcxproj]
session-mongoose@0.2.2 node_modules\session-mongoose
└── mongoose@3.6.10 (mpath@0.1.1, ms@0.1.0, hooks@0.2.1, sliced@0.0.3, muri@0.3.1, mpromise@0.2.1, mongodb@1.3.3)

安装有错误但是没关系。

访问：http://localhost:3000/login，正常

修改routes/index.js文件

exports.doLogin方法

exports.doLogin = function(req, res){
var user={
username:'admin',
password:'admin'
}
if(req.body.username===user.username && req.body.password===user.password){
req.session.user=user;
return res.redirect('/home');
} else {
return res.redirect('/login');
}
};

exports.logout方法

exports.logout = function(req, res){
req.session.user=null;
res.redirect('/');
};

exports.home方法

exports.home = function(req, res){
res.render('home', { title: 'Home'});
};

这个时候session已经起作用了，exports.home的user显示传值已经被去掉了。 是通过app.js中app.use的res.locals变量，通过框架进行的赋值。

app.use(function(req, res, next){
res.locals.user = req.session.user;
next();
});

注：这个session是express3.0的写法，与express2.x是不一样的。原理是在框架内每次赋值，把我们刚才手动传值的过程，让框架去完成了。

 

8. 页面提示

登陆的大体我们都已经讲完了，最后看一下登陆失败的情况。

我们希望如果用户登陆时，用户名或者密码出错了，会给用户提示，应该如何去实现。

打开app.js的，增加res.locals.message

app.use(function(req, res, next){
res.locals.user = req.session.user;
var err = req.session.error;
delete req.session.error;
res.locals.message = '';
if (err) res.locals.message = '<div class="alert alert-error">' + err + '</div>';
next();
});

修改login.html页面，<%- message %>

<% include header.html %>
<div class="container-fluid">
<form class="form-horizontal" method="post">
<fieldset>
<legend>用户登陆</legend>
<%- message %>
<div class="control-group">
<label class="control-label" for="username">用户名</label>
<div class="controls">
<input type="text" class="input-xlarge" id="username" name="username" value="admin">
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">密码</label>
<div class="controls">
<input type="password" class="input-xlarge" id="password" name="password" value="admin">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">登陆</button>
</div>
</fieldset>
</form>
</div>
<% include footer.html %>

修改routes/index.js，增加req.session.error

exports.doLogin = function(req, res){
var user={
username:'admin',
password:'admin'
}
if(req.body.username===user.username && req.body.password===user.password){
req.session.user=user;
return res.redirect('/home');
} else {
req.session.error='用户名或密码不正确';
return res.redirect('/login');
}
};

让我们来看看效果： http://localhost:3000/login 输入错误的和密码， 用户名：adminfe，密码：12121

 

9. 页面访问控制

网站登陆部分按照我们的求已经完成了，但网站并不安全。

localhost:3000/home，页面本来是登陆以后才访问的，现在我们不要登陆，直接在浏览器输入也可访问。

页面报错了，提示<%= user.username %> 变量出错。

 GET /home?user==a 500 15ms TypeError: D:\workspace\project\nodejs-demo\views\home.html:2 1| <% include header.html %> >> 2| <h1>Welcome <%= user.username %>, 欢迎登陆！！</h1> 3| <a claa="btn" href="/logout">退出</a> 4| <% include header.html %> Cannot read property 'username' of null at eval (eval at <anonymous> (D:\workspace\project\nodejs-demo\node_modules\ejs\lib\ejs.js: at eval (eval at <anonymous> (D:\workspace\project\nodejs-demo\node_modules\ejs\lib\ejs.js: at D:\workspace\project\nodejs-demo\node_modules\ejs\lib\ejs.js:249:15 at Object.exports.render (D:\workspace\project\nodejs-demo\node_modules\ejs\lib\ejs.js:287: at View.exports.renderFile [as engine] (D:\workspace\project\nodejs-demo\node_modules\ejs\l at View.render (D:\workspace\project\nodejs-demo\node_modules\express\lib\view.js:75:8) at Function.app.render (D:\workspace\project\nodejs-demo\node_modules\express\lib\applicati at ServerResponse.res.render (D:\workspace\project\nodejs-demo\node_modules\express\lib\res at exports.home (D:\workspace\project\nodejs-demo\routes\index.js:36:8) at callbacks (D:\workspace\project\nodejs-demo\node_modules\express\lib\router\index.js:161 

这个页面被打开发，因为没有user.username参数。我们避免这样的错误发生。

还记录路由部分里说的get,post,all的作用吗？我现在要回到路由配置中，再做点事情。

修改app.js文件

 app.all('/login', notAuthentication); app.get('/login', routes.login); app.post('/login', routes.doLogin); app.get('/logout', authentication); app.get('/logout', routes.logout); app.get('/home', authentication); app.get('/home', routes.home); 

访问控制：

• / ，谁访问都行，没有任何控制
• /login，用all拦截所有访问/login的请求，先调用authentication，用户登陆检查
• /logout，用get拦截访问/login的请求，先调用notAuthentication，用户不登陆检查
• /home，用get拦截访问/home的请求，先调用Authentication，用户登陆检查

修改app.js文件，增加authentication，notAuthentication两个方法

 function authentication(req, res, next) { if (!req.session.user) { req.session.error='请先登陆'; return res.redirect('/login'); } next(); } function notAuthentication(req, res, next) { if (req.session.user) { req.session.error='已登陆'; return res.redirect('/'); } next(); } 

配置好后，我们未登陆，直接访问localhost:3000/home时，就会跳到/login页面

如果你也出现图片显示的内容，那么恭喜你了。

Nodejs使用Express3.0框架的第一步你已经完成了，并且还使用了ejs,bootstrap,mongoose库的使用。

希望此文对大家有所帮助。

从零开始nodejs系列文章，将介绍如何利Javascript做为服务端脚本，通过Nodejs框架web开发。Nodejs框架是基于V8的引擎，是目前速度最快的Javascript引擎。chrome浏览器就基于V8，同时打开20-30个网页都很流畅。Nodejs标准的web开发框架Express，可以帮助我们迅速建立web站点，比起PHP的开发效率更高，而且学习曲线更低。非常适合小型网站，个性化网站，我们自己的Geek网站！！

关于作者

• 张丹(Conan), 程序员Java,R,PHP,Javascript
• weibo：@Conan_Z
• blog: http://blog.fens.me
• email: bsspirit@gmail.com

转载请注明出处：
http://blog.fens.me/nodejs-bower-intro/

前言
一个新的web项目开始，我们总是很自然地去下载需要用到的js类库文件，比如jQuery，去官网下载名为jquery-1.10.2.min.js文件，放到我们的项目里。当项目又需要bootstrap的时候，我们会重复刚才的工作，去bootstrap官网下载对应的类库。如果bootstrap所依赖的jQuery并不是1.10.2，而是2.0.3时，我们会再重新下载一个对应版本的jQuery替换原来的。

包管理是个复杂的问题，我们要知道谁依赖谁，还要明确哪个版本依赖哪个版本。这些对于开发人员来说，负担过重了。bower作为一个js依赖管理的工具，提供一种理想包管理方式，借助了npm的一些思想，为我们提供一个舒服的开发环境。

你要还不动起手来试试bower，那你一定不会知道，前端开发是件多么享受的事。

目录

1. bower介绍
2. bower安装
3. bower命令
4. bower使用
5. 用bower提交自己类库

1. bower介绍

Bower 是 twitter 推出的一款包管理工具，基于nodejs的模块化思想，把功能分散到各个模块中，让模块和模块之间存在联系，通过 Bower 来管理模块间的这种联系。

包管理工具一般有以下的功能：

• 注册机制：每个包需要确定一个唯一的 ID 使得搜索和下载的时候能够正确匹配，所以包管理工具需要维护注册信息，可以依赖其他平台。
• 文件存储：确定文件存放的位置，下载的时候可以找到，当然这个地址在网络上是可访问的。
• 上传下载：这是工具的主要功能，能提高包使用的便利性。比如想用 jquery 只需要 install 一下就可以了，不用到处找下载。上传并不是必备的，根据文件存储的位置而定，但需要有一定的机制保障。
• 依赖分析：这也是包管理工具主要解决的问题之一，既然包之间是有联系的，那么下载的时候就需要处理他们之间的依赖。下载一个包的时候也需要下载依赖的包。

功能介绍，摘自文章：http://chuo.me/2013/02/twitter-bower.html

2. bower安装

bower插件是通过npm, Node.js包管理器安装和管理的.

我的系统环境

• win7 64bit
• Nodejs:v0.10.5
• Npm:1.2.19

~ D:\workspace\javascript>node -v
v0.10.5

~ D:\workspace\javascript>npm -v
1.2.19

在系统中，我们已经安装好了Nodejs和npm。win7安装nodejs请参考文章：Nodejs开发框架Express3.0开发手记–从零开始

安装bower 
全局安装bower

~ D:\workspace\javascript>npm install bower -g

新建一个express3的项目nodejs-bower

~ D:\workspace\javascript>express -e nodejs-bower
~ D:\workspace\javascript>cd nodejs-bower && npm install

3. bower命令

bower安装后，我们就可以用bower这个命令了。

~ D:\workspace\javascript\nodejs-bower>bower
Usage:
    bower  [] []
Commands:
    cache                   Manage bower cache
    help                    Display help information about Bower
    home                    Opens a package homepage into your favorite browser
    info                    Info of a particular package
    init                    Interactively create a bower.json file
    install                 Install a package locally
    link                    Symlink a package folder
    list                    List local packages
    lookup                  Look up a package URL by name
    prune                   Removes local extraneous packages
    register                Register a package
    search                  Search for a package by name
    update                  Update a local package
    uninstall               Remove a local package
Options:
    -f, --force             Makes various commands more forceful
    -j, --json              Output consumable JSON
    -l, --log-level         What level of logs to report
    -o, --offline           Do not hit the network
    -q, --quiet             Only output important information
    -s, --silent            Do not output anything, besides errors
    -V, --verbose           Makes output more verbose
    --allow-root            Allows running commands as root
See 'bower help ' for more information on a specific command.

Commands，列出了bower支持的各种命令。

• cache:bower缓存管理
• help:显示Bower命令的帮助信息
• home:通过浏览器打开一个包的github发布页
• info:查看包的信息
• init:创建bower.json文件
• install:安装包到项目
• link:在本地bower库建立一个项目链接
• list:列出项目已安装的包
• lookup:根据包名查询包的URL
• prune:删除项目无关的包
• register:注册一个包
• search:搜索包
• update:更新项目的包
• uninstall:删除项目的包

4. bower使用

1). 安装jQuery到项目nodejs-bower

~ D:\workspace\javascript\nodejs-bower>bower install jquery
bower jquery#*              not-cached git://github.com/components/jquery.git#*
bower jquery#*                 resolve git://github.com/components/jquery.git#*
bower jquery#*                download https://github.com/components/jquery/archive/2.0.3.tar.gz
bower jquery#*                 extract archive.tar.gz
bower jquery#*                resolved git://github.com/components/jquery.git#2.0.3
bower jquery#~2.0.3            install jquery#2.0.3

jquery#2.0.3 bower_components\jquery

通过执行命令，我们可以看到jQuery的最新版本被下载，并安装到项目的bower_components\jquery目录

查看bower_components/jquery目录，发现了3个文件。

~ D:\workspace\javascript\nodejs-bower>ls bower_components/jquery -a
.  ..  .bower.json  component.json  jquery.js

同样地，我们的项目还需要d3的类库

~ D:\workspace\javascript\nodejs-bower>bower install d3
bower d3#*                  not-cached git://github.com/mbostock/d3.git#*
bower d3#*                     resolve git://github.com/mbostock/d3.git#*
bower d3#*                    download https://github.com/mbostock/d3/archive/v3.2.8.tar.gz
bower d3#*                     extract archive.tar.gz
bower d3#*                    resolved git://github.com/mbostock/d3.git#3.2.8
bower d3#~3.2.8                install d3#3.2.8

d3#3.2.8 bower_components\d3

非常方便，下载并安装完成！

2). 查看项目中已导入的类库

~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new     Checking for new versions of the project dependencies..
nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower
├── d3#3.2.8
└── jquery#2.0.3

3). 安装bootstrap库，并查看依赖情况

~ D:\workspace\javascript\nodejs-bower>bower install bootstrap
bower bootstrap#*               cached git://github.com/twbs/bootstrap.git#3.0.0-rc1
bower bootstrap#*             validate 3.0.0-rc1 against git://github.com/twbs/bootstrap.git#*
bower jquery#>= 1.9.0           cached git://github.com/components/jquery.git#2.0.3
bower jquery#>= 1.9.0         validate 2.0.3 against git://github.com/components/jquery.git#>= 1.9.0
bower bootstrap#~3.0.0-rc1     install bootstrap#3.0.0-rc1

bootstrap#3.0.0-rc1 bower_components\bootstrap
└── jquery#2.0.3

~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new     Checking for new versions of the project dependencies..
nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower
├─┬ bootstrap#3.0.0-rc1 extraneous
│ └── jquery#2.0.3
├── d3#3.2.8
└── jquery#2.0.3

我们发现bootstrap，对jquery是有依赖的。

4). 删除jQuery库，破坏依赖关系

~ D:\workspace\javascript\nodejs-bower>bower uninstall jquery
bower conflict      bootstrap depends on jquery
Continue anyway? (y/n) y
bower uninstall     jquery

~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new     Checking for new versions of the project dependencies..
nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower
├─┬ bootstrap#3.0.0-rc1 extraneous
│ └── jquery missing
├── d3#3.2.8
└── jquery missing

5). 安装低版本的jQuery，制造不版本兼容

~ D:\workspace\javascript\nodejs-bower>bower install jquery#1.7.2
bower jquery#~2.0.3             cached git://github.com/components/jquery.git#2.0.3
bower jquery#~2.0.3           validate 2.0.3 against git://github.com/components/jquery.git#~2.0.3
bower jquery#>= 1.9.0           cached git://github.com/components/jquery.git#2.0.3
bower jquery#>= 1.9.0         validate 2.0.3 against git://github.com/components/jquery.git#>= 1.9.0
bower jquery#1.7.2              cached git://github.com/components/jquery.git#1.7.2
bower jquery#1.7.2            validate 1.7.2 against git://github.com/components/jquery.git#1.7.2

Unable to find a suitable version for jquery, please choose one:
    1) jquery#1.7.2 which resolved to 1.7.2
    2) jquery#~2.0.3 which resolved to 2.0.3 and has nodejs-bower as dependants
    3) jquery#>= 1.9.0 which resolved to 2.0.3 and has bootstrap#3.0.0-rc1 as dependants

Prefix the choice with ! to persist it to bower.json

Choice: 1
bower jquery#1.7.2             install jquery#1.7.2

jquery#1.7.2 bower_components\jquery

~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new     Checking for new versions of the project dependencies..
nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower
├─┬ bootstrap#3.0.0-rc1 extraneous
│ └── jquery#1.7.2 incompatible with >= 1.9.0 (2.0.3 available)
├── d3#3.2.8
└── jquery#1.7.2 incompatible with ~2.0.3 (2.0.3 available)

我们可以清楚的看到bower，很明确的告诉了我们，jquery和bootstrap是不兼容的，强大之处大家应该有所体会。

6).升级jQuery，让版本兼容

~ D:\workspace\javascript\nodejs-bower>bower update jquery
bower jquery#~2.0.3             cached git://github.com/components/jquery.git#2.0.3
bower jquery#~2.0.3           validate 2.0.3 against git://github.com/components/jquery.git#~2.0.3
bower jquery#>= 1.9.0           cached git://github.com/components/jquery.git#2.0.3
bower jquery#>= 1.9.0         validate 2.0.3 against git://github.com/components/jquery.git#>= 1.9.0
bower jquery#~2.0.3            install jquery#2.0.3

jquery#2.0.3 bower_components\jquery

~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new     Checking for new versions of the project dependencies..
nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower
├─┬ bootstrap#3.0.0-rc1 extraneous
│ └── jquery#2.0.3
├── d3#3.2.8
└── jquery#2.0.3

多么智能，一键搞定，这才是高效的开发。

7). 查看本地bower已经缓存的类库

~ D:\workspace\javascript\nodejs-bower>bower cache list
bootstrap=git://github.com/twbs/bootstrap.git#3.0.0-rc1
d3=git://github.com/mbostock/d3.git#3.2.8
jquery=git://github.com/components/jquery.git#1.7.2
jquery=git://github.com/components/jquery.git#2.0.3

8). 查看D3库信息

~ D:\workspace\javascript\nodejs-bower>bower info d3
d3

  Versions:
    - 3.2.8
    - 3.2.7
    - 3.2.6
    - 3.2.5
    - 3.2.4
    - 3.2.3
    ...

9). 查看dojo库的url

~ D:\workspace\javascript\nodejs-bower>bower lookup dojo
dojo git://github.com/dojo/dojo.git

10). 用浏览器打开dojo的发布主页

~ D:\workspace\javascript\nodejs-bower>bower home dojo
bower dojo#*                not-cached git://github.com/dojo/dojo.git#*
bower dojo#*                   resolve git://github.com/dojo/dojo.git#*
bower dojo#*                  download https://github.com/dojo/dojo/archive/1.9.1.tar.gz
bower dojo#*                   extract archive.tar.gz
bower dojo#*                  resolved git://github.com/dojo/dojo.git#1.9.1

浏览器自动打开：https://github.com/dojo/dojo

11). 查询包含dojo的类库

~ D:\workspace\javascript\nodejs-bower>bower search dojo
Search results:

    dojo git://github.com/dojo/dojo.git
    dojox git://github.com/dojo/dojox.git
    dojo-util git://github.com/dojo/util.git
    dojo-bootstrap git://github.com/samvdb/Dojo-Bootstrap

真是方便实用的技术。

5. 用bower提交自己类库

1). 生成bower.json配置文件

 ~ D:\workspace\javascript\nodejs-bower>bower init bower existing      The existing bower.json file will be used and filled in [?] name: nodejs-bower [?] version: 0.0.0 [?] main file: [?] set currently installed components as dependencies? No [?] add commonly ignored files to ignore list? Yes 

查看生成的文件bower.json

 {   "name": "nodejs-bower",   "version": "0.0.0",   "ignore": [     "**/.*",     "node_modules",     "bower_components",     "test",     "tests"   ],   "dependencies": {     "d3": "git://github.com/mbostock/d3.git#~3.2.8",     "jquery": "git://github.com/components/jquery.git#~2.0.3"   } } 

2). 在github创建一个资源库：nodejs-bower
3). 本地工程绑定github

 ~ D:\workspace\javascript\nodejs-bower>git init Initialized empty Git repository in D:/workspace/javascript/nodejs-bower/.git/  ~ D:\workspace\javascript\nodejs-bower>git add . ~ D:\workspace\javascript\nodejs-bower>git commit -m "first commit" # On branch master # # Initial commit # # Untracked files: #   (use "git add ..." to include in what will be committed) # #       app.js #       bower.json #       bower_components/ #       node_modules/ #       package.json #       public/ #       routes/ #       views/ nothing added to commit but untracked files present (use "git add" to track)  ~ D:\workspace\javascript\nodejs-bower>git remote add origin https://github.com/bsspirit/nodejs-bower  ~ D:\workspace\javascript\nodejs-bower>git push -u origin master Counting objects: 565, done. Delta compression using up to 4 threads. Compressing objects: 100% (516/516), done. Writing objects: 100% (565/565), 803.08 KiB, done. Total 565 (delta 26), reused 0 (delta 0) To https://github.com/bsspirit/nodejs-bower  * [new branch]      master -> master Branch master set up to track remote branch master from origin. 

4). 注册到bower官方类库

 ~ D:\workspace\javascript\nodejs-bower>bower register nodejs-bower git@github.com:bsspirit/nodejs-bower.git bower                          convert Converted git@github.com:bsspirit/nodejs-bower.git to git://github.com/bsspirit/n odejs-bower.git bower nodejs-bower#*           resolve git://github.com/bsspirit/nodejs-bower.git#* bower nodejs-bower#*          checkout master bower nodejs-bower#*          resolved git://github.com/bsspirit/nodejs-bower.git#af3ceaac07 Registering a package will make it visible and installable via the registry (https://bower.herokuapp.com), continue? (y/ n)                    y bower nodejs-bower            register git://github.com/bsspirit/nodejs-bower.git  Package nodejs-bower registered successfully! All valid semver tags on git://github.com/bsspirit/nodejs-bower.git will be available as versions. To publish a new version, you just need release a valid semver tag.  Run bower info nodejs-bower to list the package versions. 

5). 查询我们自己的包

 D:\workspace\javascript\nodejs-bower>bower search nodejs-bower Search results:      nodejs-bower git://github.com/bsspirit/nodejs-bower.git 

6). 安装我们自己的包

 D:\workspace\javascript\nodejs-bower>bower install nodejs-bower bower nodejs-bower#*            cached git://github.com/bsspirit/nodejs-bower.git#af3ceaac07 bower nodejs-bower#*          validate af3ceaac07 against git://github.com/bsspirit/nodejs-bower.git#* bower nodejs-bower#*           install nodejs-bower#af3ceaac07  nodejs-bower#af3ceaac07 bower_components\nodejs-bower ├── d3#3.2.8 └── jquery#2.0.3 

其实模块化，版本依赖，开发类库，发布类库，安装类库，都是一条命令！还能再简单一点么！快把项目模块化，然后分享给大家吧！！未来是属于开发者的。

Node.js官网有各平台的安装包下载，不想折腾的可以直接下载安装，下面说下windows平台下如何制作绿色版node，以方便迁移。

1. 获取node.exe
   下载Windows Binary版本，不要下载Windows Installer版本，直接放到H:\nodejs\
2. 获取npm（Node Package Manage）
   下载最新zip版本，不要下载tgz版本，下载后解压到H:\nodejs\
3. 添加环境变量
   • NODE_HOME=H:\nodejs
   • NODE_PATH=%NODE_HOME%\node_modules
   • path增加%NODE_HOME%\

最终得到文件目录结构H:\nodejs\：

. ├—— node.exe ├—— npm.cmd └—— node_modules     └—— npm 

测试一下，出现版本号，说明配置成功：

node --version npm --version 

至此，绿色版制作完毕，您已经可以正常使用node/npm，也可以迁移到其他机器使用。

下面使用npm命令安装第三方模块，使用方法可以查看：

npm -h npm install -h npm help install 

默认安装仓库是https://registry.npmjs.org，查找包可以到这里http://search.npmjs.org，一切都很像maven。有两种安装模式可选，参考npm 1.0 Global vs Local installation：
locally
默认是locally模式，安装到当前命令的执行目录。在其他位置执行xxx会报“xxx不是内部或外部命令，也不是可运行的程序”。

npm install xxx 

globally
-g参数代表全局方式，使用全局模式会安装到H:\nodejs\node_modules\中的xxx下。

npm install xxx -g 

你可以重新设置prefix位置，方法有二：

• 重新设置prefix的位置：npm config set prefix "H:\hexo"
• 或直接修改 『当前用户』.npmrc 文件，添加prefix = H:\hexo

直接安装

安装Sublime text 2插件很方便，可以直接下载安装包解压缩到Packages目录（菜单->preferences->packages）。

使用Package Control组件安装

也可以安装package control组件，然后直接在线安装：

1. 按Ctrl+`调出console（注：安装有QQ输入法的这个快捷键会有冲突的，输入法属性设置-输入法管理-取消热键切换至QQ拼音）
2. 粘贴以下代码到底部命令行并回车：

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read()) 

1. 重启Sublime Text 3。
2. 如果在Perferences->package settings中看到package control这一项，则安装成功。

顺便贴下Sublime Text2 的代码

import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')  

如果这种方法不能安装成功，可以到这里下载文件手动安装。

用Package Control安装插件的方法：

1. 按下Ctrl+Shift+P调出命令面板
2. 输入install 调出 Install Package 选项并回车，然后在列表中选中要安装的插件。

不爽的是，有的网络环境可能会不允许访问陌生的网络环境从而设置一道防火墙，而Sublime Text 2貌似无法设置代理，可能就获取不到安装包列表了。
好，方法介绍完了，下面是本文正题，一些有用的Sublime Text 2插件：

GBK Encoding Support

对应gb2312来说，Sublime Text 2 本生不支持的，我们可以通过Ctrl+Shift+P调出命令面板或Perferences->Package Contro,输入install 调出 Install Package 选项并回车，在输入“GBK Encoding Support”选择开始安装，左下角状态栏有提示安装成功。这时打开gbk编码的文件就不会出现乱码了，如果有需要转成utf-8的可以在File-GBK to UTF8-选择Save with UTF8就偶看了。

Zen Coding

这个，不解释了，还不知道ZenCoding的同学强烈推荐去看一下：《Zen Coding: 一种快速编写HTML/CSS代码的方法》。

emmet

PS:Zen Coding for Sublime Text 2插件的开发者已经停止了在Github上共享了，现在只有通过Package Control来安装。

jQuery Package for sublime Text

如果你离不开jQuery的话，这个必备～～

Sublime Prefixr

Prefixr，CSS3 私有前缀自动补全插件，显然也很有用哇

Sublime Prefixr

JS Format

一个JS代码格式化插件。

SublimeLinter

一个支持lint语法的插件，可以高亮linter认为有错误的代码行，也支持高亮一些特别的注释，比如“TODO”，这样就可以被快速定位。（IntelliJ IDEA的TODO功能很赞，这个插件虽然比不上，但是也够用了吧）

SublimeLinter

Placeholders

故名思意，占位用，包括一些占位文字和HTML代码片段，实用。

Sublime Alignment

用于代码格式的自动对齐。传说最新版Sublime 已经集成。

Clipboard History

粘贴板历史记录，方便使用复制/剪切的内容。

DetectSyntax

这是一个代码检测插件。

Nettuts Fetch

如果你在用一些公用的或者开源的框架，比如 Normalize.css或者modernizr.js，但是，过了一段时间后，可能该开源库已经更新了，而你没有发现，这个时候可能已经不太适合你的项目了，那么你就要重新折腾一遍或者继续用陈旧的文件。Nettuts Fetch可以让你设置一些需要同步的文件列表，然后保存更新。

JsMinifier

该插件基于Google Closure compiler，自动压缩js文件。

Sublime CodeIntel

代码自动提示

Bracket Highlighter

类似于代码匹配，可以匹配括号，引号等符号内的范围。

Hex to HSL

自动转换颜色值，从16进制到HSL格式，快捷键 Ctrl+Shift+U

GBK to UTF8

将文件编码从GBK转黄成UTF8，快捷键Ctrl+Shift+C

Git

该插件基本上实现了git的所有功能。

总结

好吧，大概就这些，如果你有常用的插件或者扩展，欢迎推荐。Sublime Text 3真是一款一见钟情的编辑器，每次和别人聊到编辑器时必荐的。。。

AngularJS是Google开源的一款JavaScript MVC框架，弥补了HTML在构建应用方面的不足，其通过使用指令（directives）结构来扩展HTML词汇，使开发者可以使用HTML来声明动态内容，从而使得Web开发和测试工作变得更加容易。 

 
AngularJS诞生以来，吸引了大量的目光，也迅速成为了Web开发领域的新宠。本文整理了2013年度一些非常有价值的AngularJS相关教程和资源，如果你想了解AngularJS或正在使用AngularJS，那么这些资源肯定会为你的学习和进阶过程带来帮助。 

一、了解AngularJS 

• AngularJS维基百科
• 专访AngularJS框架创始人Misko Hevery
• Angular.js VS. Ember.js：谁将成为Web开发的新宠？

二、中文资源 

1.  中文系列资源 

• AngularJS系列教程文章 – 大漠穷秋
• AngularJS入门系列教程 – AngularJS中文社区
• AngularJS学习笔记 – 邹业盛
• AngularJS精彩问答 - 知乎

2.  其他单篇文章 

• AngularJS 最佳实践
• 有jQuery背景的开发者如何建立起AngularJS的思维模式？
• 现在就开始使用AngularJS的三个重要原因
• 使用AngularJS构建大型Web应用
• Angularjs开发一些经验总结
• 5个示例带你学习AngularJS

3.  中文书籍 

• 《使用AngularJS开发下一代WEB应用》

三、英文资源 

1.  AngularJS入门教程 

• AngularJS傻瓜教程系列
• AngularJS移动开发权威指南
• AngularJS 30分钟入门
• 60分钟掌握AngularJS
• 在你的AngularJS应用中建模数据
• 使用$https创建服务
• 了解AngularJS的5个步骤
• AngularJS和RequireJS的动态加载控制器和视图
• 先进的设计模式和最佳实践
• AngularJS动画
• AngularJS Factory与RESTful服务的交互
• 使用Angular.js Factory获取远程数据
• 使用AngularJS的10个理由
• AngularJS中Providers之间的差异
• AngularJS过滤
• 针对jQuery开发者的AngularJ教程
• Web开发者应该了解AngularJS的10个理由
• Angular Js：何时应该使用Directive、Controller和Service？
• 30秒从jQuery转到AngularJS

2.  AngularJS指令学习 

• 为jQuery插件构建AngularJS指令
• 为D3.js条形图构建AngularJS指令
• www.directiv.es：AngularJS指令库
• Angular-localStorage
• Videogular：一个基于AngularJS的HTML5视频播放器
• Angular-cache
• 可用于Twitter Bootstrap的Angular指令
• Angular的图表指令和服务
• 表排序

3.  AngularJS应用开发实战 

• 通过示例学习AngularJS——客户管理应用程序
• AngularJS和IndexedDB结合使用
• AngularJS：构建一个可重用的点击编辑指令
• Play、Akka、AngularJS和Elasticsearch打造的实时日志搜索功能
• 使用Firebase和AngularJS打造自己的Google Reader
• 使用Phonegap、AngularJS和ExpressJS开发一个移动App
• BirdWatch v0.2：基于AngularJS、ElasticSearch和Play Framework的Tweet流分析工具
• 基于Solr和AngularJS的即时搜索工具
• Sortis：高级用户的Twitter客户端，初学者的跳板
• 可定制的Twitter AngularJS时间轴
• AngularJS指令设计更轻松

4.  AngularJS游戏开发 

• 基于CoffeeScript和AngularJS的画圈打叉游戏
• 超级马里奥卡片翻转游戏

5.  AngularJS工作流程和测试 

• AngularJS的测试策略 [视频]
• 使用Combining Yeoman、AngularJS和Cordova开发移动App
• 介绍Angular、Yeoman和Chrome应用程序 [视频]
• 使用Jasmine测试Angular.js应用
• 使用AngularJS和Karma进行全谱系测试
• 使用Grunt插件创建AngularJS文档
• ng-boilerplate：新的AngularJS项目的样板
• 基于AngularJS的Chrome Web检查器扩展
• 在Sublime Text中使用AngularJS包

6.  AngularJS书籍 

• 《AngularJS in Action》
• 《The Beginner’s guide to AngularJS》
• 《Mastering Web Application Development with AngularJS》 

碰到了用java.util.Properties读取中文内容（UTF-8格式）的配置文件，发生中文乱码的现象，

Java代码  

1. Properties prop=new Properties();         
2. prop.load(Client.class.getClassLoader().getResourceAsStream("config.properties"));  

习惯性google了一下，网上大多数文章都是让大家用native2ascii.exe转换 这样的解决方案，一开始还差点被懵住了，以为只能使用这样的绕弯子方法。。。

但关键是，太绕了！ 如果每次都用native2ascii.exe将中文转换成\uXXXX\uXXXX这样的，麻烦先不说，转换完后的文件完全不可读！！！这基本上是不可忍受的！
（虽然也能用native2ascii.exe转换回来，但同样，麻烦！）

冷静下来后，突然想起来，还是初学java时看过，java.io包中 Reader/Writer和Stream的区别。
（年代久远，具体细节忘记了，大概是：Reader/Write是处理编码文本的，而InputStream/OutputStream只把数据当作2进制流 ）

正确解决方案

Java代码  

1. Properties prop=new Properties();         
2. prop.load(new InputStreamReader(Client.class.getClassLoader().getResourceAsStream("config.properties"), "UTF-8"));         

其中“UTF-8”，用于明确指定.properties文件的编码格式（不指定则默认使用OS的，这会造成同一份配置文件同一份代码，在linux和windows上、英文windows和中文windows之间的表现都不一致），这个参数应该和具体读取的properties文件的格式匹配。