【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>