vue-cli@3 + electron开发一款本地小说阅读器（

vue-cli@3 + electron开发一款本地小说阅读器（一）
vue-cli@3 + electron开发一款本地小说阅读器（二）

一、点击获取文件信息的实现

header.vue

思路：通过input type='file'的方式打开路径并获取文件信息，然后隐藏input；通过我们之前做好的样式来模拟此input的点击事件。

 <div v-if="bookName === ''" class="importBook">
            <input style="display: none" ref="fileInfo" type="file" @change="getTxtInfo">
            <div @click="getTxt" class="headerBtn">
                <i class="el-icon-plus"></i>
            </div>
        </div>

绑定两个事件的方式为vue的ref="fileInfo"其中fileInfo为用于识别

点击div的方法getTxt()模拟refs的点击事件this.$refs.fileInfo.click()

getTxt() {
                this.$refs.fileInfo.click();
            }

input中的值发生改变就响应getTxtInfo事件，所以input要绑定change事件。

getTxtInfo() {
                let file = this.$refs.fileInfo.files[0]
                if (file) {
                    let fileType = file.type;
                    if (fileType !== 'text/plain') {
                        alert('请选择txt文件');
                        return;
                    } else {

                        let bookName = file.name;
                        let size = file.size;
                        let src = file.path;
                        let id = Date.parse(new Date());
                        let date =this.dateFormatter(id);
                        let bookItem = {
                            id: id,
                            bookName: bookName,
                            date:date,
                            size: size,
                            tab: '默认标签',
                            src: src
                        }
                        Control.create(bookItem)//存入数据的方法
                    }
                }
                this.$refs.fileInfo.value = ''//每次都要清空input值
            },

注意：每次要把input中的值清空一下

这里我们把时间戳直接作为ID，因为我们每次只能选一个文件，如果要选多个文件可以按照顺序后面再加一个ID，作为唯一的ID，然后时间戳格式化日期的时候再把后面的ID截取掉就可以了。

vue中方法调用方法的方式要加this关键字，比如我们这里就调用了格式化日期的方法。

dateFormatter(e){
                let date = new Date(e)
                let Y = date.getFullYear() + '-';
                let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
                let D = date.getDate() + ' ';
                let h = date.getHours() + ':';
                let m = date.getMinutes() + ':';
                let s = date.getSeconds();
                return Y+M+D+h+m+s;
            }

二、把获取到的数据存入本地

先建一个json数组用来存放数据，bookList.json，初始为[]

[]

编写存数据的js，control.js

这里需要用到node中的fs模块，用来读数据和写数据
另外拿到建好的json 文件路径

const fs = require('fs')
const path = 'src/plugins/bookList.json'


export default {

    //增
    create: function (e) {      

        fs.readFile(path, (err, data) => {
            if (err) throw err;

            let newData = JSON.parse(data.toString())
            newData.unshift(e)
            console.log(newData);

            newData = JSON.stringify(newData)
            fs.writeFile(path, newData, (err, data) => {
                if (err) throw err;
                console.log('保存成功！');
            })
        })
    }
}

说明：fs读的data需要先转换为字符串，然后字符串再转换为json格式，再调用json的unshift方法往json数组的开始位置插入传过来的txt信息。记住，我们是往开头插数据！

同样的道理，写数据要先转换成字符串再往里面写数据。

最后在Header.vue中把写好的control.js引入并调用create方法就可以了

import Control from '../plugins/control'

 Control.create(bookItem)

三、渲染保存的数据

booklist.vue中引入保存的json文件就可以了

 data() {
            return {
                tableData: require('../plugins/bookList')
            }
        }

四、效果演示

效果演示

五、看下json文件

[
  {
    "id": 1562735609000,
    "bookName": "测试123.txt",
    "date": "2019-07-10 13:13:29",
    "size": 1070,
    "tab": "默认标签",
    "src": "G:\\测试123.txt"
  },
  {
    "id": 1562735603000,
    "bookName": "测试123 - 副本.txt",
    "date": "2019-07-10 13:13:23",
    "size": 8,
    "tab": "默认标签",
    "src": "G:\\测试123 - 副本.txt"
  }
]

回头把代码贴到公众号里，公众号里点击菜单【小说阅读】即可查看所有关于这个小项目的文章和代码

ITmonkey