使用springboot和vue建立网页的环境搭建流程

1.安装环境

1.1安装 Node.js 和 npm

下载并安装Node.js 20.15.0，安装后，确认版本：

node -v
npm -v

1.2安装 Spring Boot

确保你已经安装了Java开发环境（JDK 17以上），并下载Spring Boot CLI，确认版本：

java -version
spring --version

2.创建项目

2.1使用IntelliJ IDEA创建Spring Boot项目

2.1.1创建Springboot项目

1. 打开IntelliJ IDEA，选择 New Project。
2. 选择 Spring Initializr，点击 Next。
3. 填写项目信息：

• Group: com.example
• Artifact: demo
• Name: demo
• Type: Maven
• Language: Java

1. 选择Spring Boot版本 3.1.2。
2. 添加依赖：
   1. Spring Web
   2. Spring Data JPA
   3. MySQL Driver
3. 点击 Finish，IntelliJ IDEA 会自动下载依赖并创建项目。

2.1.2配置项目

在src/main/resources/application.properties文件中配置数据库连接信息。

spring.datasource.url=jdbc:mysql://localhost:3306/your_database
spring.datasource.username=your_username
spring.datasource.password=your_password
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true

在项目结构中找到 src/main/resources/application.properties，添加以下配置：

server.port=3000

创建一个简单的控制器： 在 src/main/java/com/example/demo/ 下创建 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("/api/hello")
    public String hello() {
        return "Hello, World!";
    }
}

在 DemoApplication.java 文件中右键选择 Run 或者在顶部导航栏点击 Run 按钮。

2.2创建前端

2.2.1使用Vue CLI创建Vue 3项目

在终端中运行以下命令：

npm install -g @vue/cli
vue create frontend

2.2.2配置Vue项目

进入项目目录：

cd frontend

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    fetch('/api/hello')
      .then(response => response.text())
      .then(data => {
        this.message = data;
      });
  }
};
</script>

配置代理： 在项目根目录下创建或修改 vue.config.js 文件，添加以下配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
};

在终端中启动Vue项目：

npm run serve

2.2.3使用element-plus

 安装Element Plus

npm install element-plus

在main.js中引入Element Plus：

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

2.3连接前后端

确保Spring Boot后端正在运行，并在另一个终端窗口启动Vue前端服务器。打开浏览器访问 http://localhost:3000，你应该能看到 "Hello, World!"。