谷歌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. JavaScript的toString()

    JavaScript toString() 方法 JavaScript Boolean 对象 定义和用法 toString() 方法可把一个逻辑值转换为字符串,并返回结果. 语法 booleanObj ...

  2. jfreechart折线图 demo

    public class ChartUtil { public static ChartUtil chartUtil; private RoomViewsDataService roomViewsDa ...

  3. 如何自定义View

    1. 首先 在values目录下建立attrs.xml文件,添加属性内容 ·在布局文件中添加新的命名空间xmlns,然后可以使用命名空间给自定义的空间设置属性 attrs.xml <resour ...

  4. sublime使用技巧（2）-- 实用插件推荐【持续更新】

    1.Auto semicolon 在括号内输入分号,会自动把光标移到行尾然后再输入分号. 2.DocBlockr 补全注析格式,例如在函数上面输入/** + Enter,就会自动补全函数的注析说明. ...

  5. Java 异常介绍

    Java标准库内建了一些通用的异常,这些类以 Throwable 为顶层父类.Throwable又派生出 Error 类和 Exception 类. 错误:Error类以及他的子类的实例,代表了JVM ...

  6. 7月份计划-----dream

    梦想还是要有的,万一实现了呢? 数学 150[total] 专业课 150[total] 英语 100[total] 政治 100[total] 第一轮复习计划开始执行 1.专业课: 通过课件把所有的 ...

  7. 解决不同浏览器创建不同 XMLHTTP 对象的问题

    function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XML ...

  8. Java语言平台

    J2SE(Java 2 Platform Standard Edition) 标准版 开发普通桌面和商务应用程序提供的解决方案,该技术体系是下面两者的基础,可以完成一些桌面应用程序的开发 J2ME(J ...

  9. JavaScript点击事件-一个按钮触发另一个按钮

    <input type="button" value="Click" id="C" onclick="Go();" ...

  10. 我的Android进阶之旅------>四种呼叫转移场景

    运行商为我们提供了如下4中呼叫转移场景: 1.始终进行呼叫转移:不管当前手机处于何种状态,来电都会被转移到指定的电话号码上.在使用这种呼叫转移时应当非常小心,如果启用了这种呼叫转移,你可就永远也接不着 ...