谷歌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. 利用python 掌握机器学习的过程

    转载:http://python.jobbole.com/84326/ 偶然看到的这篇文章,觉得对我挺有引导作用的.特此跟大家分享一下. 为了理解和应用机器学习技术,你需要学习 Python 或者 R ...

  2. YUV Player

    https://github.com/Yonsm/RawPlayer RawPlayer https://github.com/latelee/YUVPlayer YUVPlayer https:// ...

  3. kafka 小案例【一】---设置但个消息集群

    启动kafka服务 [ bin/kafka-server-start.sh config/server.properties ] [root@zhangxs kafka_2.]# bin/kafka- ...

  4. ASP.NET动态网站制作（20）-- C#（3）

    前言:C#的第三节课,继续上次课的内容,依旧围绕基础的只是讲解. 内容: 1.StringBuilder类:由于string类一旦创建,则不能更改.如果做字符串拼凑的话,将会非常耗费空间,如: str ...

  5. 解决Java工程URL路径中含有中文的情况

    问题: 当Java工程路径中含有中文时,得不到正确的路径 *** 解决: 这其实是编码转换的问题.当我们使用ClassLoader的getResource方法获取路径时,获取到的路径被URLEncod ...

  6. 【BZOJ3926】[Zjoi2015]诸神眷顾的幻想乡 广义后缀自动机

    [BZOJ3926][Zjoi2015]诸神眷顾的幻想乡 Description 幽香是全幻想乡里最受人欢迎的萌妹子,这天,是幽香的2600岁生日,无数幽香的粉丝到了幽香家门前的太阳花田上来为幽香庆祝 ...

  7. Zookeeper Curator 事件监听 - 秒懂

    目录 写在前面 1.1. Curator 事件监听 1.1.1. Watcher 标准的事件处理器 1.1.2. NodeCache 节点缓存的监听 1.1.3. PathChildrenCache ...

  8. Python锁

    # coding:utf-8 import threading import time def test_xc(): f = open("test.txt","a&quo ...

  9. linux c编程：线程退出

    在线程创建的时候pthread_exit都是调用的固定参数,我们先来看下如果用自动变量作为pthread_exit的参数时出现的问题 typedef struct foo{ int a; int b; ...

  10. Symfony 上传图片教程

    介绍:我使用的Bundle:"vich/uploader-bundle": "^1.4"; "liip/imagine-bundle": & ...