一、express 是什么?
Express 是一个简洁而灵便的 node.js Web 利用框架,能够疾速地搭建一个性能残缺的网站。
二、装置 express 并创立我的项目
通过 express-generator
创立带有根本配置的 express 我的项目,包含 路由 (routes)、package.json、view(hbs 模板) 等,能够间接编写业务代码了。
# 1、装置工具
npm install -g express-generator
# 2、创立我的项目:learn-express
express --view=hbs ~/learn-express && cd ~/learn-express
# 3、初始化我的项目
npm install
# 4、启动
npm start
# 5、拜访:http://localhost:3000/
三、新增页面
应用下面新建我的项目 learn-express,因为 routes、views 曾经配置结束,间接新建一个页面并用 http 的 get 办法获取,步骤如下:
- 采纳 vs code 关上下面我的项目。vs code 下载
-
新建 routes/test.js 文件
var express = require('express'); var router = express.Router(); /* GET test page. */ router.get('/', function(req, res, next) {res.render('test', { title:'测试页面'}); }); module.exports = router;
-
新建 views/test.hbs 文件
<h1>{{title}}</h1>
-
批改 app.js,减少路由,找到对应中央减少上面内容
var testRouter = require('./routes/test'); app.use('/test', testRouter);
- 重启服务,即可通过 http://localhost:3000/test 拜访新增的页面。
四、POST 提交页面
应用 form 表单 提交数据,后端解决表单提交的数据。
1、新建 form 表单的页面
-
新建 routes/form.js 文件
// routes/form.js var express = require('express'); var router = express.Router(); /* GET form page. */ router.get('/', function(req, res, next) {res.render('form', { title:'from post 提交页面'}); }); module.exports = router;
-
新建 form.hbs 文件
<h1>{{title}}</h1> <form action="http://127.0.0.1:3000/process_post" method="POST"> First Name: <input type="text" name="first_name"> <br> Last Name: <input type="text" name="last_name"> <input type="submit" value="Submit"> </form>
-
批改 app.js,减少路由
var formRouter = require('./routes/form'); app.use('/form', formRouter);
2、新建 post 解决页面
-
新建 routes/process_post.js 文件
var express = require('express'); var router = express.Router(); /* Post process page. */ router.post('/', function (req, res, next) { // 输入 JSON 格局 var response = { "first_name": req.body.first_name, "last_name": req.body.last_name }; console.log(response); res.end(JSON.stringify(response)); }); module.exports = router;
-
批改 app.js 减少路由
var postProcRouter = require('./routes/process_post'); app.use('/process_post', postProcRouter);
3、拜访
- 重启服务器
- 先关上 http://127.0.0.1:3000/form 填写数据,点击提交;
- 页面会跳转到 http://127.0.0.1:3000/process…
五、动态文件
拜访动态文件的办法:
-
批改 app.js,减少上面 路由
app.use('/public', express.static('public'));
- 把 test.jpg 拷贝到 public/images 目录下
- 重启我的项目,即可拜访图片:http://localhost:3000/public/…
六、下载官网 Examples
git clone git://github.com/expressjs/express.git --depth 1
cd express
npm install
# 启动你想看的 Examples
node examples/content-negotiation
七、参考文档
- 学习 express,从这里开始!