试用thymeleaf引入vue-element-admin（一）

作为后端程序员，一直使用springboot+bootstarp做管理系统，对前端不是太了解，现在感觉bootstarp的admin ui一直不得劲，想切换成前端使用较多的ui，费了老鼻子劲。
我的目的不是前后端分离，而是一个人全栈，为啥后端不能干前端的活儿，写管理页面本身就是没太多样式

1 本地部署vue-element-admin

不编译打包一个，是没有哪些现成的css和js给我的，所以需要先部署
参考https://github.com/PanJiaChen/vue-element-admin/tree/master#
https://juejin.cn/post/6844903476661583880
先拷贝下项目
这个vue-element-admin 其实用的事vue 2的版本，不是3的，所以nodejs版本要小于等于22，
这些东西对于一个后端来说，实在太痛苦了

git clone https://github.com/PanJiaChen/vue-element-admin.git
cd vue-element-admin
npm install
npm run build
npm run dev

这里主要是build 一下，获取dist里面文件而已，最后起不起服务，其实不是很重要

2 写一个springboot+bootstrap项目

3 引入vue-element-admin

3.1将dist 下面的static文件4个文件夹和下面的文件都拷过来

src
└── main
    └── resources
        └── static
            ├── css
            ├── js
            ├── index.html  // 从 dist 复制过来的文件
            └── ...

最流弊的事这个index.html也拷过来，格式化，变成一个正常的html文件

3.2 创建 Thymeleaf 模板

在你的 Spring Boot 项目中，创建一个新的 Thymeleaf 模板文件，例如 src/main/resources/templates/admin.html
其实没必要创建什么模版，就用刚才那个index.html就行

3.3 创建controller

创建一个简单的 Spring Controller 来处理请求并返回 Thymeleaf 模板：

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

@Controller
public class AdminController {

    @GetMapping("/admin")
    public String adminPage(Model model) {
        // 可以在这里添加模型数据
        return "admin"; // 返回 admin.html 模板
    }
}

这里路由啥的，就自己安排，启动服务，就得到整个页面了
看这些代码，学会了很多现在前端的长处和编码习惯
后续会逐步适配验证这个admin里面的所有模块和特性