Spring Boot Vue.js
最后修改于 2023 年 7 月 16 日
Spring Boot Vue.js 教程展示了如何使用 Vue.js 框架创建一个简单的 Spring Boot 应用程序。
Vue.js
Vue.js 是一个用于构建用户界面的 JavaScript 框架。它基于标准的 HTML、CSS 和 JavaScript 构建。它提供了一个声明式和基于组件的编程模型。
它被推销为一个用于构建 Web 用户界面的易于上手、高性能且多功能的框架。 Vue.js 是 React.js 和 Angular 的替代品。
有几种方法可以将 Vue.js 集成到 Spring Boot 应用程序中。 可以在模板文件中集成 Vue.js，或者我们可以创建一个 REST 应用程序，其中 Vue.js UI 作为 REST API 的使用者。
此外，我们可以使用简单的 HTML 链接包含 Vue.js，或者使用单独的 Vue 构建系统。
Vue.js Groovy 示例
我们从非常简单的 Groovy 示例开始。
app.groovy static └── index.html
这是项目结构。
@RestController
class MyApp {
@RequestMapping("/hello")
String home() {
"Hello there!"
}
}
应用程序发送一条简单的文本消息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://unpkg.com/vue@3"></script>
<div id="app">{{ message }}</div>
<script>
const {createApp} = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
},
mounted() {
fetch('/hello')
.then((response) => response.text())
.then((data) => {
console.log(data);
this.message = data;
});
}
}).mount('#app')
</script>
</body>
</html>
在 HTML 文件中，我们从外部 CDN 来源包含 Vue.js 库。 启动应用程序后，我们生成对 Spring Boot 应用程序的请求，并在 div 标签中显示消息。
$ spring run app.groovy
我们启动应用程序并导航到 localhost:8080。
在下一个示例中，我们列出单词。
app.groovy
└── static
└── index.html
这是项目结构。
@RestController
class MyApp {
@RequestMapping("/words")
Map<String, List> home() {
return ['words': ['sky', 'cup', 'snow', 'war', 'water', 'ocean']]
}
}
Spring Boot 应用程序发送一个包含单词列表的 JSON 响应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://unpkg.com/vue@3"></script>
<div id="app">
<ul>
<li v-for="word in words">{{word}}</li>
</ul>
</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
words: []
}
},
mounted() {
fetch('/words')
.then((resp) => resp.text())
.then((data) => {
let vals = JSON.parse(data);
this.words = vals.words;
});
}
}).mount('#app')
</script>
</body>
</html>
Vue 应用程序从端点获取单词，解析 JSON 数据，并在 HTML 列表中显示单词。
Vue.js Java 示例
在下面的示例中，我们创建一个 Spring Boot Java 示例。 这次我们将使用 Vue 构建系统。
vue-app/
├── backend
│ ├── bin
│ ├── build
│ ├── build.gradle
│ ├── gradle
│ ├── gradlew
│ ├── gradlew.bat
│ ├── HELP.md
│ ├── settings.gradle
│ └── src
└── frontend
├── babel.config.js
├── jsconfig.json
├── node_modules
├── package.json
├── package-lock.json
├── public
├── README.md
├── src
└── vue.config.js
该项目分为两个目录：backend 和 frontend。 Spring Boot 应用程序位于后端，Vue.js 位于前端。
$ spring init -d web build:gradle backend
我们创建 Spring Boot 项目。
plugins {
id 'org.springframework.boot' version '2.7.0'
id 'io.spring.dependency-management' version '1.1.0'
id 'java'
}
group = 'com.example'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '17'
repositories {
mavenCentral()
}
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-web'
}
这是 Gradle 构建文件。
server.servlet.context-path=/api
我们在 application.properties 文件中设置 context-path。
package com.zetcode.controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class HelloController {
@GetMapping(value="/hello")
public String hello() {
return "Hello there!";
}
}
我们有一个简单的 HelloController，我们将 /hello URL 路径映射到一个简短的文本消息。
package com.zetcode;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}
我们设置 Spring Boot 应用程序。
现在我们创建前端部分。
$ npm install -g @vue/cli
我们安装 Vue 命令行工具。
$ vue create frontend
我们创建一个新的 Vue 应用程序。
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'MessageItem',
props: {
msg: String
}
}
</script>
我们有一个自定义的 MessageItem 组件，它显示 hello 消息。
<template>
<MessageItem :msg="msg" />
{{ message }}
</template>
<script>
import MessageItem from './components/MessageItem.vue'
export default {
name: 'App',
components: {
MessageItem
},
data() {
return {
message: 'Simple Spring Boot Vue application',
msg: ''
};
},
mounted() {
fetch('/api/hello')
.then((response) => response.text())
.then((data) => {
console.log(data);
this.msg = data;
});
}
}
</script>
<style>
#app {
font-family: sans-serif;
text-align: center;
color: #1b76d1;
}
</style>
这是 Vue 应用程序。我们导入自定义组件并在模板部分使用它。我们向 Spring Boot 应用程序发出请求，并将消息传递给自定义组件。
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
这是启动 Vue 应用程序的 main.js 文件。
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
port: 8081,
proxy: {
"/api/hello": {
target: "https://:8080",
secure: false
}
}
}
})
我们为开发服务器设置代理，以便它不会与 Spring Boot 的服务器冲突。
$ ./gradlew bootRun
我们启动 Spring Boot 应用程序。
$ npm run serve
我们启动 Vue.js 开发服务器。
启动服务器后，我们导航到 localhost:8081。
在本文中，我们将 Vue.js 框架与 Spring Boot 集成在一起。