内容简介：我的机器：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入门项目
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
