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兼容设计
Atitit.跨语言系统服务管理器api兼容设计 1. Common api,兼容sc ,service control??1 1.1. 服务创建,use sc1 1.2. 服务delete ,use ...
- vi编辑器命令大全
>> from zhuhaiqing.info
- Trie|如何用字典树实现搜索引擎的关键词提示功能
Trie字典树 Trie字典树又称前缀树,顾名思义,是查询前缀匹配的一种树形数据结构 可以分为插入(创建) 和 查询两部分.参考地址极客时间 下图为插入字符串的过程: 创建完成后,每个字符串最后一个字 ...
- Nginx 变量漫谈
转自:http://blog.sina.com.cn/openrestyNginx 的配置文件使用的就是一门微型的编程语言,许多真实世界里的 Nginx 配置文件其实就是一个一个的小程序.当然,是不是 ...
- ubuntu安装中文man手册
1.安装manpages-zh包 sudo apt-get install manpages-zh 2.修改manpath文件 执行如下命令: vi /etc/manpath.config %s+/u ...
- Spring整合JMS(消息中间件)
这一节来说说,异步机制及spring对JMS封装 一.消息异步处理 类似于RMI.Hessian.Burlap等远程方法调用,它们都是同步的,所谓同步调用就是客户端必须等待操作完成,如果远程服务没有返 ...
- JavaScript提高：002：ASP.NET使用easy UI实现tab效果
近期在做ASP.NET项目中,须要实现一个tab页控件. 发现asp.net控件中没找到现成的. 一般的实现都须要js和div配合.于是就用到了easyui里面的. 使用也非常easy.将easyui ...
- unity批量修改AssetBundleName与Variant
批量修改指定路径下的资源的AssetBundleName与Variant. 脚本代码如下: using System.Collections; using System.Collections.Gen ...
- error items-9022:missing required icon file.the bundle does not contain an app icon for iPhone/iPad Touch of exactly '120x120' pixels,in.pen format for ios versions >= 7.0
error items-9022:missing required icon file.the bundle does not contain an app icon for iPhone/iPad ...
- 你可能不知道的5个功能强大的 HTML5 API
HTML5 新增了许多重要的特性,像 video.audio 和 canvas 等等,这些特性使得能够很容易的网页中包含多媒体内容,而不需要任何的插件或者 API.而其它的新元素,例如 section ...