electron.js数据库应用---入门(mysql+element-ui)

阅读更多

我的机器：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"
});

/**
 * 执行SQL，增、删、改、查全用这一个函数
 * 参数：
 *  sql：要执行的SQL语句
 *  P：参数，如果没有可不传，可以是数组或对象类型
 *  C：回调函数，执行成功后调用的语句
 */
exports.query = function (sql, P, C) {
  var params = [];
  var callback;

  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('对不起，参数个数不匹配或者参数类型错误');
  }


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

3.页面代码，index.js。

  
    
    
    
    
    
  
  
    

      
          
            

              eletron.js + element-ui + mysql使用示例, by wallimn, 2019-01-27.
            
          
          
            Aside
            
              
                
                   
                       
                  
                      
                                    
                                  
              
              
                

                  I am using Node.js {{versions.node}},
                  Chromium {{versions.chrome}},
                  and Electron {{versions.electron}}.
                
              
            
          
      
   
   
   
      
          
代码：{{curRow.id}}
          
姓名：{{curRow.name}}
       
   
    
    
    

	  
	  
    
  

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

• electron-quick-start.zip (19 KB)
• 下载次数: 11

• 
• 大小: 19.3 KB

• 查看图片附件