關於這個markdown筆記軟體（五）——應用邏輯、electron對話方塊

專案原始碼

目錄

主體邏輯

程式的主題邏輯在file_manage.js中定義。在程式中使用“標籤”，而不是“資料夾”來管理各個筆記，因此是一個比較扁平的邏輯。
程式所要實現的功能也就是對“標籤”和“筆記”兩種元素的增、刪、查、改。

功能

• 要能夠新建、刪除筆記
• 要能夠新建、刪除標籤
• 要能夠自動儲存筆記
• 要能夠修改筆記的標籤歸屬
• 要能夠匯出為pdf、圖片、和md原始檔
• 要能夠匯入md檔案
• 要能夠修改樣式

以上功能全部在file_manage.js中實現。

匯出

匯出的時候用到了phantom庫。將渲染好的html檔案作為目標傳入phantom庫，就能夠實現作為pdf和圖片匯出。具體程式碼如下：

function make_file(filename){
    var readStream = fs.createReadStream(__dirname+'/data/'+curr_note+'/'+curr_note+'.html');
    var writeStream = fs.createWriteStream(__dirname+'/data/output.html');
    readStream.pipe(writeStream);
    phantom.create().then(function
 
(ph) {
        ph.createPage().then(function(page) {
            page.open("file://"+__dirname+'/data/output.html').then(function(status) {
                page.property('viewportSize',{width: 800, height: 600});
                page.render(filename).then(function(){
                    ph.exit();
                });
            });
        });
    });
}
 

圖片和pdf是一套程式碼，不需要分別處理。也可以匯出為md原始檔，只需要把對應md檔案複製一份傳送到對應位置即可。

儲存

程式可以使用ctrl+S的快捷鍵來儲存。程式每十秒鐘也會自動儲存一次。
使用schedule實現，程式碼如下：

var rule     = new schedule.RecurrenceRule();  
var times    = [1,11,21,31,41,51];  
rule.second  = times;  
schedule.scheduleJob(rule, function(){  
    save_note(true,false);
});  

而function save_note(auto = false,build = false,reload = true)則是具體儲存檔案的函式。

auto表示時候是自動儲存，build引數表示儲存完成之後時候需要預覽，reload引數表示儲存完成之後時候需要重新載入目錄。

匯入

匯入md檔案

程式可以自己匯入字尾是.md的檔案。這是在input_file函式之中實現的。

匯入圖片

檔案也可以實現對圖片和其他素材對管理。在匯入圖片對時候，會將圖片複製到應用程式自己的對應資料夾下，然後給出目的地的url。這樣在生成html的時候就能減少圖片和其他資源丟失的情況。

function import_file(){
    save_note();
    dialog.showOpenDialog({
        properties: ['openFile']
      }, function (files) {
        if (files){
            var dir_name = path.dirname(files[0]);
            var base_name = path.basename(files[0]);
            var desp = path.join(__dirname+'/data/'+curr_note+'/',base_name);
            var readStream = fs.createReadStream(files[0]);
            var writeStream = fs.createWriteStream(desp);
            readStream.pipe(writeStream);
            insertAtCursor(document.getElementById('raw_text'),"[]("+__dirname+'/data/'+curr_note+'/'+base_name+")")
        }
    })
}

insertAtCursor函式可以在對應位置插入一個markdown格式的“”並在其中生成圖片的url。（這個函式也借鑑了網路資源）。

對話方塊

electron 有一個模組dialog提供來對話方塊。可以通過如下方式呼叫：

儲存對話方塊

const {dialog} = require('electron');//主程序
const {dialog} = require('electron').remote;//渲染程序

這個模組提供了系統訊息對話方塊、開啟對話方塊、儲存對話方塊、錯誤對話方塊等。
例如，在匯出檔案時，需要使用儲存檔案對話方塊：

    const options = {
        title: '匯出',
        filters: [
          { name: 'PDF文稿', extensions: ['pdf'] },
          { name: '圖片格式', extensions: ['jpg','jpeg','png','gif'] },
          { name: 'Markdown檔案', extensions: ['md'] }
        ]
    }
    dialog.showSaveDialog(options, function (filename) {
        console.log(path.extname(filename));
        if(path.extname(filename) == '.md'){
            var readStream = fs.createReadStream(__dirname+'/data/'+curr_note+'/'+curr_note+'.md');
            var writeStream = fs.createWriteStream(filename);
            console.log(__dirname+'/data/'+curr_note+'/'+curr_note+'.md');
            console.log(filename);
            readStream.pipe(writeStream);
        }else{
            make_file(filename);
        }
    })

options給出來對話方塊引數。

開啟對話方塊

傳入.md檔案也需要匯入對話方塊

dialog.showOpenDialog({
        properties: ['openFile']
      }, function (files){
            //省略
        }
    );

properties可以設定時候可以開啟檔案、開啟目錄、選中多個檔案等。
回撥函式中的files則返回來一個儲存檔案地址字串的陣列。

錯誤對話方塊

引數很簡單，分別是主要和次要提示資訊。例如，發現檔案重名時候，可以如下呼叫：

dialog.showErrorBox('檔名重複','請修改檔名');