开始nodejs+express的学习+实践（3）
1.一些经常使用的api操做css
有时候咱们可能要获取用户的ip地址和访问时间：html
获取ip地址的处理：req.ipnode
获取访问时间，这时候咱们使用Date建立date对象，把时间获取就能够了，同js操做express
咱们作一个简单的演示，在更目录下，咱们已经作了点击“hello world！”进入hello的处理，咱们在npm
路由 get的“/hello”获取这些内容，而且显示在模板页面，路由修改以下：json
app.get('/hello', function(req, res){
var ip=req.ip;
var date=new Date();
var ri=date.getDate()
res.render('hello', { text: '么么哒',ip:ip,ri:ri });
});
hello.ejs以下：api
<!DOCTYPE html> <html> <head> <title>hello</title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1><%= text %></h1> <h1><%= ip %></h1> <h1><%= ri %></h1> </body> </html>
2.ejs模板引擎，后缀改成.htmlcookie
咱们知道，咱们使用的是ejs模板引擎，咱们看到页面都是.ejs后缀，其实.ejs文件里面写的就是html标签，既然就是html的标签，咱们能不能把.ejs改成.html，毕竟不少人看着是不舒服的，主要也是使用模板的时候要修改后缀名很麻烦的，咱们作好的静态页都是.html结束。app
咱们找到手册设置：post
app.js相关部分代码以下
// view engine setup
app.engine('html', require('ejs').renderFile);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');
对比以前，加入app.engine的设置和set的显示设置为html
从新启动，运行，效果同以前，不过这时候.html和咱们作的html页面确定是不太同样的，正常html页面是不能解析后台数据的！
3.上传文件的存储
按咱们获取客户信息的理解，针对上传文件的获取应该是这样：
req.files获取全部上传表单
req.files.file1获取name叫file1的表单
觉得类推......
不过很惋惜，express没有这样的处理接口，看来咱们只能本身截取（有点难）或者使用第三方模块（窃喜）了！
网上使用较多的，存储上传文件的第三方模块是： formidable
咱们修改package.json：
{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"express": "~3.4.8",
"static-favicon": "~1.0.0",
"morgan": "~1.0.0",
"cookie-parser": "~1.0.1",
"body-parser": "~1.0.0",
"debug": "~0.7.4",
"ejs": "~0.8.5",
"formidable": "*"
}
}
咱们在项目下执行命令：
npm install
开始安装 formidable，等待完成便可！
咱们在路由文件index.js引用当前模块，index.js代码以下：
var formidable = require('formidable');
var fs = require('fs');
function rout(app){
app.get('/',function(req, res){
res.render('index', { title: 'Express',hello: 'hello world!',arr:[111111,2222,33333,44444] });
});
app.get('/hello', function(req, res){
var ip=req.ip;
var date=new Date();
var ri=date.getDate()
res.render('hello', { text: '么么哒',ip:ip,ri:ri });
});
app.get('/list', function(req, res){
res.render('list', { text: req.query.id });
});
app.get('/login', function(req, res){
res.render('login');
});
app.post('/logincheck', function(req, res){
var user= req.body.user;
var pass= req.body.pass;
if(user=="tom" && pass=="tom"){
res.redirect('/');
}else{
res.redirect('/login');
};
});
};
咱们针对上传操做建立路由处理，
上传页面，路由加入：
get的“/file”处理，
点击上传，路由加入，
post的“/upfile” 处理。
index.js加入代码以下：
app.get('/file', function(req, res){
res.render('file');
});
app.post('/upfile', function(req, res){
//code
});
咱们建立file.html，咱们上面已经把模板后缀修改。
file.html代码：
<!DOCTYPE html> <html> <head> <title>login</title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <form method="post" action="/upfile" enctype="multipart/form-data"> <input type="file" name="file"> <input id="ok" type="submit" value="上传"> </form> </body> </html>
注意点
enctype的设置
input类型为file
下面咱们该在路由加入上传存储处理了，修改上传路由操做
app.post('/upfile', function(req, res){
//code
var form = new formidable.IncomingForm();
form.uploadDir = "./upload";
form.parse(req, function(err, fields, files) {
if (err) {
res.redirect('/file');
}
var tmp_path, target_path;
if (files.file.size > 0) { //表示有文件上传
tmp_path = files.file.path;//内存中的文件，当前文件目录
var picType = files.file.name.split(".")[1];//后缀名
//移动目的目录
target_path = './public/images/pic_1.' + picType;
//同步方式移动文件
fs.renameSync(tmp_path, target_path);
}else{
res.redirect('/file');
};
});
});
重要操做，咱们在app.js同级建立upload文件夹，用来临时存放上传的文件。
咱们在file页面上传文件，点击上传，就能够在public/images下看见文件了。
几个重要点：
formidable的方法建立对象
指定临时目录
使用解析方法，在回调获取文件组
文件组.文件表单name名称获取上传文件
path属性存放上传文件
renamesync移动文件，参数1老路径，参数2目的路径，此方法可重命名
关于fs模块的各类方法能够在nodejs的api中查看
4.总结
到这里发生修改的文件：
1.app.js 改变模板引擎的后缀名
var express = require('express');
var http = require('http');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/user');
var app = express();
// view engine setup
app.engine('html', require('ejs').renderFile);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');
app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(app.router);
routes.rout(app);
app.get('/users', users.list);
/// catch 404 and forwarding to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
/// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
2.index.js 加入文件上传的处理
var formidable = require('formidable');
var fs = require('fs');
function rout(app){
app.get('/',function(req, res){
res.render('index', { title: 'Express',hello: 'hello world!',arr:[111111,2222,33333,44444] });
});
app.get('/hello', function(req, res){
var ip=req.ip;
var date=new Date();
var ri=date.getDate()
res.render('hello', { text: '么么哒',ip:ip,ri:ri });
});
app.get('/list', function(req, res){
res.render('list', { text: req.query.id });
});
app.get('/login', function(req, res){
res.render('login');
});
app.post('/logincheck', function(req, res){
var user= req.body.user;
var pass= req.body.pass;
if(user=="tom" && pass=="tom"){
res.redirect('/');
}else{
res.redirect('/login');
};
});
app.get('/file', function(req, res){
res.render('file');
});
app.post('/upfile', function(req, res){
//code
var form = new formidable.IncomingForm();
form.uploadDir = "./upload";
form.parse(req, function(err, fields, files) {
if (err) {
res.redirect('/file');
}
var tmp_path, target_path;
if (files.file.size > 0) { //表示有文件上传
tmp_path = files.file.path;//内存中的文件，当前文件目录
var picType = files.file.name.split(".")[1];//后缀名
//移动目的目录
target_path = './public/images/pic_1.' + picType;
//同步方式移动文件
fs.renameSync(tmp_path, target_path);
}else{
res.redirect('/file');
};
});
});
};
exports.rout=rout;
3.package.json 依赖加入formidable
{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"express": "~3.4.8",
"static-favicon": "~1.0.0",
"morgan": "~1.0.0",
"cookie-parser": "~1.0.1",
"body-parser": "~1.0.0",
"debug": "~0.7.4",
"ejs": "~0.8.5",
"formidable": "*"
}
}
4.file.ejs
<!DOCTYPE html> <html> <head> <title>login</title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <form method="post" action="/upfile" enctype="multipart/form-data"> <input type="file" name="file"> <input id="ok" type="submit" value="上传"> </form> </body> </html>
5.ejs后缀改成.html
相关文章
- 1. 开始nodejs+express的学习+实践（4）
- 2. 开始nodejs+express的学习+实践（5）
- 3. 开始nodejs+express的学习+实践（8）
- 4. 开始nodejs+express的学习+实践（6）
- 5. 开始nodejs+express的学习+实践（2）
- 6. 开始nodejs+express的学习+实践（7）
- 7. 开始nodejs+express的学习+实践（9）
- 8. 开始nodejs+express的学习+实践（1）
- 9. 从零开始学习HTML+CSS（3）
- 10. libevent学习，从3个例子开始
- 更多相关文章...
- • Thymeleaf项目实践 - Thymeleaf 教程
- • 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
- • 适用于PHP初学者的学习线路和建议
- • Tomcat学习笔记（史上最全tomcat学习笔记）
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 升级Gradle后报错Gradle‘s dependency cache may be corrupt (this sometimes occurs
- 2. Smarter, Not Harder
- 3. mac-2019-react-native 本地环境搭建(xcode-11.1和android studio3.5.2中Genymotion2.12.1 和VirtualBox-5.2.34 )
- 4. 查看文件中关键字前后几行的内容
- 5. XXE萌新进阶全攻略
- 6. Installation failed due to: ‘Connection refused: connect‘安卓studio端口占用
- 7. zabbix5.0通过agent监控winserve12
- 8. IT行业UI前景、潜力如何？
- 9. Mac Swig 3.0.12 安装
- 10. Windows上FreeRDP-WebConnect是一个开源HTML5代理，它提供对使用RDP的任何Windows服务器和工作站的Web访问
欢迎关注本站公众号,获取更多信息
