分类 技术探讨 下的文章

把最近整的一些小玩意整理分享一下

手机号登录,分析一下页面可以知道一般是有两个按钮(获取验证码,登录)两个框(输入手机号,输入验证码)

所以有了下面这个玩意(不看具体功能,只看结构)

<template>
    <div class="login-wrapper">
        <div class="title-bar">登录</div>
        <div class="wrapper phone-wrapper">
            <span class="title">手机号</span>
            <input class="input phone" type="text" placeholder="手机号">
        </div>
        <div class="wrapper code-wrapper">
            <span class="title">验证码</span>
            <input class="input code" type="number" placeholder="验证码">
            <div class="send">获取验证码</div>
        </div>
        <div class="wrapper btn-wrapper">
            <div class="input btn">登录</div>
        </div>
    </div>
</template>

这个时候就可以开始写逻辑了,也是来简单分析一下,登录需要点击,获取验证码需要点击并且能倒数秒数,也就是动态修改文字,体验好一点可以检查限定手机号位数,验证码位数。

那就差不多是下面这个样子

<template>
    <div class="login-wrapper">
        <div class="title-bar">登录</div>
        <div class="wrapper phone-wrapper">
            <span class="title">手机号</span>
            <input class="input phone" type="text" placeholder="手机号"
                   :value="phone"
                   ref="phone" v-on:change="changePhone" v-on:input="changePhone">
        </div>
        <div class="wrapper code-wrapper">
            <span class="title">验证码</span>
            <input class="input code" type="number" placeholder="验证码"
                   :value="code"
                   ref="code" v-on:change="changeCode" v-on:input="changeCode">
            <div @click="loginCode" class="send">{{codeText}}</div>
        </div>
        <div class="wrapper btn-wrapper">
            <div class="input btn" @click="login">登录</div>
        </div>
    </div>
</template>

<script>
        name: "LoginPhone",
        data() {
            return {
                phone: '',  //输入框中的手机号
                code: '',  //输入框中的验证码
                codeText: '获取验证码',  //倒计时显示文字
                timingBoard: 60,  //倒计时数
                timer: null,  //一个定时器,用来倒数验证码
            }
        },
        methods: {
            loginCode() {},   //获取验证码
            login() {},       //登录
            changePhone() {}, //检查手机号长度
            changeCode() {},  //检查验证码长度
        }
</script>

有了这些已经足够你实现出一个基本的手机号登录界面了,如需完全代码请点击下面gist链接

完整代码参阅: https://gist.github.com/flxxyz/64ceb06a0754d67a771b3e3e7dc94d48

说实话用了这么长时间的vue,都没看过API,这几天重构博客偶然发现Vue.directive,挺厉害的样子

总是看到这里用Vue.use(ElementUi),那里用Vue.use(axios),一直停留在了用的层面,正好我发现编写markdown解析实例的消耗好像有点大,直接处理成指令或许会方便很多(真的方便了很多,少写了一堆方法)

简单描述一下流程吧

渲染文章的组件在挂载的生命周期中,会查询本地记录中是否存在对应的文章,不存在就发起请求线上查找,否则404。
文章为markdown内容,考虑让前端处理直接解析出来(毕竟前端性能过剩233),减少后端逻辑处理负担,一致性什么现在是不需要考虑的。
markdown解析器就用marked,完成逻辑如下

//main.js

import Vue from 'vue'
import App from './App'
import markdown from './markdown';

//注入markdown解析器
Vue.use(markdown.install)
Vue.prototype.$marked = markdown.marked

new Vue({
    store,
    router,
    render: h => h(App)
}).$mount('#app')

集成marked制成插件形式暴露

//markdown.js

import marked from 'marked'
import('highlight.js/styles/atom-one-dark.css')

marked.setOptions({
    renderer: new marked.Renderer(),
    pedantic: false,
    gfm: true,
    tables: true,
    breaks: false,
    sanitize: false,
    smartLists: true,
    smartypants: false,
    xhtml: false,
    highlight(code) {
        return require('highlight.js').highlightAuto(code).value;
    },
})

let install = (Vue) => {
    if (install.installed) return;
    Vue.directive('markdown', {
        bind: (el, binding, vnode) => {
            el.innerHTML = marked(binding.value)
        },
        update: (el, binding, vnode) => {
            el.innerHTML = marked(binding.value)
        }
    })
}

export default {
    marked,
    install,
}

在标签上使用v-markdown指令

//Test.vue

<template>
    <div>
        <div v-if="isNotFound">404</div>
        <div v-else v-markdown="article"></div>
    </div>
