vsftpd配置虚拟用户的一次踩坑

在配置完虚拟用户后虚拟用户一直登陆不上。
查看/var/log/secure一直为空(因为之前产生的日志太多玩删除了该文件并touch一个了新)。
现在知道删除/var/log/secure后要重启rsyslog服务才会重新记录日志。
systemctl restart vsftpd.service
最后翻/var/log/secure日志破案,把其中一个user打成了uesr

Dec 29 19:18:56 MasterNode vsftpd: pam_userdb(vsftpd:auth): user_lookup: could not open database `/etc/vsftpd/vuesr': No such file or directory
Dec 29 19:18:56 MasterNode vsftpd: pam_unix(vsftpd:auth): check pass; user unknown
Dec 29 19:18:56 MasterNode vsftpd: pam_unix(vsftpd:auth): authentication failure; logname= uid=0 euid=0 tty=ftp ruser=down42 rhost=MasterNode

我是傻逼...

vueCli3下移动端响应式解决方案

vueCli3下移动端响应式解决方案

flexible

  • 主要是用来响应式改变根元素的字体大小
  • 安装命令 npm install lib-flexible --save
  • 在main.js里面导入命令import 'lib-flexible'

要把index.html里面的<meta name='viewport'>标签删除;因为会自动添加

postcss-plugin-px2rem配置内容解释

  • 将px转换成rem
  • 安装命令 npm i --save postcss-plugin-px2rem
  • 在根目录创建一个名为vue.config.js的文件写入
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-plugin-px2rem")({
            rootValue: 37.5, //换算基数,1rem相当于10px,值为37.5时,1rem为20px,淘宝的flex默认为1rem为10px
            exclude: /(node_module)/, //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)\/如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
            mediaQuery: false, //(布尔值)允许在媒体查询中转换px。
            minPixelValue: 3,
          }),
        ],
      },
    },
  },
};

!注意 某些元素不想进行转换可以直接写行内或者使用Px PX绕过postcss-plugin-px2rem

vue3 使用teleport(传送门)组件实现一个模态框

vue3 使用teleport(传送门)组件实现一个模态框

vue3teleport功能类似于reactPortalsportals提供了一种将子节点渲染到存在于父组件以外都dom节点解决方案,vue3teleportreactPortals功能类似,且更加好用。

在vue2下 要实现类似功能需要通过portal-vue库去实现。

我们为什么需要Teleport

teleport是一种能将我们的模板移动到DOM中Vue App之外的技术,有点类似多啦A梦的“传送门”

使用场景:像modalstoast等这样的元素,很多情况下我们将它完全和我们的Vue应用DOM完全剥离,管理起来相反会方便许多

原因在于如果我们嵌套在Vue某个组件内部,那么处理组件的定位、z-index和样式就会变得很困难

另外,像modals,toats等这样的元素需要使用到Vue组件状态的值我们可能需要将状态放入到Vuex中同一管理,而teleport可以直接使用组件的data或prpos。然后在Vue应用范围之外渲染它。

以上引用自Gopal1 Vue 3 任意传送门——Teleport

修改了“另外,想modals.....然后在Vue应用范围之外渲染它”

使用Teleport实现一个模态框Deom

新建一个模态框组件 ./src/components/modal.vue
注意 在Vue3中拥有Fragments特特性可以允许组件存在多个根,所以一下模板写法是合法的。

<template>
  <button @click="modalOpen = true">开启模态框</button>
  <teleport to="body">
    <div v-if="modalOpen" class="modal">
      <div>
        我是一个模态框
        <button @click="modalOpen = false">关闭模态框</button>
      </div>
    </div>
  </teleport>
</template>

<script>
export default {
  data() {
    return {
      modalOpen: false,
    };
  },
};
</script>

注意 teleportVue3中的一个全局组件你可以在任意地方使用

其中的to属性是要把组件下内容挂载到哪里去,参数是一个选择器 我这里就直接挂载到body标签下<teleport to="body"> teleport标签内是你要“传送的内容” 我们可以直接使用模板下的data状态对模态框的显示进行操作。

随后追加上css

<style scopde>
.modal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.modal div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: white;
  width: 300px;
  height: 300px;
  padding: 5px;
}
</style>

然后你就可以在任意组件使用我们的模态框了但是注意

!如果你是使用Vite构建的项目在引入组件时必须携带组件后缀,让Vite知道该如何处理这个文件

import Modal from "./modal.vue";

然后就可以使用了。

vue多国语言方案

Vue国际化实现方案

原文地址:此刻_你不在

  1. 安装vue-i18n
npm i vue-i18n -S
  1. src/main.js中 实例化/注册`vue-i18n
