前言
项目是基于 vue-cli 创建的, 不会搭建 vue 开发环境的同学可以百度, 这里不再赘述.
步骤流程
vue 项目搭建完成之后的文件图如下:
我的上一篇博客已经详细叙述 vue 工程中各个文件的作用, 不清楚的同学可以移步看这里
项目中需要用到 axios 这个包, 所以我们先安装相应的包, 项目终端输入:
NPM install axios -S
. 后面兄弟组件之间通信我们采用的是 "订阅消息 / 发布消息" 的方法, 这个也是一个包, 所以也先安装下依赖包 NPM i pubsub-JS -S. 安装完成后可以在项目 package.JSON 文件中看到对应依赖包.
src 文件夹下 components 下创建 main.vue 和 header.vue 两个组件, 分别代表项目中主体区域和头部区域, 等下需要挂载到根组件 App 下.
header.vue 文件中相关代码:
- <template>
- <div id="header">
- <div class="container">
- <div class="row center">
- <h1>Search GitHub Users</h1>
- <input type="text" v-model="searchName">
- <input type="button" value="Search" class="btn btn-primary" placeholder="请输入 github 用户名" @click="search">
- </div>
- </div>
- </div>
- </template>
- <script>
- import PubSub from 'pubsub-js'
- export default {
- name: 'Header',
- data () {
- return {
- searchName: ''
- }
- },
- methods: {
- search ()
- {
- // 发布消息
- const searchName = this.searchName.trim()
- if (searchName) {
- PubSub.publish('search', searchName)
- }
- }
- }
- }
- </script>
- <style>
- #header{
- height: 200px;
- }
- .container .center{
- text-align: center;
- }
- </style>
main.vue 文件中相关代码:
- <template>
- <div id="main">
- <h1 v-if="firstview">请输入搜索用户的名称</h1>
- <h1 v-if="loading">loading</h1>
- <h1 v-if="errormsg">{{errormsg}}</h1>
- <div class="row">
- <div class="col-xs-6 col-md-3" v-for="(user,index) in users" :key="index">
- <a :href="user.url">
- <img :src="user.avatar_url">
- </a>
- <span>{{user.name}}</span>
- </div>
- </div>
- </div>
- </template>
- <script>
- import PubSub from 'pubsub-js'
- import axios from 'axios'
- // https://api.github.com/search/users?q=
- export default {
- name: 'Main',
- data () {
- return {
- firstview: true,
- loading: false,
- errormsg: '',
- users: null // [{url:'',name:'',avatar_url:""}]
- }
- },
- mounted () {
- // 订阅消息
- PubSub.subscribe('search', (msg, searchName) => {
- const url = 'https://api.github.com/search/users?q='+searchName
- // 更新状态
- this.firstview = false
- this.loading = true
- this.users=null
- this.errormsg=''
- axios.get(url).then((response) => {
- const result = response.data
- const users = result.items.map(item => ({
- url: item.html_url,
- avatar_url: item.avatar_url,
- name: item.login
- }))
- // 更新请求成功的状态
- this.loading=false
- this.users=users
- }).catch(error => {
- this.loading=false
- this.errormsg='搜索失败'
- })
- })
- }
- }
- </script>
- <style>
- #main> .row ,#main h1{
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- }
- #main> .row> div{
- float: left;
- width: 100px;
- padding: 0;
- text-align: center;
- color: red;
- font-size: 18px;
- margin: 0 10px;
- }
- .row a img{
- width: 100px;
- height: 100px;
- }
- </style>
这里主要是详细解释下 main.vue 中相关代码. 在项目的主体区域中, 我们需要通过后台返回的数据进行页面的渲染. 标签模板中主要是通过
v-for="(item,index) in items" :key="index"
指令遍历得到的数组, 进行页面渲染, 利用 v-for 我们可以轻松得到一组类似的结构, 而不必多次写一些重复的 HTML 标签. 在组件模板对象中我们定义了一组数据信息,
这里的 users 主要是保存由后台返回回来的一组数据, 可以供页面进行渲染加载. 另外三种皆为不同的状态标志属性, 当我们进行不同的操作, 或者发送 Ajax 请求 (成功? 失败) 都可以改变相应的状态值从而使页面呈现不同状态.
pub-sub 库的使用.
项目中我们头部 header 需要向后台发送关键字, 后台根据得到的关键字进行相应的操作, 返回项目需要的数据. main 主体区域中需要利用后台返回的数据, 进行页面的渲染, main 区域中必定会利用 header 中提供的关键字发送 Ajax 请求, 所以这就牵扯到组件之间的通信问题, pubsub-JS 就是用来实现组件之间通信的. 兄弟组件之间通信如果利用 props 属性, 需要借助父组件来实现, pubsub 跨越组件之间的关系阶层进行通信. pubsub-JS 也就是我们所说的订阅消息和发布消息, 订阅消息可以理解为事件的监听, 发布消息可以理解为触发事件. 我们在 header 中点击搜索会通知 main 区域向后台发送 Ajax 请求, 所以我们在 header 中发布消息, main 中订阅消息.
利用 pubsub, 首先需要导入这个包. search 按钮点击的时候, 我们可以在按钮点击的回调函数里去发布消息. 发布消息是 PubSub.publish()方法, 这里需要提供两个参数,"发布的消息名","提供给订阅者的参数", 这里的参数是输入框的关键字.
main 区域在组件的生命周期函数 mounted(页面加载完成)中订阅消息. 订阅消息是 PubSub.subscribe()方法, 这里接受两个参数,"发布的消息名","事件的监听函数", 这里事件的监听函数需要两个参数: 一个是 msg(发布的消息名, 无用), 一个是 searchName(发布者传来的参数). 我们在事件的监听里面去发送 Ajax 请求, 更新页面.
项目完成后的效果图:
后缀
来源: https://www.cnblogs.com/dreamcc/p/10570273.html