建置Node.js與Express開發環境

Yu-Cheng Hung
5 min readJan 8, 2020

--

引用: https://kopu.chat/2017/08/11/node-js-express-%E5%88%9D%E5%85%A5%E9%96%80-%E4%B8%8A%E9%9B%86/

今天想來與各位分享筆者最近研究Node.js與Express的心得,主要有關環境建置的部分,下篇會實作一些範例練習來加速熟悉,那麼就廢話不多說,先從Node.js的安裝說起吧!對Node.js這個名詞還相當陌生的讀者可參考維基百科先有一個簡單的印象。

PS. 以下流程作業環境為Windows 10

Node.js環境建置

一般而言,你有兩種方式可以用來下載Node.js:

  1. 直接去Node.js官網下載安裝檔。
  2. 用NVM來做Node.js的版本控制。

兩種方式各有優缺點,第一種方式所占硬碟的空間較小,但當要切換Node.js版本時需移除再重新安裝,手續上較為麻煩;而第二種方式雖然會稍占一點硬碟空間,卻可快速切換你想要的Node.js版本,因此在這邊筆者選擇第二種方式。

請至官方release清單,下載 nvm-setup.zip(windows建議使用)

解壓縮並依照步驟安裝,基本上都以預設值設定即可,完成後cmd進命令提示字元下 nvm可查看其相關指令。

由Node.js官網中可得知目前最新釋出的版本號為 13.5.0,因此以下列指令進行安裝:

$ nvm install 13.5.0

安裝過程中也會一併安裝 npm,在後續的套件安裝中我們將很需要它。

安裝完後可以下列指令查看目前有安裝的Node.js版本:

$ nvm list

再以下列指令選擇當前想運行的Node.js版本,被選擇的Node.js版本前面將出現 *提示符號:

$ nvm use 13.5.0

運行成果示意:

到這邊Node.js的安裝就初步完成了,是不是很簡單呢?接下來我們來談談如何安裝並創建一個Express專案。

甚麼是Express?

Express 是目前最穩定、使用最廣泛的Node.js開發框架,是 Node.js 官方唯一推薦的 Web 開發框架,它遵循MVC的設計概念,輕量化並且易於學習。

我們直接以下列指令進行安裝:

$ npm install express

確認是否安裝成功:

$ express --version

Express應用程式產生器

Express提供指令可讓使用者快速建置環境,以下列指令安裝Express產生器:

$ npm install express-generator -g

現在我們想創建一個名為member的Express專案:

$ express --view=ejs member

ejs為template engine,可直接透過後端來產出html文件。

創建完成後,目前的資料結構為:

. 
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.ejs
└── index.ejs

每當一個新專案創建完成,都要terminal進入專案資料夾中並執行下列指令下載依賴套件:

$ npm install

完成後執行下列指令開啟專案server服務:

$ npm start

此時瀏覽器打開localhost:3000,就能看到以下成功頁面:

因為之後的實作練習需連結資料庫,因此我們須進行資料庫安裝,在專案資料夾內執行:

$ npm install mysql

npm list檢查是否安裝成功:

接著,我們會以XAMPP來管理MySQL,還不熟悉的讀者可參考前文 – Laravel 6之環境安裝與注意事項

以phpMyAdmin開啟MySQL並建立一個新的database:member,並在member內執行下列指令創建member_info

CREATE TABLE member_info (
id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(30) NOT NULL,
email VARCHAR(30) NOT NULL,
password VARCHAR(200) NOT NULL,
img LONGBLOB,
img_name VARCHAR(20),
update_date DATETIME,
create_date DATETIME NOT NULL
);

如此即完成資料庫相關設定啦!接下來我們將進行程式實作練習,那就明天見囉!

--

--

No responses yet