- 博客(52)
- 收藏
- 关注
RSS订阅原创 一个简单的网址导航，却有上万用户？
其实浏览器有很多地方可以记录网址，浏览器记录，书签，但是这些我都不喜欢用，我浏览器多，每个浏览器都有不同的书签感觉不好用，还是一个网址保存的好，一个号只要是浏览器都可以使用保存的网址，非常方便。首先，你得有一个毒蘑菇的账号，你可以通过简单的字符串来创建一个账号，根本没有什么奇怪的号码邮箱验证，只需要一个字符串，然后你就可以尽情的定制你的毒蘑菇导航了，自定义主页，背景，甚至是CSS样式。今天个大家介绍如何使用毒蘑菇导航，导航的目的不只是提供网址给大家点击查看，还有一个很重要的功能，那就是记录网址。
2024-03-08 10:43:16
199
2
原创 可以搜索网址的毒蘑菇导航，你们都别用，我偷偷用。
随心所欲自定义主题，自定义背景，甚至你还可以在这里写代码，用代码定义自己的风格。只有你想不到的，没有它做不到的。没有烦人的手机号，邮箱注册，你可以随便输个字符就能当帐号啦，只要你有浏览器，就能任意查看自己的网址。各种配置让您如鱼得水，彰显自己的个性，哈哈，词不够用了，反正墙裂推荐。给看客老爷们上图片！
2024-03-04 10:56:50
178
原创 做了个很牛的网站，可以搜索网站的网站到底有多好用？
毒蘑菇搜索，顾名思义呢，搜索的功能比较好用，大家上网的时候总是需要记住网站的地址，即使你知道网站的名称，也得跳转到百度然后在搜索，有时候百度上那么多广告，点错了又浪费时间。可自定义背景图片，没有花里呼哨的功能，每一个小细节都精心打磨，只能说，各位看客老爷，万福金安呐。界面清新好用，自定义强。
2024-02-26 14:02:52
194
原创 摸鱼摸出来的vue3+element-plus毒蘑菇后台管理：新标签页的实现。
在浏览器中，点击标签页右边的加号可以新加一个标签页，所以，在毒蘑菇后台管理（简称毒蘑菇儿）中也可以这样操作。点击标签页右边的按钮就可以打开一个新标签页了，可以打开多个，互不冲突，在新标签页中可以搜索你想要打开的页面，点击后会将该标签页替换成你点击后的页面（跟浏览器操作一致）。点击正上方的搜索框或者alt+s同样也能打开新标签页。新标签页的页面权限需要在菜单权限数据源中配置，也可以内置几条数据固定在权限列表中不做修改，由用户和开发者决定。
2023-12-29 10:02:42
712
2
原创 一个人全干！之后台管理中的搜索区域的展开收缩组件。
而且怪的是他还需要一些部分不可收缩，不需要的地方才收缩。使用v-if来解决吧又不咋美观，我们还需要一个简单的动画效果。我们先写一个组件，直接上代码。后台管理系统中大多数都有列表的搜索，那么用户的需求又需要必要时收缩搜索区域，需要时再展开。是不是非常简单呢，我们可以指定一个元素使收缩的时候只能收缩到相应位置就行了，完美解决需求。这样我们就有了一个可伸缩的容器组件，只需要把相应元素放在这个组件中就行了。
2023-12-13 15:07:38
196
原创 我一人全干！之vue3后台管理中的大屏展示。
大屏，顾名思义，就是放在一个固定的屏幕上看的，即使你不做自适应，放在一个固定的屏幕上看也没啥问题，但是很多做大屏的是为了在PC端看，PC端屏幕又是参差不齐的，所以需要做自适应。好了，一个用transfor缩放的例子就完成了，使用rem的例子以后为大家讲解。使用大屏展示的时候有很多种场景，众多场景都是为了实现大屏自适应。
2023-12-06 17:19:43
1066
9
原创 我一人全干！之二，vue3后台管理系统树形目录的实现。
因为此组件不是树形结构的，所以需要封装成系统需要的树形结构组件。可以使用vue的递归组件。因为使用的是element-plus的ui库，所以首选el-menu组件，一个完整的后台管理系统需要一个树形结构的目录，方便用户切换页面。其中子组件MenuItem.vue代码如下。这样就可以实现一个树形结构的系统目录了。menu.vue代码如下。
2023-12-06 17:00:47
411
1
原创 我一人全干！之vue3+vite+element-plus后台管理（标签页组件）
这里我们使用了el-scrollbar组件来管理滚动容器，SvgIcon来管理icon的展示，vuedraggable来管理拖拽排序。标签页数组可记录已打开的数组，还能定义什么页面需要缓存，是一个重要的功能呢。组件核心思想：该组件使用外部数据源保证组件灵活性，自身集合多种操作但不处理，抛出给外部处理。activeSign：当前活动的标签的sign字符串，每个标签是一个对象，对象有sign唯一标识属性。一个后台管理常常需要一个标签页来管理已经打开的页面，这里我们单独写一个组件来展示标签页数组。
2023-11-27 10:38:24
430
原创 vue3+vite实现一个后台管理框架，毒蘑菇后台管理。
写后台管理的项目写了很多个了，虽说用的别人的模板，自己专注于自己的业务，保证自己的业务不出错就行了，但是自定义配置又不好去配置，大家用的模板都差不多，用模板自带的业务功能呢后台又得是模板自带的，或者要兼容模板的数据格式，我就想要一个架子模板，其他业务都是我自己来，那么就是这个毒蘑菇 - 管理啦。
2023-11-01 10:12:33
507
原创 使用vue3从零开始手撸一个后台管理架子。代码开源
包含后端服务，前端。前端采用vue3，vite，element-plus，axios，pinia，storages-js，各种小工具库啥的，不采用ts。后端部分还没开始搭建。
2023-10-25 17:42:59
273
1
原创 给网站引入各大搜索引擎的关键字提示，白给的接口薅他羊毛
可以配置属于是想选哪个选哪个，谁提示不爽就不用它，我可以用着bing的搜索引擎却使用的360的提示词，哈哈哈。因为网站是个导航网站，有一个搜索框，用户搜索时需要像百度一样有个搜索提示关键词列表。之前只是用百度，现在给增加了好几个，想换那个就换那个了，直接上图片。下面把使用的方法例子写一个。
2023-09-28 16:11:41
96
原创 写几个获取搜索引擎提示关键词列表的方法，方便以后使用
当你在搜索引擎中输入字符的时候，会有一个下拉框显示一些和关键词列表，用来提示你想搜啥。直接上代码/*** 获取各大搜索引擎的关键字列表*//** 获取随机小写字母 */i < number;i++) {/** 获取百度关键词列表 *///缓存列表return;/** 创建一个唯一标识用于接受数据，防止数据对应不齐 */${3/*** 获取各大搜索引擎的关键字列表*/ /** 获取随机小写字母 */ function getRandomLetters(number) {
2023-09-27 13:40:33
1255
原创 记录一下浏览器缩放和移动端缩放的区别，其实两者是有很大的不同的，之前一直搞不明白。
浏览器的话放大缩小会导致元素排列发生变化，因为设置固定宽度和百分比宽度的元素在某一分辨率下长的差不多，分辨率一变就大变样了，而移动端的话放大缩小就对网页元素的排列没影响了，只是把所有内容都放大了嘛。看下移动端像刚才的设置，移动端放大缩小其实分辨率是没有改变的，页面加载后它就设置好了视口分辨率，放大缩小只是将该视口进行像放大镜似的放大缩小，放大后被遮挡的部分就可以左右滑动来浏览了。浏览器缩放和移动端缩放是两种不同的概念，它们涉及到用户在不同设备上改变网页内容大小的方式。所以分辨率此时是变了的。
2023-09-20 11:44:35
436
原创 element-ui的el-dialog，简单的封装。
我写vue的时候奉行的都是数据驱动，像刚才那种写法没有问题，也更灵活，反正都是数据驱动的，即使错误了也只是某些地方没正确处理数据而已。有些封装不仅仅是模块分离，还有代码分离，反正就是一句话，代码是先写给人看的，然后才是机器。我奉行的封装是必要才封装，不然是不会去封装的。一个很简单的例子，不用创建多个变量来控制显示以及标题和各种杂七杂八的状态，全部由外部指定，再由。使用el-dialog很多都是按照文档的例子，用一个变量控制是否显示，再来一个变量控制标题。所以封装也需要保持这些优点，灵活可控。
2023-08-14 11:22:48
942
原创 完美解决vue3 keep-alive多个路由使用同一个组件的缓存问题
为什么要这么写，因为主要原因就是改个name的嘛，component.type放的是该组件对象，不能直接改，两个component.type所指向的对象是同一个，所以用一个新对象来。以为解决了，结果报错，报啥错就不说了，我觉得应该是vue用那个弱引用map把组件对象当作key，存了一个其他数据，对象变了就取不到该数据了。其中 visitedViewPaths 是你自己的需要缓存的name列表，现在组件名字由你控制了，就已经解决了。以为没法解决了，结果百度到了一个方法完美解决。总算是解决了这个疑难问题哇。
2023-05-26 16:46:38
3071
9
原创 毒蘑菇变量管理，前端变量管理。
我公司需要使用地图，需要定义几个地图的key，key变了就需要重新部署，也可以后端提供一个接口，我觉得没必要，有人可能会觉得这样不安全，这样key不就暴露了吗，我想说的是前端没有绝对的安全，key只要在前端就会被找出来，存到我们网站js里和您自己的js里完全没区别。不一定是在线网站，您写的html本地页面也可以使用，比如说您给家人写了个导航级别的小网站好让家人方便浏览网页，您去上班了却又觉得页面需要改一下，使用本网站吧，让你不用服务器也能修改本地网页。
2023-01-22 16:08:53
97
原创 vue3异步组件怎么获取ref，获取组件实例？曲线救国的方式。
目前的思路是把defineAsyncComponent包装一层，获取import后的promise就行。
2022-10-12 15:03:46
1329
原创 js事件委托子元素层级多级的情况。
看了很多文章，事件委托的做法都是只有一级子元素 <ul id="p"> <li data-index="1"> 1 </li> <li>2</li> <li>3</li> <li>4</li> </ul>这样直接判断事件的target是否是li标签就行了，但很多情况都不是这样的。万一我的li标签里还
2022-03-29 17:33:30
978
原创 vue的一个简单的树形结构展示组件
效果图源码<template><div class="cp_container" :style="{ '--right-border':isLeft?'blok':'none', '--left-border':isRight?'blok':'none', '--center-border':(!isRight && !isLeft)?'blok':'none', '--contain
2021-08-09 16:36:41
1067
原创 vue滑动切换tab组件，鼠标按住滑动切换，不到200行代码，超级轻量。
因为自己的小站首页需要一个可以滑动切换的显示内容的功能，本来是用的swiper，但是坑，BUG实在是太多了，实在是搞不明白了，就这么个小功能还是决定自己写一个组件。直接贴代码，基本都含有注释<template><div class="touch_tab_container" ref="TabContainerEl" :style="{ height:height+'px', }" @touchmove="(e)=>{
2021-08-05 14:35:58
637
转载 storagex-js 1.4.1文档
storagex-js 1.4.1首先需要安装引入 storagex-js//使用npm安装npm install storagex-js//导入 需要什么就导入什么 所有方法皆是同步方法import { removeStorageItem, storageX, StorageX, localStorageX, LocalStorageX, sessionStorageX, SessionStorageX, uniStorageX.
2021-05-27 10:40:53
121
原创 解决vue-router跳转后元素内嵌滚动条自动回到顶部的问题。
该路由已经使用了缓存的前提下<keep-alive> <router-view></router-view></keep-alive>当页面跳转，点击返回按钮后发现之前页面里的一个列表元素的滚动条自动回到顶部了，因为该元素设置了固定的宽高并且css设置overflow: scroll; 这样的话，滚动条不是页面级别的，并没有被记录下来，但是该组件又没有发生改变，所以封装个组件记录滚动条位置，页面发生改变就设置会以前的位置就行了。自定义组件.
2021-05-25 10:04:18
1276
原创 vue-router使用keep-alive动态缓存页面。
首先，在配置router的地方配置meta。const routes = [ { path: '/', //首页 name: 'index', component: Index, meta: { title: '首页', myKeepAlive:true, //表示该组件缓存 }, },]然后在含有router的路由出口文件中<template&
2021-05-25 10:03:28
565
原创 StorageX，一个前端对象化存储的最简单的工具。
StorageX 1.3，对象化操作本地数据，超好用哟！。//使用npm安装npm install storagex-js//导入import {localStorageX,sessionStorageX} from "storagex-js";然后就可以使用了，使用方法只有两种1：只是对键值进行操作（不会深度修改）//对对象属性进行修改后本地储存相应更新const localStorage= localStorageX();localStorage.a = {b:1}; //键 .
2021-04-19 20:01:53
253
原创 毒蘑菇导航，感觉不像是毒蘑菇，更像是个树莓了。
毒蘑菇导航一个很好用很特别的导航 毒蘑菇导航毒蘑菇导航，毒蘑菇搜索新加了导航的功能。注册了毒蘑菇搜索账号，会根据自己添加的网站生成一个导航，每个人都可以使用，但是只允许用户本人进行修改。也就是说，只要访问 https://search.dumogu.top/navigate/123456 这个链接就可以看到导航了，那个123456表示的是该导航的用户账号为123456，以后毒蘑菇导航会生成很多相应的导航（跟站搜搜差不多），会有免费视频导航，程序员导航，二次元导航，优秀的个人导航也可以加到推荐导航中
2021-04-13 20:38:41
1425
1
原创 storageX 1.1，细节和性能优化，用起来更加得心应手。
storageX 1.1 ，用法和之前差不多，只是有一点区别。性能等方面进行了优化。修复BUG1：储存的是数组时，取出来重新赋值会丢失map,filter等自带的方法。原因：json化数据时触发了代理的set属性，会调用clone方法，因为当时考虑到数据的储存简单clone一下就行，现在删除了clone。bug解决。2：直接调用localStorageX()生成对象从而控制键值，以及更深层次的值，我认为这样不好。解决：取消深层代理。使用方法。1：只是对键值进行操作const localSto.
2021-03-30 10:41:49
183
原创 sessionStorageX，js本地储存对象化，操作简单，结合vuex可以更好的数据持久化。
js源码文件（目前只有操作sessionStorage的，其他的照猫画虎就行）function stringToObject(value) { try { return JSON.parse(value) } catch(e) { return value }}function deepProxy(target, setFn) { for (let index in target) { if (target[index] instanceof Object) { target
2021-03-24 15:42:37
190
原创 js从开始位置滚动到结束位置，固定时间下匀速滚动和变速滚动。
从开始位置滚动到结束位置，距离固定已知，时间固定已知，那么就只是一个简单的两个方程式，一个斜率固定（直线方程），一个斜率不固定（一元二次方程，抛物线）。斜率也就是速度斜率固定，也就是速度固定//从开始的位置移动到结束的位置（匀速）function startRollToEnd(end=0,time = 100){ let timer; //获取当前毫秒数 let startTime = +new Date(); let start = document.document
2021-03-19 10:59:16
619
原创 毒蘑菇搜索，一个更简单更好用的主页。
经过2周多的时间，利用闲暇时间，周六周日加班加点的写代码，毒蘑菇搜索终于新鲜出炉了，跟站搜搜一样可以根据网站名搜索网站并且一键直达，相当方便呐！毒蘑菇搜索操作说明
2021-01-26 14:50:52
2464
1
原创 用vue2写的登陆页面如何阻止浏览器记住密码，自动填充
网上看了很多方法，基本就是动态改变input的类型。只要类型不是password的input输入框就行了嘛，然后实现输入后把明文变成特殊符号不就行了吗？参考源码
2020-12-28 14:42:48
816
原创 关于JavaScript前端图片懒加载最简单的两种方法
图片懒加载的实现思路：当后端返回给前端图片的链接后，将正确的链接放在img标签的一个隐藏属性里，当img标签可见时赋予正确的属性，这时才开始加载图片。当所展示的列表数据过多时，这种方法很有效。方法一：把正确的链接设置到一个隐藏的属性里，可见时转换当元素可见时，将 data-src 里的数据写到 src 里(可利用 DataSet API 实现)<img data-src="dumogu.jpg">img.src = img.datset.src;判断元素是否可见也有很多解决方法
2020-12-28 14:26:39
239
原创 vue2自定义密码输入框组件，防止浏览器自动填充以及记住密码
做后台管理系统时，登陆后浏览器会弹框提示是否记住密码，而且它记住密码后下次输密码会自动填充，很烦，这里做一个密码输入框的组件，防止浏览器记住密码因为浏览器会对带有text="password"的input进行记住密码，而这里自定义的input不会带有这个属性，而是把输入的密码转换为特殊字符，所以可以解决这个问题。第一步，创建一个PwInput.vue的文件当作组件，里面代码如下<template> <!-- 这里使用了elemntUI的类名，如果没有安装elmentUI则
2020-12-24 17:06:29
1235
1
原创 Python FastAPI上传文件至七牛云
最近需要给博客添加上传图片的功能，之前有图片上传的，上传主题图片的，考虑到博客的话图片太多就不存到服务器了，存到七牛云上比较好，相关的图片服务也比较多。我的上传流程是：前端上传图片至服务器，服务器在上传到七牛云。我的后台使用的是Python的框架 FastApi。注册七牛云账号这些就不用多说了吧 七牛云官网第一步：安装七牛云SDK (使用pip安装)pip install qiniu第二步：创建 UploadQiNiu.py 文件（文件名随意），里面的代码如下#引入相关类及函数from..
2020-12-24 09:44:36
610
3
原创 谷歌浏览器里部分字体变模糊的问题。
之前也说过这个问题，在一篇文字上阅读短文时发现有点吃力，但是看其他的网站就有瞬间变清晰了的感觉，仔细对比原来是字体在谷歌浏览器里变模糊了，很奇怪，实在不清楚是什么原因。没模糊时是这样的（电脑上截图那个颜色选择器就没了，就只好照了个照片）模糊后是这样的根据我一段一段删除CSS后才发现删除了这句css后backdrop-filter: blur(3px);会变得正常不在模糊，以前解决时是删除的position: sticky； top: 0；这两句，你说position: sticky； top: 0；
2020-12-22 09:41:41
1850
原创 python使用markdown库把markdown转html时关于代码块高亮时遇到的大坑
最近需要在python下把markdown转化为html，网上看使用markdown（一个python库，只是名字也叫markdown）的人很多于是就用了这个库，本来一切正常，在转化代码块时遇到了大坑。我首先是打开CMD，安装markdownpip install markdown然后这样使用import markdownextensions = [ #根据不同教程加上的扩展 'markdown.extensions.extra', 'markdown.extensions.co
2020-12-19 15:12:13
964
2
原创 js正则匹配markdown里的图片标签
其实前端后端需要将markdown文本转换为html文本都有相应的库，几句代码就ok，但有时我们又必须获取到markdown里的某个标签来进行相应的转换，有几种办法，可以从已经转换好的html文本里获取，还有的就是直接从markdown文本里获取，这里说的是第二种。1. 一个markdown里只有一个图片的情况const str = "asddsadasdasddasd"; //一段markdown文本，包含一个图片""let result = str.matc
2020-12-17 12:42:05
1778
1
原创 CSS字体容器高度比字体大，这是有字体行高的问题
在写css时，有时给字体大小设置为12px，可是文字所处的容器高度却比12px高，这是因为行高的问题，默认的行高一般都大于字体大小。解决办法如下：//给字体所在的容器添加如下cssline-height: 1; //1表示行高为字体大小的一倍，这样就行了推荐一个配色网站 毒蘑菇配色最后附上问题已解决小站 一篇文字...
2020-12-17 09:49:15
1066
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人