经过一次又一次的失败和一起又一次的崩溃放弃。很多的bug总是出现在那些最细小的不容易察觉到的环节。搜百度一般很难找到解决办法，这时候我们通过Stackoverflow、Google等搜索才是真的大腿。有时候换一种思路可能就会豁然开朗，作为一名开发人员要对bug保持一种不抛弃不放弃的态度。开始自学一个东西总会是酿酿跄跄，有时候觉得如果有人带的话那可能我几个小时就能上手。但是自学的乐趣可能就在那些你不知道的会出现的bug上，当你解决完一个个bug，就好像闯过了一道道关卡。慢慢的就会对所学能够有更加深入的理解。距离上次发文已经一个月了，嘻嘻。
今天带大家再次探讨node.js 的express。我是强强一个想要成为全栈大牛的前端小白。更多express 方法点击EXPRESS官方文档
express-generator
express的应用生成器
安装
npm install -g express-generator ##全局安装创建应用
express myapp安装依赖初始化npm
npm install
npm init启动 Express 项目 在浏览器输入(默认端口3000) http://localhost:3000/:
npm start
生成的express应用的工程目录结构bin、node_modules、public、routes、views 、app.js、 package.json
使用html 引擎
因为express默认jade模板引擎，如果想要使用html模板需要手动修改，使用ejs后会自动将路由映射到html模板(名称相同)。
安装 ejs
npm install ejs
在app.js中引入
var ejs = require('ejs'); //我是新引入的ejs插件
设置html引擎
app.engine('html', ejs.__express);
设置视图引擎
app.set('view engine', 'html');
ejs下的html想要获取js传递过来的数据使用<%= name %>就可以了。<% code %>用于执行其中javascript代码。
注：<%= name %>会对name进行html转义，<%# code %>将不会进行转义，这一行代码不会执行，像是被注释了一样，然后显示原来的html
更改监听端口
在bin下的www文件中找到，将端口号改为8080
var port = normalizePort(process.env.PORT || '8080');app.set('port', port);
设置静态文件路径
在app.js中指定静态文件存放的目录是public。于是，当浏览器发出非HTML文件请求时，服务器端就到public目录寻找这个文件
app.use(express.static(path.join(__dirname, 'public')));
解决跨域和express POST请求问题
express app 自带了err处理404 和500，但是提示信息基本看不出任何错误，建议在提示之前throw err.之前的文章也讲过跨域等问题。
var bodyParser = require("body-parser");var app = express();app.use(bodyParser.urlencoded({extended: false}));app.all('*', function(req, res, next) {res.header("Access-Control-Allow-Origin", "*");res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");res.header("X-Powered-By", '3.2.1')res.header("Content-Type", "application/json;charset=utf-8");next();});// catch 404 and forward to error handlerapp.use(function(err,req, res, next) {throw errnext(createError(404));});
express路由
express的路由大概实现 定义一份路由规则文件，再通过app.use()或者app[METHOD]来建立路由规则访问联系.更多关于router的知识请看这里express-routerAPI
在routers下新建uploads.js
var express = require('express');var router = express.Router();router.get('/', function(req, res, next) {res.render('uploads')})router.post('/uploadfile', type, function(req, res, next) {res.send('上传成功')})module.exports = router;//此处的路径为二级路径
在app.js中建立路由联系
var uploadsRouter = require('./routes/uploads');app.use('/uploads', uploadsRouter);//这里的路径是第一级路径，uploads.js中定义的为二级路径
然后views下新建uploads.html
<h3>文件上传：</h3>选择一个文件上传: <br /><form action="/uploads/uploadfile" method="post" enctype="multipart/form-data"><input type="file" name="avatra" size="50" /><input type="submit" value="上传文件" /></form>
最后npm statrt 运行项目，然后再浏览器输入http://127.0.0.1:8080/uploads就能访问。
express文件上传的中间件multer对象
multer是一个 node.js 中间件，用于处理 multipart/form-data 类型的表单数据，它主要用于上传文件。它是写在 busboy 之上非常高效。Multer 会添加一个 body 对象 以及 file 或 files 对象 到 express 的 request 对象中。 body 对象包含表单的文本域信息，file 或 files 对象包含对象表单上传的文件信息。更多关于Multer中间件Github
注意: Multer 不会处理任何非 multipart/form-data 类型的表单数据
安装
使用$ npm install --save multer
var multer = require('multer')var storage = multer.diskStorage({destination: function(req, file, cb) {// 接收到文件后输出的保存路径（若不存在则需要创建）cb(null, 'upload/');},filename: function(req, file, cb) {// 将保存文件名设置为 时间戳 + 文件原始名，比如 151342376785-123.jpgcb(null, Date.now() + "-" + file.originalname);}});var upload = multer({storage: storage})//如果一直出现500报错信息 Node Multer unexpected field 则需要如此操作var type = upload.single('avatra')//router.post('/uploadfile', type, function(req, res, next) {res.send('上传成功')})
storage
磁盘存储引擎可以让你控制文件的存储。
有两个选项可用，destination 和 filename。他们都是用来确定文件存储位置的函数。
destination 是用来确定上传的文件应该存储在哪个文件夹中。也可以提供一个 string (例如 ‘/tmp/uploads’)。如果没有设置 destination，则使用操作系统默认的临时文件夹。
注意: 如果你提供的 destination 是一个函数，你需要负责创建文件夹。当提供一个字符串，multer 将确保这个文件夹是你创建的
filename 用于确定文件夹中的文件名的确定。 如果没有设置 filename，每个文件将设置为一个随机文件名，并且是没有扩展名的。
注意: Multer 不会为你添加任何扩展名，你的程序应该返回一个完整的文件名
最后重启项目，选择文件上传，上效果图。
下一次带你们正真走入express
