Electron - File Handling
- main.js
- views.js
- index.html
- bower_components (BootStrap)
main.js
xconst {app, BrowserWindow } = require('electron')const url = require('url')const path = require('path')let winfunction createWindow() { win = new BrowserWindow({ width : 1200, height : 800 }) win.loadURL(url.format ( { pathname : path.join(__dirname, 'index.html'), protocol : 'file:', slashes : true }))}app.on('ready', createWindow)
index.html
<html lang="en"><head> <meta charset="UTF-8"> <title>Main Page</title> <link rel = "stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"</head><body> <div class="container"> <h1>Enter Names and Email addresses of your contacts</h1> <div class="form-group"> <label for="Name">Name</label> <input type="text" name="Name" value="" id="Name" placeholder="Name" class="form-control" required> </div> <div class="form-group"> <label for="Email">Email</label> <input type="email" name="Email" value="" id="Email" placeholder="Email" class="form-control" required> </div> <div class="form-group"> <button class="btn btn-primary" id="add-to-list">Add to list!</button> </div> <div id="contact-list"> <table class="btn btn-primary" id="contact-table"> <tr> <th class="col-xs-2">No. </th> <th class="col-xs-4">Name </th> <th class="col-xs-6">Email </th> </tr> </table> </div> <script src="./view.js"></script> </div></body></html>
view.js
xxxxxxxxxxlet $ = require('jquery')let fs = require('fs')let filename = 'contacts'let sno = 0$('#add-to-list').on('click', () => { let name = $('#Name').val() let email = $('#Email').val() fs.appendFile('contacts', name + ',' + email + '\n') addEntry(name, email)})function addEntry(name, email){ if(name && email) { sno ++; let updateString = '<tr><td>' + sno + '</td></td>' + '</td><td>' + name + '</td><td>' + email + '</td></tr>' $('#contact-table').append(updateString) }}function loadAndDisplayContacts() { //Check if file exists if(fs.existsSync(filename)) { let data = fs.readFileSync(filename, 'utf8').split('\n') data.forEach((contact,index) => { let [name, email] = contact.split(',') addEntry(name,email) }) } else{ console.log("File Doesn\'t Exist. Creating new file.") fs.writeFile(filename, '', (err)=> { if(err) console.log(err) }) }}loadAndDisplayContacts()
js 라이브러리 제대로 안써보고 바로 electron 하니 벅찬 감이 있다.
먼저 node js하고 써보는걸로
'Front-end' 카테고리의 다른 글
| React - 동적인 시계 컴포넌트 구현 (0) | 2018.10.08 |
|---|---|
| React - HTML상에서 클라이언트 렌더링이 안될때 (0) | 2018.10.08 |
| React 시작 (0) | 2018.10.03 |
| Node js - 이벤트기반 비동기 I/O 처리 (2) | 2018.09.07 |
| CSS 우선적용순위 / float,clear (0) | 2018.05.05 |
댓글