关于express:学习express从这里开始

一、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，从这里开始！