Express之搭建简单web框架并实现文件上传

GitHub地址： https://github.com/Sunny-fz/Web-Projects/tree/master

1.创建目录web

2.编写package.json(模块管理文件，描述模块信息)

[javascript]  view plain  copy

1. {  
2.   "name": "web",  
3.   "version": "1.0.0",  
4.   "description": "first web app",  
5.   "main": "app.js",  
6.   "author": "",  
7.   "license": "ISC",  
8.   "dependencies": {  
9.     "body-parser": "^1.17.2",  
10.     "cookie-parser": "^1.4.3",  
11.     "express": "^4.15.3",  
12.     "moment": "^2.18.1",  
13.     "morgan": "^1.8.2",  
14.     "multer": "^1.3.0",  
15.     "serve-favicon": "^2.4.3"  
16.   }  
17. }  

3.初始化依赖

[plain]  view plain  copy

1. npm init  

4.建立目录结构

[plain]  view plain  copy

1. --web  
2.   --public  
3.     --css  
4.     --js  
5.     --img  
6.   --routes(存放路由文件)  
7.   --views(存放视图文件)  
8.   app.js(模块入口文件)  
9.   package.json(模块描述文件)  

5.编写入口文件app.js

[javascript]  view plain  copy

1. var path = require("path");  
2. var favicon = require("serve-favicon");  
3. var logger = require("morgan");  
4. var cookieParser = require("cookie-parser");  
5. var bodyParser = require('body-parser');  
6.   
7. var express = require("express");  
8. var app = express();  
9.   
10. //set app variable  
11. app.set('port',process.env.PORT || 7000);  
12.   
13. app.set("views",path.join(__dirname,"views"));  
14. app.set("view engine","jade");  
15.   
16. //use middleware function  
17. app.use(favicon(__dirname+"/public/favicon.ico"));  
18. app.use(logger("dev"));  
19. app.use(bodyParser.json());  
20. app.use(bodyParser.urlencoded({extended: false}));  
21. app.use(cookieParser());  
22. app.use(express.static(__dirname + "/public"));  
23.   
24. app.use("/", require("./routes/index.js"));  
25. app.use("/user",require("./routes/user.js"));  
26. app.use("/system",require("./routes/system.js"));  
27.   
28. //catch 404 and forward to error handler  
29. app.use(function(req, res, next) {  
30.   var err = new Error('Not Found');  
31.   err.status = 404;  
32.   next(err);  
33. });  
34.   
35. // error handlers  
36.   
37. // development error handler  
38. // will print stacktrace  
39. if (app.get('env') === 'development') {  
40.   app.use(function(err, req, res, next) {  
41.     res.status(err.status || 500);  
42.     res.render('error', {  
43.       message: err.message,  
44.       error: err  
45.     });  
46.   });  
47. }  
48.   
49. // production error handler  
50. // no stacktraces leaked to user  
51. app.use(function(err, req, res, next) {  
52.   res.status(err.status || 500);  
53.   res.render('error', {  
54.     message: err.message,  
55.     error: {}  
56.   });  
57. });  
58.   
59. app.listen(app.get('port'));  
60. console.log("listen on port:" + app.get('port'));  
61. module.exports = app;  

6.编写路由文件index.js

[javascript]  view plain  copy

1. var path = require("path");  
2. var express = require("express");  
3. var router = express.Router();  
4.   
5. router.get("/",function(req,res){  
6.     //res.sendFile(path.join(__dirname,"upload.html"));  
7.     res.send("OK");  
8. });  
9.   
10. router.get("/user",function(req,res){  
11.     res.send("index user page" + req.url);  
12. });  
13.   
14. router.get("/admin",function(req,res){  
15.     res.send("admin page" + req.url);  
16. });  
17.   
18. router.get("/redirect",function(req,res){  
19.     res.redirect("https://www.baidu.com");  
20. });  
21.   
22. router.get("/upload",function(req,res){  
23.   // res.send(path.join(__dirname,"../upload.html"));  
24.   console.log(path.join(__dirname+"/../upload.html"));  
25.   // res.sendFile(path.join(__dirname,"../upload.html"));  
26.   res.sendFile(path.join(__dirname+"/../upload.html"));  
27. });  
28. module.exports = router;  

7.编写路由文件user.js

[javascript]  view plain  copy

1. var express = require("express");  
2.   
3. var router = express.Router();  
4.   
5. router.get("/add",function(req,res){  
6.         res.send("add user page" + req.url);  
7.     });  
8.   
9. router.get("/delete",function(req,res){  
10.     res.send("delete user page" + req.url);  
11. });  
12.   
13. router.get("/listuser",function(req,res){  
14.     res.send("listuser page" + req.url);  
15. });  
16.   
17. module.exports = router;  

8.编写路由文件system.js(用于写一些接口，如文件上传)

[javascript]  view plain  copy

1. var path = require("path");  
2. var moment = require("moment");  
3. var express = require("express");  
4. var multer  = require('multer');  
5.   
6. var storage = multer.diskStorage({  
7.   destination: function (req, file, cb) {  
8.     cb(null, path.join(__dirname,"/../uploads"));  
9.   },  
10.   filename: function (req, file, cb) {  
11.     var date = new Date();  
12.     cb(null, "("+moment().format("YYYY-MM-DD")+")"+file.originalname);  
13.   }  
14. });  
15.   
16. var upload = multer({ storage: storage })  
17.   
18. var router = express.Router();  
19.   
20. router.post('/upload', upload.single('avatar'), function (req, res, next) {  
21.     res.send('文件上传成功')  
22.     console.log(req.file);  
23.     console.log(req.body);  
24. });  
25.   
26. module.exports = router;  

9.在views文件夹下添加error.jade

不加可能会报错，因为你加了模板引擎，会默认要求你添加一个显示错误的页面，内容为空就好了，不需要编写

10.在web根目录下添加一个静态页面，用于上传文件的页面

upload.html(在index.js这个路由文件中访问/upload时就是返回的这张页面)

[html]  view plain  copy

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>upload</title>  
6. </head>  
7. <body>  
8.     <form id='editfile' method='post' action='/system/upload' enctype='multipart/form-data'>  
9.     <input name="text" type="text"/>  
10.     选择图片：<input name="avatar" id='upfile' type='file'/>  
11.     <input type='submit' value='提交'/>  
12. </form>  
13. </body>  
14. </html>  

11.启动服务器

[plain]  view plain  copy

1. node app.js  

12.在浏览器中输入127.0.0.1:7000/upload进入上传页面,上传一个文件

13.特别注意事项！！！！

upload.html表单里的文件控件的name属性avatar必须和system.js里面upload.single("avatar")一致，具体取什么值无所谓，但必须一致！！才能获取对应name的文件。