채용 인원의 주의를 끌고 싶습니까?이것 괜찮아요?🔥 계획⌚ 5분 후🚀 당신의 투자조합!

그래서 투자조합을 만들 준비가 됐는데 아무 생각이 안 나요?모든 기술을 보여주고 잠재적인 고용주를 감동시킬 수 있는 놀라운 아이디어가 있다!💥

개시하다🚀

mkdir url-shortener
cd url-shortener
npm init -y

여기에서 프로젝트를 저장하고 npm로 초기화하는 디렉터리를 만듭니다.

의존 관계⚠️

npm install dotenv express mongoose nanoid

우리는 전체 프로젝트에 사용할 의존 항목을 많이 설치했다.

dotenv(환경 변수를 이용한 라이브러리)

express(express.js 서버 프로그램 만들기)

mongoose(ODM은 MongoDB 데이터베이스에 우리의 URL을 저장함)

폴더 설정🎪
우리는 우리의 프로젝트가 이렇다는 것을 확보해야 한다.

url-shortener/
├── package.json
├── client
│   ├── app.js
│   ├── index.html
│   └── style.css
└── server
    ├── controllers
    │   └── url.controller.js
    ├── index.js
    ├── models
    │   └── url.model.js
    └── routes
        └── url.routes.js

우리는 코드를 루트, 컨트롤러, 모델로 분해할 것이다.이것은 관심사를 분리함으로써 코드를 더욱 쉽게 유지보수할 수 있습니다.

서버 설정🌀!server/index.js 파일에 다음을 추가합니다.

const express = require('express');
const mongoose = require('mongoose');
require('dotenv').config();

const urlRouter = require('./routes/url.routes');

const PORT = process.env.PORT || 8080;
const DB_URL = process.env.DB_URL || 'mongodb://localhost:27017/db';

const db = mongoose.connect(DB_URL, {
                useCreateIndex: true,
                useNewUrlParser: true,
                useUnifiedTopology: true
            }
        ).
        then(res => res)
        .catch(err => console.log(err));

const app = express();

app.use(express.json());
app.use(express.static('client'));
app.use('/url', urlRouter);

app.listen(PORT, () => {
    console.log(`Server listening at http://localhost:${PORT}`);
});

이곳에서 우리는 택배와 족제비를 수입한다.
그런 다음 URL을 처리하는 데 사용할 만든 라우터를 가져옵니다.
그리고 데이터를 저장하기 위해 데이터베이스 연결을 초기화합니다.
다음에, 우리express 프로그램을 만들고, 우리의 중간부품 (express.json (),express) 을 사용합니다.정적 () 및 라우터

라우터 생성⚡!server/routes/url.routes.js 파일에 다음을 추가합니다.

const express = require('express');
const urlRoutes = express.Router();

const controller = require('../controllers/url.controller');

urlRoutes.get('/:slug', 
        controller.getUrl);

urlRoutes.post('/new',
        controller.postUrl);


module.exports = urlRoutes;

여기에서, 우리는express를 가져오고express 공유기를 만들어서 우리의 경로를 연결합니다.
그리고 요청이 호출되었을 때, 우리는 컨트롤러를 가져와서 요청을 처리합니다.
마지막으로 GET 및 POST 요청을 작성하여 URL 단축 읽어들이기 및 작성을 처리합니다.

컨트롤러 만들기⚡!
지금 우리는 이 노선들을 처리하기 위해 컨트롤러가 필요하다.server/controllers/url.controller.js 파일에 다음을 추가합니다.

const UrlModel = require('../models/url.model');
const {nanoid} = require('nanoid');

exports.getUrl = async (req, res) => {
    const {slug} = req.params;
    // check if slug exists
    const foundSlug = await UrlModel.findOne({slug});
    // if no slug exists, create one
    if(!foundSlug || foundSlug.length == 0) {
        let fullUrl = req.protocol + '://' + req.get('Host') + req.originalUrl;
        res.status(404).json({message: "URL not found.", body:{slug, url: fullUrl}});

    } else {
        res.status(302).redirect(foundSlug.url);
    }
}

exports.postUrl = async (req, res) => {
    let {url, slug} = req.body;
    // check if slug provided, create new one if not.
    if(!slug) {
        slug = nanoid(5);
    }
    slug = slug.toLocaleLowerCase();
    // check if slug exists
    const foundSlug = await UrlModel.find({slug});
    // if no slug exists, create one
    if(!foundSlug || foundSlug.length == 0) {
        const newUrl = new UrlModel(
            {
                slug,
                url
            }
        );
        const response = await newUrl.save();
        res.status(200).json({message: "Creation successful!", body:response});

    } else {
        res.status(409).json({message: "Resource already exists.", body:{slug: "", url:""}});
    }
}

이것이 바로 우리가 의존항nanoid를 사용하는 곳입니다.

무엇이 나노급입니까?
nanoid는 작은 id 문자열을 만드는 라이브러리입니다.우리는 작은 id 문자열을 생성하여 URL을 줄일 것입니다!

요청 가져오기🐦
GET는 GET URL:slug에서 slug 값을 검색하고 데이터베이스에서 일치하는 항목을 검색할 것을 요청합니다.
일치하는 slug를 찾으면, 찾은 slug의 URL으로 다시 지정합니다.
slug를 찾을 수 없는 경우 사용자가 필요한 URL을 찾을 수 없음을 404 상태로 알립니다.

POST 요청🐦
POST 요청은 POST 요청 주체에서 URL과 slug를 검색합니다. slug가 제공되지 않으면, nanoid를 사용하여 길이가 5인 무작위 slug를 생성합니다.
이것이 바로 사용자가 사용자 정의 짧은 URL을 만들 수 있는 이유입니다.

