express 学习笔记

首先把这个库加载下来

npm install -g express

这样会安装它所有依赖包，这个非常恐怖。这个框架要依赖这么多外来的东西，如果有一个不与时俱进就会拖累整个框架的质量。


C:\windows\System32>npm install -g express
npm http GET https://registry.npmjs.org/express
npm http 304 https://registry.npmjs.org/express
npm http GET https://registry.npmjs.org/commander/1.2.0
npm http GET https://registry.npmjs.org/connect/2.8.5
npm http GET https://registry.npmjs.org/range-parser/0.0.4
npm http GET https://registry.npmjs.org/mkdirp/0.3.5
npm http GET https://registry.npmjs.org/cookie/0.1.0
npm http GET https://registry.npmjs.org/buffer-crc32/0.2.1
npm http GET https://registry.npmjs.org/fresh/0.2.0
npm http GET https://registry.npmjs.org/methods/0.0.1
npm http GET https://registry.npmjs.org/send/0.1.4
npm http GET https://registry.npmjs.org/cookie-signature/1.0.1
npm http GET https://registry.npmjs.org/debug
npm http 304 https://registry.npmjs.org/cookie/0.1.0
npm http 304 https://registry.npmjs.org/buffer-crc32/0.2.1
npm http 304 https://registry.npmjs.org/fresh/0.2.0
npm http 304 https://registry.npmjs.org/mkdirp/0.3.5
npm http 304 https://registry.npmjs.org/methods/0.0.1
npm WARN package.json methods@0.0.1 No repository field.
npm WARN package.json methods@0.0.1 No readme data.
npm http 304 https://registry.npmjs.org/cookie-signature/1.0.1
npm WARN package.json cookie-signature@1.0.1 No repository field.
npm http 304 https://registry.npmjs.org/debug
npm http 304 https://registry.npmjs.org/commander/1.2.0
npm http 304 https://registry.npmjs.org/range-parser/0.0.4
npm WARN package.json range-parser@0.0.4 No repository field.
npm http 304 https://registry.npmjs.org/send/0.1.4
npm http 304 https://registry.npmjs.org/connect/2.8.5
npm http GET https://registry.npmjs.org/mime
npm http GET https://registry.npmjs.org/keypress
npm http GET https://registry.npmjs.org/formidable/1.0.14
npm http GET https://registry.npmjs.org/bytes/0.2.0
npm http GET https://registry.npmjs.org/qs/0.6.5
npm http GET https://registry.npmjs.org/pause/0.0.1
npm http GET https://registry.npmjs.org/uid2/0.0.2
npm http 304 https://registry.npmjs.org/keypress
npm http 304 https://registry.npmjs.org/pause/0.0.1
npm http 304 https://registry.npmjs.org/formidable/1.0.14
npm WARN package.json pause@0.0.1 No repository field.
npm http 304 https://registry.npmjs.org/qs/0.6.5
npm http 304 https://registry.npmjs.org/uid2/0.0.2
npm WARN package.json uid2@0.0.2 No repository field.
npm WARN package.json uid2@0.0.2 No readme data.
npm http 304 https://registry.npmjs.org/mime
npm http 304 https://registry.npmjs.org/bytes/0.2.0
npm WARN package.json bytes@0.2.0 No repository field.
C:\Users\正美\AppData\Roaming\npm\express -> C:\Users\正美\AppData\Roaming\npm\n
ode_modules\express\bin\express
express@3.3.5 C:\Users\正美\AppData\Roaming\npm\node_modules\express
├── methods@0.0.1
├── range-parser@0.0.4
├── cookie-signature@1.0.1
├── fresh@0.2.0
├── buffer-crc32@0.2.1
├── cookie@0.1.0
├── debug@0.7.2
├── mkdirp@0.3.5
├── commander@1.2.0 (keypress@0.1.0)
├── send@0.1.4 (mime@1.2.11)
└── connect@2.8.5 (uid2@0.0.2, pause@0.0.1, qs@0.6.5, bytes@0.2.0, formidable
@1.0.14)

然后我们在控制台切换到E盘，输入如下命令，创建一个目录，进入到它里面

E:\>mkdir helloworld

E:\>cd helloworld

里面创建一个json文件，里面记录我们要依赖的包，项目名，版本号什么的，然后通过npm安装

{
  "name": "helloworld",
  "description": "hello world test app",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "express": "3.x"
  }
}

然后执行npm install命令，Express 3.x 和它的依赖就安装到你的 ./node_modules 目录里了

到这里，我们才开始写代码！创建一个名为app.js 或者 server.js的文件，叫什么看你个人喜好了。引入express 然后使用代码 express()创建一个新的应用程序:


var express = require('express');
var app = express();

现在我们要处理HTTP请求，返回hello world字样给前端


var express = require('express');
var app = express();

app.get('/', function(req, res){
  res.send('hello world');
});

app.listen(3000);

然后在控制台执行node app, 打开浏览器就看到hello world的字样了。

好了，我们继续前进。在当前目录建立一个index.html页面。此时，目录结构为：

node_modules
app.js
index.html
package.json

页面内容如下，暂时不引入JS与CSS文件

<!DOCTYPE html>
<html>
    <head>
        <title>index</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <h3>高级大气国际化的express.js页面</h3>
        <div>by  司徒正美</div>
    </body>
</html>

app.js文件的内容改成：


var express = require('express');
var app = express();

app.get('/', function(req, res){
  res.send('hello world');
});

app.listen(3000);

刷新浏览器，就能发现正确地输出页面。在stackoverflow这篇文章中《Render basic HTML view in Node JS Express》，提到另外两个方法。一个要用register方法，但这是express2.x的方法，现在已经移除；一个要用到engine 方法，它是用来指定模板引擎，但express默认什么引擎也不加载，因此我暂时也放弃它。

最后我们看看如何引入静态资态。我们在当前目录建立一个public文件夹，里面放置style.css, test.js文件：

window.onload = function(){
    var p = document.createElement("p");
    p.innerHTML = "动态创建元素节点"
    document.body.appendChild(p)
}

h3{
    background:violet;
    color:#fff;
}

然后app.js文件加多一行，变成这样

var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));

app.get('/', function(req, res){
  res.sendfile('index.html');
});

app.listen(3000);

然后index.html改成这样：

<!DOCTYPE html>
<html>
    <head>
        <title>index</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="style.css"/>
        <script src="test.js"></script>
    </head>
    <body>
        <h3>高级大气国际化的express.js页面</h3>
        <div>by  司徒正美</div>
    </body>
</html>

刷新页面，就能看到效果了！

posted on 2013-08-18 07:35 司徒正美阅读(2594) 评论(0) 编辑收藏举报

刷新页面返回顶部

Ruby's Louvre

导航

公告

express 学习笔记