正文

从零开始：Spring Boot + Vue框架搭建实战项目教程

/0 浏览量
0823

引言

在这个数字化时代，掌握Web开发技术是每个程序员的必备技能。Spring Boot和Vue.js是当前非常流行的两个框架，Spring Boot用于后端开发，Vue.js用于前端开发。本文将带领大家从零开始，一步步搭建一个使用Spring Boot和Vue.js的实战项目。

环境准备

在开始之前，我们需要准备以下环境：

  1. Java开发环境：下载并安装Java Development Kit (JDK)，版本建议为1.8以上。
  2. IDE：推荐使用IntelliJ IDEA或Eclipse。
  3. Node.js和npm：用于安装Vue.js相关的依赖。
  4. Git：用于版本控制。

创建Spring Boot项目

  1. 创建Maven项目：在IDE中创建一个新的Maven项目，并添加以下依赖。
<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
</dependencies>
  1. 编写主程序：在src/main/java目录下创建一个名为Application的类，并添加以下代码。
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);
    }
}
  1. 编写Controller：在src/main/java目录下创建一个名为HelloController的类，并添加以下代码。
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!";
    }
}
  1. 启动项目：运行Application类，访问http://localhost:8080/hello，应该可以看到“Hello, World!”的输出。

创建Vue.js项目

  1. 安装Vue CLI：在命令行中执行以下命令。
npm install -g @vue/cli
  1. 创建Vue项目：在命令行中执行以下命令。
vue create vue-project
  1. 进入项目目录：进入vue-project目录。
cd vue-project
  1. 安装依赖：在命令行中执行以下命令。
npm install
  1. 启动Vue项目：在命令行中执行以下命令。
npm run serve
  1. 访问Vue项目：在浏览器中访问http://localhost:8080，应该可以看到Vue项目的首页。

集成Spring Boot和Vue.js

  1. 修改Vue项目：在src/components目录下创建一个名为Hello.vue的组件，并添加以下代码。
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Spring Boot!'
    };
  }
};
</script>
  1. 修改App.vue：在src/App.vue文件中，将<div id="app"></div>替换为以下代码。
<template>
  <div id="app">
    <hello></hello>
  </div>
</template>

<script>
import Hello from './components/Hello.vue';

export default {
  name: 'App',
  components: {
    Hello
  }
};
</script>
  1. 修改HelloController：在HelloController类中，添加以下代码。
@GetMapping("/vue/hello")
public String vueHello() {
    return "Hello, Vue!";
}
  1. 启动Vue项目：在命令行中执行以下命令。
npm run serve
  1. 访问Vue项目：在浏览器中访问http://localhost:8080/vue/hello，应该可以看到“Hello, Vue!”的输出。

总结

通过本文的教程，我们成功搭建了一个使用Spring Boot和Vue.js的实战项目。在实际开发中，我们还需要学习更多高级知识和技巧，例如数据库操作、接口调用、组件化开发等。希望本文能帮助你入门Spring Boot和Vue.js，开启你的Web开发之旅。

-- 展开阅读全文 --