【Express學習筆記 -- 1】快速入門

時間 2019-11-16

標籤 express 學習筆記快速入門简体版

原文原文鏈接

1、基本概念

Express 是一個簡潔而靈活的 node.js Web應用框架, 提供了一系列強大特性幫助你建立各類 Web 應用，和豐富的 HTTP 工具。使用 Express 能夠快速地搭建一個完整功能的網站，它有一套健壯的特性，可用於開發單頁、多頁和混合Web應用。css

2、快速開始

1.首先假設你已經安裝了Node.js(若未安裝，請先安裝Node.js),接下來建立一個工做目錄。html

$ mkdir express-start
$ cd express-start

2.經過npm init命令爲你的應用建立一個package.json文件（若不瞭解package.json,請自行百度）。node

$ npm init

注意：此命令會要求你輸入幾個參數，例如此應用的名稱和版本。你能夠直接按「回車」鍵接受大部分默認設置便可，下面這個除外：輸入 app.js 或者你所但願的名稱，這是當前應用的入口文件。若是你但願採用默認的 index.js 文件名，只需按「回車」鍵便可。git

entry point: (index.js)

3.在 express-start 目錄下安裝 Express 並將其保存到依賴列表中。express

npm install express --save

4.項目的跟目錄下建立app.js（第二步中注意的地方，入口文件設置的什麼名字，這個文件就叫什麼名字），下面是app.js文件內容：npm

const express = require('express')
const app = express()

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(3000, () => console.log('Example app listening on port 3000!'))

5.啓動項目，而後訪問 http://localhost:3000/json

node app.js

3、Express 應用程序生成器

經過應用生成器工具 express-generator 能夠快速建立一個應用的骨架,express-generator 包含了 express 命令行工具。sass

1.安裝express-generator：cookie

npm install express-generator -g

-h 參數能夠列出全部可用的命令行參數：app

$ express -h

  Usage: express [options] [dir]

  Options:

    -h, --help          輸出使用方法
        --version       輸出版本號
    -e, --ejs           添加對 ejs 模板引擎的支持
        --hbs           添加對 handlebars 模板引擎的支持
        --pug           添加對 pug 模板引擎的支持
    -H, --hogan         添加對 hogan.js 模板引擎的支持
        --no-view       建立不帶視圖引擎的項目
    -v, --view <engine> 添加對視圖引擎（view） <engine> 的支持 (ejs|hbs|hjs|jade|pug|twig|vash) （默認是 jade 模板引擎）
    -c, --css <engine>  添加樣式表引擎 <engine> 的支持 (less|stylus|compass|sass) （默認是普通的 css 文件）
        --git           添加 .gitignore
    -f, --force         強制在非空目錄下建立

2.新建一個工程，運行以下命令：

express project-name   // 簡單的建立工程
express --css=less --view=pug project-name  // 帶參數建立工程

運行結果以下：
3.根據指示繼續操做

cd express-start // 進去到項目路徑
npm install // 安裝依賴包
npm start //啓動項目

訪問http://localhost:3000/，將會看到以下界面。

4、工程結構講解

咱們回頭看看生成的工程目錄裏面都有什麼，打開咱們的express-start 文件夾，裏面如圖所示

bin：存放可執行文件
node_modules：存放 package.json 中安裝的模塊，當你在 package.json 添加依賴的模塊並安裝後，存放在這個文件夾下。
public：存放 image、css、js 等文件
routes：存放路由文件
views：存放視圖文件或者說模版文件
app.js：啓動文件，或者說入口文件
package.json：存儲着工程的信息及模塊依賴，當在 dependencies 中添加依賴的模塊時，運行npm install ，npm 會檢查當前目錄下的 package.json，並自動安裝全部指定的模塊

打開app.js,讓咱們看看裏面究竟有什麼:

var createError = require('http-errors');
var express = require('express');  //加載express模塊
var path = require('path'); //路徑模塊
var cookieParser = require('cookie-parser'); //這就是一個解析Cookie的工具。經過req.cookies能夠取到傳過來的cookie，並把它們轉成對象。
var logger = require('morgan'); //在控制檯中，顯示req請求的信息


// 路由信息（接口地址），存放在routes的根目錄
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();

// view engine setup  模板開始
app.set('views', path.join(__dirname, 'views'));  //設置視圖根目錄
app.set('view engine', 'jade'); //設置視圖格式


// 載入中間件
app.use(logger('dev')); // 日誌中間件
app.use(express.json()); // 解析json的中間件。
app.use(express.urlencoded({ extended: false })); // 解析urlencoded請求體的中間件
app.use(cookieParser()); // 解析cookie的中間件

// 設置public文件夾爲存放靜態文件的目錄
app.use(express.static(path.join(__dirname, 'public')));

//配置路由，（'自定義路徑'，上面設置的接口地址）
app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler 錯誤處理
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

5、Express使用html模板

1.安裝ejs

npm install ejs --save

2.引入ejs

var ejs = require('ejs');

3.使用

app.set('views', path.join(__dirname, 'views'));
app.engine('html', ejs.__express);
app.set('view engine', 'html');

替換
app.set('views', path.join(__dirname, 'views'));  //設置視圖根目錄
app.set('view engine', 'jade'); //設置視圖格式

4.原.jade文件改成.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Express</title>
<link rel="stylesheet" type="text/css" href="../public/stylesheets/style.css">
</head>
<body>
<h1>Welcome to <%= title%></h1>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。