요청 예:

POST http://localhost:8080/url/new HTTP/1.1
content-type: application/json

{
        "slug": "abcde",
        "url": "https://www.google.com"
}

이렇게 하면 URLhttp://localhost:8080/abcde이 만들어집니다.
사용자를 로 리디렉션https://www.google.com우리는 데이터베이스에 필요한 slug를 포함하는 항목이 이미 존재하는지 검사합니다.
항목이 없으면 새 문서를 데이터베이스에 저장하고 만든 항목을 되돌려줍니다.
만약 slug가 존재한다면, 우리는 409 응답을 되돌려 사용자 자원이 이미 존재한다는 것을 알릴 것입니다.

데이터 모델❄️!
마지막으로 백엔드를 위해 구축해야 할 것은 몬고우스가 몬고DB 데이터베이스에 사용할 데이터 모델이다.server/models/url.model.js 파일에 다음을 추가합니다.

const mongoose = require('mongoose');

const UrlModel = mongoose.model('Url', 
    mongoose.Schema(
        {
            slug: {
                type: String,
                minlength: [5, 'Slug does not contain enough characters (Minimum 5).'],
                maxlength: [5, 'Slug contains too many characters (Maximum 5).'],
                trim: true,
                validate: {
                    validator : (slug) => {
                        return /[\w\-]/.test(slug);
                    },
                    message: props => `${props.value} is not a valid slug.`
                }
            },
            url: {
                type: String,
                required: [true, 'A valid URL must be provided.'],
                trim: true
            }
        },
        {timestamps: true}
    )
);

module.exports = UrlModel;

이 스크립트에서, 우리는 먼저mongoose를 가져와서mongoose 모델을 만듭니다.
그런 다음 두 개의 매개변수가 있는 UrlModel 모드를 생성합니다.

slug(약어 URL의 문자열 값)

url (바꿀 url의 문자열 값)

우리는 정규 표현식을 사용하여 slug에 알파벳 숫자 문자와 연결 문자 (-) 만 포함하는 기본 검증을 만듭니다.
이것이 백엔드의 무결성👏! 우리의 앞머리를 건설할 때가 되었다!

프런트엔드👀!
클라이언트 디렉토리에는 다음 파일이 포함되어 있어야 합니다.

client/
├── app.js
├── index.html
└── style.css

색인html 파일💀index.html 파일에 다음 테이블을 추가합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>MicroUrl</title>
</head>
<body>
    <main>
        <h1>MicroUrl</h1>
    </main>
    <section>
        <form action="javascript:;" onsubmit="createUrl(displayResponse)">
            <label for="url">Url to shorten:</label>
            <input type="url" name="url" id="url" required>
            <label for="slug">Optional. Custom micro url:</label>
            <input type="text" name="slug" id="slug">
            <input type="submit" value="Create">
        </form>
    </section>
    <section id="response">
    </section>
    <script src="app.js"></script>
</body>
</html>

우리의 폼은 두 개의 입력을 포함합니다. (하나는 URL을 단축하는 데 사용되고, 다른 하나는 잠재적인 사용자 정의 slug에 사용됩니다.)

풍격css 파일💭style.css 파일에 다음 테이블을 추가합니다.

body {
    margin-top: 20vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #84613D;
    font-family: "Lucida Console", Monaco, monospace;
    background: #FDF9EA;
}

body > * {
    width: 40vw;
    height: auto;
}

form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    margin: 1rem 0;
}

form > * {
    margin: .5rem 0;
    padding: 1rem;
}

form > button {
    padding: 0;
}

우리 사이트는 지금 매력적이고 호응성이 강한 표를 포함해야 한다.

마지막으로 자바스크립트를 추가해서 URL을 만들고 응답을 표시합니다!

응용 프로그램.js 파일🙈app.js 파일에 다음 테이블을 추가합니다.

const createUrl = async (callback=null) => {
    this.preventDefault;
    let response = await fetch('/url/new', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json;charset=utf-8'
        },
        body: JSON.stringify(
            {
            url:this.url.value, 
            slug:this.slug.value
        })
      });
      let result = await response.json();
      console.log(result);
      if(callback) {
        callback("response", result);
      }
}

const displayResponse = (elementKey, data) => {
  const {message, body} = data;

  const parentElement = document.getElementById(elementKey);
  parentElement.innerHTML = "";

  let divElement = document.createElement('div');

  let pElement = document.createElement('p');
  pElement.appendChild(document.createTextNode(message));

  let aElement = document.createElement('a');
  if(body.slug) {
    aElement.appendChild(document.createTextNode(`${window.location.href}url/${body.slug}`));
    aElement.href = `${window.location.href}url/${body.slug}`;
  } else {
    aElement.appendChild(document.createTextNode(""));
  }

  divElement.appendChild(pElement);
  divElement.appendChild(aElement);
  parentElement.appendChild(divElement);
}

두 가지 기능이 있습니다.

URL 만들기

DisplayResponse

createUrl 이 폼의 제출을 처리한 후 실행할 매개 변수로 리셋을 받아들인다.
이것은 callback design pattern라고 할 수 있다
우리의createUrl 함수는 fetch 요청과 폼 데이터를 서버에 발표합니다.완료되면 display Response 함수를 사용하여 새로 만든 단축 URL을 표시합니다.

커밋된 경우:


요약🙏
만약 네가 성공한다면, 축하해!🎉
너는 이 프로젝트에서 많은 것을 배웠다.API 생성, 데이터 검증, 프런트엔드 설계너 지금 금방 만들 수 있을 거야.🔥 폴더!
만약 당신이 이 강좌를 좋아한다면, 언제든지 나를 주목하고, 나의 일부 소셜 미디어를 보십시오.
Github