写点什么

教你如何用 Vue3 搭配 Spring Framework

  • 2023-06-29
    广东
  • 本文字数:2164 字

    阅读完需:约 7 分钟

教你如何用Vue3搭配Spring Framework

本文分享自华为云社区《Vue3搭配Spring Framework开发【Vue3应用程序实战】》,作者:黎燃。

一、介绍


Vue3 和 Spring Framework 都是现代 Web 应用程序开发中最流行的框架之一。


Vue3 是一个流行的 JavaScript 框架,可以帮助我们构建交互式的前端应用程序。Spring Framework 是一个流行的 Java 框架,可以帮助我们构建高性能的后端应用程序。在本文中,我们将介绍如何使用 Vue3 和 Spring Framework 进行开发,并创建一个简单的 TodoList 应用程序。

二、创建 Vue3 应用程序


首先,我们需要创建一个新的 Vue3 应用程序。我们可以使用 Vue CLI 来创建应用程序,具体步骤如下:


  • 在终端中,使用以下命令安装 Vue CLI:


rubyCopy code
$ npm install -g @vue/cli
复制代码


  • 创建一个新的 Vue3 应用程序:


luaCopy code
$ vue create vue-spring-todo
复制代码


  • 选择默认配置,并等待 Vue CLI 安装所需的依赖项。

  • 进入新创建的应用程序目录,并启动开发服务器:


shellCopy code$ cd vue-spring-todo
$ npm run serve
复制代码


现在,我们已经准备好使用 Vue3 来创建我们的 TodoList 应用程序了。

三、创建 TodoList 组件


接下来,我们需要创建一个 Vue3 组件来显示我们的 TodoList。我们可以使用以下命令在 src/components 目录下创建一个新的组件文件:


shellCopy code$ cd vue-spring-todo
$ touch src/components/TodoList.vue
然后,我们可以使用以下代码创建我们的TodoList组件:
htmlCopy code<template>
<div>
<h1>Todo List</h1>
<ul>
<li v-for="(todo, index) in todos" :key="index">
{{ todo }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
todos: [
'Learn Vue3',
'Learn Spring Framework',
'Build a TodoList App',
],
};
},
};
</script>
复制代码


在这里,我们使用了 Vue3 的数据绑定功能来将我们的 TodoList 数据渲染为 HTML。我们使用 v-for 指令来循环渲染每个 TodoList 项目,并使用 key 属性来提高性能。

四、创建 Spring 控制器


现在,我们需要创建一个 Spring 控制器来处理我们的 TodoList 数据。我们可以使用以下命令在 src/main/java/com/example/demo 目录下创建一个新的 Java 文件:


shellCopy code$ cd vue-spring-todo
$ mkdir -p src/main/java/com/example/demo
$ touch src/main/java/com/example/demo/TodoListController.java
复制代码


然后,我们可以使用以下代码创建我们的 Spring 控制器:


javaCopy codepackage com.example.demo;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class TodoListController {
@GetMapping("/api/todos")
public String[] getTodos() {
return new String[] {
"Learn Vue3",
"Learn Spring Framework",
"Build a TodoList App"
};
}
复制代码


在这里,我们使用了 Spring Framework 的 @RestController 注解来标记我们的控制器,并使用 @GetMapping 注解来指定 HTTP GET 请求的路径。我们的 getTodos 方法返回一个包含 TodoList 项目的字符串数组。

五、创建 Vue3 服务


接下来,我们需要创建一个 Vue3 服务来获取我们的 TodoList 数据。我们可以使用以下命令在 src/services 目录下创建一个新的 JavaScript 文件:


$ cd vue-spring-todo
$ mkdir src/services
$ touch src/services/todoService.js
复制代码


然后,我们可以使用以下代码创建我们的 Vue3 服务:


import axios from 'axios'; const baseUrl = 'http://localhost:8080/api/todos';
const getTodos = async () => { const response = await axios.get(baseUrl); return response.data; };
export default { getTodos };
复制代码


在这里,我们使用了 Axios 库来发出 HTTP GET 请求,并从我们的 Spring 控制器中获取 TodoList 数据。我们将 baseUrl 设置为我们的 Spring 控制器的路径。

六、将 Vue3 服务与组件集成


现在,我们已经准备好将我们的 Vue3 服务与我们的 TodoList 组件集成。我们可以使用以下代码更新我们的 TodoList.vue 组件:


<template>
<div>
<h1>Todo List</h1>
<ul>
<li v-for="(todo, index) in todos" :key="index">
{{ todo }}
</li>
</ul>
</div>
</template>
<script>
import todoService from '../services/todoService';
export default {
data() {
return {
todos: [],
};
},
async created() {
this.todos = await todoService.getTodos();
},
};
</script>
复制代码


在这里,我们将我们的 Vue3 服务导入我们的 TodoList.vue 组件,并在 created 生命周期钩子中使用 await 关键字来异步获取 TodoList 数据。

七、启动应用程序


现在,我们已经完成了我们的 Vue3 和 Spring Framework 应用程序的开发。我们可以使用以下命令启动我们的应用程序:


$ cd vue-spring-todo
$ ./mvnw spring-boot:run
复制代码


然后,我们可以在浏览器中访问http://localhost:8080来查看我们的 TodoList 应用程序。

八、总结


在本文中,我们介绍了如何使用 Vue3 和 Spring Framework 创建一个简单的 TodoList 应用程序。我们使用 Vue CLI 创建了一个新的 Vue3 应用程序,并创建了一个 Vue3 组件来显示我们的 TodoList。然后,我们使用 Spring Framework 创建了一个控制器来处理我们的 TodoList 数据,并使用 Axios 库创建了一个 Vue3 服务来获取数据。最后,我们将我们的 Vue3 服务与我们的 Vue3 组件集成,并启动了我们的应用程序。希望这篇文章对您有所帮助!


点击关注,第一时间了解华为云新鲜技术~

发布于: 刚刚阅读数: 6
用户头像

提供全面深入的云计算技术干货 2020-07-14 加入

生于云,长于云,让开发者成为决定性力量

评论

发布
暂无评论
教你如何用Vue3搭配Spring Framework_前端_华为云开发者联盟_InfoQ写作社区