作为后端程序员,一直使用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,
这些东西对于一个后端来说,实在太痛苦了
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里面的所有模块和特性