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 ...
随机推荐
- unity3d动态加载资源
在Unity3D的网络游戏中实现资源动态加载 分类: 最新学习2012-06-14 13:35 1127人阅读 评论(0) 收藏 举报 网络游戏nullvectorjson游戏string 用Unit ...
- Vue.js 2 入门与提高（一）
** Vue.js -- 渐进式前端框架 ** Vue.js作为一个后起的前端框架,借鉴了Angular .React等现代前端框架/库的诸多特点,并且 取得了相当不错的成绩. Vue.js的定位是一 ...
- mysql解压版安装和卸载
问题1:发生系统错误 5. 解决:使用管理员身份安装即可 问题2:发生系统错误 2. 解决:cd C:\Program Files\MySQL\MySQL Server 5.6\bin 进入mysql ...
- IE8 兼容 getElementsByClassName
IE8以下版本没有getElementsByClassName这个方法,以下是兼容写法 function ieGetElementsByClassName() { if (!document.getE ...
- 调用http接口耗时过长。
利用CRUL命令简单分析请求细节所占用的时间吧 curl -o /dev/null -s -w %{http_code}:%{time_namelookup}:%{time_redirect}:%{t ...
- 小图拼接大图MATLAB实现
小图拼接大图MATLAB实现 1.实现效果图 原图 效果图 2.代码 files = dir(fullfile('D:\document\GitHub\homework\digital image p ...
- #region的作用和注释快捷键
让函数在编辑器中收起来,简洁 #region All MenuItems [@MenuItem("xxx")] public static void Init() { XXXXX; ...
- 去除app中的标题栏
我之前一直用的是在oncreate方法中添加 requestWindowFeature(Window.FEATURE_NO_TITLE),并且必须写在setContentView(R.layout.a ...
- 【BZOJ1492】[NOI2007]货币兑换Cash 斜率优化+cdq分治
[BZOJ10492][NOI2007]货币兑换Cash Description 小Y最近在一家金券交易所工作.该金券交易所只发行交易两种金券:A纪念券(以下简称A券)和 B纪念券(以下简称B券).每 ...
- DP(正解完全背包+容斥)
DP Time Limit:10000MS Memory Limit:165888KB 64bit IO Format:%lld & %llu Submit Status De ...