Criando는 VueJS와 dev.to의 API를 통해 페이지를 열 수 있습니다.

Estava há muito tempo querendo fazer uma página pessoal pra usar de portifólio e também como blog de tecnologia, e depois de estudar várias soluções, descobri que o dev.to tem uma API que possibilita a Consulta dos dados do usuário assim como seus artigos. Com isso na mão, me animei a fazer uma aplicação em Vue que lesse esses dados

API

처음에는 API를 플랫폼으로 사용하여 PHP를 예로 들 수 있습니다.

dev.to API를 사용하는 방법!

2020년 6월 7일 ・ 2 분 읽기

#beginners #webdev #php #tutorial

No artigo, tem um link para um outro que mostra vários endpoints que você pode Consultar pra obter os dados que deseja. Pesquisando um pouco mais, cheguei à documentação official.

DEV API(베타) | Forem 문서

API를 통해 Forem 기사, 사용자 및 기타 리소스에 액세스합니다.

Forem의 실제 사례는 [DEV](https://www.dev.to)를 확인하세요.

인증이 필요하지 않은 모든 끝점에는 CORS가 활성화되어 있습니다.

모든 요청은 사용자 에이전트 헤더를 보내야 합니다.

달리 명시되지 않는 한 날짜 및 날짜 시간은 다음과 같아야 합니다.
[RFC 3339](https://tools.ietf.org/html/rfc3339) 형식.




developer.forem.com



E com isso, cheguei nos 2 endpoints que precisava:

뷰

Tendo a API e os endpoints, o próximo passo foi buscar esses dados dentro do site, pra depois exibir do jeito que eu queria.

API 사용

O primeiro passo foi criar um método pra centralizar as requisições à api, que fiz com axios

import axios, {AxiosInstance} from "axios";

 const http: AxiosInstance = axios.create({
    baseURL: "https://dev.to/api/",
    headers: {
        'Accept': "application/json",
        'Content-Type': 'application/json'
    }
})

export default http;

Depois disso, criei serviços distindos para fazer a Consulta aos endpoints.

O service pra receber artigos:

import http from "@/http";

export const getArticles = () => http.get('articles', {
    params: {
        username: 'stsmuniz'
    }
})

E o 서비스 para receber o perfil

import http from "@/http";

export const getProfile = () => http.get('users/by_username', {
    params: {
        url: 'stsmuniz'
    }
})

Com os services criados, agora podemos usar no site

Exibindo o perfil

Antes de mais nada, é necessário fazer a Consulta efetivamente. Como usei composition api, usei o método onBeforeMount pra buscar os dados antes de renderizar a página.

  setup() {
    const profile = ref()

    onBeforeMount(() => {
      getProfile()
          .then(res => profile.value = res.data)
    })
    ....
    return {
        profile
    }
})

E na página vai o componente que "monta"o perfil

    <ProfileComponent profile="profile" v-if="profile"/>
    <i class="fa-solid fa-spinner fa-spin-pulse" v-else></i>

오ProfileComponent é o componente que recebe as informações do perfil e "monta"o perfil na tela.

<template>
  <div class="profile">
    <img class="profile-picture" :alt="profile.username" :src="profile.profile_image">
    <h1>{{profile.name}}</h1>
    <p class="description" v-html="profile.summary.replace('\n', '<br />')"></p>
    <p><i class="fa-solid fa-location-dot"></i> {{profile.location}}</p>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "ProfileComponent",
  props: {
    profile: {
      required: true
    }
  },
})
</script>

E com isso conseguimos fazer o perfil ser renderizado na tela. O próximo passo é fazer o mesmo processo para os artigos

Exibindo os artigos

A primeira coisa aqui é criar a view para exibir os artigos, que chamei aqui de Blog. API 펠로 서비스 ArticleService, com o에 대한 설정 없음

<template>
  <div class="home" v-if="articles">
    <h1>Blog</h1>
    <ArticleList :articles="articles"/>
  </div>
  <i class="fa-solid fa-spinner fa-spin-pulse" v-else></i>
</template>

<script lang="ts">
import {defineComponent, onMounted, ref} from 'vue';
import {getArticles} from "@/service/ArticleService";

import ArticleList from '@/components/ArticleList.vue';

export default defineComponent({
  name: 'BlogView',
  components: {
    ArticleList,
  },
  setup() {
    const articles = ref()

    onMounted(() => {
      document.title = 'Blog'
    })

    getArticles()
        .then(res => articles.value = res.data)

    return {
      articles
    }
  }
});
</script>

오ArticleList é um componente container que, basicamente, organiza o container pra lista de artigos

<template>
  <div class="container">
    <ArticleItem v-for="article in articles" :article="article" :key="article.id" />
  </div>
</template>

<script>
import {defineComponent} from 'vue';
import ArticleItem from "@/components/ArticleItem";

export default defineComponent({
  name: 'ArticleList',
  components: {ArticleItem},
  props: {
    articles: {
      required: true
    }
  }
});
</script>

E por fim, o componente ArticleItem 정보를 제공하는 조직 없음 템플릿 pra fazer a exibição

<template>
  <article>
    <a :href="article.url"
       :title="article.title"
       target="_blank">
      <img class="responsive"
           :src="article.cover_image"
           :alt="article.title" />
    </a>
    <div class="article-data">
      <h1>
        <a :href="article.url"
           :title="article.title"
           target="_blank">
          {{ article.title }}
        </a>
      </h1>
      <p class="article-description">{{article.description}}</p>
      <p class="publish-date">
        <i class="fa-solid fa-calendar"></i> <DateFormatter :date="article.published_at" />
      </p>
    </div>
  </article>
</template>

<script>
import DateFormatter from "./DateFormatter";
import {defineComponent} from "vue";

export default defineComponent({
  name: "ArticleItem",
  components: {DateFormatter},
  props: {
    article: {
      required: true
    }
  }
})
</script>

Como eu queryexibir a data no formato dd/mm/yyyy , 크리에이 오 컴포넌트 DateFormatter pra tratar a string que vem no formato ISO.

배포

Dei uma fuçada e acabei encontrando um artigo interessante que explica bem como fazer o deploy:

GitHub Pages를 사용하여 Vue.js 앱을 자동으로 빌드 및 배포 - LogRocket Blog

GitHub 프로젝트를 위한 정적 사이트 호스팅 서비스인 GitHub 페이지에 Vue.js 프로젝트를 자동으로 빌드하고 배포하는 방법을 알아보세요.



blog.logrocket.com




Se você for usar esse método, tome cuidado com o nome da branch principal no arquivo gh-pages-deploy.js . No artigo ela está sendo chamada como master .

페찬도

Com isso, mais a estrutura básica do vue e alguma estilização, pode se ter um site simples com informações básicas vindas do seu perfil do dev.to e uma página com link para seus artigos mais latestes.

Pretendo criar um repositório aberto pra compartilhar o que fiz aqui e deixar fácil pra qualquer pessoa com perfil aqui também ter sua página pessoal, assim como a minha



Obrigado por acompanhar até aqui e nos vemos na próxima 👋