油猴(篡改猴)学习记录
第一个Hello World 注意点:默认只匹配了http网站,如果需要https网站,需要自己添加@match https://*/* 代码如下 这样子访问任意网站就可以输出Hello World 12345678910111213141516// ==UserScript==// @name 第一个脚本// @namespace http://tampermonkey.net/// @version 0.1// @description try to take over the world!// @author You// @match http://*/*// @match https://*/*// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==// @grant none// ==/UserScript==(function() { & ...
antd3和dva-自定义组件初始化值的操作演示和自定义组件校验
前言 在antd3 (react)版和dva下,好像有的项目使用的是getFieldDecorator来获取表单的值的,现在就遇到了一个问题,getFieldDecorator针对antd自带的组件实现效果很好,除去一个form.item只能有一个getFieldDecorator的限制,其他都很好用,但是假如是自定义组件或者说在getFieldDecorator当中遇上了全选操作,就会有问题(目前我是这样子的) 演示代码地址: https://github.com/superBiuBiuMan/dva_antd3_component 演示效果 实现 实现的关键其实就是调用getFieldDecorator修饰过后自动向组件传递的onChange事情来传递值,如果需要初始化值操作,可以借助initialValue或者使用 setFieldsValue 来动态设置其他控件的值。 initialValue: 初始化值操作,但是如果传入的是一个变量,后期变量更新,组件收到的值也不会变化 比如通过initialValue传入了变量a,值为100,那么后面a的值变为了200,那么组 ...
tdesign的白天黑夜模式实现原理
以tdesign为例 我们看下源码 可以看到,tdesign是借助于:root选择器,并结合属性选择器来设置的,当html标签存在一个名叫theme-mode属性的时候,如果值为dark就使用白天的主题,否则就使用黑天的主题 我们切换下颜色,更改html当中的属性,可以看到下图的区别 12345678910111213<!DOCTYPE html><!-- 黑夜模式,设置 theme-mode="dark" --><html lang="en" theme-mode="dark"> ...</html><!-- 白天模式 设置 theme-mode="light"--><html lang="en" theme-mode="light"> ...</html>
前端div水平居中的几种实现方式
借助display布局 父元素开启display:flex布局,并设置justify-content:center主轴的空隙分布 因为是单行,所以使用align-items:center设置侧轴上的对其方式 1234567891011121314151617181920<body> <style> .a{ width: 200px; height: 200px; background-color: red; display: flex; justify-content: center; align-items: center; } .a .a1{ width: 50px; height: 50px; background-color: green; } </style> <div class="a"> <div class="a1&q ...
前端面试之手写call,apply,bind
了解下this的指向 普通函数当中的this指向window 对象身上的方法指向这个对象 箭头函数的this执行上层作用域下的this 手写call12345678910111213141516171819202122Function.prototype.myCall = function(context,...arg){ context = context!== undefined && context !== null ? Object(context) : window; let callFn = this;//获取call let symbolTemp = Symbol('临时');//临时存储 context[symbolTemp] = callFn; let result = context[symbolTemp](...arg); delete context[symbolTemp];//用后删除 console.log(context[symbolTemp]);//undefine return result;} ...
前端文字实现拼音标注
示例地址 https://github.com/superBiuBiuMan/duyi_study 使用ruby标签 使用ruby标签进行标注 1234<ruby> 汉 <rt>hàn</rt></ruby> 当遇到不兼容此标签的时候,可以添加一个rp标签,正确情况下是不显示rp标签的 123456<ruby>汉 <rp>(</rp> <rt>hàn</rt> <rp>)</rp></ruby> 使用拼音库 https://pinyin.js.org/ https://www.npmjs.com/package/pinyin 安装 1npm install pinyin@alpha --save 使用看官网 示例 12import pinyin from "pinyin/lib/pinyin-web";pinyin('你') 效果
知乎日报项目前端+后端-React18 + React-Router6 + React-redux + reduxtoolkit
地址 前端:https://github.com/superBiuBiuMan/-zhuhu_daily 后端:https://github.com/superBiuBiuMan/zhihu-daily-admin 学习地址:Bilibili https://www.bilibili.com/video/BV1wx4y157Gu 介绍 技术栈使用React18 + React-Router6 + React-redux + redux/toolkit + craco(重写配置) + ( amfe-flexible + postcss-pxtorem 达到适配 ) + less keep-alive效果没实现,找了几个库效果都不理想,就没去弄了 运行前端运行 1.安装依赖(node什么的自行安装) 1yarn install 2.运行 1npm run start 后端运行 1.安装依赖(node什么的自行安装) 123yarn install或者npm install 2.运行 1node server.js 图片展示首页 详情页 ...
知乎日报项目学习笔记
项目完工 前端源码地址:https://github.com/superBiuBiuMan/-zhuhu_daily 后端源码地址:https://github.com/superBiuBiuMan/zhihu-daily-admin 学习地址:Bilibili https://www.bilibili.com/video/BV1wx4y157Gu 初始化项目ts方式(此项目以ts运行)1create-react-app zhihu-daily --template typescript 没有安装create-react-app的同学，请使用npx命令 1npx create-react-app zhihu-daily --template typescript js方式 删除后面的typescript即可 Rem响应式处理手动处理 我们制作移动端网页的时候,需要考虑兼容性,比如我们UI给出的原型图是以iPhone5/6或者其他手机尺寸为参考的,这里就设置设计稿的宽度为375px,同时为了方便计算,我们设置1rem = 100px 然后我们测量UI图的尺寸的时候,就* ...
微信小程序渐进式骨架屏的写法
前置 代码片段 @点我快速跳转 手动复制跳转:https://developers.weixin.qq.com/s/WOktHDm77mGj 知道hidden属性 为true显示,为false隐藏,类似于display:none 1234<view> <text hidden="{{true}}">我会被隐藏</text> <text hidden="{{false}}">我会被显示</text></view> 第一步:写好基本的html 写好的静态页面 分为三个部分,上,中,下 代码 wxml 1234567891011121314151617181920212223242526272829303132<view style="display: flex;flex-direction: column;height: 100vh;"> ...
Ubuntu系统安装基本Nginx和docker和一些其他的软件的基本操作
前言 系统使用Ubuntu20.4 华为云 安装nginx(如果需要NginxWebUI,就不这样子安装)12345#安装apt install nginx#查看版本nginx -v 安装Nginx Proxy Manager 官网https://nginxproxymanager.com/ docker-compuse部署 123456789101112version: '3.8'services: app: image: 'jc21/nginx-proxy-manager:latest' restart: unless-stopped ports: - '80:80' - '81:81' - '443:443' volumes: - ./data:/data - ./letsencrypt:/etc/letsencrypt 登录http://127.0.0.1:81 默认用户名和密码 12Em ...
