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 ...
随机推荐
- 一个可以模拟GET，POST，PUT，DELET请求的HTTP在线工具
一个简陋的HTTP请求工具,UI比较丑陋.0.0,可以用于接口调试. 之前在调试公司的远程接口的时候用的是curl,后来也在网上找到几种Http请求模拟的客户端程序.当时后来发现google app ...
- spring-test-dbunit的配置和使用
1.数据源配置 <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" ...
- elk文件
=================正则匹配 [root@web02 conf.d]# cat apache-grok.conf input{ file { path => "/var/ ...
- ViewPage + Fragment 防止Fragment 重复加载问题
@Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanc ...
- Hadoop MapReduce八大步骤以及Yarn工作原理详解
Hadoop是市面上使用最多的大数据分布式文件存储系统和分布式处理系统, 其中分为两大块分别是hdfs和MapReduce, hdfs是分布式文件存储系统, 借鉴了Google的GFS论文. MapR ...
- 【Atheros】pktgen的ipv6地址处理函数参考及ipv6基本知识
pktgen有很多函数可以作为很好的网络相关的工具函数,这里列出ipv6中1:0:0:0:0:0:0:1和1::1这两种地址形式相互转化的工具函数. 第一个函数,用于把一个1:0:0:0:0:0:0: ...
- DLX精确覆盖与重复覆盖模板题
hihoCoder #1317 : 搜索四·跳舞链 原题地址:http://hihocoder.com/problemset/problem/1317 时间限制:10000ms 单点时限:1000ms ...
- iOS开发---业务逻辑
iOS开发---业务逻辑 1. 业务逻辑 iOS的app开发的最终目的是要让用户使用, 用户使用app完成自己的事就是业务逻辑, 业务逻辑的是最显眼开发工作.但是业务逻辑对于开发任务来说, 只是露 ...
- app 之间发送文件 ios
本文转载至 http://www.51094.com/?p=212 第一种: 发送一个正常的 pdf 文件,只要是能读取pdf 的都能得到响应 -(IBAction)openDocumentIn ...
- x^a=b(mod c)求解x在[0,c-1]上解的个数模板+原根求法
/************************************* 求解x^a=b(mod c) x在[0,c-1]上解的个数模板 输入:1e9>=a,b>=1,1e9>= ...