内容简介：我的机器：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
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Django 1.0 Template Development
Scott Newman / Packt / 2008 / 24.99
Django is a high-level Python web application framework designed to support the rapid development of dynamic websites, web applications, and web services. Getting the most out of its template system a......一起来看看 《Django 1.0 Template Development》 这本书的介绍吧!