</template>

<script>
    const 这是一个查找文章的接口 = function () {
        return new Promise((resolve, reject) => {resolve(id)})
    }

    export default {
        name: "Test",
        data() {
            return {
                article: '',
                isNotFound: true,
            }
        },
        methods: {
            handlerArticle(id) {
                //查找本地文章
                let a = this.findArticle(id, async (id) => {
                    return await 这是一个查找文章的接口(id);
                })
                if (a == null) {
                    return 404;
                }

                return a;
            },
            findArticle(id, callback) {
                // let res = '## Test';
                let res = null;
                if (res === null) {
                    return callback(id);
                }

                return res;
            }
        },
        mounted() {
            //用id来查找文章
            let a = this.handlerArticle(123);

            if (a === 404) {
                //跳到错误页面
            }

            //处理loading
            this.isNotFound = false;
            this.article = a;  //将markdown内容直接保存到变量
        }
    }
</script>

完整代码参阅: https://gist.github.com/flxxyz/93e009d32ecd7e0c6785a52571577cd7

蹭了学生优惠,买了个阿里云轻服务器,5M带宽转国外线路减少丢包概率还不错,ns联机美滋滋,不过据说港服联机服务要出了,不知道联机质量会怎么样

firewall中继栗子

# 打开ip伪装
firewall-cmd --add-masquerade --permanent

# 添加端口协议
firewall-cmd --add-forward-port=port=中转后的端口:proto=tcp:toport=酸酸乳端口:toaddr=酸酸乳地址 --permanent
firewall-cmd --add-forward-port=port=中转后的端口:proto=udp:toport=酸酸乳端口:toaddr=酸酸乳地址 --permanent

# 重载一下
firewall-cmd --reload

最近在捣鼓golang,其中用线上数据全放在redis里,以前写死的配置有点不太适合了,热加载才是王道!

