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
来源: http://www.jianshu.com/p/f323261771ee