基于Vue和Element UI搭建的博客前端界面

项目地址演示地址前言之前我的个人博客系统是使用SpringBoot和thymeleaf模板引擎开发的，个人觉得还可以，最近突发奇想，何不借点时间，把博客重构一下，使用Vue作为前端，SpringBoot最为后端，前后端分离，继续夯实自己的实力。实现方法大概的思路是沿用大部分旧博客的后端逻辑，之前持久层是使用JPA，后面视具体情况而定，有可能换用MyBatis。前端使用Vue作为模板引擎，是当下很

耶鲁信

4103人浏览 · 2021-02-07 11:28:59

耶鲁信 · 2021-02-07 11:28:59 发布

项目地址

演示地址
 本人主页
 本人博客

前言

之前我的个人博客系统是使用SpringBoot和thymeleaf模板引擎开发的，个人觉得还可以，最近突发奇想，何不借点时间，把博客重构一下，使用Vue作为前端，SpringBoot最为后端，前后端分离，继续夯实自己的实力。

实现方法

大概的思路是沿用大部分旧博客的后端逻辑，之前持久层是使用JPA，后面视具体情况而定，有可能换用MyBatis。

前端使用Vue作为模板引擎，是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的，在国内十分流行，在这里也不得不崇拜一下尤大。

UI部分，鉴于个人能力太菜，😄，使用原生三件套做出来的界面实在是太丑，只好借助第三方UI框架，这里采用Element UI，原本想使用Bootstrap，但是在Vue框架的前提下，使用Element UI上手会容易得多，毕竟，ElementUI就是基于Vue 2.0开发的，文档也是比较齐全，但是使用该框架的过程，我也踩了一些坑，这些坑在官方文档中都是没有说明白的：

Backtop组件需要是父节点的第一个子节点。
Select选择器必须给其一个宽度，不然文字不显示
表格组件中如果想要实现单元格居中，需要给el-table-column组件一个属性align="center"

涉及到的项目

前端实现

前台

首页

友链

留言

文章详情

赞赏

底部

后台

登录界面

博客列表

编辑博客

分类管理

标签管理

评论管理

用户信息

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^