上一张已经利用业务层,把数据抓取过来。
然后我们利用ajax把数据渲染到网页上。
@RestController
@RequestMapping("/v1/tags")
public class TagController {
@Autowired
ITagService tagService;
@GetMapping("")
//用R封装list,然后用list封装tag
public R<List<Tag>> tag(){
List<Tag> list = tagService.getTags();
//R对象可以封装list返回Json对象
return R.ok(list);
}
}
然后启动项目,地址栏输入
http://localhost:8080/v1/tags
就拿到了所有数据。然后利用ajax渲染页面
let tagsApp = new Vue({
el: '#tagsApp',
data:{
tags:[]
},
methods:{
loadTags:function () {
console.log('执行了loadTags');
$.ajax({
url:'/v1/tags',
method:'GET',
success:function (r) {
console.log(r);
if (r.code === OK){
console.log('成功返回tags');
tagsApp.tags = r.data;
}
}
});
}
},
created:function () {
this.loadTags();
}
});
- 先测试loadTags:function 是否可以自动执行打印数据
<head>
<script src="browser_components/vue/dist/vue.js"></script>
</head>
<div class="container-fluid" >
<div class="nav font-weight-light" id="tagsApp">
<a href="tag/tag_question.html" class="nav-item nav-link text-info"><small>全部</small></a>
<a href="tag/tag_question.html" class="nav-item nav-link text-info"
v-for="tag in tags"
><small v-text="tag.name">Java基础</small></a>
</div>
</div>
<script src="js/util.js"> </script>
<script src="js/index.js"></script>
- 定义tagsApp与js中对应。
- 循环获取赋值参数。
- 最后导入index.js和工具类