基于express框架创建的nodejs项目的运行原理

约定不等于承诺〃 2022-05-11 05:26 314阅读 0赞

摘要：原生node和express框架开发有和区别，所谓的express，就是基于框架的开发，人家已经提供了一个成型的基本骨架，在这个基础之上来进行开发，大大提高了开发效率，前一篇文章在构建一个express项目，还是需要我们写很多的代码，还不够强大。我们可以借助应用生成器，帮我们把项目的基本骨架搭建好。一般提到开发，通常有如下几种：

*  原生开发，所有的代码从0开始。**自己做，一砖一瓦。**
 *  框架开发，底层的代码，人家已经帮我们写好了，我们要写的是具体的功能。**买的毛坯房，房子成型了，但还不直接入住，需要装修。**
 *  二次开发，本身就已经是一个完整的项目，能够运行，但是有些地方需要修改，在原来的基础之上进行开发。**已装修的房子或二手房，拎包入住**。

## 1.**安装生成器 (npm install express-generator -g)****　** ##

所谓的生成器，可以理解为脚手架工具。

需要全局安装，确保在任何目录下都可以使用。

![1107775-20170218131803254-797257597.png][]

## 2.**创建应用 (express 项目名称)** ##

在指定目录下，使用**express 项目名称** 来创建应用。

![1107775-20170218131901769-1174605271.png][]

## 3.**安装依赖包 (cd目录 && npm install)** ##

按照命令行的提示，操作即可。

![1107775-20170218131944800-1123857134.png][]

这其实是两个命令

1.cd app，切换目录，进入app目录

2.npm install，安装依赖包

说明：这个两个命令，可以使用 逻辑与 （&&） 形成一个命令。如果左边的成立的话， 右边会执行。如果左边的不成立的话，右边也不会执行。

我们也可以分开写。

![1107775-20170218132329410-48013207.png][]

实际上，在项目的根目录下，有一个配置文件---package.json，如下：

![1107775-20170218132451019-383333681.png][]

其中有一个配置项 --- dependencies，就列出了当前这个项目所依赖的包（模块）。如果我们在安装包的使用，没有指定包名，它就会找这个package.json文件，逐个安装dependencies中所列出的这些包和模块。

## 4.**启动应用 (npm start 或 node ./bin/www)** ##

按照刚才第二步的提示。

直接使用npm start 命令启动项目。

![1107775-20170218132652144-885288793.png][]

其中，启动应用时，还可以使用**node ./bin/www**

**　　![1107775-20170218132738894-1429653005.png][]**

## 5.**浏览 (localhost:3000)** ##

在浏览器中使用 localhost:3000访问之，如下：

![1107775-20170218132913160-728303276.png][]

# #

## 6.**项目结构分析** ##

我们需要搞清楚，项目结构，然后才可以自己写代码。

项目目录结构划分如下：

**bin目录**，如下

![1107775-20170218133011988-71428592.png][]

其核心的代码如下：

![1107775-20170218133057504-2091367574.png][]

刚才执行 npm start命令，其实就是执行这个www文件。

![1107775-20170218133110738-209442131.png][]

**public目录：**存放的就是静态资源目录，所谓的静态资源就是指图片、css和js文件。

![1107775-20170218133150941-1071945836.png][]

routes目录：路由目录，保存的是路由文件。

![1107775-20170218133232285-349135715.png][]

其中，index.js是实现首页路由的，如下：

![1107775-20170218133308254-395526996.png][]

而user.js则是实现/user路由的。

![1107775-20170218133417379-1781221215.png][]

访问 /users，效果如下：

![1107775-20170218133621879-1061182591.png][]

如果我们需要增加新的路由，就可以在这里写上路由的处理。

**Views目录：**视图目录，也就说存在模板文件的，这些模板文件，其实都是基于html的，Express默认使用了jade模板。

![1107775-20170218133751816-1414911457.png][]

我们还可以使用ejs模板。其中index.jade，就是访问首页时，载入的模板，如下：

![1107775-20170218134032613-999536449.png][]

**package.json：**项目的配置文件。任何基于npm的的项目，都应该具备这个package.json文件。

![1107775-20170218134015675-1724423797.png][]

**app.js：**整个项目的入口文件。

功能分解如下：

**　　第一步，载入相应模块**

**　****　　![1107775-20170218134126488-1374358608.png][]**

**　　第二步，实例化一个app对象**

![1107775-20170218134152660-343025252.png][]

