Skip to main content
 首页 » 编程设计

Vue.js 和 spring boot 入门教程

2022年07月19日135傻小

Vue.js 和 spring boot 入门教程

本文我们通过示例说明如何整合使用vue和spring boot,示例通过vue渲染单个页面,spring boot作为后端提供数据。为了对比说明,也使用Thymeleaf模板技术渲染页面部分内容。

搭建spring boot

应用pom.xml使用spring-boot-starter-web 和 spring-boot-starter-thymeleaf 依赖:

<dependency>  
    <groupId>org.springframework.boot</groupId> 
    <artifactId>spring-boot-starter-web</artifactId>  
    <version>2.0.3.RELEASE</version> 
</dependency>  
<dependency>  
    <groupId>org.springframework.boot</groupId> 
    <artifactId>spring-boot-starter-thymeleaf</artifactId>  
    <version>2.0.3.RELEASE</version> 
</dependency> 

Thymeleaf默认在 templates/目录下搜索模板文件, 我们在src/main/resources/templates/index.html目录中增加空的index.html文件,后面我们会添加内容。接下来,我们写个Controller:

@Controller 
public class MainController { 
    @GetMapping("/") 
    public String index(Model model) { 
        model.addAttribute("eventName", "FIFA 2018"); 
        return "index"; 
    } 
} 

该Controller渲染单个模板,并通过 Spring Web Model 对象传递数据至视图:启动应用:

 mvc spring-boot:run 

在浏览器中输入地址,http://localhost:8080 ,这时当然是空的,我们的目标是显示:

Name of Event: FIFA 2018 
  
Lionel Messi 
Argentina's superstar 
  
Christiano Ronaldo 
Portugal top-ranked player 

使用VUE渲染数据

模板基本设置

在模板里,我们首先加载 Vue.js 和 Bootstrap(可选)渲染用户界面:

// in head tag 
  
<!-- Include Bootstrap --> 
  
//  other markup 
  
// at end of body tag 
<script 
  src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"> 
</script> 
<script 
  src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"> 
</script> 

这里我们加载Vue。来自CDN的js,但如果您愿意,也可以托管它。我们在浏览器中加载Babel,这样就可以在页面中编写一些符合es6的代码,而不必运行转换步骤。在实际应用程序中,您可能会使用Webpack和Babel transiler等工具来构建流程,而不是使用浏览器内Babel。

现在让我们保存页面并使用mvn spring-boot:run命令重新启动。我们刷新浏览器以查看更新;当然仍然没有任何内容。

接下来,我们增加一个空的div:

<div id="contents"></div> 

然后增加vue应用:

<script type="text/babel"> 
    var app = new Vue({ 
        el: '#contents' 
    }); 
</script> 

上面代码创建VUE应用,并通过#contents选择器与div元素进行关联。

在模板中显示数据

接下来,我们创建一个标题显示从spring controller中传递过来的‘eventName’属性,然后通过Thymeleaf特性进行展示:

<div class="lead"> 
    <strong>Name of Event:</strong> 
    <span th:text="${eventName}"></span> 
</div> 

现在,让我们附加data属性给vue应用,其中包括玩家数据(json数组)。代码如下:

<script type="text/babel"> 
    var app = new Vue({ 
        el: '#contents', 
        data: { 
            players: [ 
                { id: "1",  
                  name: "Lionel Messi",  
                  description: "Argentina's superstar" }, 
                { id: "2",  
                  name: "Christiano Ronaldo",  
                  description: "World #1-ranked player from Portugal" } 
            ] 
        } 
    }); 
</script> 

上述代码给data属性增加players变量。

通过vue组件渲染数据

下面我们创建vue组件负责渲染一个玩家,命名为plan-card,需要注意的是,组件代码需要在创建vue app之前,否则vue找不到:

Vue.component('player-card', { 
    props: ['player'], 
    template: `<div class="card"> 
        <div class="card-body"> 
            <h6 class="card-title"> 
                {
  { player.name }} 
            </h6> 
            <p class="card-text"> 
                <div> 
                    {
  { player.description }} 
                </div> 
            </p> 
        </div> 
        </div>` 
}); 

下面使用该组件展示所有玩家。循环app 对象,使用player-card渲染每个玩家:

<ul> 
    <li style="list-style-type:none" v-for="player in players"> 
        <player-card 
          v-bind:player="player" 
          v-bind:key="player.id"> 
        </player-card> 
    </li> 
</ul> 

这里使用v-for指令负责遍历每个玩家,在

  • 标签中通过 player-card组件渲染每个玩家。
    v-bind:player 指定组件属性为循环变量,即本次循环的玩家。v-bind:key 使每个li元素唯一,planer.id本身唯一,作为key是最佳选择。
  • 选择如果你重载页面,在开发工具中观察生成html标记,代码大概如下:

    <ul> 
        <li style="list-style-type: none;"> 
            <div class="card"> 
                // contents 
            </div> 
        </li> 
        <li style="list-style-type: none;"> 
            <div class="card"> 
                // contents 
            </div> 
        </li> 
    </ul> 
    

    总结

    本文我们从头搭建了web应用,使用spring boot作为后端,vue作为前端。这仅仅是开始,但可以作为更强大应用的基础。


本文参考链接:https://blog.csdn.net/neweastsun/article/details/85011759