Express NodeJs Web框架学习笔记(一)

原文链接 燕归来兮 - Express NodeJs Web框架学习笔记(一)

Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。

• 使用 Express 可以快速地搭建一个完整功能的网站。
• Express 框架核心特性：
• 可以设置中间件来响应 HTTP 请求。
• 定义了路由表用于执行不同的 HTTP 请求动作。
• 可以通过向模板传递参数来动态渲染 HTML 页面。

前提知识

• NodeJs

• NPM

创建项目

• 初始化

这里我们使用npm初始化一个项目,直接回车使用默认参数

$ mkdir ~/myExpress
$ cd ~/myExpress
$ npm init	

• 安装Express

$ npm install express --save

• 创建入口文件app.js

$ touch app.js

基础示例

使用IDE打开项目(推荐Vscode或者WebStorm) 编辑app.js文件

// 引入依赖
var express = require('express')
var app = express()

// 定义port常亮
const port = 3030;

// 创建一个简单GET路由
app.get("/",function(req,res){
    res.send("Hello,World");
});

// 启动服务,第二个参数为callback() 
app.listen(port,function(){
    console.log(`Express 应用启动在${port} 端口`);
});

命令行切换到app.js目录下

$ node app.js

打印出Express 应用启动在3030 端口,在浏览器或者CURL访问http://localhost:3030即可看到Hello,World

$ curl -XGET http://localhost:3030/

路由设置

在上面的代码示例中我们使用了一个简单HelloWorld代码,使用了GET的请求方式,同样的Express也支持其他的Method,如POST,PATCH,DELETE等等,下面我们简单的写一下

// 引入依赖
var express = require('express')
var app = express()

// 定义port常亮
const port = 3030;

// 创建一个简单GET路由
app.get("/",function(req,res){
    res.send("Hello,World");
});

app.post("/post",function(req,res){
    var method = req.method;
    res.send(`发现${method} 请求`)
});

app.patch("/patch",function(req,res){
    var method = req.method;
    res.send(`发现${method} 请求`)
});

app.delete("/delete",function(req,res){
    var method = req.method.name;
    res.send(`发现${method} 请求`)
});

// 启动服务,第二个参数为callback() 
app.listen(port,function(){
    console.log(`Express 应用启动在${port} 端口`);
});

如果你需要添加全部的请求方式,可以使用app.all(path,callback);

由于POST等请求不能再浏览器输入地址访问,这里我们继续使用CURL来测试,没有这个工具的可以使用PostMan测试.

$ curl -XGET http://localhost:3030        
Hello,World

$ curl -XPOST http://localhost:3030/post   
发现POST 请求

$ curl -XPATCH http://localhost:3030/patch  
发现PATCH 请求

$ curl -XDELETE http://localhost:3030/delete
发现DELETE 请求 

静态文件

Express可以设置某个目录为静态文件目录,里面的资源我们可以直接通过URL访问,在app.js同级目录下执行以下脚本

$ mkdir public && cd public
$ echo "
这里是静态资源文件内容 >> ./static.html

修改app.js文件,添加以下代码

app.use(express.static('public'))

访问http://localhost:3030/static.html

$ curl -XGET http://localhost:3030/static.html
<h1>这里是静态资源文件内容</h1>

同样的,你也可以放入其他类型的资源,如JSON文件,图像,纯文本,CSS等.