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 
 
 
 



  
    
    
    
    
    
  
  
    

      
        
      
    
    
    

	  
	  
    
      // Vue   
      var doit = new Vue({
        el:'#app',
        data: function(){
          return {
            menus:[],
            activeIndex:"1",
            service:require('./dbservice.js')
          };
        },
        created:function(){
          this.loadMenuData();
        },
        methods: {
          loadMenuData:function(){
            var self = this;
            //var db = require('./db');
            self.service.selectNavMenus(function(err,rows){
              if(err){
                console.error(err);
              }
              else{
                var len = rows.length;
                self.menus = [];
                for(var i=0; i<len; i++ ){
                  self.menus.push(rows[i]);
                }
                if(len>0){
                  if(self.menus[0].children.length==0){
                    self.activeIndex="mi"+self.menus[0].id;
                  }
                  else{
                    self.activeIndex = "mi"+self.menus[0].children[0].id;
                  }
                  console.log("      ："+self.activeIndex);
                }
              }
            });

          }
        }	//end of methods		
      });
   
    
  

  
 electron-quick-start 20190205にナビゲーションメニューを  する.zip (1 MB) 
  
ダウンロード  :2