...
import VueI18n from "vue-i18n"; // 引入组件

Vue.use(VueI18n); //注册组件

const i18n = new VueI18n({
  locale: "zh", //语言标识 默认语言
    // CommonJS规范引入语言文件
  messages: { 
    zh: require("@/assets/lang/zh"),
    en: require("@/assets/lang/en"),
  },
});

new Vue({
  i18n, //在Vue实例上挂在组件
  render: (h) => h(App),
}).$mount("#app");
  1. src/assets目录下创建语言包lang并且创建语言文件
assets  
└─lang
        en.js
        zh.js

生成 tree 视图: tree -I "node_modules|dist" (tree.exe)
assets/lang/zh.js

module.exports = {
  classical: {
    title: "木兰诗",
    content: `唧唧复唧唧,木兰当户织。不闻机杼声,唯闻女叹息。`
  },
};

assets/lang/en.js

module.exports = {
  classical: {
    title: "Mulan Poetry",
    content: `Haw and haw, Magnolia weaving. I don't hear the sound of the loom, but I hear the sigh of the girl.
  },
};

至此 一切准备工作准备完毕,接下来让我们使用它。

在任意组件中可以使用

this.$t('classical.title');

获取当前语言配置版本的文本,在模板中使用{{$t('classical.title')}} 也能达到效果,且更直接。

语言配置切换

methods: {
  chooseLang(langType) {
    this.$i18n.locale = langType;
},

langType参数为src/main.jsmessages的key

附录:各国语言简写

Countries and Regions 国家或地区 *国际域名缩写*
Angola 安哥拉 AO
Afghanistan 阿富汗 AF
Albania 阿尔巴尼亚 AL
Algeria 阿尔及利亚 DZ
Andorra 安道尔共和国 AD
Anguilla 安圭拉岛 AI
Antigua and Barbuda 安提瓜和巴布达 AG
Argentina 阿根廷 AR
Armenia 亚美尼亚 AM
Ascension 阿森松
Australia 澳大利亚 AU
Austria 奥地利 AT
Azerbaijan 阿塞拜疆 AZ
Bahamas 巴哈马 BS
Bahrain 巴林 BH
Bangladesh 孟加拉国 BD
Barbados 巴巴多斯 BB
Belarus 白俄罗斯 BY
Belgium 比利时 BE
Belize 伯利兹 BZ
Benin 贝宁 BJ
Bermuda Is. 百慕大群岛 BM
Bolivia 玻利维亚 BO
Botswana 博茨瓦纳 BW
Brazil 巴西 BR
Brunei 文莱 BN
Bulgaria 保加利亚 BG
Burkina-faso 布基纳法索 BF
Burma 缅甸 MM
Burundi 布隆迪 BI
Cameroon 喀麦隆 CM
Canada 加拿大 CA
Cayman Is. 开曼群岛
Central African Republic 中非共和国 CF
Chad 乍得 TD
Chile 智利 CL
China 中国 CN
Colombia 哥伦比亚 CO
Congo 刚果 CG
Cook Is. 库克群岛 CK
Costa Rica 哥斯达黎加 CR
Cuba 古巴 CU
Cyprus 塞浦路斯 CY
Czech Republic 捷克 CZ
Denmark 丹麦 DK
Djibouti 吉布提 DJ
Dominica Rep. 多米尼加共和国 DO
Ecuador 厄瓜多尔 EC
Egypt 埃及 EG
EI Salvador 萨尔瓦多 SV
Estonia 爱沙尼亚 EE
Ethiopia 埃塞俄比亚 ET
Fiji 斐济 FJ
Finland 芬兰 FI
France 法国 FR
French Guiana 法属圭亚那 GF
Gabon 加蓬 GA
Gambia 冈比亚 GM
Georgia 格鲁吉亚 GE
Germany 德国 DE
Ghana 加纳 GH
Gibraltar 直布罗陀 GI
Greece 希腊 GR
Grenada 格林纳达 GD
Guam 关岛 GU
Guatemala 危地马拉 GT
Guinea 几内亚 GN
Guyana 圭亚那 GY
Haiti 海地 HT
Honduras 洪都拉斯 HN
Hongkong 香港 HK
Hungary 匈牙利 HU
Iceland 冰岛 IS
India 印度 IN
Indonesia 印度尼西亚 ID
Iran 伊朗 IR
Iraq 伊拉克 IQ
Ireland 爱尔兰 IE
Israel 以色列 IL
Italy 意大利 IT
Ivory Coast 科特迪瓦
Jamaica 牙买加 JM
Japan 日本 JP
Jordan 约旦 JO
Kampuchea (Cambodia ) 柬埔寨 KH
Kazakstan 哈萨克斯坦 KZ
Kenya 肯尼亚 KE
Korea 韩国 KR
Kuwait 科威特 KW
Kyrgyzstan 吉尔吉斯坦 KG
Laos 老挝 LA
Latvia 拉脱维亚 LV
Lebanon 黎巴嫩 LB
Lesotho 莱索托 LS
Liberia 利比里亚 LR
Libya 利比亚 LY
Liechtenstein 列支敦士登 LI
Lithuania 立陶宛 LT
Luxembourg 卢森堡 LU
Macao 澳门 MO
Madagascar 马达加斯加 MG
Malawi 马拉维 MW
Malaysia 马来西亚 MY
Maldives 马尔代夫 MV
Mali 马里 ML
Malta 马耳他 MT
Mariana Is 马里亚那群岛
Martinique 马提尼克
Mauritius 毛里求斯 MU
Mexico 墨西哥 MX
Moldova, Republic of 摩尔多瓦 MD
Monaco 摩纳哥 MC
Mongolia 蒙古 MN
Montserrat Is 蒙特塞拉特岛 MS
Morocco 摩洛哥 MA
Mozambique 莫桑比克 MZ
Namibia 纳米比亚 NA
Nauru 瑙鲁 NR
Nepal 尼泊尔 NP
Netheriands Antilles 荷属安的列斯
Netherlands 荷兰 NL
New Zealand 新西兰 NZ
Nicaragua 尼加拉瓜 NI
Niger 尼日尔 NE
Nigeria 尼日利亚 NG
North Korea 朝鲜 KP
Norway 挪威 NO
Oman 阿曼 OM
Pakistan 巴基斯坦 PK
Panama 巴拿马 PA
Papua New Cuinea 巴布亚新几内亚 PG
Paraguay 巴拉圭 PY
Peru 秘鲁 PE
Philippines 菲律宾 PH
Poland 波兰 PL
French Polynesia 法属玻利尼西亚 PF
Portugal 葡萄牙 PT
Puerto Rico 波多黎各 PR
Qatar 卡塔尔 QA
Reunion 留尼旺
Romania 罗马尼亚 RO
Russia 俄罗斯 RU
Saint Lueia 圣卢西亚 LC
Saint Vincent 圣文森特岛 VC
Samoa Eastern 东萨摩亚(美)
Samoa Western 西萨摩亚
San Marino 圣马力诺 SM
Sao Tome and Principe 圣多美和普林西比 ST
Saudi Arabia 沙特阿拉伯 SA
Senegal 塞内加尔 SN
Seychelles 塞舌尔 SC
Sierra Leone 塞拉利昂 SL
Singapore 新加坡 SG
Slovakia 斯洛伐克 SK
Slovenia 斯洛文尼亚 SI
Solomon Is 所罗门群岛 SB
Somali 索马里 SO
South Africa 南非 ZA
Spain 西班牙 ES
Sri Lanka 斯里兰卡 LK
St.Lucia 圣卢西亚 LC
St.Vincent 圣文森特 VC
Sudan 苏丹 SD
Suriname 苏里南 SR
Swaziland 斯威士兰 SZ
Sweden 瑞典 SE
Switzerland 瑞士 CH
Syria 叙利亚 SY
Taiwan 台湾省 TW
Tajikstan 塔吉克斯坦 TJ
Tanzania 坦桑尼亚 TZ
Thailand 泰国 TH
Togo 多哥 TG
Tonga 汤加 TO
Trinidad and Tobago 特立尼达和多巴哥 TT
Tunisia 突尼斯 TN
Turkey 土耳其 TR
Turkmenistan 土库曼斯坦 TM
Uganda 乌干达 UG
Ukraine 乌克兰 UA
United Arab Emirates 阿拉伯联合酋长国 AE
United Kiongdom 英国 GB
United States of America 美国 US
Uruguay 乌拉圭 UY
Uzbekistan 乌兹别克斯坦 UZ
Venezuela 委内瑞拉 VE
Vietnam 越南 VN
Yemen 也门 YE
Yugoslavia 南斯拉夫 YU
Zimbabwe 津巴布韦 ZW
Zaire 扎伊尔 ZR
Zambia 赞比亚 ZM

vueCli3下pc多分辨率自适应解决方案

!注意仅为适应各种分辨率屏幕,不包含平板以及移动设备。单纯做移动设备响应适配请移步到flexible+px2rem 解决方案

vueCli3下自适应解决方案

postcss-plugin-px2rem

  • 将css中px转换为rem
  • 安装命令 npm i -S postcss-plugin-px2rem
  • 项目根目录下新建 vue.config.js 配置文件
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-plugin-px2rem")({
            rootValue: 192, //设计稿宽度/10
            exclude: /(node_module)/, //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)\/如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
            // unitPrecision: 5, //允许REM单位增长到的十进制数字。
            //propWhiteList: [],  //默认值是一个空数组,这意味着禁用白名单并启用所有属性。
            // propBlackList: [], //黑名单
            // selectorBlackList: [], //要忽略并保留为px的选择器
            // ignoreIdentifier: false,  //(boolean/string)忽略单个属性的方法,启用ignoreidentifier后,replace将自动设置为true。
            // replace: true, // (布尔值)替换包含REM的规则,而不是添加回退。
            // mediaQuery: false, //(布尔值)允许在媒体查询中转换px。
            // minPixelValue: 3, //设置要替换的最小像素值(3px会被转rem)。 默认 0
          }),
        ],
      },
    },
  },
};
  • 在src目录下新建rem.js文件
export function setRemInit() {
  // postcss-px2rem的内容
  // 基准大小
  const baseSize = 192;
  // 设置 rem 函数
  function setRem() {
    // 当前页面宽度相对于 1920 px(设计稿尺寸)的缩放比例,可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 1920;
    // 设置页面根节点字体大小
    document.documentElement.style.fontSize = `${baseSize * scale}px`;
  }
  // 初始化
  setRem();
  // 改变窗口大小时重新设置 rem
  window.addEventListener("resize", setRem);
}

在main.js中引用rem.js


import { setRemInit } from '../src/rem';

setRemInit(); *//进行初始化立即运行*

vscode安装JetBrainsMono字体

已经弃用webstrom大半年了,使用vscode的过程非常愉快。但是我还是忘不了jb家的JetBrainsMono字体,所以今天给vscode也整一个。

  1. 下载字体文件 官网下载
  2. 打开压缩包进入 /ttf文件夹,将所有字体进行安装
  3. 打开vscode 快捷键Ctrl+,搜索settings.json进行编辑
  4. 添加
"editor.fontFamily": "JetBrains Mono",
"editor.fontLigatures": true

完事 手动滑稽

微信小程序实现双向数据绑定

input绑定data随后监听输入事件获取event对象从中拿到value

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    inputValue:"双向数据绑定",
  },
  inputEdit(event){
    this.setData({
      inputValue:event.detail.value
    })
  }
})
<!--index.wxml-->
<view class="container">
  <!-- 双向数据绑定 -->
  <input type="text" value="{{inputValue}}" bindinput="inputEdit"/>
  <text>{{inputValue}}</text>
</view>

但是这样去做虽然能实现效果但是变量不好维护,我们可以使用data-*=“”绑定与data。相同的值实现动态绑定。

<!--index.wxml-->
<view class="container">
  <!-- 使用data-*双向数据绑定 -->
  <input type="text" value="{{inputValue}}" bindinput="inputEdit" data-key="inputValue"/>
  <text>{{inputValue}}</text>
</view>
//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    inputValue:"双向数据绑定",
    },
  inputEdit(event){
    this.setData({
      [event.target.dataset["key"]]:event.detail.value
    })
  }
})

搞定

不愧是我

撕碎那个幻梦,去破坏理想的天空。
刚看完一本关于洗脑的影片,有感而发。
当年梁山好汉们每一个都身怀绝技为什么心甘情愿听从宋江一个文官的话?当然讲义气是一部分,更重要的是宋江是一个洗脑的高手!

先告诉其余人,你们虽然都有很大的本事,但是说到底咱们都一样,都是强盗,罪人!咱们这辈子大口喝酒大块吃肉,那咱们的后人那?他们会被别人戳脊梁骨!,我们每个人都身怀绝技为什么不替天行道?

什么是天?自然是皇帝,宋江是希望被招安的,随后就带领梁山好汉们招安去了,不说招安后的结果如何,单说能把这100多人搞得死心塌地的安排宋江的设计走,这里宋江就应用了洗脑一个很重要的手段。

这里先进行打压说你们都是强盗!罪人!打压完成后得让他们兴奋起来啊。随后就是鼓励,说我们做的是好事,替天行道,劫富济贫。一冷一热之间就得找其中的合理性,咱们受招安,从此不是江湖散仙,顺应天道。

经过这三步 恐吓->鼓励->最后指条明路(目的)。宋江把108将整的服服帖帖。

而当今社会洗脑不仅没有减少反而各个领域都有,就拿我举例,我个人认为我定力还算可以,但是有一阵理财产品找上我基本就是买,然后没过两天就赔了什么p2p跑路,买了垃圾币,很多,其实就是被洗脑了。

你也许认为你不会被洗脑,自认为见多识广对这些“江湖骗术”了如指掌,现在的洗脑术跟过去不同,是一门结合了心理学,社会学,行为学等等,他设定的每一步都是按照人心的思路走的。

就比如看一些公安题材的电视剧,一般布控完成抓捕犯人都是凌晨一两点钟,很多人会认为这个时间是人最疲惫的时候,容易抓捕且目标反抗能力弱。这是其一大家都认为的,其实这里还有后续就是“连夜审讯”这在司法解释里叫“捕获冲击”,人在这个时候被审讯心理防线早已崩塌,就比较容易获得口供。

算卦的也是如此,行话叫“扣瓜子”说你将来可能会出一些问题,但是你可以在我这里买一些什么东西趋吉避凶,保证你平平安安顺风顺水。这里大家就应该发现了,欸这不就是宋江那套,先恐吓,然后给希望,最后买它“保命”产品?

你可能会说就这?我当然不会上当,但是这里我说的只是一些简单的场景,真正的算卦大师的洗脑术可比我说的要厉害多了,这里就分享一下我面试的时候面试官给我的洗脑套路。看看是不是符合以上几点。

我记得我面试的是一个静态页面设计开发岗,去的是一家做知识产权的公司,因为刚步入社会,虽然我w能力不止于此但是为了先适应公司环境我先从一些简单的项目入手随后在进开发组也没啥毛病,毕竟我稳的一逼。面试的时候面试官看了我的简历看到我会Vue然后就问了我一个Vue很刁钻的问题"说说solt"是什么吧,我第一反应是“卧槽高手啊”,因为我看过很多面试的视频很少有上来就问这种问题的,当然我也是有备而来,就说了solt是vue6个内置组件的其中一个,作用就是“留空”插入你想要的任何内容。我寻思我这应该是满分的回答了,我不仅说出了solt的作用还炫了下我对内置组件的掌握的程度,然而面试官没吃我这套,随后又问了我solt什么场景下应用的多,我一开始对这个问题是蒙住的随后突然想到,脱口而出,在封装组件的时候。虽然我知道我的答案是正确的,但是我意识到了他后面可能要问封装组件的一些问题,我已经开始慌了。不出索然他问了一句如何获得solt内部的值,我直接沉默了。可能熟悉vue的小伙伴知道其实在学习或者开发的过程中很少说自己封装组件或者封装组件使用solt那都是一些很高阶的玩法,然后面试官看完打不出来就开始给我上课。。巴拉巴拉一大堆最后甚至聊到了后端的负载均衡,还说了一些如何进阶到高级前端的一些经验,我连连点头这个时候就产生了“崇拜感”,在此时他就完成了恐吓以及鼓励的阶段,然而他的玩法等级更高,他看到我连连点头就知道时机成熟了,可以进行下一步了。其实我点头的过程也是洗脑的一个步骤叫“行为认同”,他捕获到这个信号随后直接说给我上社保之类的不经意间告诉我我有希望,然后通知我第二天复试,其实现在寻思寻思那个时候其实他已经想录用我了,复试只不过是让我认为这个岗位来之不易,拴住人心为他卖力的手段。

工作一开始我确实是向被打了鸡血一样,老板让我5天做完的工作我一天就做完了,我寻思先在公司立一个FLAG,让我“崇拜的偶像”看看我的能力,回过头来我已经忘了我只是来一个面静态页开发的,不知觉之间做了很多其他的事情,并且与工资不符,其实在当时我并没有反应过来,后来自己复盘才发现都是套路。当然不是diss老板,其实他在我技术路上确实给了很多有效的指导,只是公司各种面试不进来人,一周面试了4个前端开发没有一个进来的,导致所有的活基本都是我一个人干,有点崩溃。最后无奈在家加班把一个项目的几个模板组件写完第二天带到公司直接分手。

不知不觉已经叭叭快2000字了,其实后面还想聊聊上面提到的"行为认同"还有一些其他的洗脑套路,比如“代入角色”,“集体行为”等,然而我现在寻思到的竟然是我为啥初中没有这个能力,轻轻松松叭叭这么多废话在我作文之上凑字数。