【Express】nodejs+express簡單入門篇
個人感覺不錯【開始建個工程試試】
首先註明一下版本，因為express因為版本的不同使用的方式也不同，我這算是目前最新的了吧
還沒有裝express的可以移步到 這裡 看看express框架的獲取安裝
1.簡單地專案初始化
進入你的nodejs安裝路徑下邊，如圖，然後執行命令 express -e test (這裡把專案名設定為test)
出現如上圖所示，看到install dependencies沒有，它說如果你想安裝依賴就先進入專案test目錄，然後執行 npm install安裝依賴模組。
那就開始吧，網路環境差的可能安裝會出錯..出現很長一大串一般就行了
如此一來，專案初始已經完成，可以執行一下專案 npm start 看是否正常。
ok 還算正常，下面先來基本分析一下生成的初始專案：
之前 那篇文章 已經說過
專案建立成功之後，生成四個資料夾，主檔案app.js與配置資訊檔案packetage.json
bin是專案的啟動檔案，配置以什麼方式啟動專案，預設 npm start
public是專案的靜態檔案，放置js css img等檔案
routes是專案的路由資訊檔案,控制地址路由
views是檢視檔案，放置模板檔案ejs或jade等（其實就相當於html形式檔案啦~)
express這樣的MVC框架模式，是一個Web專案的基本構成
先來看看檔案資訊package.json 一般專案的主要資訊都會在這裡產生
{
"name": "test",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.12.0",
"cookie-parser": "~1.3.4",
"debug": "~2.1.1",
"ejs": "~2.3.1",
"express": "~4.12.2",
"morgan": "~1.5.1",
"serve-favicon": "~2.2.0"
}
}
看看主檔案 app.js 這是它的初始形式，這個模組還要繼續匯出給 bin資料夾下的www檔案使用
1 var express = require('express');
2 var path = require('path');
3 var favicon = require('serve-favicon');
4 var logger = require('morgan');
5 var cookieParser = require('cookie-parser');
6 var bodyParser = require('body-parser');
7
8 var routes = require('./routes/index');
9 var users = require('./routes/users');
10
11 var app = express();
12
13 // view engine setup
14 app.set('views', path.join(__dirname, 'views'));
15 app.set('view engine', 'ejs');
16
17 // uncomment after placing your favicon in /public
18 //app.use(favicon(__dirname + '/public/favicon.ico'));
19 app.use(logger('dev'));
20 app.use(bodyParser.json());
21 app.use(bodyParser.urlencoded({ extended: false }));
22 app.use(cookieParser());
23 app.use(express.static(path.join(__dirname, 'public')));
24
25 app.use('/', routes);
26 app.use('/users', users);
27
28 // catch 404 and forward to error handler
29 app.use(function(req, res, next) {
30 var err = new Error('Not Found');
31 err.status = 404;
32 next(err);
33 });
34
35 // error handlers
36
37 // development error handler
38 // will print stacktrace
39 if (app.get('env') === 'development') {
40 app.use(function(err, req, res, next) {
41 res.status(err.status || 500);
42 res.render('error', {
43 message: err.message,
44 error: err
45 });
46 });
47 }
48
49 // production error handler
50 // no stacktraces leaked to user
51 app.use(function(err, req, res, next) {
52 res.status(err.status || 500);
53 res.render('error', {
54 message: err.message,
55 error: {}
56 });
57 });
58
59
60 module.exports = app;
www檔案內容：這裡擁有著http伺服器的基本配置
View
Code
再來介紹一下專案使用到的ejs模板，比如看看這個view裡邊的index.ejs （我們待會可以直接把它轉為html，差不多的）
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
<%= title %> 這就是ejs的使用範例，title的值通過路由routes資料夾下index.js程式碼傳入（後面再談）
好了，基本介紹了專案的初始情況
2.基於初始專案的改進-- 註冊登入功能
設計如下：
一個初始介面（其實就是原始地址：比如 localhost:3000(index.html 路徑為/ ) ，在初始介面選擇登入或註冊
跳進來之後會先跳進登入介面（login.html 路徑為 /login)，可以選擇先註冊（跳轉 register.html 路徑為/register)
跳進註冊介面後就會跳進（register.html 路徑為 /register)，註冊成功後就跳轉登入介面(login.html 路徑為 /login)
在登入介面登入成功後就跳轉(home.html 路徑為 /home). 在home這裡還提供了登出的功能（無頁面檔案，它的路徑為 /logout
如果瀏覽器直接輸入localhost:3000/home 要先判斷是否登入成功，未登入不允許進入
看到上訴，應該瞭解到：我們是通過一個路徑，然後通過這個路徑的解析，從而渲染出這個路徑對應的模板檔案，其中我們這裡的模板檔案為.html字尾的
首先展示一下基本介面形態：
