1. 程式人生 > >Electron實現markdown筆記軟體(一)

Electron實現markdown筆記軟體(一)

關於這個markdown筆記軟體(一)——總體的思路和介紹

介面

pic4

專案原始碼

目錄

介紹

一直想寫一個類似為知筆記螞蟻筆記之類的用來記筆記的軟體。想來需要有這些需求:

  • 要支援markdown。
  • markdown要能夠支援程式碼高亮和latex數學公式。
  • 介面至少要過得去、不能太醜。
  • 能夠儲存並管理圖片、連結等資源。
  • 能夠自動儲存,能夠調整樣式。
  • 有標籤的功能,方便整理。
  • 最好能夠跨平臺、有云功能(下一版本實現)。

Todo List

下一版本可能會有如下優化:

  1. 優化程式邏輯、減少重複的程式碼。各部分進一步解耦。
  2. 加入對右鍵的支援操作
  3. 加入使用者和雲備份的操作
  4. 優化使用者介面和操作邏輯、提供設定

平臺

考慮的平臺有以下三個:

  1. C++和qt庫編寫,需要自己造輪子、開發週期太長,除錯麻煩。
  2. python+wxpython、pyqt等GUI庫。python下有已經比較完備等markdown庫,也能夠跨平臺,可以直接使用很方便。不過考慮這些庫預設介面其實不大好看。(迷)
  3. 使用node.js中的nw.js 或者electron庫來寫。

最終選擇了第三種方案,前端介面就是html+Javascript+css的網頁框架,使用bootstrap框架的話就能夠實現還不錯的介面效果。程式邏輯自然就是使用Javascript來寫,node.js也有不錯的效能、markdown庫也有,實現起來不用太麻煩!

然而問題是:本人對前端技術並不瞭解,於是只能經常區“段錯誤”、“棧溢位”等網站求助。
另一個問題就是electron和nw.js的官網的文件其實不是很全,特別是中文文件基本沒有,於是踩了不少坑。

nw.js VS electron

node.js有兩個類似的庫,都能夠用web技術來構建本地程式,兩個都有不少大專案在用:

  • nw.js:Leanote、mongo的軟體、Whatsapp等等……
  • electron:github、VScode、Wordpress、atom等都用的這個框架

看起來好像electron的文件更多、看起來也更好,於是選擇了使用這個框架。

架構

選定了方案之後就要開始選擇軟體的架構。

View層:檢視層就是html檔案,利用bootstrap框架,有著不少很好看的樣式、不需要自己繪製圖標、定製樣式了,也有不少動態效果。

Model層:其實有幾個想法。第一個就是直接使用json檔案,但是需要自己造輪子,談不上多麻煩,但是還是不大樂意。第二個方案就是使用資料庫了,最好是本地資料庫sqlite3,輕量級,就一個檔案,也很好用。然而,這是一個坑,electron對sqlite3不相容,報錯(為此浪費了我 大半天的事件),索性放棄。

正當我打算動手造輪子的時候,發現了node.js的一個很神奇的庫lowdb。說是一個數據庫,其實管理的就是一個json檔案,使用起來看起來非常方便,CRUD有非常好的支援,稍微封裝一下就好。

Control層:其實沒什麼好說的,就是JavaScript實現查詢資料庫、對DOM操作操作,就成了。

其實當初選用node.js也是想學一下JavaScript,好在語言方面與C++和python都挺像,看看文件,差不多就能摸索摸索了。

相關推薦

Electron實現markdown筆記軟體

關於這個markdown筆記軟體(一)——總體的思路和介紹 專案原始碼 目錄 介紹 一直想寫一個類似為知筆記、螞蟻筆記之類的用來記筆記的軟體。想來需要有這些需求: 要支援markdown。 markdo

Electron實現markdown筆記軟體

關於這個markdown筆記軟體(二)——模型層設計 目錄 資料庫選擇 之前也說過我們使用的是lowdb作為資料庫處理,這個node.js非常小巧,只管理一個json檔案。這對於一個小專案來說,是最合適不過的了。

Electron實現markdown筆記軟體

關於這個markdown筆記軟體(五)——應用邏輯、electron對話方塊 專案原始碼 目錄 主體邏輯 程式的主題邏輯在file_manage.js中定義。在程式中使用“標籤”,而不是“資料夾”來管理各個筆記,因

Electron實現markdown筆記軟體

關於這個markdown筆記軟體(三)——檢視層設計 專案原始碼 目錄 使用者介面渲染 使用者介面渲染主要是由根目錄下的的index.html和main.css實現渲染。 為了方便起見,主視窗固定大小,分為上下左

基於C++實現視訊聊天軟體

初來乍到,接觸到音視訊領域,在這期間參考開原始碼和專案程式碼,用C++做了一個類似QQ的視訊聊天Demo,這裡將其中開源的視訊通訊技術分享給大家。 工具: vs2010,MFC製作介面,網路傳輸機制(Socket等), VFW視訊採集,FFmpeg

QT5.11.1結合VS2017學習筆記環境的配置及HelloWorld的實現

前言:       最近開始學習QT,由於習慣了使用VS而網上的教程大多都是基於QTCreator的,很少有基於VS的。為此,本人決定將自己學習的過程記錄下來。水平有限,有不對的地方,歡迎大家批評指正! 工具及系統:VS2017,Qt5.11.1 一、環境配置 1、安

