Express是node的框架,通过Express我们快速搭建一个完整的网站,而不再只是前端了!所以Express还是非常值得学习的!

  express有各种中间件,我们可以在官方网站查询其用法。

  Express框架的核心特性如下:

  • 通过中间件来响应http请求。
  • 定义路由表来执行不同的HTTP请求动作。
  • 通过向模板传递参数来动态渲染页面。

  

安装Express


首先新建一个文件夹expressTest, 终端输入 npm init, 生成package.json文件。内容如下;

  1. {
  2. "name": "express",
  3. "version": "1.0.0",
  4. "description": "for Express test",
  5. "main": "index.js",
  6. "scripts": {
  7. "test": "echo \"Error: no test specified\" && exit 1"
  8. },
  9. "repository": {
  10. "type": "git",
  11. "url": "no"
  12. },
  13. "keywords": [
  14. "express"
  15. ],
  16. "author": "Johon Zhu",
  17. "license": "ISC"
  18. }

使用cnpm安装express(注意:这里需要使用cnpm,使用npm会报错),

  1. cnpm install express --save

执行之后,我们就可以发现在当前目录下多了一个node_modules文件,其中包含了express的相关文件。

在package.json文件中,可以发现多了依赖项express,如下:

  1. "dependencies": {
  2. "express": "^4.15.2"
  3. }

安装下面几个重要的模块(安装express,就必须安装这几个配合使用)

  • body-parser   -  nodejs中间件,用于处理JSON、txt、Raw和Url编码的数据。
  • cookie-parser  -  用于解析cookie。
  • multer  -  nodejs中间件,用于处理enctype="multipart/form-data"的表单数据。
  1. cnpm install body-parser --save
  2. cnpm install cookie-parser --save
  3. cnpm install multer --save

  此时,在package.json中我们就可以看到目前的依赖项已经包含了四项:

  1. "dependencies": {
  2. "body-parser": "^1.17.1",
  3. "cookie-parser": "^1.4.3",
  4. "express": "^4.15.2",
  5. "multer": "^1.3.0"
  6. }

  

第一个Express框架实例


在express.js文件下输入下面的代码:

  1. var express = require('express');
  2. var app = express();
  3.  
  4. app.get('/', function (req, res) {
  5. res.send('Hello World');
  6. })
  7.  
  8. var server = app.listen(, function () {
  9.  
  10. var host = server.address().address
  11. var port = server.address().port
  12.  
  13. console.log("应用实例,访问地址为 http://%s:%s", host, port)
  14. });

在浏览器中输入127.0.0.1:8081,页面输出Hello world。

可以看出,最后如果我们不log,express的例子将会更加简单,如下:

  1. var express = require('express');
  2. var app = express();
  3.  
  4. app.get('/', function (req, res) {
  5. res.send('Hello World');
  6. })
  7.  
  8. var server = app.listen();

同样在访问localhost:8081时可以看到页面显示Hello World。

重要: 因为引入了express框架,所以我们不需要自行再建立server.js、client.js,只需要通过这么一个文件就可以完成了。并且也没有引入url、http等。

补充:有时gitbash汉字无法正常显示,可在gitbash中右键-> options -> text -> 设置charset为utf-8。  即可解决问题。

Express 中的get、post


  1. app.get('/', function (req, res) {
  2. // --
  3. })

其中,app为express(), 我们一般可以通过req和res来处理请求request和响应respond。

req对象包含了很多与请求相关的属性,重要的几个如下:

  • req.app 即访问express实例
  • req.body 获得请求主题
  • req.cookies 获得cookies
  • req.hostname获取主机名
  • req.ip获取主机ip
  • req.originalUrl 获取原始url
  • req.params 获取路由的parameters
  • req.path 获取请求路径
  • req.protocal 获取请求协议
  • req.query 获取url的查询字符串
  • req.accepts() 获取可接受的请求的文档类型
  • 。。。

res对象包含了很多和响应有关的属性,重要的几个如下:

  • res.cookie() 设置cookie
  • res.json() 传送json响应
  • res.jsonp() 传送jsonp响应
  • res.send() 传送http响应
  • res.status() 设置状态码
  • res.type() 设置Content-Type的MIME类型

路由


之前我们通过app.get("/", function (req, res) {...}) 来处理的,但是他们每次访问的都默认是主页,而路由决定不同的页面,即路径不同,就响应不同。

  1. var express = require('express');
  2. var app = express();
  3.  
  4. app.get('/', function (req, res) {
  5. res.send("主页get请求");
  6. });
  7. app.post('/', function (req, res) {
  8. res.send("主页post请求");
  9. });
  10. app.get('/delSomething', function (req, res) {
  11. res.send("删除页面get请求");
  12. });
  13. app.get('/addSomething', function (req, res) {
  14. res.send("添加页面get请求");
  15. })

  app.get('/g*d', function (req, res) {
    res.send("输入g()d,可以正则匹配");
  });

  1. var server = app.listen();

输出如下:

即路径不同,返回不同。 这就是路由。

