文章列表 - 第5页
所有文章的完整列表，按时间倒序排列 - 第5页
按官网文档一键配置按需引入总是无法生效，目测可能是激进式预设没有选babel的原因。故写此文详细记录折腾过程，望有效！
vue ui创建新项目
选择预设，bable，eslint，vuex，vue-router(历史模式)
vue ui安装element插件
选择配置
改动的内容
自动创建了
bable.config.js,并添加了内容。创建了`@/src/plugins/element.js,设置了按需引入
改写了
app.vue,添加了element按钮组件
运行测试
加载成功
Q&A
- 为什么需要bable来支持按需加载
如果不使用bable转码，那你按需引入会找不到该组件。这是由于bable在将组件库转码的过程中把element整个组件库编译成了各种独立的组件模块，进而实现按需加载的功能
- 如何添加需要的组件
使用vue ui添加后的组件会在plugins目录下创建element.js文件，然后在main.js中引入该文件。文件内容如下：
import Vue from "vue";
import { Button } from "element-ui";
Vue.use(Button);
这就是只引入Button的方法，如果要按需添加，只需要依葫芦画瓢即可！
安装
全局安装@vue/cli
yarn global add @vue/cli
检查是否安装成功(需重启更新环境变量)
vue --version
快速原型开发
新版本Vue中增加了该功能，方便快速进行单个Vue文件开发，需要先额外安装一个全局的扩展。
yarn global add @vue/cli-service-global
入手尝鲜
新建index.vue文件
<template>
<div>Hello Vue</div>
</template>
运行服务
vue serve index.vue
效果
创建项目
略
vue.config.js
在vue cli 3.x/4.x 中，使用vue.cofig.js来进行一些包括webpack的配置。比如我们可以想要一个控制台输出编译时间的配置，可以在如下设置
const moment = require('moment')
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = '三只蜜桔后台管理系统·商户版',
args[0].buildTime = moment().format('YYYY.MM.DD.HH.mm')
return args
})
}
}
亦或者，我们想要在生产环境禁用console.log
const moment = require('moment')
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = '三只蜜桔后台管理系统·商户版',
args[0].buildTime = moment().format('YYYY.MM.DD.HH.mm')
return args
})
config.optimization
.minimizer('terser')
.tap(args => {
Object.assign(args[0].terserOptions.compress, {
pure_funcs: ['console.log']
})
return args
})
},
productionSourceMap: false,
configureWebpack: {
output: {
filename: `${moment().format('YYYY.MM.DD.HH.mm')}.${process.env.NODE_ENV}.[name].js`,
chunkFilename: `${moment().format('YYYY.MM.DD.HH.mm')}.${process.env.NODE_ENV}.[name].js`
}
}
}
百度定义
DNS欺骗就是攻击者冒充域名服务器的一种欺骗行为。
百度原理
如果可以冒充域名服务器，然后把查询的IP地址设为攻击者的IP地址，这样的话，用户上网就只能看到攻击者的主页，而不是用户想要取得的网站的主页了，这就是DNS欺骗的基本原理。DNS欺骗其实并不是真的“黑掉”了对方的网站，而是冒名顶替、招摇撞骗罢了。
为什么会有DNS欺骗？
其实DNS欺骗不能叫欺骗，为什么这么说，因为dns解析采取就近原则，意思是说谁能先帮我解析我就听谁的。给你解析一个假的ip就是欺骗。例如本来www.baidu.com 对应ip是202.16.25.78 ，你在本地架设一个dns服务器将www.baidu.com 解析为192.168.100.2 , 这不就等于骗了别人吗。【1】
如何防护DNS欺骗？
360安全卫士号称可以，防护DNS欺骗
经实测：DNS防护并未防护成功，而局域网防护却可以找出攻击者IP，和伪装后的DNS服务器IP。但是却无法实际性的抵御DNS攻击。
被攻击后如何恢复？
改host文件。
指定DNS服务器。
开代理
如何发起攻击？
申明：以下目的只有一个就是学习技术，如果有人利用本文技术进行非法操作带来的后果都是操作者自己承担，和本文以及本文作者没有任何关系。
本文环境
win10 + vmware + kali-linux-2019-02
其实新一代的win10预览版升级的WSL2已经兼容了很多linux网络设备相关操作了，比如Nmap之类的。但是因为WSL的网络连接方式只有NAT模式，这样就不利于我测试了，所以我使用的是vmware虚拟机运行KALI，网络模式如下
1. 查看网络
ifconfig
由上图可以看到，有两个网络连接，一个eth0有线连接，一个lo无线设备。因为我装了外置网卡，所以虚拟机下有无线连接。
确保你已经连上你想要攻击的目标网络。
因为我使用的是有线连接，所以我接下来的操作都是在eth0上操作。
2. 修改DNS文件
vim /etc/ettercap/etter.dns
熟悉host文件的小伙伴一看就明白，这一条条都是DNS解析记录嘛。
我们在文件最后追加
* A 192.168.0.131
这句话的意思就是，将所有的域名都解析到IP地址为192.168.0.131的主机上。而这个是我的kali的本机ip。
3. 发起DNS欺骗
ettercap -Tq -i eth0 -M arp:remote -P dns_spoof /// ///
参数就不解释啦--help就都知道啦，我只讲思路。
如上图DNS欺骗就已经开始了。
4. 局域网断网攻击
因为上面我将所有的域名地址都解析到了，我的本机IP。而我本地却没有搭建任何web服务，这个时候如果用户访问网站都会出现如下图效果。
由于浏览器DNS缓存的问题，此方式可能短期内对近期访问过的网站不起作用。
为什么需要？
微信小程序里面页面与自定义组件的区别较大，而页面的可复用程度太低了。要么就是跳转页面，要么就是copy代码。如果我们要增加代码的可复用性，就可以借用Vue组件的思想，将页面改写为自定义组件。
结构对比
两者的视图文件，样式文件没有什么区别。主要区别最大的就是js文件，我们首先来看一下两者的结构。
page.js
page({
// 数据内容
data:{},
// 生命周期函数
onLoad(){},
// 一些自定义函数
someMethods(){}
})
componet.js
componet({
// 预设属性
properties: {},
// 数据内容
data: {},
//组件所在页面生命周期
pageLifetimes: {},
// 生命周期函数-挂载
attached: function() {
// 在组件实例进入页面节点树时执行
},
// 生命周期函数-卸载
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
// 自定义函数写结构里面
methods:{
someMethods(){}
}
})
我们可以看到，两者的基本相似，大同小异。所以改写起来就特别方便啦~
将page改为componet
适配生命周期函数，例如将页面onLoad()函数改写为组件的attached()函数
将自定义函数someMethods()写到Componet的methods里面
前言
由于各种终端屏幕风格，大小迥异，由此而生衍生出了自适应页面设计。如果我们需要在各种机型上显示的风格比例一致，而解决屏幕大小不同显示内容不同的问题的话，我们需要对各种屏幕比例做适配。本文就该问题分享一种可行性方案。
由于以前做的移动端页面大部分为小程序页面，小程序采用相对像素(rpx)实现响应式适配。故本文也采用类似思想(rem)。
1. rem是什么
在W3C官网上是这样描述rem的——“font size of the root element”
即相对根节点（html)的字体大小,那么解决方案的思路就立马来了。根据不同的屏幕大小，设置不同的html字体大小，这样其他使用rem单位的元素即会随之自适应的改变大小。
2. 计算根节点(html)字体大小
2.1 JS方案
思路就是使用js获取窗口宽度，然后根据宽度计算对应的font-size。根据一般常识，js为了不影响页面体验，应在文档末尾添加。但此处为了避免HTML渲染完成后，使用JS动态修改字体而造成的页面抖动问题。我们应该将该JS元素节点放置于header底部，并内联到html文档里面。例如
在Vue中直接修改template.html即可
<script type="text/javascript">
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if (!doc.addEventListener) {
return;
}
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
recalc()
})(document, window)
</script>
该代码段监听页面尺寸改变事件，根据对应窗口大小(clientWidth)除以一个基准(750),进而调整html的font-size。在本例下，375的屏幕中1rem=50px。
2.2 CSS方案
采用媒体查询，适配不同宽度，代码略。
Vue配置px自动转rem
postcss-plugin-px2rem介绍
A plugin for PostCSS that generates rem units from pixel units.
也就是说，使用该插件可以自动的将你写px单位转为rem单位，而且不用担心污染问题，因为可以设置选择黑名单。
安装postcss-plugin-px2rem
yarn add postcss-plugin-px2rem
配置
待补充
前言
相信小伙伴们对广告是又爱又恨，一方面不想接受广告的荼毒，另一方面也想接点广告赚点流量收益。由此而来衍生出了两个技术，屏蔽广告与防屏蔽广告。
屏蔽广告
防屏蔽
原理
我们要想做到网站广告不被人屏蔽，首先就要理解屏蔽广告的原理。
1.初阶屏蔽
含ad，推广等字样的js或者class类就直接拦截或者不显示
2.高阶屏蔽
我也不会，但是高阶屏蔽肯定是可以屏蔽低阶广告的。
那么根据这个原理，我们可以发现。只要我们写一个很low很low的广告，然后监听它是否成功加载，如果没有，则跳转页面或者不显示内容。
实现
1. 制造广告
先写一个一眼就能看出来是广告的js文件，例如把js文件名命名
为"adview_pic_cpc_cpm_cpa_guanggao_gg_ads_300x250.js"。广告二字赤裸裸的写着，广告的韵味呼之欲出。
2. 定义变量
在js里面定义一个变量，比如：
var adskilltest=true;
3. 监听广告变量
页面文件中读取该变量
不管怎么样，只要被拦截，那就肯定是undefined。让个极其肤浅的广告命名，来检测是否有屏蔽广告，这叫引蛇出洞！
大功告成！
4. 后续操作
既然被拦截，就要做出点反应。有了反应之后呢，还需要保存当时浏览的页面连接。我的解决方法是写一个noads.html负责显示被拦截后的内容以及保存跳转前的链接。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>温馨提示</title>
</head>
<body>
<p>网站内容被识别为广告，已被屏蔽。请禁用广告屏蔽后点击下面链接哦！</p>
<a href="#" id="a">我已关闭广告屏蔽功能</a>
</body>
<script>
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
document.getElementById("a").href = getQueryVariable('route');
</script>
</html>
tips: 该方法不是最优，但是可行！
写在前面
1. 游戏/服务器简介
略
2. 为什么要这么做？
众所周知，游戏服务器一般来说非常吃性能，对内存和CPU要求颇高。如（方舟：生存进化):
以上是游戏官网原话。但其实我亲测过一下
腾讯云（1核2G）能带两个用户，但是很卡会人物回退（不装mod）。
华为云（2核4G）能装mod，并且不卡，就是启动会很慢。
以上都是在最久的windows系统服务器下测试的，应该和Windows xp同等级的服务器系统，再高就很难启动了，时不时报内存不够。所以，在我的理智思考下，我决定用家用电脑做服务器。
但是在实际搭建过程中，我遇到了一个问题，那就是移动宽带公网IP无解啊！一般没有公网ip的时候，我们第一时间想到的肯定是就是内网穿透了，而且一般游戏服务器使用的是UDP协议，也就是说我们需要搭建一个支持udp协议的内网穿透平台，我第一时间想到了frp。
3. 所需设备
具有公网IP的服务器一台（不要问我为什么有公网服务器还用内网穿透的问题，那只能说明你没看懂上面内容）
家用能联网的服务器一台（两台服务器的地理位置尽可能近）
实验环境，我使用的是阿里云的云翼计划（1核2G，5M带宽）
4. 大致思路
就是在本地搭一台服务器，然后做个内网穿透，这样搜索公网IP的那个服务器就可以连接到你本地服务器了。
转发udp: 7777，7778，27015。tcp：27016
注意事项：内网穿透版的在搜索中搜不到，但是可以直接在steam->视图->添加服务器
