一、express

可以做:web application、api...

特性:

  • 适合写简单的路由系统
  • 集成很多模板引擎
  • 中间件系统

二、请求与响应

var express = require('express');

var app = express();

//据说第二个参数是一个中间件方法
app.get('/', function(req, res) {
//学会查api来学习更多知识,学会学习官方api文档
var resObj = req.method;
//send可以发送字符串、json(包含自动stringify)对象和数组
res.send(resObj);
}) app.listen(3000);
console.log('listening to port 3000');

三、路由参数

server.js

var express = require('express');

var app = express();

app.get('/profile/:id/user/:name', function(req, res) {
console.dir(req.params);
res.send('you requested to a profile page with the name of ' + req.params.name);
}) app.listen(3000);
console.log('listening to port 3000');

terminal

chrome

四、查询字符串

server.js

app.get('/', function(req, res) {
console.dir(req.query);
res.send('home page:' + req.query.find);
})

terminal

chrome

五、post请求和postman工具

同时处理x-www-form和json

var express = require('express');
var bodyparser = require('body-parser'); var app = express(); //create application/json parser
var jsonParser = bodyparser.json(); //create application/x-www-form-urlencoded parser
var urlencodedParser = bodyparser.urlencoded({ extended: false}) app.post('/', urlencodedParser,function (req, res) {
console.dir(req.body);
res.send(req.body.name);
}) app.post('/upload', jsonParser, function (req, res) {
console.dir(req.body);
res.send(req.body.name);
})

参考链接:github/express/body-parser

六、上传文件

form.html

<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<h2>单图上传</h2>
<input type="file" name="logo">
<input type="submit" value="submit">
</form>
</body>

server.js

var express = require('express');
var bodyparser = require('body-parser');
var fs = require('fs');
var multer = require('multer');
var upload = multer({ dest: 'uploads/'});
var app = express(); //create application/json parser
var jsonParser = bodyparser.json(); //create application/x-www-form-urlencoded parser
var urlencodedParser = bodyparser.urlencoded({ extended: false}) app.get('/', function(req, res) {
console.dir(req.query);
res.send('home page:' + req.query.find);
}) app.get('/form', function(req, res) {
var form = fs.readFileSync('./form.html', { encoding: 'utf8'});
res.send(form);
}) app.post('/', urlencodedParser,function (req, res) {
console.dir(req.body);
res.send(req.body.name);
}) app.post('/upload', upload.single('logo'),function (req, res) {
res.send({'ret_code': 0});
}) app.listen(3000);
console.log('listening to port 3000');

结构变化

参考链接:github/express/multer

tips:

app.get('/form', function(req, res) {
var form = fs.readFileSync('./form.html', { encoding: 'utf8'});
res.send(form);
})

等价于

app.get('/form', function(req, res) {
res.sendFile(__dirname + '/form.html');
})

七、模板引擎

引入

app.set('view engine', 'ejs');

使用

server.js

app.get('/form/:name', function(req, res) {
var person = req.params.name;
res.render('form', { person: person});
res.sendFile(__dirname + '/form.html');
})

form.ejs

<h1><%= person %></h1>

遍历数组

<ul>
<%= data.hobbie.forEach(function(item){ %>
<li>
<%= item %>
</li>
<%= }) %>
</ul>

公用模板

使用

<%- include('partials/header.ejs') -%>

about.ejs

<body>
<%- include('partials/header.ejs') -%>
</body>

渲染

app.get('/about', function(req, res) {
var data = {age: 29, job: 'programmer', hobbie: ['eating', 'fighting', 'fishing']};
res.render('about', { data: data});
})

参考链接:ejs.co、pug

八、中间件

解释:请求与响应之间的处理过程是中间件发挥作用的地方。

好处:共用模块、全局性的操作

类型:

  • 应用级中间件
  • 路由级中间件
  • 错误层次中间件
  • 内置中间件
  • 第三方中间件

执行顺序

app.use(function(req, res, next){
console.log('1');
next();
console.log('3');
}) app.use(function(req, res, next){
console.log('2');
})

路由中间件

server.js

var indexRouter = require('./routes/index.js');
var userRouter = require('./routes/user.js'); app.use('/', indexRouter);
app.use('/users', userRouter);

./route/index.js

var express = require('express');

var router = express.Router();

router.get('/', function(req, res, next) {
res.send('root');
}) module.exports = router;

./route/user.js

var express = require('express');

var router = express.Router();

router.get('/', function(req, res, next) {
res.send('user');
}) module.exports = router;

体会:用中间件写路由的好处

