Axios를 사용하여 URL 축소기 웹 사이트 만들기

이 문장에서, 나는 너에게 내가 어떻게 만들었는지 알려줄 것이며, 너도 웹 사이트가 더욱 짧은 웹 사이트를 만들 수 있다.우리가 만들 결과를 봐라. here

개술

우선, 우리는 이 프로젝트의 수요와 의존성을 토론할 것이다.
이 프로젝트에서, 우리는 Axios 을 사용하여 HTTP 요청을 보낼 것입니다. (XML 요청으로api를 가져와서 같은 작업을 수행할 수도 있습니다.) 그리고 Hint.css 를 사용하여 알림을 보낼 것입니다. (필요 없습니다.)
기본적으로, 이 프로젝트는 위에서 언급한 어떤 라이브러리도 필요하지 않다. 이것은 단지 우리의 일을 더욱 쉽게 하고, 많은 시간을 절약할 수 있기 때문이다.
논리/작업:
사용자가 링크와 '단축' 단추를 붙일 수 있는 입력 탭을 추가할 것입니다.이 버튼을 클릭하면 AXIOS 요청이 트리거되고 응답이 출력 상자에 전달됩니다.하지만, 이것은 매우 쉬운 것 같고, 확실히 그렇다!API 응답, JSON 데이터 처리, 여러 가지 상황에서 발생하는 오류를 관리하는 방법을 아는 사람에게
초보자로서 너는 걱정할 필요가 없다. 나는 이미 위에서 언급한 한 걸음 한 걸음 좋은 예로 소개했다.

개시하다

우선, 우리가 필요로 하는 것은 좋은 디자인이다. 이렇게 하면 그것도 매우 좋아 보일 것이다.나는 이미 이 프로젝트를 위해 웹 사이트를 설계했다.

(하지만 저는 디자이너가 아닙니다. 디자인을 잘못하면 죄송합니다.)
이 디자인에는 제목 하나, 하위 제목 하나, 링크를 붙이는 입력 탭 하나, 변환 단추 하나, 결과를 표시하는 상자 세 개가 있다.
나는 버튼 탭을 사용하여 출력을 표시한다. (입력 탭도 사용할 수 있다.)
만약 당신이 원한다면 전체 사이트를 처음부터 시작하거나, 따라가거나 시간을 절약하고 싶다면, 이것부터 시작하십시오 codepen (기본 HTML과 CSS에 대해):

onclick 이벤트 추가

우선, "전환"단추에 이벤트를 추가하고, 원클릭을 전달하며, 이 함수는 단추를 눌렀을 때 실행됩니다.

// function name is 'shorten'
<button type="submit" class="shorten-button font-2" onclick="shorten()">
    Convert
</button>

그런 다음 JS에서 이 함수를 정의합니다.

const shorten = () => {
    console.log('button clicked')
}

codepen 외부에서 편집하는 경우 JS 파일 링크를 잊지 마십시오.
그리고 버튼을 누르면 컨트롤러에 메시지가 나타납니다.

Axios를 사용한 요청

이제 버튼을 클릭할 때 Axios 요청을 처리합니다.
Axios에 다음과 같은 간단한 설명이 있는지 몰랐습니다.

악시오스는 브라우저와 노드에서 사용하기 쉬운 API가 있는 유행하는 약속 기반 HTTP 클라이언트다.

그의 문법은 매우 간단하고 초보자에게 매우 우호적이다.

기본 Axios 구문:

axios.get('API url')
.then((response) => {
    // if the request was Sucessful and no errors were caught
    console.log(response)
})
.catch((error) => {
    // if errors were there.
    console.log(error)
})

Axios를 사용하기 전에 Axios 패키지를 HTML 파일에 연결하는 것을 잊지 마십시오.

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js" integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

API 호출

URL 단축에 대해서는 무료 URL 단축api 제공자SHRTCODE를 사용합니다.이 사이트를 방문하여 문서를 읽으면 더 많은 정보를 얻을 수 있습니다.
이것은 API를 호출하는 주요 링크입니다.

https://api.shrtco.de/v2/shorten?url=YOUR_URL

이제 "get"메서드에서 Axios 요청에 링크를 추가하기만 하면 됩니다.

let longUrl = 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals'

axios
.get(`https://api.shrtco.de/v2/shorten?url=${longUrl}`)
.then((responseData) => {
    console.log(responseData);
})
.catch((err)=> {
    alert('Error check your connectivity or link')
})

나중에 변경할 수 있도록 템플릿 문자열을 사용하여 URL을 get 방법에 추가합니다.
이api는 무료이기 때문에 응답(5-10초)이 필요합니다. 기다리기만 하면 됩니다.다음은 작업 중인 API 호출의 예제Codepen Example입니다.
일정 시간 후, 우리는 JSON 데이터 형식으로 응답을 받을 것입니다. 우리는 그것을 변수에 저장하여 나중에 사용할 수 있도록 할 것입니다. 또는 오류가 발견되면, "오류로 연결이나 링크를 검사할 수 있습니다."라고 경고할 것입니다.
단, 우리는 매번 같은 링크를 주거나, 새로운 링크가 있을 때마다 JS를 변경하지 않기 때문에, 입력한 탭의value 속성에서 링크를 가져옵니다.

let  longUrl  =  document.querySelector("#url-box").value;
// we will also declare a variable for later storage of processed url
let shortUrl; 

지금까지 우리는 완전한 URL, 작업한 JSON이 요청하고 처리한 데이터를 가지고 있다.
이제 JSON 데이터에서 다음과 같은 주요 정보를 얻을 수 있습니다.

