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
请求,分别获取用户的信息,和用户仓库的信息,并且保存到 user
,repos
变量中
// 获取用户信息接口
getUser:function() {
this.axios.get('/hupf3')
.then(res => {
var result = res.data