参考链接:express/using-middleware

express组件学习的更多相关文章

  1. C# BackgroundWorker组件学习入门介绍

    C# BackgroundWorker组件学习入门介绍 一个程序中需要进行大量的运算,并且需要在运算过程中支持用户一定的交互,为了获得更好的用户体验,使用BackgroundWorker来完成这一功能 ...

  2. bootstrap组件学习

    转自http://v3.bootcss.com/components/ bootstrap组件学习 矢量图标的用法<span class="glyphicon glyphicon-se ...

  3. C# BackgroundWorker组件学习

    C# BackgroundWorker组件学习  C# BackgroundWorker组件学习 一个程序中需要进行大量的运算,并且需要在运算过程中支持用户一定的交互,为了获得更好的用户体验,使用Ba ...

  4. [Python] wxPython 状态栏组件、消息对话框组件 学习总结(原创)

    1.状态栏组件 1.基本介绍 上图: 红框框内的就是状态栏. 他可以分成若干个区块,比如上者分为了两个区块,并且比例是固定的,创建时可以指定 每个区块都能够显示 信息,一般通过 绑定事件 实时更新 各 ...

  5. Vue组件学习

    根据Vue官方文档学习的笔记 在学习vue时,组件学习比较吃力,尤其是组件间的通信,所以总结一下,官方文档的组件部分. 注册组件 全局组件 语法如下,组件模板需要使用一个根标签包裹起来.data必须是 ...

  6. 开始nodejs+express的学习+实践(1)

    开始nodejs+express的学习+实践(1) 开始nodejs+express的学习+实践(2) 开始nodejs+express的学习+实践(3) 开始nodejs+express的学习+实践 ...

  7. vue组件学习(二)

    父子组件之间的数据传递, 父传给子: 直接在组件上传,如:<count :number="2"> (冒号和不要冒号的区别,有冒号会自动转为相应的类型)在名为count的 ...

  8. vue组件学习(一)

    1, vue中的 is 的用法,有时候我们需要把一个组件绑定到指定的标签下,比如把tr组件放到table下,直接这样写是不行的, <!DOCTYPE html> <html lang ...

  9. express 的学习 (1)

    - 安装`npm i express -S` - :引入express第三方对象 - :构建一个服务器对象 - :开启服务器监听端口 - :处理响应 1.下载 新建一个文件夹,cmd 进去,使用命令 ...

随机推荐

  1. Android 开发者文档 -- 应用基础知识

    https://developer.android.com/guide/components/fundamentals 应用基础知识 Android 应用采用 Java 编程语言编写.Android ...

  2. Python多继承解析顺序的C3线性算法流程解析

    Python多继承MRO 在Python2.1中,采用了经典类,使用深度优先算法解析. Python2.2中,引入了新式类,使用深度优先算法和广度优先算法. 在Python2.3以后的版本中,经典类和 ...

  3. tp5 重定向缺少index.php报错(No input file specified)

    转别人的,有用,Mark一下 public 下的.htaccess 修改为 <IfModule mod_rewrite.c>  Options +FollowSymlinks -Multi ...

  4. 使用 json_serializable (flutter packages pub run build_runner build) 问题

    命令: flutter packages pub run build_runner build 使用 build_runner 生成 .g.dart 文件 flutter packages pub r ...

  5. win10安装ubuntu子系统配置

    # 更改apt源 cat > /etc/apt/sources.list <<'END' #阿里云 deb http://mirrors.aliyun.com/ubuntu/ tru ...

  6. 浅谈flex布局

    Flex布局,俗称弹性布局,有了这个布局,咱们做的事情很多,以前那些很难实现比如说垂直居中之类都不存在了. 盒模型布局依赖于float,display,定位之类的方式来布局,这种的布局对一些特殊布局来 ...

  7. 修改Tomcat使用的JVM内存大小

    我的服务器的配置: # OS specific support.  $var _must_ be set to either true or false. JAVA_OPTS="-Xms10 ...

  8. 关于table-layout的用法

    定义:tableLayout 属性用来显示表格单元格.行.列的算法规则. 自动表格布局:auto(默认) 在自动表格布局中,列的宽度是由列单元格中没有折行的最宽的内容设定的. 此算法有时会较慢,这是由 ...

  9. 编译impala2.0.0

    使用redhat5.8没编译成功,改用redhat6.4最终编译成功. 参考官方的文档https://github.com/cloudera/Impala/tree/v1.2.2 不知道官方的read ...

  10. poj 1595 Prime Cuts

    Prime Cuts Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 10610   Accepted: 4046 Descr ...