谷歌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. oracle海量数据中提升创建索引的速度

    基本信息情况: 数据库版本:Oracle Database 11g Enterprise Edition Release 11.2.0.1.0 - 64bit Production 操作系统版本:Ce ...

  2. Project Euler：Problem 87 Prime power triples

    The smallest number expressible as the sum of a prime square, prime cube, and prime fourth power is ...

  3. 【转】使用 Python Mock 类进行单元测试

    出处:https://www.oschina.net/translate/unit-testing-with-the-python-mock-class?lang=chs&page=2#

  4. python学习 01 变量

    1.变量不是‘盒子’. 1.1 不同的值,变量名没变,   变量地址也会变. 1.2 相同的值,不同的变量名,变量地址是相同的

  5. Collecting Bugs (概率dp)

    Ivan is fond of collecting. Unlike other people who collect post stamps, coins or other material stu ...

  6. 九度OJ 1260：珍珠项链 （字符串处理、DP）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:101 解决:27 题目描述: 假设有一条珍珠项链,有很多珍珠,r代表红色, b代表蓝色, w代表白色. 假设你在某一处剪开之后,你会沿着顺时 ...

  7. can t connect to mysql server on 'localhost'解决方法

    源:http://www.111cn.net/database/mysql/37700.htm 先重启服务器可解决大部分问题 错误编号:2003 问题分析: 无法连接到 mysql 服务器,可能的情况 ...

  8. [note]树链剖分

    树链剖分https://www.luogu.org/problemnew/show/P3384 概念 树链剖分,是一种将树剖分成多条不相交的链的算法,并通过其他的数据结构来维护这些链上的信息. 最简单 ...

  9. ob 函数讲解

    ob的基本原则:如果ob缓存打开,则echo的数据首先放在ob缓存.如果是header信息,直接放在程序缓存.当页面履行到最后,会把ob缓存的数据放到程序缓存,然后依次返回给涉猎器.下面我说说ob的基 ...

  10. 分布式数据库对比评测（Es,mongodb,redis）基础知识篇

    前言 我建议大家看下这个,否则后面你不知道我在说什么. 1.ES数据库相关概念 啥是Es,说白了就是支持文档搜索的分布式数据库,专门方便搜索的,GITHUB京东现在都在用. 1.ES的数据库存放在哪里 ...