50projects50days知识点-28-github-profiles

js中引入axios

示例网址：

https://50projects50days.com/projects/github-profiles/
http://50projects.tc.cluski.top/50projects50days/github-profiles/

效果：

github-profiles

思路：

布局没有什么难得，主要是在使用axios调用github的api之后，动态的创建元素。

js中引入axios

在<body>中加入<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>标签即可引入axios。注意这里需要在使用axios之前就是用<script>标签将axios引入。

参考链接：起步 | Axios 中文文档 | Axios 中文网 (axios-http.cn)

在此例子中，使用axios调用github的profile api获取相关信息，然后将元素动态地创建在搜索框之下。

const APIURL = 'https://api.github.com/users/'

const main = document.getElementById('main')
const form = document.getElementById('form')
const search = document.getElementById('search')

async function getUser(username) {
    try {
        const { data } = await axios.get(APIURL + username)

        createUserCard(data)
        getRepos(username)
    } catch (err) {
        if (err.response.status == 404) {
            createErrorCard('No profile with this username')
        }
    }
}

async function getRepos(username) {
    try {
        const { data } = await axios.get(APIURL + username + '/repos?sort=created')

        addReposToCard(data)
    } catch (err) {
        createErrorCard('Problem fetching repos')
    }
}

function createUserCard(user) {
    const userID = user.name || user.login
    const userBio = user.bio ? `<p>${user.bio}</p>` : ''
    const cardHTML = `
    <div class="card">
    <div>
      <img src="${user.avatar_url}" alt="${user.name}" class="avatar">
    </div>
    <div class="user-info">
      <h2>${userID}</h2>
      ${userBio}
      <ul>
        <li>${user.followers} <strong>Followers</strong></li>
        <li>${user.following} <strong>Following</strong></li>
        <li>${user.public_repos} <strong>Repos</strong></li>
      </ul>

      <div id="repos"></div>
    </div>
  </div>
    `
    main.innerHTML = cardHTML

}

function createErrorCard(msg) {
    const cardHTML = `
        <div class="card">
            <h1>${msg}</h1>
        </div>
    `

    main.innerHTML = cardHTML
}

function addReposToCard(repos) {
    const reposEl = document.getElementById('repos')

    repos
        .slice(0, 5)
        .forEach(repo => {
            const repoEl = document.createElement('a')
            repoEl.classList.add('repo')
            repoEl.href = repo.html_url
            repoEl.target = '_blank'
            repoEl.innerText = repo.name

            reposEl.appendChild(repoEl)
        })
}

form.addEventListener('submit', (e) => {
    e.preventDefault()

    const user = search.value

    if (user) {
        getUser(user)

        search.value = ''
    }
})

在排版的时候，可以将用户信息先展示写好在HTML中。排版完成之后再删除即可。

50projects50days知识点-28-github-profiles

js中引入axios

评论区