十分钟入门Express(reactexpressstarter)

什么是 Express?

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

Express 是最流行的 Node 框架&＃xff0c;是许多其它流行 Node 框架 的底层库。它提供了以下机制&＃xff1a;

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

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

Express 应用程序生成器

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

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

$ npm install express-generator -g


如下命令express --view&＃61;pug react-express-starter创建了一个名称为 react-express-starter 的 Express 应用。此应用将在当前目录下的 react-express-starter 目录中创建&＃xff0c;并且设置为使用 Pug 模板引擎&＃xff08;view engine&＃xff09;&＃xff1a;

$ express --view&＃61;pug react-express-startercreate : 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.csscreate : react-express-starter\routes\create : react-express-starter\routes\index.jscreate : react-express-starter\routes\users.jscreate : react-express-starter\views\create : react-express-starter\views\error.pugcreate : react-express-starter\views\index.pugcreate : react-express-starter\views\layout.pugcreate : react-express-starter\app.jscreate : react-express-starter\package.jsoncreate : react-express-starter\bin\create : react-express-starter\bin\wwwchange directory:> cd react-express-starterinstall dependencies:> npm installrun the app:> SET DEBUG&＃61;react-express-starter:* & npm start


-h 参数可以列出所有可用的命令行参数&＃xff1a;

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


然后安装所有依赖包&＃xff1a;

$ cd myapp
$ npm install

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

npm start

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

├── 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 &＃61; require(&＃39;http-errors&＃39;);
var express &＃61; require(&＃39;express&＃39;);
var path &＃61; require(&＃39;path&＃39;);
var COOKIEParser &＃61; require(&＃39;COOKIE-parser&＃39;);
var logger &＃61; require(&＃39;morgan&＃39;);var indexRouter &＃61; require(&＃39;./routes/index&＃39;);
var usersRouter &＃61; require(&＃39;./routes/users&＃39;);var app &＃61; express();//by zhengkai.blog.csdn.net
// view engine setup ,这里设置了view engine,读取view文件夹,后缀.pug
app.set(&＃39;views&＃39;, path.join(__dirname, &＃39;views&＃39;));
app.set(&＃39;view engine&＃39;, &＃39;pug&＃39;);app.use(logger(&＃39;dev&＃39;));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(COOKIEParser());
//这里配置的是staic静态资源,不走路由的
app.use(express.static(path.join(__dirname, &＃39;public&＃39;)));//这里注册了需要走路由的URL
app.use(&＃39;/&＃39;, indexRouter);
app.use(&＃39;/users&＃39;, 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 developmentres.locals.message &＃61; err.message;res.locals.error &＃61; req.app.get(&＃39;env&＃39;) &＃61;&＃61;&＃61; &＃39;development&＃39; ? err : {};// render the error pageres.status(err.status || 500);res.render(&＃39;error&＃39;);
});module.exports &＃61; app;

一些修改

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

extends layoutblock contenth1&＃61; titlep Welcome to #{title} Worldp #{blog} and you are learning #{title}


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

• 第一个参数&＃39;index&＃39;是URL地址,因为配置了view的path所以这里只要render出去就对应index.pug页面.
• 页面里的#{blog}和#{title}对应render的第二个参数{ title: &＃39;Express&＃39;,blog:&＃39;zhengkai.blog.csdn.net&＃39; }的值.

var express &＃61; require(&＃39;express&＃39;);
var router &＃61; express.Router();/* GET home page. */
router.get(&＃39;/&＃39;, function(req, res, next) {res.render(&＃39;index&＃39;, { title: &＃39;Express&＃39;,blog:&＃39;zhengkai.blog.csdn.net&＃39; });
});module.exports &＃61; router;

基本路由baseRouter

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

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

路由定义采用以下结构&＃xff1a;

app.METHOD(PATH, HANDLER)

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

ShowTime

• http://localhost:3000/ 可以看到刚才修改的页面
• http://localhost:3000/users 可以看到返回的简单string
• http://localhost:3000/404 或者其他不存在的页面,可以看到返回统一的404页面