静态文件


nodejs提供了express.static中间件来设置css、js、图片等静态文件。

即使用 express.use(express.static("public"));  即使用public文件夹下的静态文件,我们再public文件夹下放置一些css和js就可以访问了。如下:

  1. var express = require("express");
  2. var app = express();
  3. app.use(express.static("public"));
  4. app.get("/", function (req, res) {
  5. res.send("hello");
  6. });
  7. app.listen();

即首先需要引入express,然后app.use(express.static("public")),表示需要使用静态资源,且在public文件中。 然后监听端口就可以了。

注意: 在请求时, 不需要输入public,只需要输入public内的文件即可。

get请求


之前在使用node时,使用过类似的,是一个post请求,这里用express实现get请求,index.html如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>index</title>
  6. </head>
  7. <body>
  8. <form action="http://127.0.0.1:8081/process_get" method="get">
  9. <input type="text" name="name" placeholder="name"><br>
  10. <input type="text" name="age" placeholder="age"><br>
  11. <input type="submit">
  12. </form>
  13. </body>
  14. </html>

注意到action,即将数据发送到action所在的接口上,在下面的modejs文件中我们定义了如果处理这个接口。

js如下:

  1. var express = require("express");
  2. var app = express();
  3. app.get("/index.html", function (req, res) {
  4. res.sendFile(__dirname + "/" + "index.html");
  5. });
  6. app.get("/process_get", function (req, res) {
  7. var response = {
  8. name: req.query.name,
  9. age: req.query.age
  10. };
  11. res.send(response);
  12. });
  13. app.listen();

即请求Index.html时,返回html,如果再通过get方式来发送表单,我们就把用户输入的以json字符串的形式返回。 (注意这里sendFile和__dirname的应用)

post请求


get请求比较简单实现,但是安全性不高,所以可以使用post,使用post不会再url上添加查询字符串,而是直接发送,但是需要我们使用body-parser来编码。 如下:

(注意:现在index.html的form内的method已经成了post, 如下:)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>index</title>
  6. </head>
  7. <body>
  8. <form action="http://127.0.0.1:8081/process_get" method="post">
  9. <input type="text" name="name" placeholder="name"><br>
  10. <input type="text" name="age" placeholder="age"><br>
  11. <input type="submit">
  12. </form>
  13. </body>
  14. </html>

js如下所示:

  1. var express = require("express");
  2. var app = express();
  3. var bodyParser = require("body-parser");
  4. var urlEcode = bodyParser.urlencoded({extended: false});
  5. app.get("/index.html", function (req, res) {
  6. res.sendFile(__dirname + "/" + "index.html");
  7. });
  8. app.post("/process_post",urlEcode, function (req, res) {
  9. var response = {
  10. name: req.body.name,
  11. age: req.body.age
  12. };
  13. res.send(response);
  14. });
  15. app.listen();

即首先引入express,然后引入body-parser,为什么呢? 我们在用get方法时直接传送查询字符串,但是post方法,就要传送数据了,而post方法就在body里,所以要使用body-parser将字符串解析为数据才能传送,最后,在处理post的接口process_post时,就要传入这个urlEcode作为参数用来解析, 另外值得注意的是response中要用req.body.name要和get方法里的req.query.name区分开来。

文件上传:


文件上传需要将index.html中form的enctype设置为multipart/form-data,这样才可以上传文件,另外,input的type设置为file。

如下:

  1. <html>
  2. <head>
  3. <title>文件上传表单</title>
  4. </head>
  5. <body>
  6. <form action="/file_upload" method="post" enctype="multipart/form-data">
  7. <input type="file" name="image" size="" />
  8. <br />
  9. <input type="submit" value="上传文件" />
  10. </form>
  11. </body>
  12. </html>

在nodejs中不仅仅要引入express,还要引入fs来对文件进行操作,引入body-parser来对文件的类型进行操作(类似于post),实际上文件上传就是post,因为post是传送的意思。

  1. var express = require("express");
  2. var app = express();
  3. var bodyParser = require("body-parser");
  4. var multer = require("multer");
  5. var fs = require("fs");
  6.  
  7. app.use(express.static('public'));
  8. app.use(bodyParser.urlencoded({extended: false}));
  9. app.use(multer({dest: '/tmp/'}).array('image'));
  10. var urlEcode = bodyParser.urlencoded({extended: false});
  11.  
  12. app.get("/index.html", function (req, res) {
  13. res.sendFile(__dirname + "/" + "index.html");
  14. });
  15. app.post("/file_post",function (req, res) {
  16. var des_file = __dirname + "/" + req.files[].originalname;
  17. fs.readFile( req.files[].path, function (err, data) {
  18. fs.writeFile(des_file, data, function (err) {
  19. if( err ){
  20. console.log( err );
  21. }else{
  22. response = {
  23. message:'File uploaded successfully',
  24. filename:req.files[].originalname
  25. };
  26. }
  27. console.log( response );
  28. res.end( JSON.stringify( response ) );
  29. });
  30. });
  31. });
  32. app.listen();

