node之Express框架
Express是node的框架,通过Express我们快速搭建一个完整的网站,而不再只是前端了!所以Express还是非常值得学习的!
express有各种中间件,我们可以在官方网站查询其用法。
Express框架的核心特性如下:
- 通过中间件来响应http请求。
- 定义路由表来执行不同的HTTP请求动作。
- 通过向模板传递参数来动态渲染页面。
安装Express
首先新建一个文件夹expressTest, 终端输入 npm init, 生成package.json文件。内容如下;
- {
- "name": "express",
- "version": "1.0.0",
- "description": "for Express test",
- "main": "index.js",
- "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
- },
- "repository": {
- "type": "git",
- "url": "no"
- },
- "keywords": [
- "express"
- ],
- "author": "Johon Zhu",
- "license": "ISC"
- }
使用cnpm安装express(注意:这里需要使用cnpm,使用npm会报错),
- cnpm install express --save
执行之后,我们就可以发现在当前目录下多了一个node_modules文件,其中包含了express的相关文件。
在package.json文件中,可以发现多了依赖项express,如下:
- "dependencies": {
- "express": "^4.15.2"
- }
安装下面几个重要的模块(安装express,就必须安装这几个配合使用)
- body-parser - nodejs中间件,用于处理JSON、txt、Raw和Url编码的数据。
- cookie-parser - 用于解析cookie。
- multer - nodejs中间件,用于处理enctype="multipart/form-data"的表单数据。
- cnpm install body-parser --save
- cnpm install cookie-parser --save
- cnpm install multer --save
此时,在package.json中我们就可以看到目前的依赖项已经包含了四项:
- "dependencies": {
- "body-parser": "^1.17.1",
- "cookie-parser": "^1.4.3",
- "express": "^4.15.2",
- "multer": "^1.3.0"
- }
第一个Express框架实例
在express.js文件下输入下面的代码:
- var express = require('express');
- var app = express();
- app.get('/', function (req, res) {
- res.send('Hello World');
- })
- var server = app.listen(, function () {
- var host = server.address().address
- var port = server.address().port
- console.log("应用实例,访问地址为 http://%s:%s", host, port)
- });
在浏览器中输入127.0.0.1:8081,页面输出Hello world。
可以看出,最后如果我们不log,express的例子将会更加简单,如下:
- var express = require('express');
- var app = express();
- app.get('/', function (req, res) {
- res.send('Hello World');
- })
- 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
- app.get('/', function (req, res) {
- // --
- })
其中,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) {...}) 来处理的,但是他们每次访问的都默认是主页,而路由决定不同的页面,即路径不同,就响应不同。
- var express = require('express');
- var app = express();
- app.get('/', function (req, res) {
- res.send("主页get请求");
- });
- app.post('/', function (req, res) {
- res.send("主页post请求");
- });
- app.get('/delSomething', function (req, res) {
- res.send("删除页面get请求");
- });
- app.get('/addSomething', function (req, res) {
- res.send("添加页面get请求");
- })
app.get('/g*d', function (req, res) {
res.send("输入g()d,可以正则匹配");
});
- var server = app.listen();
输出如下:
即路径不同,返回不同。 这就是路由。
静态文件
nodejs提供了express.static中间件来设置css、js、图片等静态文件。
即使用 express.use(express.static("public")); 即使用public文件夹下的静态文件,我们再public文件夹下放置一些css和js就可以访问了。如下:
- var express = require("express");
- var app = express();
- app.use(express.static("public"));
- app.get("/", function (req, res) {
- res.send("hello");
- });
- app.listen();
即首先需要引入express,然后app.use(express.static("public")),表示需要使用静态资源,且在public文件中。 然后监听端口就可以了。
注意: 在请求时, 不需要输入public,只需要输入public内的文件即可。
get请求
之前在使用node时,使用过类似的,是一个post请求,这里用express实现get请求,index.html如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>index</title>
- </head>
- <body>
- <form action="http://127.0.0.1:8081/process_get" method="get">
- <input type="text" name="name" placeholder="name"><br>
- <input type="text" name="age" placeholder="age"><br>
- <input type="submit">
- </form>
- </body>
- </html>
注意到action,即将数据发送到action所在的接口上,在下面的modejs文件中我们定义了如果处理这个接口。
js如下:
- var express = require("express");
- var app = express();
- app.get("/index.html", function (req, res) {
- res.sendFile(__dirname + "/" + "index.html");
- });
- app.get("/process_get", function (req, res) {
- var response = {
- name: req.query.name,
- age: req.query.age
- };
- res.send(response);
- });
- app.listen();
即请求Index.html时,返回html,如果再通过get方式来发送表单,我们就把用户输入的以json字符串的形式返回。 (注意这里sendFile和__dirname的应用)
post请求
get请求比较简单实现,但是安全性不高,所以可以使用post,使用post不会再url上添加查询字符串,而是直接发送,但是需要我们使用body-parser来编码。 如下:
(注意:现在index.html的form内的method已经成了post, 如下:)
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>index</title>
- </head>
- <body>
- <form action="http://127.0.0.1:8081/process_get" method="post">
- <input type="text" name="name" placeholder="name"><br>
- <input type="text" name="age" placeholder="age"><br>
- <input type="submit">
- </form>
- </body>
- </html>
js如下所示:
- var express = require("express");
- var app = express();
- var bodyParser = require("body-parser");
- var urlEcode = bodyParser.urlencoded({extended: false});
- app.get("/index.html", function (req, res) {
- res.sendFile(__dirname + "/" + "index.html");
- });
- app.post("/process_post",urlEcode, function (req, res) {
- var response = {
- name: req.body.name,
- age: req.body.age
- };
- res.send(response);
- });
- 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。
如下:
- <html>
- <head>
- <title>文件上传表单</title>
- </head>
- <body>
- <form action="/file_upload" method="post" enctype="multipart/form-data">
- <input type="file" name="image" size="" />
- <br />
- <input type="submit" value="上传文件" />
- </form>
- </body>
- </html>
在nodejs中不仅仅要引入express,还要引入fs来对文件进行操作,引入body-parser来对文件的类型进行操作(类似于post),实际上文件上传就是post,因为post是传送的意思。
- var express = require("express");
- var app = express();
- var bodyParser = require("body-parser");
- var multer = require("multer");
- var fs = require("fs");
- app.use(express.static('public'));
- app.use(bodyParser.urlencoded({extended: false}));
- app.use(multer({dest: '/tmp/'}).array('image'));
- var urlEcode = bodyParser.urlencoded({extended: false});
- app.get("/index.html", function (req, res) {
- res.sendFile(__dirname + "/" + "index.html");
- });
- app.post("/file_post",function (req, res) {
- var des_file = __dirname + "/" + req.files[].originalname;
- fs.readFile( req.files[].path, function (err, data) {
- fs.writeFile(des_file, data, function (err) {
- if( err ){
- console.log( err );
- }else{
- response = {
- message:'File uploaded successfully',
- filename:req.files[].originalname
- };
- }
- console.log( response );
- res.end( JSON.stringify( response ) );
- });
- });
- });
- app.listen();
Cookie管理:
- var express = require("express");
- var cookieParser = require("cookie-parser");
- var app = express();
- app.use(cookieParser());
- app.get('/', function (req, res) {
- console.log("Cookies:",req.cookies);
- });
- 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框架的更多相关文章
- Node.js Express 框架
Node.js Express 框架 Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP ...
- Node.js Express框架
Express 介绍 Express是一个最小的,灵活的Node.js Web应用程序框架,它提供了一套强大的功能来开发Web和移动应用程序. 它有助于基于Node Web应用程序的快速开发.下面是一 ...
- Node.js Express 框架学习
转载:http://JavaScript.ruanyifeng.com/nodejs/express.html#toc0 感觉很牛的样子,不过觉得对初学者没太大用,里面很多例子用的api都没有详细的说 ...
- Node.js Express 框架 Express
Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express 可以快速 ...
- 44.Node.js Express 框架--web框架
转自:http://www.runoob.com/nodejs/nodejs-express-framework.html Express 简介 Express 是一个简洁而灵活的 node.js W ...
- Node.js+Express框架+Mongo学习(一)第一个node.js实例
1.在桌面新建一个空的文件夹,比如叫node,当然也可以在其它地方新建. 2.命令行进入到所新建的文件夹的目录,下载Express框架,再在这个文件夹里新建一个叫final的项目 3.在项目(fina ...
- Node的express框架安装
第一步:在cmd命令行下执行npm install -g express,安装全局的express. 第二步:在命令行中输入express,如果出现express不是内部命令时, 输入npm inst ...
- Node.js Express 框架 POST方法
POST 方法 以下实例演示了在表单中通过 POST 方法提交两个参数,我们可以使用 server.js 文件内的 process_post 路由器来处理输入: index.htm 文件代码修改如下: ...
- Node.js Express 框架 GET方法
GET 方法 以下实例演示了在表单中通过 GET 方法提交两个参数,我们可以使用 server.js 文件内的 process_get 路由器来处理输入: index.htm 文件代码如下: < ...
随机推荐
- ASP.Net UpdatePanel控件 局部刷新 && 弹出提示信息
参考博客: https://blog.csdn.net/qq_35019337/article/details/69972552 https://blog.csdn.net/huangyezi/art ...
- sqlServer基础知识
sqlServer 基础知识 大纲 创建数据库 1 创建表 2 备份表 3 删除表 4 修改表 5 查询出重复的数据 6 增删改查 7 添加约束 8 分页存储过程 9 排序 10 类型转换 11 ...
- c++类 初始化另一对象
Cbox类中对象a 可以直接赋值给对象b,无论类中数据成员是私有还是共有.且在创建a时调用了一次构造函数,b调用的是另外的默认构造函数: #include<iostream> using ...
- mysql 行转列,对列的分组求和,对行求和
CREATE TABLE students( id INT PRIMARY KEY, NAME VARCHAR(11)); CREATE TABLE courses( id INT PRIMARY K ...
- 【转】如何把CD上的音乐拷贝到电脑上
参考:https://www.ixueshu.com/document/9c44893da6e90cf7318947a18e7f9386.html 参考:https://jingyan.baidu.c ...
- Linux 调节分辨率
首先,你要有 GUI 才能设置分辨率 Tool of xrandr xrandr -s 1360x768
- 堆排序 思想 JAVA实现
已知数组 79.52.48.51.49.34.21.3.26.23 ,请采用堆排序使数组有序. “什么是堆” 堆是一颗完全二叉树,N层完全二叉树是一颗,除N-1层外其节点数都达到最大,且第N层子节点全 ...
- 在Discuz X 中增加一个单独的页面
如果在DZ中增加一个新的页面,并且取得DZ中相关的用户等乱七八糟的属性,在旧的版本中只要引用一个 -. comm.php 文件就可以,但是在 X 版本以后好像就没.还好,X版本中还是有办法解决的,使用 ...
- [HAOI2007]理想的正方形 BZOJ1047 二维RMQ
题目描述 有一个a*b的整数组成的矩阵,现请你从中找出一个n*n的正方形区域,使得该区域所有数中的最大值和最小值的差最小. 输入输出格式 输入格式: 第一行为3个整数,分别表示a,b,n的值 第二行至 ...
- JAVA GET 和 POST 的区别
GET 和 POST 的区别 GET请注意,查询字符串(名称/值对)是在 GET 请求的 URL 中发送的:/test/demo_form.asp?name1=value1&name2=val ...