Skip to content

Latest commit

 

History

History
127 lines (121 loc) · 4.86 KB

README.md

File metadata and controls

127 lines (121 loc) · 4.86 KB
Raw

Readme

簡介

此專案由Node.js開發，建立可將原始網址轉成HOST_NAME+五碼英數組合之網址，於瀏覽器輸入短網址可以直接連線至原始網址。

Installing - 專案安裝流程

  1. 請先確認有安裝 node.js 與 npm

  2. 創造一個專案資料夾，打開您的 terminal，使用cd指令進入您剛創建的資料夾

  3. Clone 此專案至本機電腦將專案 clone 到本地

    git clone https://github.com/TinyMurky/URL_shortener.git

  4. 在本地開啟之後，透過終端機進入資料夾，輸入：

    npm install

  5. 我們需要連結到MongoDB，您需要先於MongoDB建立您的Cluster，並於畫面左上角的Database=>Connect 取得雲端DB連結。

  6. 建立Cluster後，在本專案的根目錄中建立.env檔案，並於檔案中填入從第5步連結中的資料(不用留<>)

    MONGODB_USER=<您的用戶名>
MONGODB_PASSWORD=<您的密碼>
MONGODB_CLUSTER=<您的Cluster連結> (ex:taiwancluster.3pkhs7h.mongodb.net)
MONGODB_REPO=url_shorter

  7. 建立完後，於終端機輸入：

    npm run start

  8. 若看見此行訊息則代表順利運行，打開瀏覽器進入到以下網址:

    Server http://localhost:3000 started.

  9. 若欲暫停請於終端機使用:

    ctrl + c

程式邏輯

  1. 從主畫面取得原始URL
  2. 檢查原始URL是否已存在，若已存在，在主畫面顯示上次產生的短網址
  3. 如果不存在，使用套件nanoid產生5字id，重複產生id直到產生資料庫未使用過的id
  4. 使用nanoid當作資料庫的_id，並儲存原始URL於此_id之下
  5. 使用nanoid當作短網址縮碼，回傳主畫面
  6. 當使用者輸入短網址，用短網址 /:id 的部份，進入資料庫查詢_id
  7. 若存在此_id，更新這筆資料的updateAt的時間，並將畫面轉移至原始URL的網頁，此時剛跟新過的資料會被搬到表格最上面。
  8. 如果不存在此_id，畫面轉移致主畫面並寫是不存在此短網址

例外處理

輸入相同網址時，產生一樣的縮址

  1. /plugins/randomID.js 在創立一筆資料前會先於資料庫尋找是否已存在相同的URL，如果有則直接回傳已存在的Short URL

    //此function會檢查原本的url是不是已經被建立
//如果已建立會回傳原本URL document
//如果沒有則會新增新的URL document，並回傳document的建立內容
export async function createShortURL(origin_URL) {
    try {
        const urlArray = await shortURL.find({ origin_URL })
        if (urlArray.length) {
            urlArray[0].set("updatedAt", new Date())
            return urlArray[0].save()
        } else {
            const newID = await randomID()
            const newURLConfig = {
                _id: newID,
                origin_URL: origin_URL,
            }
            const newShortURL = new shortURL(newURLConfig)
            return newShortURL.save()
            }
    } catch (error) {
        throw Error(error)
    }
}

未輸入內容，防止表單送出

  1. index.handlebars
    使用required 與 type="URL"確保輸入值是URL 
    <!--Use required to ensure No empty data input-->
<!--type="url" to make sure input is indeed URL-->
<input type="url" class="form-control" name="origin_URL" placeholder="Input URL" aria-label="Input URL" aria-describedby="button-addon2" required>
<button class="btn btn-primary" type="submit" id="submit-btn">Create</button>
  2. /public/javascripts/index.js
    使用Submit Event Listener在Submit時檢查URL是否符合標準，不符合則阻止送出 
    //If form input is invalid, prevent form from sending
urlForm.addEventListener("submit", (event) => {
    if (!urlForm.checkValidity()) {
        event.preventDefault() //不要submit
        event.stopPropagation() //event不要bubble
    }
})
  3. /models/shortURL.js
    使用Schema Validation確認輸入的值為URL 
    origin_URL: {
type: String,
//Use Schema Validation make sure URL input is valid
validate: {
  validator: function (v) {
    return /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(
      v
    )
  },
  message: (props) => `${props.value} is not a valid URL!`,
    },
required: [true, "Original URL is missing"],
},

Environment SetUp - 環境建置

  • Node.js 18.16.0
  • Express 4.18.2
  • Express-Handlebars 7.0.7
  • Bootstrap 5.3.0
  • dotenv 16.0.3,
  • method-override 3.0.0,
  • mongoose 7.1.1,
  • nanoid 4.0.2,
  • nodemon 2.0.22