nodejs에서 URL 단축기 만들기

16911 단어 webdevnodeprogrammingjavascript
오늘 우리는 nodejs에서 URL 단축기를 만들고 싶습니다. 이 프로젝트는 데이터를 저장하기 위해 데이터베이스를 사용하지 않습니다. 모든 데이터는 JSON 파일에 저장됩니다.

먼저 nodejs을 설치했는지 확인하십시오. Linux를 사용하는 경우 nvm(노드 버전 관리자)을 사용하여 설치할 수 있습니다.

거기에 코딩하려는 폴더를 만들어 봅시다.

mkdir url-short
cd url-short

HTML 및 CSS 파일을 넣을 수 있는 public/ 디렉토리를 만들 수 있습니다. 그래서:

mkdir public/

그리고 public/에 index.html을 만들 것입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <form action="/" method="post">
        <h1>Link shortener</h1>
        <input type="text" name="origUrl" id="">
        <button type="submit">shorten</button>
    </form>
</body>
</html>

및 index.css를 public/에서 다시:

body{
    background-color: #00796B;
}
h1{
    color: #fff;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}
input{
    width: 70%;
    height: 2em;
    border: none;
    border-bottom: 1px solid #fff;
    background-color: #fff;
    color: #000;
    font-size: 1em;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 50px;
    margin-top:50px;
}
button{
    background-color: #1A237E;
    color: #fff;
    font-size: 1em;
    font-family: Arial, Helvetica, sans-serif;
    border: 0;
    border-radius: 50px;
    width: 70px;
    height: 40px;
}

이제 필요한 npm 패키지를 설치합니다.

npm i express

그래서 우리는 루트에서 db.json를 만듭니다.

{links:[]}

나중에 URL을 추가할 것입니다.
루트의 index.js:

const express = require("express")
const app = express()
const process = require("process")
const fs = require("fs")
const port = process.env.PORT || 4000


app.use(express.json())
app.use(express.urlencoded({ extended: true }))
// load html and css in public folder
app.use(express.static("public"))
app.get("/", (req, res) => { res.sendFile("index.html") })

Ok 그래서 우리는 index.html이 원래 Url을 포함하는 /에 게시 요청을 보낼 것이고 우리가 이전에 이 URL을 저장했다면 db.json에서 데이터를 가져오고 확인할 수 있다는 것을 알고 있습니다.

app.post("/", (req, res) => {
    let newJson=JSON.parse(fs.readFileSync("./db.json"))
    const {origUrl} = req.body;
    // check if url isn't in json
    newJson.links.forEach(element => {
        if (element.url===origUrl) {
            res.send(`<h1>Your shorted link is http://localhost:${port}/${element.id}</h1>`)
        }

하지만 그렇지 않다면 어떨까요? ID를 만들고 json에 저장할 수 있습니다.

    // make the short id and put it in db.json
    let id = Math.random() * 10000000;
    id=Math.floor(id)
    // push to json
    newJson.links.push({
        id:id,
        url:origUrl
    })
    fs.writeFileSync("./db.json",JSON.stringify(newJson))
    res.send(`<h1>Your short url is: http://localhost:${port}/${id}</h1>`)
})

좋아, 그래서 우리는 원래 URL로 ID를 저장했습니다. 그러나 사용자가 해당 ID로 이동한 경우 사용자를 원래 URL로 리디렉션해야 합니다.

app.get("/:id",(req,res)=>{
    // redirect
    const id=req.params.id
    let newJson=JSON.parse(fs.readFileSync("./db.json"))
    let link=newJson.links.find(link=>link.id==id)
    if(link){
        res.redirect(link.url)
    }
    else{
        res.send("no link found")
    }
})
app.listen(port, () => console.log(`app listening on port ${port}!`))

그래서 작동합니다
데모 :

user-images.githubusercontent.com

또한 github에 코드를 업로드했습니다: link
격자 점을 이해하고 등고선으로 재생합니다.
Docker에서 Go와 함께 MySQL을 사용하는 샘플 코드를 실행할 수 없습니다(오류 1064).

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage