SpringBoot内使用Vue3的一些小提示

请注意，本文是为新手编写，结论请看总结

首先

你需要知道，Vue3和SpringBoot并不能像MVC的传参一样进行数据传递，Vue3如果想从服务器获取数据，只能通过 axios 或者其他方法对服务器IP路径发送请求。

如果您像我一样，用thymeleaf或者其他的SpringBoot自带显示写了好多界面，又眼馋Vue3的灵活性，不妨试试这种方法

SpringBoot端配置

使用thymeleaf进行MVC配置

使用IDEA自动添加

在IDEA中你或许能看到pom.xml上有类似

的选项，请点击它，勾选 Template Engines（模板引擎）> Thymeleaf，如下图：

手动添加

您可以在pom.xml中寻找<dependencies>标签并添加

<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

尝试重新加载所有Maven项目，如果没有报错，就应该成功了

thymeleaf是一个方便的工具，如果网站不需要非常复杂的界面也许是个选择

Vue3的书写

编辑器

（自己用的是HbuilderX，曾经尝试了一下JetBrain的WebStorm，但是用下来个人体验没那么好，反而有时候会误警告（强迫党好难受啊啊啊）所以换回了HbuilderX）

方向

如果是新手可以创建Vue+Vite的，里面的示例很好懂（如果是从C或者其他语言转过了的可以去看<script setup>的语法，相对于<script>会好一些

提示

这里提示一下，当你的Vue3中如果想要调用SpringBoot中实现的API或者是跳转到thymeleaf定义的其他界面，应该尝试直接理解为本代码和服务器在相同路径相同端口。

比如你在服务器定义了

    /***
     * 获取个人信息
     * @param cookie 需要带Cookie
     * @return 返回用户信息
     */
    @PostMapping("/userInfo")
    public UserBean getUser(@CookieValue(name = "cookie", defaultValue = "None") String cookie, @RequestBody int id) 

那么你在VUE3中的调用应该是

const response = await axios.post(`/userInfo`, props.post.author, {
		headers: {
				"Content-Type": "application/json"
		}
});

不需要加任何前缀或者后缀

基础语法

当你编写完代码，想看看什么效果，可以使用

npm run dev

运行开发服务器（可以实时根据代码更新）

建议配合F12食用，在源代码中，文件路径的目录中可以看到运行的源文件
可以点断点，实时测试情况

如果您已经完成了开发，想看看最终无阉割的版本，可以使用

npm run serve

如果需要把Vue3结合入SPringBoot，可以使用

npm run build

生成静态文件

请注意

在SpringBoot中，如果template中的html想要调用js等等文件，这些文件应该储存在static文件夹中（template同级）

因此，当你成功得到静态文件时根目录/dist文件夹内，其中，index文件您可以改为任何你需要的名字，放在template文件夹中，其余的文件与文件夹，需要放在static文件夹下

请注意，尽量放在static目录下，不要套到其他文件夹内，static文件夹的作用就是通过域名可以直接访问的文件，也就是从网页直接进行映射的文件夹，这样JS与CSS，图片等才能被打包好的html直接调用

示例

现在，目录可能是这样的

请不要学咱这样不规范的命名 #悲

不要忘记在Controller层做映射哦~

可以是这样

@Controller
@RequestMapping("/detail")
public class DetailController {

    private final CookiesService cookiesService;

    @Autowired
    public DetailController(CookiesService cookiesService) {
        this.cookiesService = cookiesService;
    }

    @GetMapping()
    public String detail(@CookieValue(name = "cookie", defaultValue = "None")String cookie, Model model) {
        UserBean userBean = cookiesService.getCookies(cookie);
        model.addAttribute("userBean", userBean);
        if (userBean == null) {
            return "redirect:/login";
        }
        return "index"; // 这里才是核心词汇，只要return了就行
    }
}

这是一段充满了不规范的代码，看个意思就行了

总结：

• SpringBoot端需要有合适的Template驱动（如thymeleaf）
• Vue3端的端口映射应该为localhost（与SpringBoot服务器同根同端口）
• index.html和assets等文件分别放在template与static文件夹内

请注意：本计划只针对小流量状态，正常情况下请分离SpringBoot和Vue3的驱动服务器，可以尝试Vue3用nginx等服务器驱动