十分钟入门Express(react-express-starter)

什么是 Express?

Node 本身并不支持其它常见的 web 开发任务。如果需要进行一些具体的处理,比如运行其它 HTTP 动词(比如 GET、POST、DELETE 等)、分别处理不同 URL 路径的请求(“路由”)、托管静态文件,或用模板来动态创建响应,那么可能就要自己编写代码了,亦或使用 web 框架,以避免重新发明轮子。

Express 是最流行Node 框架,是许多其它流行 Node 框架 的底层库。它提供了以下机制:

  • 为不同 URL 路径中使用不同 HTTP 动词的请求(路由)编写处理程序。
    集成了“视图”渲染引擎,以便通过将数据插入模板来生成响应。
  • 设置常见 web 应用设置,比如用于连接的端口,以及渲染响应模板的位置。
  • 在请求处理管道的任何位置添加额外的请求处理“中间件”。

虽然 Express 本身是极简风格的,但是开发人员通过创建各类兼容的中间件包解决了几乎所有的 web 开发问题。这些库可以实现 cookie、会话、用户登录、URL 参数、POST 数据、安全头等功能。可在 Express 中间件 网页中找到由 Express 团队维护的中间件软件包列表(还有一张流行的第三方软件包列表)。

Express 应用程序生成器

通过应用生成器工具 express-generator 可以快速创建一个应用的骨架。

express-generator 包含了 express 命令行工具。通过如下命令即可安装:

$ npm install express-generator -g

如下命令express --view=pug react-express-starter创建了一个名称为 react-express-starter 的 Express 应用。此应用将在当前目录下的 react-express-starter 目录中创建,并且设置为使用 Pug 模板引擎(view engine):

$ express --view=pug react-express-starter

   create : react-express-starter\
   create : react-express-starter\public\
   create : react-express-starter\public\javascripts\
   create : react-express-starter\public\images\
   create : react-express-starter\public\stylesheets\
   create : react-express-starter\public\stylesheets\style.css
   create : react-express-starter\routes\
   create : react-express-starter\routes\index.js
   create : react-express-starter\routes\users.js
   create : react-express-starter\views\
   create : react-express-starter\views\error.pug
   create : react-express-starter\views\index.pug
   create : react-express-starter\views\layout.pug
   create : react-express-starter\app.js
   create : react-express-starter\package.json
   create : react-express-starter\bin\
   create : react-express-starter\bin\www

   change directory:
     > cd react-express-starter

   install dependencies:
     > npm install

   run the app:
     > SET DEBUG=react-express-starter:* & npm start

-h 参数可以列出所有可用的命令行参数:

$ express -h

  Usage: express [options] [dir]

  Options:

    -h, --help          输出使用方法
        --version       输出版本号
    -e, --ejs           添加对 ejs 模板引擎的支持
        --hbs           添加对 handlebars 模板引擎的支持
        --pug           添加对 pug 模板引擎的支持
    -H, --hogan         添加对 hogan.js 模板引擎的支持
        --no-view       创建不带视图引擎的项目
    -v, --view <engine> 添加对视图引擎(view) <engine> 的支持 (ejs|hbs|hjs|jade|pug|twig|vash) (默认是 jade 模板引擎)
    -c, --css <engine>  添加样式表引擎 <engine> 的支持 (less|stylus|compass|sass) (默认是普通的 css 文件)
        --git           添加 .gitignore
    -f, --force         强制在非空目录下创建

然后安装所有依赖包:

$ cd myapp
$ npm install

然后运行项目,在浏览器中打开 http://localhost:3000/ 网址就可以看到这个应用了。

npm start

*.通过生成器创建的应用一般都有如下目录结构:

├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.pug
    ├── index.pug
    └── layout.pug

app.js

这里作为一个总控台,控制着nodejs/react/express等的内容,请简单阅读一下,并留意中文备注部分.

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

//by zhengkai.blog.csdn.net
// view engine setup ,这里设置了view engine,读取view文件夹,后缀.pug
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
//这里配置的是staic静态资源,不走路由的
app.use(express.static(path.join(__dirname, 'public')));

//这里注册了需要走路由的URL
app.use('/', indexRouter);
app.use('/users', usersRouter);

//配置404错误
// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

一些修改

照搬demo?不存在的,打开index.pug文件,开始你的self-helloworld

extends layout

block content
  h1= title
  p Welcome to #{title} World
  p #{blog} and you are learning #{title}

res.render('index', { title: 'Express' });这句话就可以看出奥秘了把,

  • 第一个参数'index'是URL地址,因为配置了view的path所以这里只要render出去就对应index.pug页面.
  • 页面里的#{blog}#{title}对应render的第二个参数{ title: 'Express',blog:'zhengkai.blog.csdn.net' }的值.
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express',blog:'zhengkai.blog.csdn.net' });
});

module.exports = router;

基本路由baseRouter

路由用于确定应用程序如何响应对特定端点的客户机请求,包含一个 URI(或路径)和一个特定的 HTTP 请求方法(GET、POST 等)。

每个路由可以具有一个或多个处理程序函数,这些函数在路由匹配时执行。

路由定义采用以下结构:

app.METHOD(PATH, HANDLER)

  • app 是 express 的实例(express.Router)。
  • METHOD 是 HTTP 请求方法,请注意是小写的。
  • PATH 是服务器上的路径,就是访问URL。
  • HANDLER 是在路由匹配时执行的函数。

ShowTime

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页