52 github案例

本次是一个带有网络请求的案例，也就是github案例，通过输入框查询到相关的用户，并且这些用户都是在github上真实存在的，首先做好静态页面

静态组件

 拆分组件

•  首先根据页面上的元素，进行拆分组件，这里拆了两个组件，搜索组件和显示组件
• 

引入bootstrap.css

•  除了拆分组件，还需要引入bootstrap.css样式库这里引入bootstrap.css样式库有两种方式，这里我才用的是第二种
•  1 在src目录下面新建一个文件夹asets，里面再新建一个文件夹css，然后把bootstrap.css复制进去，然后再app.vue或者main.js里面import引入，不过这样引入要求毕竟严格，会严格检查import，所以会报错
•  2 在src目录下的public文件夹新建一个css文件夹，然后把bootstrap.css复制进去，引入的时候就在index.html里面使用link标签引入

<!-- 引入bootstrap的css -->
   <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">

这样一个静态页面就搭建好了，目前list组件是空的

列表展示

页面搭建之后，就可以展示动态列表数据了，那么这些数据哪里来的呢？

github提供了一个免费无权限的接口，并且是get请求，直接通过浏览器就能访问的到

https://api.github.com/search/users?q=xxx

所以展示的数据，就可以根据用户输入的内容进行搜索了

这里我使用v-model进行数据绑定

然后就可以绑定时间发送请求即可，发送请求这里使用的是axios

可以发现，已经正常请求到了

然后就可以使用消息总线传递数据了

首先要开启全局事件总线

然后进行传递

查看是否正常传递值了，通过开发者工具发现没问题

接下来就可以进行赋值了

然后我们需要展示一些基本的用户信息

我们使用v-for编辑这些元素即可

再次测试页面，发现已经完成

不仅仅展示出了用户的基本信息，点击头像也可以进入对应的主页

至此基本的列表已经展示完成了