Cookie管理:


  1. var express = require("express");
  2. var cookieParser = require("cookie-parser");
  3.  
  4. var app = express();
  5. app.use(cookieParser());
  6. app.get('/', function (req, res) {
  7. console.log("Cookies:",req.cookies);
  8. });
  9. app.listen();

引入cookie-parser,用于传递cookie,即向nodejs服务器发送cookie信息, req.cookies即客户端的cookie信息。

学习资源:http://study.163.com/category/nodejs?utm_source=baidu&utm_medium=cpc&utm_campaign=affiliate&utm_term=IT-419&utm_content=SEM

node之Express框架的更多相关文章

  1. Node.js Express 框架

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

  2. Node.js Express框架

    Express 介绍 Express是一个最小的,灵活的Node.js Web应用程序框架,它提供了一套强大的功能来开发Web和移动应用程序. 它有助于基于Node Web应用程序的快速开发.下面是一 ...

  3. Node.js Express 框架学习

    转载:http://JavaScript.ruanyifeng.com/nodejs/express.html#toc0 感觉很牛的样子,不过觉得对初学者没太大用,里面很多例子用的api都没有详细的说 ...

  4. Node.js Express 框架 Express

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

  5. 44.Node.js Express 框架--web框架

    转自:http://www.runoob.com/nodejs/nodejs-express-framework.html Express 简介 Express 是一个简洁而灵活的 node.js W ...

  6. Node.js+Express框架+Mongo学习(一)第一个node.js实例

    1.在桌面新建一个空的文件夹,比如叫node,当然也可以在其它地方新建. 2.命令行进入到所新建的文件夹的目录,下载Express框架,再在这个文件夹里新建一个叫final的项目 3.在项目(fina ...

  7. Node的express框架安装

    第一步:在cmd命令行下执行npm install -g express,安装全局的express. 第二步:在命令行中输入express,如果出现express不是内部命令时, 输入npm inst ...

  8. Node.js Express 框架 POST方法

    POST 方法 以下实例演示了在表单中通过 POST 方法提交两个参数,我们可以使用 server.js 文件内的 process_post 路由器来处理输入: index.htm 文件代码修改如下: ...

  9. Node.js Express 框架 GET方法

    GET 方法 以下实例演示了在表单中通过 GET 方法提交两个参数,我们可以使用 server.js 文件内的 process_get 路由器来处理输入: index.htm 文件代码如下: < ...

随机推荐

  1. ASP.Net UpdatePanel控件 局部刷新 && 弹出提示信息

    参考博客: https://blog.csdn.net/qq_35019337/article/details/69972552 https://blog.csdn.net/huangyezi/art ...

  2. sqlServer基础知识

    sqlServer   基础知识 大纲 创建数据库 1 创建表 2 备份表 3 删除表 4 修改表 5 查询出重复的数据 6 增删改查 7 添加约束 8 分页存储过程 9 排序 10 类型转换 11 ...

  3. c++类 初始化另一对象

    Cbox类中对象a  可以直接赋值给对象b,无论类中数据成员是私有还是共有.且在创建a时调用了一次构造函数,b调用的是另外的默认构造函数: #include<iostream> using ...

  4. mysql 行转列,对列的分组求和,对行求和

    CREATE TABLE students( id INT PRIMARY KEY, NAME VARCHAR(11)); CREATE TABLE courses( id INT PRIMARY K ...

  5. 【转】如何把CD上的音乐拷贝到电脑上

    参考:https://www.ixueshu.com/document/9c44893da6e90cf7318947a18e7f9386.html 参考:https://jingyan.baidu.c ...

  6. Linux 调节分辨率

    首先,你要有 GUI 才能设置分辨率 Tool of xrandr xrandr -s 1360x768

  7. 堆排序 思想 JAVA实现

    已知数组 79.52.48.51.49.34.21.3.26.23 ,请采用堆排序使数组有序. “什么是堆” 堆是一颗完全二叉树,N层完全二叉树是一颗,除N-1层外其节点数都达到最大,且第N层子节点全 ...

  8. 在Discuz X 中增加一个单独的页面

    如果在DZ中增加一个新的页面,并且取得DZ中相关的用户等乱七八糟的属性,在旧的版本中只要引用一个 -. comm.php 文件就可以,但是在 X 版本以后好像就没.还好,X版本中还是有办法解决的,使用 ...

  9. [HAOI2007]理想的正方形 BZOJ1047 二维RMQ

    题目描述 有一个a*b的整数组成的矩阵,现请你从中找出一个n*n的正方形区域,使得该区域所有数中的最大值和最小值的差最小. 输入输出格式 输入格式: 第一行为3个整数,分别表示a,b,n的值 第二行至 ...

  10. JAVA GET 和 POST 的区别

    GET 和 POST 的区别 GET请注意,查询字符串(名称/值对)是在 GET 请求的 URL 中发送的:/test/demo_form.asp?name1=value1&name2=val ...