처리된 URL은 full_short_link로 result의 내부에 있고 후자는 data의 내부에 있다.
그렇다면 이 URL은 어떻게 가져옵니까?
우리는 resdata.data.result.full_short_link를 간단하게 실행하여 then 내부의 처리 링크를 얻을 것이다.여기resdata는 API의 응답 데이터입니다.
예를 들면 다음과 같습니다.

axios .get(`https://api.shrtco.de/v2/shorten?url=${longUrl}`)
    .then((resdata) => {
        //storing Processed URL in already declared variable
        shortUrl  =  resdata.data.result.full_short_link;
        console.log(shortUrl)
        //check console for Processed URL or errors
    })
    .catch((err) => {
        alert("Error check your connectivity or link");
    });

지금 일의 절반이 완성되었다!축하드립니다.

URL 표시 상자를 HTML에 추가

남은 것은 우리가 그것을 스크린에 표시해야 한다는 것이다. 이것은 그리 대단한 것이 아니다.
우선 논리:
우리는 함수를 만들 것이다. 이 함수는 요소 (div 태그 하나) 를 만들고 변수에 저장한 다음 .innerHtml 속성을 통해 템플릿 문자열로 이 태그 (문자열로) 를 전달하고 변수 longUrl 를 전달할 것이다. shortUrl

` <div class="item">
    <div class="long-url">
        <div class="title font-1">
            Long URL
        </div>
        <button id="long-url" class="font-2">
            ${longUrl} 
         </button>
    </div>
    <div class="short-url">
        <div class="title font-1">
            Short URL
        </div> 

        // providing shortUrl variable in value attribute for the copy function⏬
        <button id="short-url" class="font-2" value='${shortUrl}' onclick='copyLink(this)'>
            ${shortUrl}
        </button>
    </div>
</div> `

// compressed version (spaces and tabs removed) because JS will
// give errors on 'tab' and 'enter'

<div class="item"><div class="long-url"><div class="title font-1">Long URL</div> <button id="long-url" class="font-2"> ${longUrl} </button></div><div class="short-url"><div class="title font-1">Short URL</div> <button id="short-url" class="font-2 hint--bottom" aria-label="Click link to Copy" onclick='copy(this)' value='${shortUrl}' onclick='copyLink(this)'>${shortUrl}</button></div></div>

마지막으로, 이 탭은 부모 링크 용기에 추가됩니다.나는 이것이 좀 복잡하다는 것을 알고 있지만, 이것은 네가 분명히 하는 데 도움이 될 것이다.

//Final working:
function  addResult(longUrl, shortUrl) {
    let parentEle = document.querySelector("#shortened-links");
    let data = `<div class="item"><div class="long-url"><div class="title font-1">Long URL</div> <button id="long-url" class="font-2"> ${longUrl} </button></div><div class="short-url"><div class="title font-1">Short URL</div> <button id="short-url" class="font-2" value='${shortUrl}' onclick='copyLink(this)'>${shortUrl}</button></div></div>`;

    let  newEle  =  document.createElement("div");
    newEle.innerHTML  =  data;
    parentEle.appendChild(newEle);
}

우리는 longUrl와 shortUrl를 매개 변수로 전달할 것이다.
이제 API에서 데이터를 가져올 때 이 함수를 then 메서드에 전달합니다.

.then((resdata) => {
    shortUrl  =  resdata.data.result.full_short_link;
    addResult(longUrl, shortUrl);
})

데이터를 가져올 때, 이 표시는 Html에 추가됩니다. CSS에 '클래스' 속성의 스타일을 설정했기 때문에, 표시는 실행되고, 처리된 item 는 화면에 표시됩니다.

링크 복사 기능

짧은 Url 상자를 클릭하면 됩니다.

이 기능은 다음과 같습니다.

function  copyLink(tag){
    let  text  =  tag.value;
    // copy link to clipboard
    navigator.clipboard.writeText(text);
}

이 함수의 매개 변수는 태그이고 매개 변수는 this 키워드입니다.예를 들면 다음과 같습니다.

// usage of this function:
onclick='copyLink(this)'

this 키워드는 나중에 CopyLink func에서value 속성을 사용할 수 있도록 매개 변수를 통해 완전한 단추 표시를 전달합니다.
이것이 바로 내가 단추 탭을 사용하여 shortUrl 탭의 출력과 부가값 속성을 표시하는 이유이다.
(입력 태그를 사용할 수도 있음)
현재 기본적인 업무는 이미 완성되었다. 지금까지 이렇게 많은 업무를 완성했다: here
나는 Hint.css를 사용하여 힌트를 추가했다(문서만 읽으면 돼, 매우 간단해).

오류 처리 및 애니메이션

지금은 네가 이 사이트에 얼마나 많은 애니메이션을 추가하고 싶느냐에 달려 있다.
오류 처리에 관해서 우리는 어떤 상황에서 오류가 발생할 것이라고 가정할 수 있다
만약 입력 라벨이 비어 있고 버튼이 눌리면 어떻게 합니까?

// we can do something like this:
if (longUrl){
    //if their is value in input tag then only Axios request is sent 
    axios.get()....
}else{
    alert('Enter some data first!!')
}

현재, 만약 당신이 이 프로젝트에서 더 많은 맞춤형 제작을 하고 싶다면, 이것은 완전히 당신에게 달려 있다.
만약 당신에게 어떤 문제가 있다면 평론 부분에서 그들에게 질문을 하세요.'이 글이 당신에게 도움이 된다면'이라는 댓글을 남기는 것을 잊지 마세요.😊
덕왕의 게시물.도움이 되었으면 좋겠어요!