WangEditor添加首行缩进功能
官方也不增加这个，但对于经常写文章的用户来说，首行缩进是很实用的功能，改变一下样式就可以了text-indent: 2em; 修改一下初始化wangEditor的地方，注册一个菜单 //初始化编辑器 var E = window.wangEditor; // 菜单 key ，各个菜单不能重复 const menuKey = ‘MyTextIndentMenuKey’ // 注册菜单 E.registerMenu(menuKey, MyTextIndentMenu) var editor = new E(‘#’+id); 新增一个MyTextIndentMenu.js，代码如下： const E = window.wangEditor const { $, BtnMenu , DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E const lengthRegex = /^(\d+)(\w+)$/ const percentRegex = /^(\d+)%$/ const reg […]
idea 编译时提示包不存在
2020-09-16编辑 试了很多方法无果，找到一个方法，无敌！ 在项目目录下执行mvn idea:idea 命令
ubuntu 下使用openconnect 连接vpn
使用openconnect在ubuntu 中安装openconnect,可以在软件中心找到. 在/etc/vpc/目录下新建vpnc-script 文件 文件内容可以到此处拷贝 http://git.infradead.org/users/dwmw2/vpnc-scripts.git/blob_plain/HEAD:/vpnc-script sudo openconnect -u 用户名 –script=/etc/vpnc/vpnc-script –no-dtls vpn.test.com 输入密码后提示 POST https://vpn.test.com/+webvpn+/index.html Got CONNECT response: HTTP/1.1 200 OK CSTP connected. DPD 30, Keepalive 20 Connected tun0 as 10.22.22.22, using SSL 连接成功!!!
Golang指南：顶级Golang框架、IDE和工具列表
译文链接：http://www.codeceo.com/article/golang-framework-ide-tools.html 英文原文：Golang Guide: A List of Top Golang Frameworks, IDEs, and Tools 自推出以来，Google的Go编程语言（Golang）越来越受主流用户的欢迎。在2016年12月的一份调研中，3,595名受访者中有89％表明他们在工作中或工作以外用Go语言编程。 此外，在编程语言中，Go语言在专业知识和偏好方面排名最高。2017年7月，在Tiobe的年度编程语言排名中，Go语言从去年的第55名一跃跳到了第10名。 显然，Go语言吸引了来自不同学科的许多程序员和软件开发外包专业人士。可以这么说，这全都是因为Go语言的易用性。 作为一种编译型的开源编程语言，Go语言能使开发人员轻松构建简单可靠又高效的软件。它是更保守的语言，如C和C ++的创新和演变的产物。 使用Go语言，可以减少代码输入量，并且编写稳健的API而不牺牲性能变得更加容易。 Go语言旨在实现可扩展性和并发性，从而实现优化。编译器可以在运行时前执行所有代码检查工作。 我们收罗了Golang的顶级框架、IDE和工具列表，以供大家快速参考。建议添加到浏览器书签中，以便随时查看！ Golang框架 Web框架可以帮助开发人员尽可能方便快捷地构建应用程序。Go语言还比较新，所以使用的框架带有充足的文档很重要。 这里有9个框架可帮助你使用Go语言构建项目。 1.Revel 作为Go语言的高效生产力框架，Revel包含的Hot Code Reload工具可以让你在每次更改文件时重建项目。它还包括各种全面和高性能的功能，因此你不需要找外部库集成到框架中。 2.Beego Beego是一个完整的MVC框架，有自己的日志库、ORM和Web框架。你不需要再去安装第三方库。它有一个称为Bee Tool的内置工具，用于监视代码更改，并在检测到更改时运行任务。 Beego可以为你节省很多时间，特别是在项目一开始，你要弄清楚日志框架或应用程序结构的时候。 3.Martini 受Sinatra启发，Martini是一个极其轻巧但功能强大的框架。它被开发用于用Golang编写模块化Web应用程序和服务。 它的特点是非侵入式设计，快速易用，且包括各种处理程序和中间件。它能够为HTML5模式的AngularJS应用程序执行基本路由，异常处理和默认文档服务。 Martini的最佳功能是可以使用反射，它允许开发人员动态地将数据插入到处理函数中并添加新的服务。Martini也完全兼容http.HandlerFunc界面。不过，缺点在于Martini框架不再维护了。 4.Gin Gonic Gin Gonic是一个Web框架，有类似Martini的API，但性能更好。如果你以前使用过Martini，那么你也一定熟悉Gin Gonic。没用过Martini也没关系，只需要学习10分钟就能掌握Gin。就是这么容易！ Gin Gonic是一个极简化的框架，仅包含最重要的库和功能。这使得它非常适合开发高性能REST API。此外，它比Martini快四十倍。 你可以添加中间件、嵌套组、JSON验证以及渲染，并依然保持其最佳性能。Gin Gonic使用httprouter，Go语言最快的HTTP路由器。 5.Buffalo 要构建Go语言新的Web应用程序，使用Buffalo是一个快速又简单的方法。当你开始一个新项目时，Buffalo可以为你提供一切——从前端到后端开发。 它具有热重载功能，这意味着dev命令将自动查看.go和.html文件。然后，它将为你重建并重启二进制文件。运行dev命令，你就能看到变化在你的眼前发生！ Buffalo不仅仅是一个框架——它也是一个整体的Web开发生态系统，可以让你直接构建应用程序。 6.Goji Goji是一个轻量级的快速Web框架，将可组合性和简单性作为其主要优先级。很像net / http.ServeMux，Goji是一个极简的HTTP请求复用器。它包括Einhorn支持，允许在Goji中提供Websocket支持。 其他功能包括URL模式，可重新配置的中间件堆栈，正常关机等。Goji可以用于生产，并在若干组织中提供了数以亿计个请求。 7.Tiger […]
nmcli网络配置命令
nmcli使用方法非常类似linux ip命令、cisco交换机命令，并且支持tab补全，也可在命令最后通过-h、–help、help查看帮助。在nmcli中有2个命令最为常用： nmcli语法： nmcli [ OPTIONS ] OBJECT { COMMAND | help } OBJECT和COMMAND可以用全称也可以用简称，最少可以只用一个字母，建议用头三个字母。OBJECT里面我们平时用的最多的就是connection和device，还有其他的选项在里暂时不介绍，这里需要简单区分一下connection和device 详细的介绍请看这篇文章：RHEL/CentOS系列发行版nmcli命令概述 这里主要介绍命令的使用 1、查看网络接口信息 ————————————————————– nmcli ##查看ip（类似于ifconfig、ip addr） nmcli device status ##所有接口的简略信息 nmcli device show ##所有接口的详细信息 nmcli device show interface-name ##特定接口的详细信息 ————————————————————– 2、查看连接信息 ————————————————————– nmcli connection show ##所有连接的简略信息 nmcli connection show –active ##显示激活的连接 nmcli connection show inteface-name ##某个接口的详细连接信息 ————————————————————– 3、激活连接与取消激活链接 ————————————————————– #激活连接 nmcli connection […]
automatically connect OpenConnect VPN use a service file
i use a service file /etc/systemd/system/myVpn.service [Unit] Description=My Vpn Connection After=network.target [Service] Type=simple Environment=password=correcthorsebatterystaple ExecStart=/bin/sh -c ‘echo YourPasswordHere | sudo openconnect –protocol=nc YourServerHere –user=YourUserHere –passwd-on-stdin’ Restart=always systemctl enable myVpn systemctl start myVpn
快速分析 Apache 的 access log，抓出前十大網站流量兇手
說到 Log 分析大家都會先想到用 AWStats 來分析，沒錯這絕對是一個最好的解決方式，但如果你只是要簡單的分析一些資訊，就可以利用一些簡單的 shell 組合來撈出你要的資料 這篇主要是針對 Apache 的 access log 來進行分析，並提供以下範例給大家參考 取得前十名access 最多的IP 位址 cat access_log | awk'{print $ 1}’| sort | uniq -c | sort -nr | head -10 取得前十名 access 最多的網頁 cat access_log | awk'{print $ 11}’| sort | uniq -c | sort -nr | head -10 […]
希望是最淺顯易懂的 RxJS 教學
前言 關注 RxJS 已經好一段時間了，最早知道這個東西是因為 redux-observable，是一個 redux 的 middleware，Netflix 利用它來解決複雜的非同步相關問題，那時候我連redux-saga都還沒搞懂，沒想到就又有新的東西出來了。 半年前花了一些時間，找了很多網路上的資料，試圖想要搞懂這整個東西。可是對我來說，很多教學的步調都太快了，不然就是講得太仔細，反而讓初學者無所適從。 這次有機會在公司的新專案裡面嘗試導入redux-observable，身為提倡要導入的人，勢必要對這東西有一定的瞭解。秉持著這個想法，上週認真花了點時間再次把相關資源都研究了一下，漸漸整理出一套「我覺得應該可以把 RxJS 講得更好懂」的方法，在這邊跟大家分享一下。 在開始之前，要先大力稱讚去年 iT 邦幫忙鐵人賽的 Web 組冠軍：30 天精通 RxJS，這系列文章寫得很完整，感受得出來作者下了很多功夫在這上面。看完這篇之後如果對更多應用有興趣的，可以去把這系列的文章讀完。 好，那就讓我們開始吧！ 請你先忘掉 RxJS 沒錯，你沒看錯。 要學會 RxJS 的第一件事情就是：忘記它。 忘記有這個東西，完全忘記，先讓我講幾個其他東西，等我們需要講到 RxJS 的時候我會再提醒你的。 在我們談到主角之前，先來做一些有趣的事情吧！ 程式基礎能力測試 先讓我們做一個簡單的練習題暖身，題目是這樣的： 有一個陣列，裡面有三種類型的資料：數字、a~z組成的字串、數字組成的字串，請你把每個數字以及數字組成的字串乘以二之後加總 範例輸入：[1, 5, 9, 3, ‘hi’, ‘tb’, 456, ’11’, ‘yoyoyo’] 你看完之後應該會說：「這有什麼難的？」，並且在一分鐘以內就寫出下面的程式碼： const source = [1, 5, 9, 3, ‘hi’, ‘tb’, 456, ’11’, ‘yoyoyo’]; […]
一次搞懂OAuth與SSO在幹什麼?
一次搞懂OAuth與SSO在幹什麼? 最近的Line Notify、Line Login，以及前一陣子的Microsoft Graph API，全都使用到了OAuth作為用戶身分驗證以及資源存取的基礎。但很多讀者會卡在OAuth的運作流程上，根本的原因是不理解OAuth到底是幹嘛的?其存在的目的為何?以及如何應用? 因此，我想花一個篇幅，盡可能短的介紹一下OAuth與SSO，但，與坊間文章不同的是，我希望從應用情境的角度(而非技術)切入談這件事情，冀望能夠讓開發人員對OAuth有個最基本的認識。 OAuth的背景 我們回頭看Line Login與Line Notify中的例子，OAuth在這邊最簡單的應用情境，就是身分驗證。典型的情境中有幾個角色，分別是: 網站或App的開發單位 : 也就是各位開發人員 OAuth服務的提供者(Provider) : 也就是Line(或Google、Microsoft…etc.) 終端用戶(End-User) : 網站使用者、Line使用者、消費者、客戶…etc. 上面這三者的關係是什麼？ 當我們建立一個網站（例如Pc Home購物）、或App(例如一個手機遊戲)，都非常有可能需要建立一組會員機制，這些機制包含: 登入（包含身分驗證，帳號、密碼保存…等） 個資管理（用戶名稱、地址、電話、暱稱、手機…等) 以往，幾乎都是每一個網站自己做一套，但這樣有很多麻煩事，首先用戶要記得很多組帳號密碼，而每一個網站都自己搞一套會員機制，網站開發人員自己也很辛苦，加上最近這幾年大家都很重視個資，網站儲存（保管）了很多帳號密碼與個人資料，總是會有被駭的風險。因此，這十年來，很多大廠開始提供登入（與身分驗證）機制服務。 也就是說，小網站你不用自己做登入和會員管理了，你連過來我這邊，我是大網站，我已經有幾百萬上億的用戶，(例如全台灣都用Line)，而且早就做了超級安全的會員管理機制，你這小網站何必自己做會員管理呢？你跟我連結不就得了，我大網站來幫你管理個資，提供你登入的服務，你把會員資料通通存我這裡，用戶也不需要記得很多組帳密，只需要記得我大網站的帳密，一樣可以登入你小網站(或稱為第三方應用）來使用你提供的服務，這樣皆大歡喜。 因此，大家就這麼做了。 但提供這樣服務的大廠越來越多，Google、Microsoft、Yahoo…都提供了這樣的服務，導致小網站為了對使用者更貼心，可能要同時連結上很多這種提供身分服務的大網站，如果每一家連結方式都不同，就很煩。因此，業界就開了幾個會，共同決定了一套工業標準，就是OAuth了。 有哪些功能？ 所以你會發現，基本上網站開發人員有兩種身分，一種是OAuth服務的提供者(像是Google、微軟、Line)，另一種是OAuth服務的使用者，像是一般的小網站(trello)。而終端用戶只需要在大網站申請過帳號，就可以登入小網站來使用服務。 但，大網站當然不能給你(小網站)用戶的帳號和密碼，否則多麼不安全呢?因此OAuth工業標準讓服務提供者(大網站)透過一種標準的作法，在用戶驗證過身分之後，提供一組會過期的令牌給小網站，這就是token。 小網站拿著這個令牌，就可以跟大網站取得用戶的個資，或是其他需要的資料。小網站也可以拿著這個令牌，跟大網站確認該令牌是否已經到期。 所以，整個流程大概是底下這樣: 由於上述過程中的(2)，登入畫面是大網站提供的，因此你小網站不會得知用戶的帳號密碼，大網站只會在登入成功後，把一個具有有效期限的Token傳給你小網站，一旦你需要存取用戶的資料，就拿這個token去跟大網站溝通。 當然，實際上的OAuth操作步驟又更複雜，如果你參考我們前面介紹的Line Login那篇，就會知道，用戶被引導到大網站完成登入之後，你小網站是無法直接取得token的，而是取得一個code，再去用這個code跟大網站換得一個token。為何要多這一道手續?因為，網際網路是個不安全的所在，在網路上傳遞的任何東西，都可能被路上經手的路由器或其他設備給擷取、偽造、變更，因此要確保安全，得更加小心一點。 因此一般的OAuth流程，其實應該長得像是底下這樣(這是微軟Graph API的OAuth Auth Authorization Code Flow流程) : 還有更複雜的、更進階的。 如果大網站除了提供用戶的個資之外，還要可以讓小網站有權限做一些額外的事情，像是變更用戶大頭照、取得用戶上傳的檔案、幫用戶book一個行事曆…這都是Office 365/Google Apps裡面典型的情境，如此一來，終端使用者(end-user)可能就要授權小網站，到底能夠使用該用戶在大網站中多少資料，也就是大網站的用戶要賦予小網站多大的權限，來存取該終端用戶的個資? 這部分，一般稱之為 Permission Scope。 所以，OAuth除了提供登入身分驗證之外，也逐漸開始負擔了網站合作之間的授權管理功能。 好，現在回過頭來看，請參考Line Login與Line Notify這兩篇中的例子，你會發現一開始我們都只是組出一個URL，來取得Authorization […]
從零開始建造一個vue項目
準備工作 環境依賴：Node.js； vue官方腳手架： vue-cli； 具體怎麼安裝nodejs和vue-cli的部分就不再具體說明了，請查看官方文檔按步驟執行即可（安裝nodejs會安裝npm（包管理工具），vue-cli依賴npm來安裝，注意這個先後關係）。 背景知識 vue.js核心 框架 webpack 打包工具，使用vue-cli初始化項目的時候，我們選擇webpack作為我們的模塊打包工具 開始動手 初始化項目，選擇webpack作為打包工具，項目名稱是my-project，然後按照提示進行一些配置，過程中可以選擇使用vue-router（推薦使用）；這些配置最終會寫到項目的package.json中和安裝相應的模塊 vue init webpack my-project 复制代码 接下來使用自己熟悉的編輯器打開項目，目錄結構大致是這樣的 構建和配置目錄：webpack打包的相關配置文件 src目錄：我們最終編寫業務代碼的地方 static目錄：我也不知道幹嘛用的 package.json package.json是項目最基礎的配置文件。可以發現裡面的很多內容，例如名稱，作者，描述等就是剛才初始化項目時我們填充的值； dependencies和devDependencies是項目依賴的包，運行項目之前需要先執行npm install來安裝項目所依賴的包 npm install复制代码 然後我們來重點關註一下scripts npm允許在package.json文件裡面，使用scripts分區定義腳本命令。其中dev和start都是啟動本地開發環境的，lint是做語法校正的，build是打包最終在線代碼的 { “name”: “my-project”, “version”: “1.0.0”, “description”: “A Vue.js project”, “author”: “ideagay <[email protected]>”, “private”: true, “scripts”: { “dev”: “webpack-dev-server –inline –progress –config build/webpack.dev.conf.js”, “start”: “npm run dev”, […]