利用业务层抓取数据后渲染

最新推荐文章于 2025-08-25 15:22:51 发布

CV键都碎了

最新推荐文章于 2025-08-25 15:22:51 发布

阅读量293

点赞数

CC 4.0 BY-SA版权

分类专栏： Java四阶段 - 项目文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/sinat_33940108/article/details/123046620

Java四阶段 - 项目专栏收录该内容

37 篇文章

订阅专栏

该博客展示了如何通过SpringBoot的@RestController和Ajax技术从后台获取数据并将其渲染到前端页面。首先，利用业务层获取数据，然后通过@GetMapping方法以JSON格式返回。在前端，使用Vue.js的Vue实例和$.ajax方法加载并显示数据到导航链接中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一张已经利用业务层，把数据抓取过来。
然后我们利用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>