一个Electron应用程序是两个应用程序合二为一。前端应用程序控制前端，后端应用程序控制后端，它们就像两个独立的程序一样进行通信。
我们已经在上一集中编写了一个小型后端代码。所以，让我们也构建一个简单的前端代码。
当然，我们可以使用像Svelte，Imba或React这样的Web框架。但我们现在要使用普通的JavaScript。
index.html
让我们设置一个最简单的交互。只有一个按钮和一个计数器，统计你按了多少次。
<!DOCTYPE html>
<html>
<body>
<h1>Welcome to the Internet!</h1>
<div id="counter"></div>
<button>Click me</button>
<script src="app.js"></script>
</body>
</html>
app.js
现在让我们编写一些app.js来控制计数器。
let counter = 0
let div = document.querySelector("#counter")
let button = document.querySelector("button")
let updateCounter = () => {
div.innerHTML = `You clicked the button ${counter} times`
}
button.addEventListener("click", () => {
counter++
updateCounter()
})
updateCounter()
结果
下一篇我们将讨论前端和后端之间如何进行通信。
安全
前端和后端代码具有不同的安全模型。
- 后端代码对您的计算机具有完全访问权限，但它只运行您信任的代码
- 前端代码运行来自互联网上站点的代码。但它无法访问浏览器之外的任何内容，甚至浏览器内。
编写Electron应用程序时，我们需要非常小心。不要将这两件事混合在一起，否则你会让陌生人完全访问你的机器，那就不好了。
