内容简介:我的机器: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 .
- electron-quick-start.zip (19 KB)
- 下载次数: 0
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- TiDB入门(四):从入门到“跑路”
- MyBatis从入门到精通(一):MyBatis入门
- MyBatis从入门到精通(一):MyBatis入门
- Docker入门(一)用hello world入门docker
- 赵童鞋带你入门PHP(六) ThinkPHP框架入门
- 初学者入门 Golang 的学习型项目,go入门项目
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。