electron—Chromium有酒,Node有肉
谷歌V8引擎的出现，Node.js的诞生注定要把开发模式“搅乱”。
基于云应用，服务化，定制化的应用需求不断增加后使得传统的winform开发空间越来越小，而原来做前端的空间越来越大，Node.js 的出现，让所有做前端的同学眼前一亮，js可以写服务器啦。
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^3.0.2"
},
"dependencies": {
"element-ui": "^2.4.8",
"leaflet": "^1.3.4",
"mysql": "^2.16.0",
"vue": "^2.5.17"
}
}
const {app, BrowserWindow} = require('electron')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win
function createWindow () {
// 创建浏览器窗口。
win = new BrowserWindow({width: 800, height: 600})
// 然后加载应用的 index.html。
win.loadFile('index.html')
// 打开开发者工具
//win.webContents.openDevTools()
// 当 window 被关闭，这个事件会被触发。
win.on('closed', () => {
// 取消引用 window 对象，如果你的应用支持多窗口的话，
// 通常会把多个 window 对象存放在一个数组里面，
// 与此同时，你应该删除相应的元素。
win = null
})
}
// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)
// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
// 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上，当单击dock图标并且没有其他窗口打开时，
// 通常在应用程序中重新创建一个窗口。
if (win === null) {
createWindow()
}
})
// 在这个文件中，你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件，然后用 require 导入。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
#mapid { position:absolute;width:200px; height:200px; }
</style>
</head>
<body>
<div id="app">
<el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
<el-tab-pane label="用户管理" name="first">
<el-table
:data="tableData"
stripe
style="width: 100%">
<el-table-column
prop="SAMPLEID"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="RESIDUAL"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="LOSS"
label="地址">
</el-table-column>
<el-table-column
prop="WEIGHT"
label="其他">
</el-table-column>
</el-table> </el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs> </div>
<script>
require('element-ui') var mysql = require('mysql'); new Vue({
el: '#app',
data: function() {
return { tableData: [],activeName2: 'first' }
},
mounted() {
var _this = this;
var connection = mysql.createConnection({
host:'localhost',
user:'root',
password:'xxxx',
database:'mydb',
port:3306
});
connection.connect(function(err){
if(err){
console.log(err);
return;
}
});
connection.query('select * from users',function(err,rows){
if(err){
console.log(err);
}
console.log(rows);
_this.tableData = rows;
});
}
}) </script>
</body>
</html>
electron—Chromium有酒,Node有肉的更多相关文章
- （译）通过 HTML、JS 和 Electron 创建你的第一个桌面应用
原文:Creating Your First Desktop App With HTML, JS and Electron 作者:Danny Markov 近年来 web 应用变得越来越强大,但是桌面 ...
- 初探Electron
Electron是什么? 官网是这么描述的:Build cross platform desktop apps with JavaScript, HTML, and CSS 翻译一下:使用JavaSc ...
- electron 大体结构
1.Electron支持的平台: OS XWindowsLinux 2.一个标准的electron app包含的结构: Windows 或是 Linux中:electron/resources/app ...
- 第二章 你第首个Electron应用 | Electron in Action(中译)
本章主要内容 构建并启动Electron应用 生成package.json,配置成Electron应用 在你的项目中包含预先构建Electron版本 配置package.json以启动主进程 从主进程 ...
- Electron的介绍
1.1 Electron是什么? 引用官网的一句话: Build cross platform desktop apps with JavaScript, HTML, and CSS 1.2 诞生 技 ...
- 除了Web和Node，JavaScript还能做什么
前言 提起JavaScript,我们也许经常会想到的是,可以用来写Web页面嘛,又或者,会想起Node.js 这个服务端环境,搞前后端同构. 那么,除此之外, JavaScript还可以做什么? ...
- Electron学习入门
1.安装electron,不建议全局安装,这样每个app可以使用不同的electron版本了 2.配置package.json中的script下的start属性的值为electron . Electr ...
- 第一章 Electron介绍 | Electron in Action(中译)
Github 官方地址 代表作: Visual Studio Code Atom - Code editor. Github开源的代码编辑器,Electron起源地 Visual Studio Cod ...
- Electron 入门第一篇
官网:http://electronjs.org/docs/tutorial/application-architecture 转载:https://blog.csdn.net/qq_33323731 ...
随机推荐
- Atitit.远程接口 监控与木马 常用的api 标准化v2 q216
Atitit.远程接口 监控与木马 常用的api 标准化v2 q216 1. 木马与远程接口 监控的常用的api2 1.1. 文件复制2 1.2. 屏幕定时截图2 1.3. 邮件发送2 1.4. ...
- Java IO 常用类简介
字节流 输入字节流 InputStream输入字节流的抽象类 ByteArrayInputStreambyte数组输入流 FileInputStream文件输入流 PipedInputStream管道 ...
- 卸载Linux自带openjdk
1.查看自带jdk版本 java -version 2.查看 rpm -qa | grep java 显示如下信息: java-1.4.2-gcj-compat-1.4.2.0-40jpp. ...
- Frogger - poj 2253 (Dijkstra)
Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 28802 Accepted: 9353 Description Fr ...
- UFLDL深度学习笔记 （四）用于分类的深度网络
UFLDL深度学习笔记 (四)用于分类的深度网络 1. 主要思路 本文要讨论的"UFLDL 建立分类用深度网络"基本原理基于前2节的softmax回归和 无监督特征学习,区别在于使 ...
- How can I detect multiple logins into a Django web application from different locations?
1) Install django-tracking (thankyou for that tip Van Gale Google Maps + GeoIP is amazing!) 2) Add t ...
- 在Linux先显示文件
cat:从第一行开始显示文件内容. tac:从最后一行开始显示内容. nl:显示的时候带行号. more:一页一页显示. less:同more,可以向上翻页. head:显示文件前几行. head - ...
- iPhone缓存网络数据
本文转载至 http://blog.csdn.net/wwang196988/article/details/7542918 在iPhone应用程序中,我们经常要用去网络下载一些文件,比如xml, ...
- mybatis注解实现CURD
我们来看下面这段代码: /** * The user Mapper interface. * * @author Wangzun * * @version 1.0 * * */ @CacheNames ...
- js自动补全
<!doctype html> <html> <style> body { margin-left: 0px; margin-top: 0px; margin-ri ...