spring-boot web + vue

news2024/12/30 3:06:19

依赖的软件

maven

1. 官网下载zip 文件，比如apache-maven-3.9.9-bin.zip

2. 解压到某个盘符，必须保证父亲目录的名字包含英文，数字，破折号（-）

3. 设置环境变量M2_HOME, 并将%M2_HOME%\bin添加到windowns系统PATH 中

（如果添加PATH之后不好使，就直接将对应的bin路径添加到系统PATH中，比如：D:\maven\apache-maven-3.9.9-bin\apache-maven-3.9.9\bin）

4. cmd 中执行mvn -v 正常输出版本信息，证明PATH设置成功。

java

1. 下载JDK "x64 Compressed Archive"Java Downloads | Oracle

2. 解压到某个盘符，必须保证父亲目录的名字包含英文，数字，破折号（-）

3.设置环境变量JAVA_HOME, 并将%JAVA_HOME%\bin添加到windowns系统PATH 中

（如果添加PATH之后不好使，就直接将对应的bin路径添加到系统PATH中，比如：D:\jdk-23\jdk-23\bin）

4. cmd 中执行java --version 正常输出版本信息，证明PATH设置成功。

项目创建步骤

访问https://start.spring.io
选择Maven或Gradle作为构建工具
选择Spring Boot版本
填写项目的基本信息（Group、Artifact）
添加项目依赖(Spring Web)
点击“Generate Project”生成项目
下载生成的ZIP文件
解压后得到一个基本的项目结构
解压到某个盘符，必须保证父亲目录的名字包含英文，数字，破折号（-）
在src\main\java\com\example\demo添加目录controller，并且在目录下添加新类HelloController, 用于返回数据请求，内容如下

package com.example.demo.controller;

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

@RestController
public class HelloController {
    @GetMapping("/hello")
    public String sayHello() {
        return "Hello, Spring Boot!";
    }
}

在src\main\java\com\example\demo\controller下加入新类ViewController，用于返回html页面，（另外我们需要在pom.xml添加依赖thymeleaf）内容如下：

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class ViewController {
    @GetMapping("/index")
    public String index() {
        return "index";
    }
}

关于如何利用vue创建web，请查看flask + vue-CSDN博客
使用vue生成的静态文件
1. 方法1：将dist目录下的js和css 目录放到，resources/static里，将dist目录下的index.html 和favicon.ico 放到resources/templates目录里。
2. 方法2：在文件application.properties中修改spring.web.resources.static-locations（管理静态文件位置）和spring.thymeleaf.prefix （管理templates位置），如下图
启动Spring-boot web，进入demo根目录，执行mvn spring-boot:run
在浏览器中输入localhost:8080/hello 或者localhost:8080/index