谷歌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有肉的更多相关文章

  1. （译）通过 HTML、JS 和 Electron 创建你的第一个桌面应用

    原文:Creating Your First Desktop App With HTML, JS and Electron 作者:Danny Markov 近年来 web 应用变得越来越强大,但是桌面 ...

  2. 初探Electron

    Electron是什么? 官网是这么描述的:Build cross platform desktop apps with JavaScript, HTML, and CSS 翻译一下:使用JavaSc ...

  3. electron 大体结构

    1.Electron支持的平台: OS XWindowsLinux 2.一个标准的electron app包含的结构: Windows 或是 Linux中:electron/resources/app ...

  4. 第二章 你第首个Electron应用　| Electron in Action(中译)

    本章主要内容 构建并启动Electron应用 生成package.json,配置成Electron应用 在你的项目中包含预先构建Electron版本 配置package.json以启动主进程 从主进程 ...

  5. Electron的介绍

    1.1 Electron是什么? 引用官网的一句话: Build cross platform desktop apps with JavaScript, HTML, and CSS 1.2 诞生 技 ...

  6. 除了Web和Node，JavaScript还能做什么

    前言 提起JavaScript,我们也许经常会想到的是,可以用来写Web页面嘛,又或者,会想起Node.js 这个服务端环境,搞前后端同构. 那么,除此之外, JavaScript还可以做什么?   ...

  7. Electron学习入门

    1.安装electron,不建议全局安装,这样每个app可以使用不同的electron版本了 2.配置package.json中的script下的start属性的值为electron . Electr ...

  8. 第一章 Electron介绍 | Electron in Action(中译)

    Github 官方地址 代表作: Visual Studio Code Atom - Code editor. Github开源的代码编辑器,Electron起源地 Visual Studio Cod ...

  9. Electron 入门第一篇

    官网:http://electronjs.org/docs/tutorial/application-architecture 转载:https://blog.csdn.net/qq_33323731 ...

随机推荐

  1. Atitit.Java exe bat  作为windows系统服务程序运行

    Atitit.Java exe bat  作为windows系统服务程序运行 1. 使用SC命令+srvany.exe (不错,推荐)+net start1 1.1. First 创建一个java的运 ...

  2. mapreduce学习资料

    http://blog.csdn.net/tianjun2012/article/category/6794531 http://blog.csdn.net/tianjun2012/article/d ...

  3. Web性能测试工具：http_load安装&使用简介

    除了siege,在Web性能测试工具中,http_load也是比较热门和常见的一款,有时因为种种原因,只能使用现成的工具,所以多了解和掌握一种Web性能测试工具是很有必要的. 1.下载安装包 略过 2 ...

  4. PHP-Socket-阻塞与非阻塞，同步与异步概念的理解

    1. 概念理解 在进行网络编程时,我们常常见到同步(Sync)/异步(Async),阻塞(Block)/非阻塞(Unblock)四种调用方式:同步:      所谓同步,就是在发出一个功能调用时,在没 ...

  5. 解决ubuntukylin下各种终端字母重叠的方案

    ubuntukylin14.04什么都挺好定符合中国人的使用习惯的,可是就是终端字母重叠的问题特别严重;(事实上ubuntu14.04也存在这个问题) 导致非常多非常好用的终端都使用不了,像guake ...

  6. 谷歌高管无意中透露Google Glass未获得成功的原因

    Google X高管Astro Teller在接受媒体采访时无意中透露了这款设备没有取得预期成绩的原因 最终我们发现,在他们生活的世界里,数字生活和即时物理生活根本无法融为一体. Teller提出的这 ...

  7. C语言基础知识【运算符】

    C 运算符1.运算符是一种告诉编译器执行特定的数学或逻辑操作的符号.C 语言内置了丰富的运算符,并提供了以下类型的运算符:算术运算符关系运算符逻辑运算符位运算符赋值运算符杂项运算符2.杂项运算符 ↦ ...

  8. python tensorflow 安装

    我是先下载tensorflow-1.5.0rc1-cp36-cp36m-win32.whl,再执行命令行安装的 下载地址:https://pypi.python.org/pypi/tensorflow ...

  9. EL 表达式 函数 操作 字符串

    <%@tablib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> ${fn ...

  10. Collective Mindsets (medium) (逻辑题)

    B - Collective Mindsets (medium) Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I6 ...