俗话说不会搜索的程序员不是一个好程序员(误

观摩了一下其他大佬的写法,大多都是采用定时器+goroutine实现的。难度不大,开始码

配置文件结构体

假设一下我们的配置文件是json文件,那应该就是下面这样

// conf.json
{
  "host": "127.0.0.1",
  "port": 6379,
  "passwd": "",
  "db": 0
}

首先肯定是要写一个跟它一模一样的结构体出来

//json配置文件结构体
type Content struct {
    Host   string `json:"host"`
    Port   int    `json:"port"`
    Passwd string `json:"passwd"`
    Db     int    `json:"db"`
}

如果继续在此结构体上编写操作函数不太稳妥,序列化json也是直接操作的指针。之前拆散它们的试错,最后还是让它们在一起了233

优化结构体

将文件名,同步锁,最后修改时间,配置文件结构体整合一起

//配置结构体
type Config struct {
    Filename       string
    LastModifyTime int64
    Lock           *sync.RWMutex
    Data           interface{}
}

编写实例配置的工厂函数(这个有点约定俗成的规矩,具体出处你们自己去考证吧,好处挺多的)

func NewConfig(filename string, data interface{}) *Config {
    conf := &Config{
        Filename: filename,
        Data: data,
        Lock: &sync.RWMutex{},
    }

    conf.parse()

    go conf.reload()

    return conf
}

这里把配置结构体配置了默认参数,外部传入参数是配置文件的文件名配置文件结构体,这里data的类型为接口类型,好处是Config可以独立出来,代码多处复用。我们还使用了conf.parse()方法,第一次解析文件,go conf.reload()方法单独起一个goroutine跑(具体效果看后面),结果当然返回本体了

- 阅读剩余部分 -

为什么

为什么要开发积分商城呢?

因为我们之前使用的是兑吧的服务,还不错

但是得知今年(2018)下半年关闭免费版的服务,需要付费购买专业版或旗舰版使用

当然兑吧的工作人员也联系过我们,可以给予优惠价格,商业互吹肯定要说“好的,我们会讨论考虑一下”

如果我们用了兑吧,那你也不会看到这个文章了23333

- 阅读剩余部分 -

一般设置代理只需按以下来设置是没有问题的,但是今天我们要操作的websockt

server {
    location / {
        proxy_pass http://127.0.0.1:10086;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_http_version 1.1;
        proxy_read_timeout 300s;
    }
}

nginx -t一下

会出现如下错误:
nginx: [emerg] unknown "connection_upgrade" variable

就是这里出现了个坑

其中涉及到了一个nginx的设计问题 End-to-end and Hop-by-hop Headers
我在这里还是不过多赘述了,以免误人子弟

map在nginx中是为一个或多个变量设置映射表

下面是需要添加的几项配置:

http {
    map $http_upgrade $connection_upgrade {
        default upgrade;
        ''      close;
    }

    server {
        location / {
            #…
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection $connection_upgrade;
        }
    }
}

自己编译php版本时出现的错误,哦,顺带说一句,可能php7以下会有出入,纯净系统
好长时间也是没有出文了,文档不是很想整理(¦3[____]

# 编译参数,基本就是自带的全装了
'./configure' '--cache-file=/opt/temp/cache/config.cache' '--prefix=/opt/temp/php/php-7.2.6' '--with-config-file-path=/opt/temp/php/php-7.2.6/etc' '--with-config-file-scan-dir=/opt/temp/php/php-7.2.6/var/db' '--disable-all' '--enable-short-tags' '--enable-opcache' '--enable-dba' '--enable-ipv6' '--enable-calendar' '--enable-wddx' '--enable-static' '--enable-inifile' '--enable-inline-optimization' '--enable-cli' '--enable-ftp' '--enable-filter' '--enable-gcov' '--enable-maintainer-zts' '--enable-json' '--enable-hash' '--enable-exif' '--enable-mbstring' '--enable-mbregex' '--enable-libgcc' '--enable-pdo' '--enable-posix' '--enable-embed' '--enable-sockets' '--enable-debug' '--enable-phpdbg' '--enable-zip' '--enable-bcmath' '--enable-fileinfo' '--enable-ctype' '--enable-cgi' '--enable-soap' '--enable-pcntl' '--enable-phar' '--enable-session' '--enable-tokenizer' '--with-imap-ssl' '--with-ldap' '--with-tidy' '--with-kerberos' '--with-xmlrpc' '--enable-fpm' '--enable-dtrace' '--with-pcre-regex' '--with-pcre-dir=/usr' '--with-mhash' '--with-mcrypt=/usr' '--with-zlib=/usr' '--with-curl=/usr' '--with-readline=/usr' '--with-libedit=/usr/local' '--with-gd=shared' '--enable-gd-native-ttf' '--with-png-dir=/usr' '--enable-intl' '--with-openssl=/usr' '--with-mysqli=mysqlnd' '--with-pdo-mysql=mysqlnd' '--with-sqlite3' '--with-pdo-sqlite' '--with-pgsql=/usr/bin' '--with-pdo-pgsql=/usr/bin' '--enable-dom' '--enable-libxml' '--enable-simplexml' '--enable-xml' '--enable-xmlreader' '--enable-xmlwriter' '--with-xsl' '--with-libxml-dir=/usr' '--with-gettext=/usr' '--with-iconv' '--with-bz2=/usr' '--enable-shmop' '--enable-sysvsem' '--enable-sysvshm' '--enable-sysvmsg' '--with-gmp=/usr' '--with-pear=/opt/temp/php/php-7.2.6/lib/php/pear' '--with-libdir=lib64' '--with-mcrypt=/usr/lib64' '--with-readline'

错误: configure: error: Please reinstall the libcurl distribution – easy.h should be in/include/curl/
解决方法: yum install curl-devel

错误: configure: error: jpeglib.h not found.
解决方法: yum install libjpeg-devel

错误: configure: error: png.h not found.
解决方法: yum install libpng-devel

错误: configure: error: To enable code coverage reporting you must have LTP installe
解决方法: yum install -y lcov

错误: configure: error: Cannot find sys/sdt.h which is required for DTrace support
解决方法: yum install -y systemtap-sdt-devel, apt install -y systemtap-sdt-dev

错误: configure: error: Cannot find OpenSSL's libraries
解决方法: yum install openssl openssl-devel openssl-libs
备注: 64位系统在编译时加上--with-libdir=/usr/lib64, 或者把/usr/lib64/libssl.so复制到/usr/lib/libssl.so

错误: configure: error: Unable to locate gmp.h
解决方法: yum install -y gmp gmp-devel

错误: configure: error: Unable to detect ICU prefix or no failed. Please verify ICU install prefix and make sure icu-config works.
解决方法: yum install -y icu libicu libicu-devel

错误: configure: error: Please reinstall libedit - I cannot find readline.h
解决方法: yum install -y readline readline-devel
备注: 64位系统在编译时加上--with-readline, 可能还需要你去单独下载编译最新版本的libedit

错误: configure: error: Cannot find libtidy
解决方法: yum install -y readline readline-devel, apt install libtidy-dev libtidy5

错误: configure: error: Cannot find OpenSSL's <evp.h>
解决方法: yum install -y openssl openssl-devel libssl-dev

错误: configure: error: Please reinstall the BZip2 distribution
解决方法: yum install -y libbz2-dev

错误: configure: error: Please reinstall the libcurl distribution
解决方法: yum install -y curl-devel, apt install libcurl4-gnutls-dev

错误: configure: error: mcrypt.h not found.
解决方法: apt install libmcrypt4-dev

错误: configure: error: Cannot find libpq-fe.h.
解决方法: apt install libpq-dev

错误: configure: error: Please reinstall readline - I cannot find readline.h
解决方法: apt install libreadline-dev

错误: configure: error: xslt-config not found.
解决方法: apt install libxslt1-dev

错误: configure: error: cURL version 7.10.5 or later is required to compile php with cURL support
解决方法: apt install libcurl4-openssl-dev, apt install libcurl4-gnutls-dev

错误: configure: error: xslt-config not found. Please reinstall the libxslt >= 1.1.0 distribution
解决方法: apt install libxslt1-dev

错误: configure: error: Unable to locate gmp.h
解决方法: apt install libgmp-dev

错误: configure: error: utf8_mime2text() has new signature, but U8T_CANONICAL is missing. This should not happen. Check config.log for additional information.
解决方法: apt install libc-client2007e-dev, apt install libc-client-dev

错误: configure: error: This c-client library is built with Kerberos support.
解决方法: apt install libkrb5-dev, 考虑加上--with-kerberos--with-imap-ssl参数

错误: configure: error: libfbclient, libgds or libib_util not found! Check config.log for more information.
解决方法: apt install firebird-dev, 可能会是apt install firebird2-dev

错误: configure: error: Cannot find ldap.h
解决方法: apt install libldap2-dev

错误: configure: error: Please reinstall the libzip distribution
解决方法: apt install libzip-dev

过年到现在都挺忙的,还有游戏在等着我van,这篇文章拖的时间有点长

上次不是讲到家里树莓派在挂机嘛,用了frp穿外网可以在外面随时随地的在家下片,美滋滋

但是问题来了,家里硬盘里的资源我想在公司用了,平时也没有拷U盘的习惯,一般写完都是直接关闭保存在硬盘,最近笔记本都放在公司没拿回家,更是限制了我的操作。

于是闲暇之余写了个目录程序出来,当然写之前我也去网上找了下的,大部分都不是那种性(简)冷(洁)淡风格,老外的那种大大圆圆的看着太卡通了不适合我睾贵的身份,唯一一个上眼的就是DirectoryLister/DirectoryLister,但是需要把程序和文件放在一个目录下,已经拒绝了我去使用它。
网络上大部分可以找到的基本都是与DirectoryLister/DirectoryLister操作是相似的,均是放置在同一目录下。想想还是自己写吧????‍♂️,问题不大

目录程序界面

项目地址: https://github.com/flxxyz/directory-lister
演示网址: http://cloud.flxxyz.com/

本程序适用于有一定的php知识储备的开发人员使用,小白用户使用请先了解一下composer使用

确保本身已经安装php再进行下面的操作

类unix

如macosx, ubuntu, centos, archlinux, debian这类系统

php -i | grep "/php.ini"

类unix系统

windows

如果没有添加环境变量,请将php目录添加至环境变量!!!

php -i | findstr "php.ini"

windows系统

通用

创建一个php文件,往里写入如下内容

  1. <?php
    echo phpinfo();

    通过浏览器访问

    通用

  2. echo(str_replace("\","/",str_replace("ext","php.ini",ini_get("extension_dir"))));

    慕若曦dalao评论区又给出来一种,明白的就用

在xx月xx号,我入手了树莓派3b,某宝300,清单如下:

  • 板子199
  • 电源35(其实我有5v2a的充电器还有充电宝)
  • 辣鸡无线键盘30
  • 亚克力壳子15
  • 风扇加扇热片10块左右

很奇怪的一点,我买的国产板子e14,发来了英国的rs

当然还要有内存卡,我有个8g的,但是我还是去狗东买了三桑64G的evo,130还行,不在意外观的风扇键盘都可以不要的,再买个16G卡,300以内肯定可以搞定

回到正题上来

平时还要上班呀,派甩在家里就跟300买了一堆辣鸡放在家里,这个时候就要用到了内网穿透了

作为曾经一位使用过ngrok的用户来说,ngrok真辣鸡(╯▔皿▔)╯

安装配置相当麻烦,配置完成后还各种问题,连接失败,掉线,xxx问题

转战使用别人的ngrok免费服务吧(此处不是打广告),也有掉线问题,用户体验不佳,放弃!

但是入手派后,我还是选择了看ngrok,服务器的问题还好说,但是派的问题多多还解决不了,需要吐槽的点太多了,直接跳到frp上去


国产良心软件(我就是要吹它),配置简单,使用简单,部署方便,资源消耗低(我没有收钱的(╯‵□′)╯︵┻━┻)

最关键的是有中文文档!!!中文文!!!中文!!!中!!!

0x0

这里我用虚拟机吧,我现在在公司,派在家里,我要是重启frp就掉线,那就没有后面的操作了( ´_ゝ` )

虚拟机配置(此处相当于树莓派)

  • CentOS Linux release 7.4.1708 (Core)
  • 内核版本 3.10.0-693.11.6.el7.x86_64
  • 架构 x86_64
  • 内存512M
  • CPU2核

服务器配置
鹅厂香港1块钱机子

  • CentOS Linux release 7.4.1708 (Core)
  • 内核版本 3.10.0-514.21.1.el7.x86_64
  • 架构 x86_64
  • 内存1G
  • CPU1核
  • 带宽1M

在他们的release页面选择你要使用的版本

这里我就用了frp_0.15.1_linux_amd64.tar.gz这个包,如果你要使用树莓派3b的版本,官方的arm包使用是有问题的,我的派是archlinux系统,编译的客户端包在这里frpc-0.15.1-raspberrypi.zip,如果想安装archlinuxarm可以看我的这篇文章

到此准备工作结束了

当然这些都是在你可以使用已有的二进制文件的情况下操作的,不能操作请自行单独编译

0x1

注意: 接下来的操作我们都是在root用户下操作的,其他用户请自行判断使用sudo命令

wget --no-check-certificate https://github.com/fatedier/frp/releases/download/v0.15.1/frp_0.15.1_linux_amd64.tar.gz

tar -xvf frp_0.15.1_linux_amd64.tar.gz

cd frp_0.15.1_linux_amd64

ls -al  // 与ll命令一样

解压后的文件应该是下面酱的

frp解压文件列表

客户端

删除如下文件

rm frps frps_full.ini frps.ini LICENSE

客户端保留的文件
客户端保留的文件

服务端

删除如下文件

rm frpc frpc_full.ini frpc.ini LICENSE

服务端保留的文件
服务端保留的文件

      • -

温馨提示

frpx_full.ini的配置为官方允许的所有配置项,frpx.ini为基础配置(建议使用,不然你都不知道自己哪里出现错误)

此处x表示客户端的c与服务器的s

0x2

这里我使用基础配置文件

服务端需要开启7000监听frp服务,6000监听转发客户端ssh服务

服务端开放端口如下执行

使用iptables的pong友

iptables -A INPUT -p tcp --dport 7000 -j ACCEPT
iptables -A INPUT -p tcp --dport 6000 -j ACCEPT
service iptables save

使用firewalld的pong友

firewall-cmd --zone=public --add-port=7000/tcp --permanent
firewall-cmd --zone=public --add-port=6000/tcp --permanent
firewall-cmd --reload

0x3

地基已经搭好了,可以开始运行frp了

服务端

我们执行下面这条操作,开始运行frps服务器

./frps -c ./frps.ini

运行状态如下图(那个说什么有安全问题的等连接没问题了再来调┑( ̄Д  ̄)┍)
开启frps服务器

客户端

我们需要配置服务器ip地址才能穿透至外网,所以使用nano,vi,vim等编辑器修改配置文件中的server_addr

[common]
server_addr = 你的服务器ip
server_port = 7000

修改完成可以保存了,执行下面这条操作

./frpc -c ./frpc.ini

看!分配了id,ssh已经成功代理了( •̀ ω •́ )✧
成功连接

这时候你如果回头看服务器的控制台也会有成功的消息

0x4

现在可以测试一下能否成功连接到虚拟机的ssh辣(●ˇ∀ˇ●)

可以很清晰的看到,当前在线的用户有两名,可以看到pts/0的用户在执行我们之前的监听的命令
美滋滋

到这里frp已经算是成功运行了

但是...

我们不可能一直开着终端吧,这里我把我的启动停止脚本分享出来

脚本有点不适用了,自己写一个吧。。。

0x?

距离上一次发这种教程文章好久了,还说是要发ssh的无密码登陆,在几个服务器上公钥登陆都不一样,有点坑,发文章的目的就是解决这其中的问题,好辣,就酱。

晚安爱你哟