Express 安装和项目创建

阳光穿透心脏的1/2处 2022-04-10 06:45 401阅读 0赞

从今天开始，我们开始学vue+express+mongodb+node从头开始构建一个完整的项目，至于完成一个什么样的项目，说实话我还没有想好，如果大家有特别的想法，我们可以一起交流学习。

Express 是一种保持最低程度规模的灵活 Node.js Web 应用程序框架，为 Web 和移动应用程序提供一组强大的功能。

我们可以通过npm和yarn进行安装：

npm install express --save
    yarn add express

Express的使用需要我们安装node.js环境，请大家在开始之前确认安装了node.js。

我们新建一个目录用来保存我们的应用程序，并且将其设置为工作目录。  
使用命令行创建一个项目：

npm init
    yarn init

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70]

这里我们步骤都可以直接跳过，但有一步骤如果我们

question entry point (index.js): //如果不想使用默认文件名称，那么这里输入你期望的文件名称，比如：app.js/server.js

此时，在我们的目录下会生成一个package.json文件。npm/yarn init命令本质上就是创建一个package.json文件。我们可以看下生成的文件内容：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 1]

如果我们使用npm的话，你会得到这样一个文件：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 2]

既然我们要使用express，而且我们又都是自己一步步来，那么省不了自己安装一下express了。后面我就直接以yarn为例(npm的相关命令大家可以自己去查阅）。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 3]

安装完成后查看package.json文件，express依赖已经添加到文件中。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 4]

进行下一步之前，我们先来介绍一个辅助工具nodemon：

nodemon用来监视node.js应用程序中的任何更改并自动重启服务,非常适合用在开发环境中。nodemon将监视启动目录中的文件，如果有任何文件更改，nodemon将自动重新启动node应用程序。

安装方式：  
![在这里插入图片描述][20181228124948953.png]

这里有一点大家需要注意，如果是通过yarn进行全局安装，安装完成后，使用nodemon命令会提示不是有效的内部命令，这是因为yarn的bin路径没有添加到环境变量中。  
关于yarn的global安装路径，大家可以使用下面的方式进行查询：  
![在这里插入图片描述][20181228151407100.png]

然后将bin路径添加到系统环境变量中去。

上面说过了，程序的入口文件是index.js，看看我们现在的目录结构：  
![在这里插入图片描述][20181228151614242.png]

显然，我们的文件并没有匹配的入口文件，如果此时我们运行程序：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 5]

那么我们就创建一个index.js 并添加Express对应的初始代码：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 6]

运行程序：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 7]

看到这里，说明我们的程序已经正常启动了，接下来我们就要看在浏览器中的效果了：  
![在这里插入图片描述][20181228152643449.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70]: /images/20220402/4e69522939a4478a84d6e50a26fd642c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 1]: /images/20220402/8b2982147d784b99b7b3dbf47b7d1925.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 2]: /images/20220402/8c6e4807e1e449138b777818fc04d16d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 3]: /images/20220402/fcb120f299564298b885626e5c8fdf01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 4]: /images/20220402/ce83ba3c74554899a8642e372e4bcaec.png
[20181228124948953.png]: /images/20220402/d9b3ac07afd0486fbf0c6a150507aee6.png
[20181228151407100.png]: /images/20220402/e7653f02381b49b6943a333b90fd8b24.png
[20181228151614242.png]: /images/20220402/83512ef588084368a1bc2acf7b7f8d0f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 5]: /images/20220402/f6a6832908f945e09cbdb3af1e53c525.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 6]: /images/20220402/93e7688671d94f9ea595a7cebec664b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 7]: /images/20220402/6a4073ec14a64cbf983ab4c760826b23.png
[20181228152643449.png]: /images/20220402/6415a9e4e0f84307bac18a618b54068d.png