试用thymeleaf引入vue-element-admin(一)

news2025/4/13 14:20:15

作为后端程序员,一直使用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里面的所有模块和特性

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2326583.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Minimind 训练一个自己专属语言模型

发现了一个宝藏项目, 宣传是完全从0开始,仅用3块钱成本 2小时!即可训练出仅为25.8M的超小语言模型MiniMind,最小版本体积是 GPT-3 的 17000,做到最普通的个人GPU也可快速训练 https://github.com/jingyaogong/minimi…

STM32八股【5】----- TIM定时器

1. TIM定时器分类 STM32 的定时器主要分为以下几类: 高级定时器(Advanced TIM,TIM1/TIM8) 具备 PWM 生成、死区控制、互补输出等高级功能,适用于电机控制和功率转换应用。通用定时器(General-purpose TIM…

厘米级定位赋能智造升级:品铂科技UWB技术驱动工厂全流程自动化与效能跃升”

在智能制造中的核心价值体现在‌高精度定位、流程优化、安全管理‌等多个维度,具体应用如下: 一、‌核心技术与定位能力‌ ‌厘米级高精度定位‌ UWB技术通过‌纳秒级窄脉冲信号‌(带宽超500MHz)实现高时间分辨率,结合…

C++刷题(四):vector

📝前言说明: 本专栏主要记录本人的基础算法学习以及刷题记录,使用语言为C。 每道题我会给出LeetCode上的题号(如果有题号),题目,以及最后通过的代码。没有题号的题目大多来自牛客网。对于题目的…

【虚拟仪器技术】Labview虚拟仪器技术应用教程习题参考答案[13页]

目录 第1章 第2章 第3章 第4章 第5章 第6章 第7章 第8章 第1章 1. 简述虚拟仪器概念。 参考答案:虚拟仪器是借助于强大的计算机软件和硬件环境的支持,建立虚拟的测试仪器面板,完成仪器的控制、数…

UE5学习笔记 FPS游戏制作34 触发器切换关卡

文章目录 搭建关卡制作触发器传送门显示加载界面 搭建关卡 首先搭建两个关卡,每个关卡里至少要有一个角色 制作触发器传送门 1 新建一个蓝图,父类为actor,命名为portal(传送门) 2 为portal添加一个staticMesh&#…

智谱大模型(ChatGLM3)PyCharm的调试指南

前言 最近在看一本《ChatGLM3大模型本地化部署、应用开发和微调》,本文就是讨论ChatGLM3在本地的初步布设。(模型文件来自魔塔社区) 1、建立Pycharm工程 采用的Python版本为3.11 2、安装对应的包 2.1、安装modelscope包 pip install model…

新专栏预告 《AI大模型应知应会短平快系列100篇》 - 整体规划设计

做个预告,为系统化梳理AI大模型的发展脉络,并为普及AI素养做一点贡献,特给自己制定了一个小目标,3个月内完成交稿。 AI大模型应知应会短平快系列100篇 - 整体规划设计 一、基础知识模块(20篇) 1.1 大模型…

SwanLab Slack通知插件:让AI训练状态同步更及时

在AI模型训练的过程中,开发者常常面临一个难题:如何及时跟踪训练状态?无论是实验超参数的调整、关键指标的变化,还是意外中断的告警,传统的监控方式往往依赖手动刷新日志或反复检查终端,这不仅效率低下&…

操作系统高频(六)linux内核

操作系统高频(六)linux内核 1.内核态,用户态的区别⭐⭐⭐ 内核态和用户态的区别主要在于权限和安全性。 权限:内核态拥有最高的权限,可以访问和执行所有的系统指令和资源,而用户态的权限相对较低&#x…

位置编码汇总 # 持续更新

看了那么多还没有讲特别好的,GPT老师讲的不错关于三角函数编码。 一、 手撕transformer常用三角位置编码 GPT说:“低维度的编码(例如,第一个维度)可以捕捉到大的位置差异,而高维度的编码则可以捕捉到小的细…

DaVinci Resolve19.1下载:达芬奇调色中文版+安装步骤

如大家所了解的,DaVinci Resolve中文名为达芬奇,是一款专业视频编辑与调色软件。它最初以调色功能闻名,但经过多年发展,已扩展为一套完整的后期制作解决方案,涵盖了剪辑、视觉特效、动态图形和音频后期制作等多个模块。…

LINUX 1

快照 克隆:关机状态下:长时间备份 uname 操作系统 -a 获取所有信息 绝对路径 相对路径 -a -l 列表形式查看 -h 查看版本 相对路径这个还没太搞懂 LS -L LL 简写 显示当前路径 pwd cd 切换到目录 clear 清屏 reboot 重启操作系统

高效定位 Go 应用问题:Go 可观测性功能深度解析

作者:古琦 背景 自 2024 年 6 月 26 日,阿里云 ARMS 团队正式推出面向 Go 应用的可观测性监控功能以来,我们与程序语言及编译器团队携手并进,持续深耕技术优化与功能拓展。这一创新性的解决方案旨在为开发者提供更为全面、深入且…

【Windows】win10系统安装.NET Framework 3.5(包括.NET 2.0和3.0)失败 错误代码:0×80240438

一、.NET3.5(包括.NET 2.0和3.0)安装方式 1.1 联网安装(需要联网,能访问微软,简单,很可能会失败) 1.2 离线安装-救急用(需要操作系统iso镜像文件,复杂,成功几率大) 二、联网安装 通过【控制面板】→【程序】→【程序和功能】→【启用或关闭Windows功能】 下载过程…

蓝桥杯训练士兵

思路:其实每次就是要比较士兵单独训练的价格之和SUM与S的大小,如果 SUM大,那么就减去所有士兵都要训练的次数的最小值,SUM再更新一下,继续比较。 先对士兵的次数按从小到大的次序排序(很重要)&…

循环神经网络 - 简单循环网络

本文我们来学习和了解简单循环网络(Simple Recurrent Network,SRN), SRN是一个非常简单的循环神经网络,只有一个隐藏层的神经网络。 简单循环神经网络,也常称为 Elman 网络,是最基本的循环神经网络(RNN&am…

Linux 企业项目服务器组建(附脚本)

一、架构概述​ 本方案旨在为企业搭建一套高效、安全的 Linux 服务器架构,包含一台 DNS 服务器,以及一台同时承载 FTP 和 Samba 服务的服务器,满足公司在域名解析、图片存储与共享、文件共享等方面的业务需求。​ 二、服务器部署​ DNS 服…

⼆、Kafka客户端消息流转流程

这⼀章节将重点介绍Kafka的HighLevel API使⽤,并通过这些API,构建起Kafka整个消息发送以及消费的主线流程。 Kafka提供了两套客户端API,HighLevel API和LowLevel API。 HighLevel API封装了kafka的运⾏细节,使⽤起来⽐较简单&…