简介:
利用ajax向我写好的接口发送请求在把json 数据做一个解析展示,有错请指出,在此谢过
思路:所在查询按钮的那个组件进行ajax请求,返回一个json 数组,把这个数据传递到父组件中,父组件在把数据传到List这个子组件中,在用一个v-for 把数组进行遍历把object数据放到List 的下一个子组件Item 中,进行展示,这里查询按钮所在的组件和List其实是兄弟组件可以用PubSub.JS,进行处理一个利用JavaScript进行发布/订阅的库
效果如下
目录结构如下
先做查询的ajax操作
这里 this.$emit('selectResult', result) 向父组件发送查询到的数组 ,result为查询到的参数,selectResult为一个ID
<template>
<div class="col-md-4">
<form class="form-horizontal">
<div class="form-group">
<label>比赛名</label>
<input type="text" class="form-control" v-model="competition" placeholder="比赛名">
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default pull-right" @click="selects">查询</button>
</div>
</div>
</form>
</div>
</template>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
export default {
data(){
return{
competition:''
}
},
methods:{
selects(){
//这里发送ajax要json数据
const url = 'http://10.10.2.3:8080/android/selectAllByCompetitionName?competitionName='+this.competition
axios.get(url).then(response =>{
const result = response.data
//console.log(result)
this.$emit('selectResult', result)
}).catch(error =>{
alert(失败了)
})
}
}
}
</script>
<style>
</style>
父组件 v-on:selectResult="selectResult" 对子组件传来的selectResult的这个消息做一个监听,同时也会接受到result 这个参数
监听到的同时会调用父组件的selectResult这个函数为父组件的result 赋值,在标签中要把result 这个数组给List这个子组件
<template>
<div id="app">
<header class="site-header jumbotron">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>请查询比赛的选手信息</h1>
</div>
</div>
</div>
</header>
<div class="container">
<Select v-on:selectResult="selectResult" />
<List :result="result"/>
</div>
</div>
</template>
<script>
import Select from './components/Select'
import List from './components/List'
export default {
name: 'App',
components: {
List,
Select
},
data(){
return{
result:Array
}
},
methods: {
selectResult: function (result) {
// result就是子组件传过来的值
this.result = result
// console.log(result)
}
}
}
</script>
<style>
</style>
List 用props做一个接收父组件传递的数组 在Item这个组件做遍历,为每一个Item传递一个 user 对象
<template>
<div class="col-md-8">
<h3 class="reply">选手列表:</h3>
<h2 style='display: none'>暂无评论,点击左侧添加评论!!!</h2>
<ul class="list-group">
<Item v-for="(user,index) in result"
:key="index" :user="user"/>
</ul>
</div>
</template>
<script>
import Item from './Item'
export default {
components: {
Item
},
props:{
//指定了属性名和类型
result:Array,
},
}
</script>
<style>
.reply {
margin-top: 0px;
}
</style>
Item 接收user 这个对象后取出我们想要的数据就好了
<template>
<div>
<li class="list-group-item">
<div class="handle">
<a href="javascript:;">删除</a>
</div>
<p class="user"><span >{{user.competitorName}}</span><span>说:</span></p>
<p class="centence">{{user.competitorText}}</p>
<p class="centence">{{user.usernameSum}}</p>
</li>
</div>
</template>
<script>
export default {
props:{
//指定了属性名和属性值就好比一个json数组
user:Object
},
}
</script>
<style>
li {
transition: .5s;
overflow: hidden;
}
.handle {
width: 40px;
border: 1px solid #ccc;
background: #fff;
position: absolute;
right: 10px;
top: 1px;
text-align: center;
}
.handle a {
display: block;
text-decoration: none;
}
.list-group-item .centence {
padding: 0px 50px;
}
.user {
font-size: 22px;
}
</style>