Github 首页制作

Github 首页制作

实验代码

本次页面实现的代码都在下面的链接,传送门,请 TA 进行查看

实验环境

Vue-cli + Google Chrome

本次实验引用了 iView 官方组件,iView官网

运行说明

  • 将项目克隆到本地

    git clone https://github.com/hupf3/myGithub.git

  • 进入到项目目录

    cd myGithub

  • 安装项目依赖

    npm install

  • 启动项目

    npm run dev

  • 在网页中输入 localhost:8080 即可查看页面(注意:需要将浏览器最大化,否则展示效果不好)

展示成果

本部分只展示大致的页面的效果,具体的功能和细节的展示在下方会详述

页面展示

网页标题及图标

网页底部

接口调试

本次实验使用的接口都是根据 github 官方给出的接口文档进行调试的

Github 官方 API 文档传送门

调试工具Postman

本次实验中常用的接口,如下:

  • 获取用户资料

    https://api.github.com/users/hupf3

  • 获取用户仓库

    https://api.github.com/users/hupf3/repos

细节实现

本次实验的页面主要由头部,底部,中部左边个人信息,中部右边菜单栏构成。也设计了页面的标题和图标,下面就分别讲述各部分实现的过程。

接口访问

<script> 内部写好了两个函数,分别用来发送 GET 请求,分别获取用户的信息,和用户仓库的信息,并且保存到 userrepos 变量中

// 获取用户信息接口
getUser:function() {
   
  this.axios.get('/hupf3')
    .then(res => {
   
    var result = res.data
    
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值