正文

Vue与SpringBoot框架快速入门：实战教程，轻松实现前后端分离开发

/0 浏览量
0603

前言

随着互联网技术的不断发展，前后端分离的开发模式逐渐成为主流。Vue.js 和 Spring Boot 是目前非常流行的前端和后端框架，它们分别代表了前端和后端开发的最新趋势。本文将带你快速入门 Vue 和 Spring Boot，并通过实战教程教你如何实现前后端分离的开发。

Vue.js 快速入门

1. 安装 Node.js

Vue.js 是一个基于 JavaScript 的前端框架，因此需要先安装 Node.js。可以从 Node.js 官网 下载并安装。

2. 安装 Vue CLI

Vue CLI 是一个官方命令行工具，用于快速搭建 Vue.js 项目。通过以下命令安装：

npm install -g @vue/cli

3. 创建 Vue 项目

使用 Vue CLI 创建一个新项目：

vue create my-vue-project

选择合适的配置，然后进入项目目录：

cd my-vue-project

4. 编写 Vue 组件

在 src/components 目录下创建一个名为 HelloWorld.vue 的组件：

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

5. 在主页面中使用组件

在 src/App.vue 中引入并使用 HelloWorld 组件：

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

6. 运行 Vue 项目

在项目根目录下运行以下命令启动开发服务器：

npm run serve

访问 http://localhost:8080/，你将看到 “Hello World!” 的显示。

Spring Boot 快速入门

1. 安装 Java 开发工具包

Spring Boot 需要 Java 开发工具包（JDK）来运行。可以从 Oracle 官网 下载并安装。

2. 创建 Spring Boot 项目

使用 Spring Initializr（https://start.spring.io/）创建一个 Spring Boot 项目。选择合适的依赖项，然后下载生成的项目压缩包。

3. 编写 Spring Boot 应用程序

在 src/main/java 目录下创建一个名为 Application.java 的类：

package com.example.demo;

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);
    }
}

4. 编写 RESTful API

在 src/main/java 目录下创建一个名为 HelloController.java 的类：

package com.example.demo;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {

    @GetMapping("/hello")
    public String hello() {
        return "Hello World!";
    }
}

5. 运行 Spring Boot 应用程序

在项目根目录下运行以下命令启动应用程序：

mvn spring-boot:run

访问 http://localhost:8080/hello，你将看到 “Hello World!” 的显示。

实现前后端分离开发

1. 创建 Vue 项目

按照前面介绍的步骤创建一个 Vue 项目。

2. 创建 Spring Boot 项目

按照前面介绍的步骤创建一个 Spring Boot 项目。

3. 配置跨域请求

在 Spring Boot 项目中，需要配置跨域请求以允许 Vue 项目访问 Spring Boot 提供的 API。

在 src/main/resources/application.properties 文件中添加以下配置：

spring.web.cors.allowed-origins=*
spring.web.cors.allowed-methods=GET,POST,PUT,DELETE
spring.web.cors.allowed-headers=Content-Type,X-Requested-With,Authorization

4. 使用 Axios 调用 API

在 Vue 项目中，使用 Axios 库调用 Spring Boot 提供的 API。

import axios from 'axios';

export default {
  methods: {
    fetchData() {
      axios.get('http://localhost:8080/hello')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}

5. 运行应用程序

同时运行 Vue 项目和 Spring Boot 项目。访问 http://localhost:8080/，你将看到 “Hello World!” 的显示。

总结

通过本文的实战教程，你已成功入门 Vue 和 Spring Boot，并实现了前后端分离的开发。在实际项目中，你可以根据需求进一步学习和拓展这两个框架的功能。祝你在前端和后端开发的道路上越走越远！

-- 展开阅读全文 --