短網址產生器

使用者可以輸入網址後獲得一組縮短後的網址

功能

• 輸入網址後獲得一組縮短後的網址
• 可以直接點取縮短後的網址導向原先輸入的網址
• 輸入相同網址時，產生一樣的縮址
• 若使用者沒有輸入內容，就按下了送出鈕，需要防止表單送出並提示使用者
• 縮短完按下copy按鈕，可以直接取得縮短後的網址
• 如不存在的網頁，可以導向首頁再重新輸入

參考畫面

使用工具

• Visual Studio Code - 開發環境
• Express - 應用程式架構
• Express-Handlebars - 模板引擎
• Mongoose - ODM
• MongoDB - 文件資料庫

安裝與執行步驟

1. 開啟終端機，cd 到想要存放此專案的資料夾，輸入以下指令

git clone https://github.com/yujen77300/URL-Shortener

2. 輸入以下指令，進入存放此專案的資料夾

cd URL-Shortener

3. 安裝npm套件

npm install

4. 設定環境變數連線 MongoDB (非MONGODB_URI)

MONGOURL_URI=mongodb+srv://<Your MongoDB Account>:<Your MongoDB Password>@cluster0.xxxx.xxxx.net/<Your MongoDB Table><?retryWrites=true&w=majority

5. 執行此專案

npm run dev

6. 打開瀏覽器，輸入下列網址

localhost:3000