**　　第三步，设置模板相关参数**

**　　![1107775-20170218134249925-887953525.png][]**

**　　第四步，使用中间件**

**　　![1107775-20170218134309285-303094530.png][]**

不同的中间件实现的是不同的功能。其中，如下两个是实现路由功能

![1107775-20170218134420785-1997036095.png][]

如果输入的是localhost:3000/，就交给index处理，如果输入的是localhost:3000/users，就交给users处理

Index和users就是上面引入的自定义模块

![1107775-20170218134536379-1431946713.png][]

查看routes/index.js，就知道是怎么回事了

![1107775-20170218134630050-1516661386.png][]

**　　第五步，导出模块**

**　　![1107775-20170218134656019-1497887671.png][]**

导出给WWW文件来使用。

![1107775-20170218134732707-558083816.png][]

当服务器开启的时候，app对象就已经可以使用了。

[1107775-20170218131803254-797257597.png]: /images/20220511/879ad13cb08b4868a5843af356fd9d97.png
[1107775-20170218131901769-1174605271.png]: /images/20220511/0d3c44d9b4184b3681a1dc8238dac140.png
[1107775-20170218131944800-1123857134.png]: /images/20220511/0f7182bd1d2b46579e0ad2c846a65ff7.png
[1107775-20170218132329410-48013207.png]: /images/20220511/82a9a6cc0da448c0a6f0972062f01f5c.png
[1107775-20170218132451019-383333681.png]: /images/20220511/b1455cb93c594ffe84fad6adfedfaf27.png
[1107775-20170218132652144-885288793.png]: /images/20220511/c3a3e27a0ba046a59270bc48de574527.png
[1107775-20170218132738894-1429653005.png]: /images/20220511/94c6dda5d0824a808fa50b80bfd7652d.png
[1107775-20170218132913160-728303276.png]: /images/20220511/75e09cfd35744a46bdd14bd4b06f8c62.png
[1107775-20170218133011988-71428592.png]: /images/20220511/1e0cf42fafbb4cb5848d9963e228f9c2.png
[1107775-20170218133057504-2091367574.png]: /images/20220511/7c12667e6d204d4292f6fb3d0ab76ee1.png
[1107775-20170218133110738-209442131.png]: /images/20220511/010f750341d54e42bc9c88142a6f0a18.png
[1107775-20170218133150941-1071945836.png]: /images/20220511/51d1076b63364a89b92822de91241d0f.png
[1107775-20170218133232285-349135715.png]: /images/20220511/112af653a6354d69a81f9f9e6d8251b1.png
[1107775-20170218133308254-395526996.png]: /images/20220511/5e1a0052185049f6ac7daa3120b186d8.png
[1107775-20170218133417379-1781221215.png]: /images/20220511/4acacb2149e74281af489d538353a21a.png
[1107775-20170218133621879-1061182591.png]: /images/20220511/30899a41f4f24d1ca3f0ca99bcab5393.png
[1107775-20170218133751816-1414911457.png]: /images/20220511/738ae73e6c8545019c88b975677d0d42.png
[1107775-20170218134032613-999536449.png]: /images/20220511/ee390f28bde94959a08b20bc68564cc9.png
[1107775-20170218134015675-1724423797.png]: /images/20220511/29e2680554644977a1b6dfad2922a6dc.png
[1107775-20170218134126488-1374358608.png]: /images/20220511/93f93c948ad541178beb0f0d79e5f0ec.png
[1107775-20170218134152660-343025252.png]: /images/20220511/fa2e7e70853a407e931674b7536f392d.png
[1107775-20170218134249925-887953525.png]: /images/20220511/5297e859b5f746f796d3bca168fdd898.png
[1107775-20170218134309285-303094530.png]: /images/20220511/bee60f488e0647f498d60fd9ba5637e6.png
[1107775-20170218134420785-1997036095.png]: /images/20220511/ccd10984524149cf83e93228822a5bab.png
[1107775-20170218134536379-1431946713.png]: /images/20220511/0a81f240e8c2465fac239373ca9881fd.png
[1107775-20170218134630050-1516661386.png]: /images/20220511/1ee1ee70fb384b138d65ff33145e5fb6.png
[1107775-20170218134656019-1497887671.png]: /images/20220511/d866473de68644f68195b5d110fa3d65.png
[1107775-20170218134732707-558083816.png]: /images/20220511/b26781a3dcf94f90b0f70c7fc017a750.png