後端代碼之服務端 - 項目工程化創建目錄&&啓動服務 -講解篇

前言

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，目錄截圖預覽，如下圖所示：

---

---

四、下一步就是連接數據庫了

---

以上就是關於“ 後端代碼之服務端 - 項目工程化創建目錄&&啓動服務 -講解篇 ” 的全部內容。