后端代码之服务端 - 项目工程化创建目录&&启动服务 -讲解篇

前言

Express后台代码编写之前，首先需要创建后端的项目目录，这里我们通过cmd（npm + express-generator） + WebStorm（项目目录效果查看与展示），文章解读，实现如下的目标：

• 服务端项目目录创建（有手动的，有npm自动的）？
• 如何启动应用？
• 如何进入Express的欢迎页？
• WebStorm一览项目目录？

---

以项目vue_book为例，创建服务端目录路径如下：
vue_book/book_service

一、 目录创建 与 应用启动

A. 步骤如下：

1. 打开cmd面板，先cd到目录5-2-1：
   cd c:\users\administrator\javascript\vue_book\5-2-1

2. 接着，安装应用生成器 express-generator：
   npm install express-generator -g

Tips1： 此时的cmd路径应显示：
c:\users\administrator\javascript\vue_book\5-2-1>npm install express-generator -g

3. 在项目vue_book文件夹目录内，手动创建 - 新建子文件夹并命名为book_service

4. 执行cmd命令，cd到该子文件夹所在路径
   cd c:\users\administrator\javascript\vue_book\book_service

Tips2： 此时的cmd路径应显示：
cd c:\users\administrator\javascript\vue_book\book_service

5. 执行cmd命令，安装 express 到服务端文件夹book_service:
   express book_service

Tips3： 此时的cmd路径应显示：
c:\users\administrator\javascript\vue_book\book_service>express book_service

6. 执行cmd命令，cd到上一步安装的孙子文件夹vue_book\book_service\book_service内:
   cd book_service

Tips4： 此时的cmd路径应显示：
cd c:\users\administrator\javascript\vue_book\book_service\book_service

7. 之后install完成安装：
   npm install

Tips5： 此时的cmd路径应显示：
c:\users\administrator\javascript\vue_book\book_service\book_service>npm install

8. 所有的包安装成功之后，使用下面的命令，启动应用：
   set DEBUG= book_service & npm start

Tips6： 此时的cmd路径应显示：
c:\users\administrator\javascript\vue_book\book_service\book_service>set DEBUG= book_service & npm start

B. 具体cmd命令执行流，截图如下：（部分无效，可忽略）

---

二、 查看Express的欢迎页

• 1. 查看欢迎页的 浏览器url地址：http://localhost:3000

• 2. 效果图截图如下：

  

---

三、 通过WebStorm一览 · 服务端-项目目录

通过WebStorm软件打开项目vue_book，目录截图预览，如下图所示：

---

---

四、下一步就是连接数据库了

---

以上就是关于“ 后端代码之服务端 - 项目工程化创建目录&&启动服务 -讲解篇 ” 的全部内容。