学习笔记-NODE.JS, EXPRESS, JADE, AND MONGODB

从上周开始学习node.js相关的资料.

这个正是我想要的.

http://cwbuecheler.com/web/tutorials/2013/node-express-mongo/

http://cwbuecheler.com/web/tutorials/2014/restful-web-app-node-express-mongodb/

学习的过程,不多累述.因为这两往篇文章写得非常好，直接看英文原文就可以了。读翻过来，反倒很不好读。

这里，想要记录一下，自己卡住的几个地方。

先说说，为什么这么晚动手。

几个原因吧，

一个是的确人比较懒。这没办法。

第二个是，的确最近活也比较多。

第三个是，公司的机器在NTLM中，很不方便去git，但这个例子完全不需要用git的。

还是开始吧。

====================

第一课：

THE DEAD-SIMPLE STEP-BY-STEP GUIDE FOR FRONT-END DEVELOPERS TO GETTING UP AND RUNNING WITH NODE.JS, EXPRESS, JADE, AND MONGODB

SET UP THE FULL STACK AND HAVE A WEBPAGE RUNNING IN 30 MINUTES. MAKE IT TALK TO YOUR DB IN ANOTHER 30.

By Christopher Buecheler

---------------------------------

这里面，没有什么困难，先提醒一下，如果你先想看到作者写好的代码，他放git上了。

You
can find/fork the entire sample project on GitHub

https://github.com/cwbuecheler/node-tutorial-for-frontend-devs

--------------------------------------

但也用不着，没有几句。

作者用到了这个工具:Subline Text2 ，文章里有。

-----------------------------------------------

卡住的地方：前面都没什么，装node什么的，npm也可以直接用。我也没配置什么。但也不敢肯定，因为以前装过cntlm，会不会与之相关？

总之，我的npm一上来，就OK。

装express时，遇到了困难。

********************************************************

原文说是要这样：

npm install -g express

然后再

npm install -g express-generator

这里，先是犯了一个错误，以为只需要执行后面那一句，其实作者的意思是说，两个都要执行，先执行完上面的，再执行下面的。

但是，发现这样，很不好。

-g的意思，是global，对于linux来说，当然不错，但忘了告诉读者，我是在windows 7 x64上。

在windows下我是这样做的：

我的node装在了

g:\node

然后，在命令行cmd中，进入这个目录，

然后

npm - install express

这样，就装在本地了。

后面那句也是一样。

但是，接着遇到第二个问题：

express nodetest1

这句执行不了。

解决办法是把

G:\Node\node_modules\.bin

放到path里去。

然后，可以了。

后面一路下来，就没什么了。

========================================

*** 第二课

=========================================

第二课困难稍多些。

1. jade有严格的格式要求。目前来看，node.js还是比较玩具化的

extends layout

block content
h1= title
p Welcome to our test

// Wrapper
#wrapper

// USER LIST
h2 User List
#userList
table
thead
th UserName
th Email
th Delete?
tbody
// /USER LIST

// /WRAPPER

手写了一下，发现比如

//   Wrapper，如果你写成了 //Wrapper,也就是前面没有空格（还是个TAB?）就不成。就这一点来看，node.js还有些路要走啊。

2. 被google卡住了，不好意思，被卡住的google卡住了。

doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
script(src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js')
script(src='/javascripts/global.js')

script(src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js')

这句，一看就不成！！！！！当然，老外当然不懂得我们中国人，你告诉他这些事，他肯定想不通，但你告诉他这是在中国，他立即就通了。

然后去网上，搜了个这个版本的jquery，万能的中国人！

解压后，放到了public\javascript目录下面，

你猜怎么着，不行！！！！！！！

为嘛不行呢？我也不知道，然后无奈，在public目录下，建了这样的目录：

/ajax/libs/jquery/2.0.3/

然后，把jquery.js再放进去，好了。无语了。

别问我是怎么回事。

==============================================

3. 这一段，就是在左侧，显示一个有户的信息

extends layout

block content
h1= title
p Welcome to our test

// Wrapper
#wrapper

// USER INFO
#userInfo
h2 User Info
p
strong Name:
|  <span id='userInfoName'></span>
br
strong Age:
|  <span id='userInfoAge'></span>
br
strong Gender:
|  <span id='userInfoGender'></span>
br
strong Location:
|  <span id='userInfoLocation'></span>
// /USER INFO

// USER LIST
h2 User List
#userList
table
thead
th UserName
th Email
th Delete?
tbody
// /USER LIST

// /WRAPPER

做好后，怎么就没出来呢？

再看了看原文：

Got it? Cool. Save that file and let's hit our browser and take a look. Refresh
http://localhost:3000 and now you'll see an unpopulated user info box floating over to the left. Click on the “test1” username in your table, and it should populate that box with Bob's info.

注意：

Click on the "test1"

Ohhhh，get it.

原来要点击一下，顺便说一句，这问题，太二了，好在每当这种情况，我就出去溜达一会，回来就发现自己真是太二了。

好了。再往下吧。

就因为这里，没有读全作者的话，开了google和ie，好一顿跟踪啊。别提了。