Spring Boot+JWT+Vue 实现前后端分离登录认证
参考 B 站楠哥教你学 Java的30分钟学会 Spring Boot + JWT + Vue视频 JWT介绍什么是 JWT？JSON Web Token，通过数字签名的方式，以 JSON 对象为载体，在不同的服务终端之间安全的传输信息。 JWT 有什么用？JWT 最常见的场景就是授权认证，一旦用户登录，后续每个请求都将包含JWT，系统在每次处理用户请求的之前，都要先进行 JWT 安全校验，通过之后再进行处理。 JWT 的组成JWT 由 3 部分组成，用.拼接 1eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6IlRvbSIsInJvbGUiOiJhZG1pbiIsInN1YiI6ImFkbWluLXRlc3QiLCJleHAiOjE2MjMyMjM2NzUsImp0aSI6ImQ2MTJjZjcxLWI5ZmUtNGMwNy04MzQwLTViOWViZmMyNjExNyJ9.FOS9Y7rYNdc2AOidnSPrgg2XTYePU0yGZ598h2gtabE 这三部分分别是： Header 1234{ & ...
前后端分离
前后端分离就是将⼀个应⽤的前端代码和后端代码分开写，为什么要这样做？ 如果不使⽤前后端分离的⽅式，会有哪些问题？ 传统的 Java Web 开发中，前端使⽤ JSP 开发，JSP 不是由后端开发者来独⽴完成的。 前端 👉 HTML 静态⻚⾯ ---> 后端 👉 JSP 这种开发⽅式效率极低，可以使⽤前后端分离的⽅式进⾏开发，就可以完美地解决这⼀问题。 前端只需要独⽴编写客户端代码，后端也只需要独⽴编写服务端代码提供数据接⼝即可。 前端通过 Ajax 请求来访问后端的数据接⼝，将 Model 展示到 View 中即可。 前后端开发者只需要提前约定好接⼝⽂档（URL、参数、数据类型...），然后分别独⽴开发即可，前端 可以造假数据进⾏测试，完全不需要依赖于后端，最后完成前后端集成即可，真正实现了前后端应⽤的 解耦合，极⼤地提升了开发效率。 单体 👉 前端应⽤ + 后端应⽤ 前端应⽤：负责数据展示和⽤户交互。 后端应⽤：负责提供数据处理接⼝。 前端 HTML 👉 Ajax 👉 RESTful 后端数据接⼝。 传统的单体应⽤ 前后端分离的结构 前后端分离就是将⼀个单体应 ...
Butterfly主题侧边小组件——土味情话
前言：逛了逛Eurkon的博客，看着那微博热搜侧边栏突然灵机一动，本想整一个随机笑话侧边小组件，奈何找免费 API 时先看到了土味情话，不错，很符合我的胃口，于是有了以下教程 预览效果 教程 新建<BlogRoot>\themes\butterfly\source\js\custom\cheesy_pick-up_lines.js 123456789101112131415function cheesy_pick_up_lines() { let html = ""; for (let i = 0; i < 3; i++) { fetch("https://api.vvhan.com/api/love") .then((data) => data.text()) .then((data) => { html += &qu ...
网页广告多，太多干扰内容怎么办？
有时候搜索一些问题，很多点进去的网站都看起来眼花缭乱，关键是里面穿插着各种小广告，二维码，跳转链接，但你又不是站长，也没有办法去改别人的网站，那怎么办呢？ 友友们可能会想到可以安装去除广告的插件，说到这我分享一篇我看过的文章：Heomagic 08 | Chrome 网页去广告插件推荐，大家有兴趣可以试试该文章推荐的插件。如果友友们有更好用的插件麻烦留言告诉俺。 本篇就说说我最近发现的小妙招，话说某天我突然在 Cent 浏览器设置中看到了样式文件按钮，于是象征性的写了一些 CSS 代码并把文件上传进去，发现果然能控制网页的样式，我猜这个设置的最初目的是想让有能力的人自定义更改一些常用页面的外观，比如给搜索页面换个自己喜欢的背景什么的。但这些我都不感冒，我只想通过 CSS 代码去掉一些常用网页的广告，说白了就是利用类名或 ID 定位到组件，再写个 display: none;就完事。 代码示例： 123<Custom > { display: none;} 如果对 CSS 不了解，建议稍微学一下噢~ 优点：能自定义屏蔽内容，不一定是广告，也可以是其它 ...
Vue前端开发笔记
根据 B 站黑马程序员视频所撰写的笔记 Vue 基础 JavaScript 框架 简化 Dom 操作 响应式数据驱动 提示：以下代码都要导入 Vue.js 文件 12<!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://npm.elemecdn.com/vue/dist/vue.js"></script> el: 挂载点Vue 会管理 el 选项命中的元素及其内部的后代元素，建议使 id 选择器，可以使用其他双标签，但不能使用 html 和 body data: 数据对象123456789<div id="app">{{message}}</div><script> var app = new Vue({ el: "#app", data: { message: "Tsuki", } ...
那些实用且易忘的CSS小技巧
去年跟着 B 站 Pink 老师学过 CSS 基本语法，但平时美化博客时还是会遇到一些 CSS 相关问题，所以再此记录下。 让 a 标签铺满整个 div 有时候希望点击 div 同时跳转到对应链接，奈何 a 的大小取决于文本大小，但可使用以下方法来铺满整个父盒子，前提是 div 里只有 a 标签一个内容。 123a { display: block;} 文字颜色渐变background: -webkit-linear-gradient(...)为文本元素提供渐变背景。 webkit-text-fill-color: transparent使用透明颜色填充文本。 webkit-background-clip: text用文本剪辑背景，用渐变背景作为颜色填充文本。 12345<Custom > { background-image: linear-gradient(45deg, #8a7cfb 50%, #633e9c); -webkit-background-clip: text; -webkit-text-fill-colo ...
控制台输出字符画-程序员的浪漫
不知道友友们逛 B 站时有没有注意到它控制台输出的字符画（正经人逛 B 站谁会按 F12），看完我瞬间嘴角上扬数秒。字符画如彩蛋般的出现在眼前，还能丰富网站的维度，一个优秀的网站也许在某个不起眼的角落也能带给你惊喜。 食用教程前，建议先看一下《教程&笔记常量申明》，且所有修改对缩进格式等有严格要求。本教程主要针对 Butterfly 主题博客网站，若是其它主题或非博客类网站，可以借鉴下思路，很简单。 话不多说，let's get started! 教程 新建 JS 文件<Custom>.js，代码模板如下，懂 JS 的友友可以自定义改。 12345678910111213if (window.console) { Function.prototype.makeMulti = function () { let l = new String(this); l = l.substring(l.indexOf("/*") + 3, l.lastIndexOf("*/")); ...
Butterfly主题外挂标签（个人常用）
参考教程：糖果屋教程贴https://akilar.top/posts/615e2dec/ 引用 Noteno-icon 样式语法 👇 12345678910111213{% note no-icon %}{% endnote %}{% note blue no-icon %}{% endnote %}{% note pink no-icon %}{% endnote %}{% note red no-icon %}{% endnote %}{% note orange no-icon %}{% endnote %}{% note purple no-icon %}{% endnote %}{% note green no-icon %}{% endnote %} 对应效果 👇 蝉鸣是窗外渐渐倒数的钟 ...
Butterfly主题美化魔改集锦
本着避免重复造轮子的原则，该教程记录了博主部分对网站的原创自定义美化魔改，同时也包括 f12 扒取其他优秀博主样式的部分。 食用教程前，建议先看一下《教程&笔记常量申明》，且所有修改对缩进格式等有严格要求。 点击查看更新日志 更新日志2022-3-16侧边小组件——土味情话2022-3-08光标框选文字颜色2021-8-12侧边 Sticky 组件随页面上下滚动而微移的 Bug2021-6-14首页置顶文章轮播组件2021-6-03更改文章 h1~6 级标题前 icon 图标2021-4-30右下角返回顶部按钮2021-4-28深浅模式下分别使用不同网站背景首页公告栏轮播组件 深浅模式下分别使用不同网站背景 修改<BlogRoot>\themes\butterfly\_config.yml，其中background_dark参数为深色模式下的图片地址。 12345# Website Background (设置网站背景)# can set it ...
Hexo和Git相关问题记录合集
记录了从博主19年搭建博客以来，使用过程中遇到和Hexo、Git相关问题的解决方案。
如何自定义美化魔改？
超长前言： 友友们看了那么多教程或许已经有了自己 DIY 的想法，开始对其他博主美化魔改教程有了自己的认知和理解，或者想按照自己的审美来改，但却又无从下手，没有思绪，本篇就给博客新人们分享下经验思路，涨涨姿势，早日脱离美化魔改的苦海。（本篇仅针对Butterfly 主题，其它主题的友友们仅供参考噢） 美化魔改虽说比较费时费力，但能看到最终效果还是能令人开心一整天。但过度沉迷于美化魔改之中，有些违背搭建博客的初衷，其实博客是用来分享、记录知识的一个载体，在美化魔改上所花的时间应远少于在文章上的。可是不经历乘风破浪怎能返璞归真？传统功夫点到为止，咋们开始吧！ 美化魔改是什么？美化指的是使博客外观更加好看，一般是对 css、styl 样式文件的更改。 魔改指的是对博客源码的更改，通常会更改布局框架的结构，其中我认为魔改包含了美化。 两者的区别：美化通常不用改源码，只需更改自定义插入的样式代码，而魔改则需要更改源码。 魔改的缺点是主题升级后，魔改的地方都会被更新后的代码给覆盖，重新魔改一遍很麻烦，所以我建议升级的时候可以按照 GitHub 上源码的版本对比功能来一点一点更新代码。 自定 ...
Butterfly博客二创集锦
前言： 本篇是使用其他优秀博主教程时延申出来的 idea。目前有很多 Butterfly 主题美化魔改教程，此篇就不重复造轮子。本篇将记录值得的二创瞬间。建议先看教程原贴，因为本篇是原教程的拓展延伸。 点击查看更新日志 更新日志2021-5-26404 页面魔改（适配 butterfly 3.7.7 版本）2021-5-9404 页面魔改2021-4-17svg 图标旋转效果2021-4-16横版导航栏二级菜单偏移量修正2021-4-11社交图标使用多色 svg2021-4-10Gitcalendar 样式微调哔哔 bber 发布时间格式 食用教程前，建议先看一下《教程&笔记常量申明》，且所有修改对缩进格式等有严格要求。 Gitcalendar 样式微调 预览效果 教程原贴https://akilar.top/posts/1f9c68 ...
