Vue.js 和 spring boot 入门教程

赵飞语

2023-12-01

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作为前端。这仅仅是开始，但可以作为更强大应用的基础。

Vue.js 和 spring boot 入门教程