谷歌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. nexus5刷机

    1.下载需要的刷机包,hammerhead-mra58k-factory-52364034.tgz 2.解压包到某个文件下,如D:\Download 3.重启手机进入fastboot模式下,也叫boo ...

  2. iOS tableView嵌套部分WebView效果实现

    对于一些资讯类的app,比如网易新闻,今日头条这样的,他们的文章详情页大部分基本都是tableView中嵌套webView来实现的效果,其中顶部标题,关注按钮等这些可能是原生的,内容部分是webVie ...

  3. Log4Net.Config配置信息《转》

    看了log4net的简单使用之一_log4net介绍 大家对log4net组件应该有了大概的了解,下面再近一步介绍其在项目中如何应用. 1．Logger 所有的记录器都必须实现 ILog 接口,该接口 ...

  4. es6 初始化样式加载到head中

    Demo1:function loadCss(css) { css.forEach((path)=>{ console.log($('<link/>', { rel: 'styles ...

  5. 原创：解决 python中moviepy调用ffmpeg的错误：subprocess, PermissionError: [WinError 5] 拒绝访问

    近期运行一个python程序用到了moviepy.editor.VideoFileClip() moviepy基于ffmpeg,但是并不是pip安装的ffmepg, 执行 import imageio ...

  6. c# 控制台程序 隐藏控制台窗口

    在某些项目中,需要采用控制台程序,但是又不需要通过dos窗口进行交互,同时打算隐藏掉难看的控制台窗口.实现的方法很多,有的是修改链接命令.我采用的方法略有些麻烦,首先是给窗口命名,之后找到该窗口指针, ...

  7. java.sql.SQLException: 无法转换为内部表示 -〉java 查询oracle数据库返回错误信息

    java.sql.SQLException: 无法转换为内部表示 Query: SELECT * FROM  nontheasttycoon Parameters: []    at org.apac ...

  8. TP框架的增删改

    TP添加数据有三种方式 1. //1.使用数组添加 $n = M("nation"); $arr = array("Code"=>"n007&q ...

  9. C# 6.0 (C# vNext) 新功能之：Null-Conditional Operator(转)

    Null-Conditional Operator 也叫 Null propagating operator 也叫 Safe Navigation Operator 看名字,应该就有点概念了.如果还不 ...

  10. Tensorflow官方文档中文版——第一章

    第一示例: import tensorflow as tf import numpy as np x_data=np.float32(np.random.rand(,))#随机输入 y_data=np ...