Electronic入门(mysql+element-ui)

栏目: 数据库 · 发布时间: 6年前

内容简介：我的机器：Windows10，64位，文章时间：2019-01-27示例运行效果如下图所示：

我的机器：Windows10，64位，文章时间：2019-01-27

示例运行效果如下图所示：

一、环境装备

1.安装node.js、git(如下载示例项目用，如不想使用git下载，可以下载我提供的附件)。

2.创建项目目录，如d:\mynode，启动cmd，进入目录，下载electron.js示例项目。命令：

git clone https://github.com/electron/electron-quick-start

3.保持在命令行状态，使用cd命令，进入electron-quick-start目录，安装依赖，命令如下：

set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

npm install

npm install mysql –save

很快一个纯净的示例工程就下载了。到此，开发环境装备完毕。如需更好的代码开发体验，请安装vscode。

二、前端框架

前端使用element-ui展示，下载element-ui、vue的js、css文件，放到项目目录中。我一直使用这种低级的访方式。

三、主要代码

1.数据库脚本

#数据库初始化脚本
create table t_test(id int primary key  auto_increment,name varchar(60));

insert into t_test(name) values('wallimn');
insert into t_test(name) values('superman');
insert into t_test(name) values('batman');
insert into t_test(name) values('warrior');
insert into t_test(name) values('spur');
insert into t_test(name) values('boat');

2.数据访问代码，db.js。

var mysql = require('mysql');

// 创建一个数据库连接池
var pool = mysql.createPool({
  connectionLimit: 50,
  host:"127.0.0.1",
  port:"3306",
  user: "root",
  password: "",
  database: "test"
});

// SELECT * FROM users
// 让我们的方法支持两种模式
// 一种是只传入 SQL 语句和回调函数
// 一种是传入SQL语句、参数数据、回调函数

exports.query = function (sql, P, C) {
  var params = [];
  var callback;

  // 如果用户传入了两个参数，就是SQL和callback
  console.log("函数参数：",arguments);
  if (arguments.length == 2 && typeof arguments[1] == 'function') {
    callback = P;
  } else if (arguments.length == 3 && Array.isArray(arguments[1]) && typeof arguments[2] == 'function') {
    params = P;
    callback = C;
  } else {
    throw new Error('对不起，参数个数不匹配或者参数类型错误');
  }


  // 如果用户传入了三个参数，那么就是SQL和参数数组、回调函数


  // 从池子里面拿一个可以使用的连接
  pool.getConnection(function (err, connection) {
    if(err){
      console.error(err);
      callback.apply(null,err);
      return;
    }
    // Use the connection
    connection.query(sql, params, function () {
      // 使用完毕之后，将该连接释放回连接池
      connection.release();
      callback.apply(null, arguments);
    });
  });
};

3.页面代码，index.js。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>hello electron quick start</title>
    <link rel="stylesheet" type="text/css" href="./libs/element-ui.v2.4.9/theme-chalk/index.css">
    <style>
        .el-header, .el-footer {
          background-color: #B3C0D1;
          color: #333;
          text-align: center;
        }
        
        .el-aside {
          background-color: #D3DCE6;
          color: #333;
        }
        
        .el-main {
          /*background-color: #E9EEF3;*/
          color: #333;
          text-align: center;
        }
      </style>
  </head>
  <body>
    <div id="app">
      <el-container>
          <el-header>
            <h4>
              eletron.js + element-ui + mysql使用示例, by wallimn, 2019-01-27.
            </h4>
          </el-header>
          <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-container>
              <el-main>
                <el-table :data="items" stripe border style="width: 100%">
                  <el-table-column prop="id" label="代码" width="60"> </el-table-column>
                  <el-table-column prop="name" label="姓名"> </el-table-column>    
                  <el-table-column label="操作" align="center" width="160">
                      <template slot-scope="scope">
                          <el-button size="mini" @click="deleteData(scope.$index, scope.row)">删除</el-button>
                          <el-button size="mini" @click="showData(scope.$index, scope.row)">查看</el-button>
                        </template>
                    </el-table-column>                
                </el-table>                  
              </el-main>
              <el-footer>
                <h5>
                  I am using Node.js {{versions.node}}</script>,
                  Chromium {{versions.chrome}}</script>,
                  and Electron {{versions.electron}}</script>.
                </h5>
              </el-footer>
            </el-container>
          </el-container>
      </el-container>
   
   
   
      <el-dialog :visible.sync="visible" title="详细信息">
          <p>代码：{{curRow.id}}</p>
          <p>姓名：{{curRow.name}}</p>
      </el-dialog> 
   
    </div>
    
    <script type="text/javascript" src="./libs/vue.js"></script>

	  <!-- 引入组件库 -->
	  <script src="./libs/element-ui.v2.4.9/index.js"></script>
    <script type="text/javascript">
      // Vue实例化
      var doit = new Vue({
        el:'#app',
        data: function(){
          return {
            items:[{id:1,name:'name'}],
            visible:false,
            curRow:{},
            versions:process.versions,
            db:require('./db')
          };
        },
        created:function(){
            var self = this;
            //var db = require('./db');
            self.db.query("select * from t_test",function(err,rows){
              if(err){
                console.error(err);
              }
              else{
                var len = rows.length;
                self.items = [];
                for(var i=0; i<len; i++ ){
                  self.items.push({id:rows[i].id,name:rows[i].name});
                }
              }
            });
        },
        methods: {
          showData: function(index,row){
            this.curRow=row;
            this.visible=true;
          },
          deleteData:function(index,row){
            var self = this;
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                callback:function(action){
                  if(action==='confirm'){
                    //alert('删除');
                    self.db.query("delete from t_test where id=?",[row.id],function(err,rows){
                      if(!err){
                        self.items.splice(index,1);
                      }
                    });
                  }
                }
              });
          }//end of function
        }	//end of methods		
      });
   
    </script>
  </body>
</html>

四、附件

提供了全部的代码，下载，解压，启动命令行，进入目录，设置淘宝镜像，npm install。启动命令为：electron .