electron.js数据库应用---导航菜单(element-ui+mysql)

阅读更多

一、环境搭建
　　略，请见 https://wallimn.iteye.com/blog/2437140。

二、MySQL数据库脚本

create table t_menu(
    id int primary key auto_increment,
    tree_id int ,
    tree_pid int, 
    title varchar(60), 
    url varchar(255),
    target varchar(60), 
    icon varchar(255),
    remark varchar(255)
) default charset = utf8 ;

insert into t_menu(tree_id,tree_pid,title,url,target,icon,remark)
values(1,0,'系统管理','about:blank','main',null,null);

insert into t_menu(tree_id,tree_pid,title,url,target,icon,remark)
values(2,1,'用户管理','about:blank','main',null,null);

insert into t_menu(tree_id,tree_pid,title,url,target,icon,remark)
values(3,1,'角色管理','about:blank','main',null,null);

insert into t_menu(tree_id,tree_pid,title,url,target,icon,remark)
values(4,1,'功能管理','about:blank','main',null,null);

insert into t_menu(tree_id,tree_pid,title,url,target,icon,remark)
values(5,0,'业务管理','about:blank','main',null,null);

insert into t_menu(tree_id,tree_pid,title,url,target,icon,remark)
values(6,5,'JAVA业务','about:blank','main',null,null);

insert into t_menu(tree_id,tree_pid,title,url,target,icon,remark)
values(7,5,'JavaScript业务','about:blank','main',null,null);

insert into t_menu(tree_id,tree_pid,title,url,target,icon,remark)
values(8,5,'C#业务','about:blank','main',null,null);

二、后台JS
（一）数据库基础类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);
    });
  });
};

(二）后台服务类dbservice.js

var db = require("./db.js");

/*
 * 数据库服务类。
 */

/**
 *生成导航菜单
 *
 * @param {*} callback 回调函数
 */
function selectNavMenus(callback){
    db.query("select * from t_menu  order by tree_pid,tree_id",function(error,results){
        if(error){
            callback(error);
        }
        else{
            var treeArray = resultsToTreeArray(results);
            callback(null,treeArray);
        }
        //callback.apply(null,arguments);
    });
}

/**
 *转化为导航菜单使用的数组，只考虑了菜单分两级。
 *
 * @param {*} error
 * @param {*} results
 * @returns
 */
function resultsToTreeArray(results){
    var treeArray = [];
    var len = results.length;
    for(var i=0;i 
 
 
 
三、前端页面navmenu.html 
 
 
 


  
    
    
    
    
    
  
  
    

      
        
      
    
    
    

	  
	  
    
  

 
 
 
  
 
   
electron-quick-start20190205加导航菜单.zip (1 MB)
 
   
下载次数: 2