express组件学习
一、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组件学习的更多相关文章
- C# BackgroundWorker组件学习入门介绍
C# BackgroundWorker组件学习入门介绍 一个程序中需要进行大量的运算,并且需要在运算过程中支持用户一定的交互,为了获得更好的用户体验,使用BackgroundWorker来完成这一功能 ...
- bootstrap组件学习
转自http://v3.bootcss.com/components/ bootstrap组件学习 矢量图标的用法<span class="glyphicon glyphicon-se ...
- C# BackgroundWorker组件学习
C# BackgroundWorker组件学习 C# BackgroundWorker组件学习 一个程序中需要进行大量的运算,并且需要在运算过程中支持用户一定的交互,为了获得更好的用户体验,使用Ba ...
- [Python] wxPython 状态栏组件、消息对话框组件 学习总结(原创)
1.状态栏组件 1.基本介绍 上图: 红框框内的就是状态栏. 他可以分成若干个区块,比如上者分为了两个区块,并且比例是固定的,创建时可以指定 每个区块都能够显示 信息,一般通过 绑定事件 实时更新 各 ...
- Vue组件学习
根据Vue官方文档学习的笔记 在学习vue时,组件学习比较吃力,尤其是组件间的通信,所以总结一下,官方文档的组件部分. 注册组件 全局组件 语法如下,组件模板需要使用一个根标签包裹起来.data必须是 ...
- 开始nodejs+express的学习+实践(1)
开始nodejs+express的学习+实践(1) 开始nodejs+express的学习+实践(2) 开始nodejs+express的学习+实践(3) 开始nodejs+express的学习+实践 ...
- vue组件学习(二)
父子组件之间的数据传递, 父传给子: 直接在组件上传,如:<count :number="2"> (冒号和不要冒号的区别,有冒号会自动转为相应的类型)在名为count的 ...
- vue组件学习(一)
1, vue中的 is 的用法,有时候我们需要把一个组件绑定到指定的标签下,比如把tr组件放到table下,直接这样写是不行的, <!DOCTYPE html> <html lang ...
- express 的学习 (1)
- 安装`npm i express -S` - :引入express第三方对象 - :构建一个服务器对象 - :开启服务器监听端口 - :处理响应 1.下载 新建一个文件夹,cmd 进去,使用命令 ...
随机推荐
- linux系统下运行java项目的脚本编写
本文主要讲linux系统下运行jar包,至于如何打包jar包,放到linux系统下可以参考其他的博客. 在linux系统下运行jar包的命令如下: 1.java -jar xxxxx.jar // ...
- UIImageView笔记
image的伸缩变换 最好是image和imageview的size一致.如果不一致,最终的效果由imageView的contentMode和image的属性共同决定. 如果image没有cap in ...
- Python的__getattribute__二三事
本来以为自己对__getattribute__已经比较了解了,结果用到的时候,才发现有一些知识点之前一直没有真正弄明白,记录如下(针对python3,python2差异较大): object类有__g ...
- 单据列表里无法找到ERP系统开发需求单,但是业务对象里可以找到
当从测试库迁移正式库时,如果新增了子系统,那么两边的子系统ID是不一样的 在BOS里修改单据的子系统只能修改业务对象列表里的子系统ID,单据列表里没有跟着一起修改 所以单据列表里的子系统ID需要手工去 ...
- sql92和sql99
sql1992sql分类 1.笛卡尔积 (表乘表) 2.等值连接 表的连接条件使用“=” 3.非等值连接 表的连接条件使用“>.>=. <.<=.!=.any等” 4.自连接 ...
- editplus 编辑 php双击选中变量问题
windows下,在很多地方双击鼠标左键可以选中一个连续的英文字符串. 在editplus 编辑器里可以双击选中一个变量,方便了编程,但是使用phptools(php.stx)增强语法插件后,在一个变 ...
- vue混入函数问题
vue开发时,遇到个问题, import mxTable from "#mixin/table"; 导入了一个混入mxTable,但是该混入函数中import了其他的js代码,此时 ...
- readonly与disable
Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,但是表单元素在使用了disabled后,当我们将表单以POST或G ...
- cloudera-scm-server启动时出现Caused by: javax.persistence.PersistenceException: org.hibernate.exception.GenericJDBCException: Could not open connection问题解决方法(图文详解)
问题现象 查看 [root@cmbigdata1 cloudera-scm-server]# pwd /var/log/cloudera-scm-server [root@cmbigdata1 clo ...
- 自己用的opensuse源
utsc_oss http://mirrors.ustc.edu.cn/opensuse/distribution/13.1/repo/oss/utsc_non_oss ...