学习express,从这里开始!

2021年11月25日 阅读数:11
这篇文章主要向大家介绍学习express,从这里开始!,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。
1、express 是什么?

Express 是一个简洁而灵活的 node.js Web应用框架,能够快速地搭建一个功能完整的网站。html


2、安装express并建立项目

经过 express-generator 建立带有基本配置的 express 项目,包括 路由(routes)、package.json、view(hbs模板)等,能够直接编写业务代码了。node

# 一、安装工具
npm install -g express-generator

# 二、建立项目:learn-express
express --view=hbs ~/learn-express && cd ~/learn-express

# 三、初始化项目
npm install

# 四、启动
npm start

# 五、访问:
http://localhost:3000/

3、新增页面

使用上面新建项目 learn-express,由于 routes、views 已经配置完毕,直接新建一个页面并用 http 的 get 方法获取,步骤以下:git

  • 采用 vs code 打开上面项目。vs code 下载
  • 新建 routes/test.js 文件github

    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 文件shell

    <h1>{{title}}</h1>
  • 修改 app.js ,增长路由,找到对应地方增长下面内容express

    var testRouter = require('./routes/test');
    
    app.use('/test', testRouter);
  • 重启服务,便可经过 http://localhost:3000/test 访问新增的页面。

4、POST 提交页面

使用 form 表单 提交数据,后端处理表单提交的数据。npm

一、新建 form 表单的页面
  • 新建 routes/form.js 文件json

    // 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 文件segmentfault

    <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);

二、新建 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);

三、访问

5、静态文件

访问静态文件的方法:

  • 修改 app.js,增长下面 路由

    app.use('/public', express.static('public'));
  • 把 test.jpg 拷贝到 public/images 目录下
  • 重启项目,便可访问图片: http://localhost:3000/public/...

6、下载官方 Examples
git clone git://github.com/expressjs/express.git --depth 1
cd express
npm install

# 启动你想看的 Examples
node examples/content-negotiation

7、参考文档