使用OpenCL+OpenCV實現圖像旋轉

posit 段落 大致 pro 什麽 string cpp base wechat [題外話]近期申請了一個微信公眾號:平凡程式人生。有興趣的朋友可以關註,那裏將會涉及更多更新OpenCL+OpenCV以及圖像處理方面的文章。 最近在學習《OPENCL異構計算》,其中有

Android實現音樂播放器

simple ani call ket 打開文件 界面 方式 .cn 點擊 Graphical User Interface 本篇文章記錄了我實現Android簡單音樂播放器的過程,(一)中介紹了怎麽構建音樂播放器的前端頁面。首先大家看一下,界面最後是這樣的(界面有

C#基於LibUsbDotNet實現USB通信

cti sha esc log gist ces pos 簡單 src 網上C#USB通信的資料比較少, 基本上都是基於LibUsbDotNet 和 CyUsb, 關於打印機設備的還有一個OPOS。 本篇文章基於LibUsbDotNet。   1. 下載並安裝 L

Mycat實現讀寫分離

mycatMycat介紹Mycat是一個國產中間件產品,作用在應用層和數據庫之間架橋,使應用通過MyCat來對後端數據庫進行管理,是一款國人自主的開源的中間件產品。算是比較優秀的一款,前身是阿裏公司在維護,很多公司也慢慢的在嘗試接入這個產品,但不得不說官方文檔似乎做的不太友好。至於為什麽選擇MyCat可能只有

實現簡易聊天室

ima log body .com 麻煩 導入 定義 右鍵 正常 預備工作: (1)讀取文件的時候可能會遇到多個文件一起傳,可以用線程池。 (2)發送不同類型的請求時,如發送的是聊天信息,發送的是文件,發送的是好友上線請求等,但對於接受者來說都是字節流無法分別,這就需要我們

Hive筆記整理

大數據 Hive [TOC] Hive筆記整理(一) Hive Hive由facebook貢獻給Apache,是一款建立在Hadoop之上的數據倉庫的基礎框架。 數據倉庫 特點——關於存放在數據倉庫中的數據的說明: 是能夠為企業的各個級別的決策提供數據支撐的數據 其實說白了,就是一個存放數據

HBase筆記整理

大數據 HBase [TOC] HBase筆記整理(一) 行列式數據庫 行式數據庫: 可以簡單的理解為類似傳統的rdbmspaint這些數據,存放的數據都是結構化的數據。 行式數據庫,是有利於全表數據的掃描,不利於只查詢個別字段 列式數據庫: 對行式數據庫的一個改進,將部分列(或者說有關聯的一些列)

Kafka筆記整理

大數據 消息隊列 消息訂閱系統 Kafka [TOC] Kafka筆記整理(一) Kafka簡介 消息隊列(Message Queue) 消息 Message 網絡中的兩臺計算機或者兩個通訊設備之間傳遞的數據。例如說:文本、音樂、視頻等內容。 隊列 Queue 一種特殊的線性表(

Redis筆記整理:Redis安裝配置與數據類型操作

數據庫 NoSQL Redis [TOC] Redis筆記整理(一):Redis安裝配置與數據類型操作 Redis簡介 Redis是一個開源(BSD許可),內存存儲的數據結構服務器,可用作數據庫,高速緩存和消息隊列代理。 它支持字符串、哈希表、列表、集合、有序集合,位圖,hyperloglo

ElasticSearch筆記整理:簡介、REST與安裝配置

大數據 ElasticSearch ELK [TOC] ElasticSearch簡介 ElasticSearch是一款基於Apache Lucene構建的開源搜索引擎,它采用Java編寫並使用Lucene構建索引、提供搜索功能,ElasticSearch的目標是讓全文搜索變得簡單,開發者可以通

Storm筆記整理:簡介與設計思想

大數據 實時計算 Storm [TOC] 實時計算概述 有別於傳統的離線批處理操作(對很多數據的集合進行的操作),實時處理,說白就是針對一條一條的數據/記錄進行操作,所有的這些操作進行一個匯總(截止到目前為止的所有的統計總和)。 實時計算與離線計算比較 Bounded:有界 離線計算面臨

從零開始造一個Markdown編輯器

實時 需要 自己實現 自己 背景 學習正則表達式 tex ID img 背景 最近學習正則表達式,於是要挑一個練手項目,恰好對markdown編輯器十分感興趣,於是就進行了一些常識。做了一個簡單的markdown解析器和編輯器。 網頁端的地址(不支持文件的操作): http

Scala筆記整理:scala基本知識

大數據 Scala [TOC] Scala簡介 Scala是一門多範式(multi-paradigm)的編程語言,設計初衷是要集成面向對象編程和函數式編程的各種特性。 Scala運行在Java虛擬機上,並兼容現有的Java程序。 Scala源代碼被編譯成Java字節碼,所以它可以運行於JVM之上,並

Spark筆記整理:spark單機安裝部署、分布式集群與HA安裝部署+spark源碼編譯

大數據 Spark [TOC] spark單機安裝部署 1.安裝scala 解壓:tar -zxvf soft/scala-2.10.5.tgz -C app/ 重命名:mv scala-2.10.5/ scala 配置到環境變量: export SCALA_HOME=/home/uplooking