这是一个通过javascript模拟数据库控制台的小程序，不过目前的功能十分简单仅能完成简单的创建表，删除表和简单的select,update,insert,delete操作。想做这个已经很久了，但由于自己的水平有限到目前为止也只能做成这个样子，如果大家有什么好的想法或建议，还望多多指教。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>虚拟数据库控制台</title>
<link rel="stylesheet" href="./css/css.css" />
</head>
<body>
<div class="console">
<div class="output">
<pre class="systemInfo">
******************************************
* *
* Virtual Database Console *
* *
******************************************
</pre>
<div class="userOutput"></div>
</div>
<div class="input" contenteditable="true"></div>
</div>
<div class="data">
</div>
<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
</body>
</html>
html,body{
margin:0px;
padding: 0px;
}
body{
background-color: #000;
}
.console{
width:100%;
margin: 0 5px;
}
.input{
height:200px;
color: #fff;
outline: none;
}
.systemInfo{
color:#0f0;
}
.userOutput{
color:#00d;
}
.userOutput table{
color:red;
margin-left:20px;
border:0px;
}
.data{
display: none;
}
$(function(){
initEditAndFocus();
//处理按键事件
$(".input").keydown(function(event){
//keyCode:13(代表回车)
if(event.keyCode==13){
var command=$(".input").text();
command=$.trim(command);
if(command.substr(-1)==';'){
showInfo(command);
//处理sql命令
executeCommand(command.replace(/SQL>/,''));
initEditAndFocus();
return false;
}
}
});
//初始化编辑框并定位光标
function initEditAndFocus(){
$(".input").html("SQL>");
$(".input").focus();
var sel = window.getSelection();
var range = document.createRange();
range.selectNodeContents($(".input").get(0));
range.collapse(false);
sel.removeAllRanges();
sel.addRange(range);
}
//向控制台输出信息
function showInfo(info){
$(".userOutput").append("<p>"+info+"</p>");
}
//sql命令正则表达式
var createTableRegexp=/^create\stable\s(\w+)\s*\(([\s|\w|,|\(|\)]+?)\);$/i;
var dropTableRegexp=/^drop\s+table\s+(\w+);$/i;
var selectRegexp=/^select\s+([\w|\*|\s|,]+?)\s+from\s+(\w+)(\swhere\s([\s|\w|=|'|"]+))?;$/i;
var insertRegexp=/^insert\sinto\s(\w+)\s*(\([\s|\w|,]+?\))?\s+values\s*\(([\s|\w|,|'|"]+)\);$/i;
var updateRegexp=/^update\s+(\w+)\s+set\s+([\s|\w|=|,|'|"]+?)(\swhere\s([\s|\w|=|'|"]+))?;$/i;
var deleteRegexp=/^delete\s+from\s+(\w+)(\swhere\s([\s|\w|=|'|"]+))?;$/i;
//执行sql命令
function executeCommand(command){
var result="";
//判断sql类型
if((result=createTableRegexp.exec(command))!=null){
/*创建表*/
var tableName=result[1];
var colDefs=[];
var temp=result[2].split(",");
for(var i=0;i<temp.length;i++){
var temp2=temp[i].split(" ");
var colDef={};
colDef.name=$.trim(temp2[0]);
colDef.type=$.trim(temp2[1]);
colDefs.push(colDef);
}
createTable(tableName,colDefs);
}else if((result=dropTableRegexp.exec(command))!=null){
/*删除表*/
var tableName=result[1];
dropTable(tableName);
}else if((result=selectRegexp.exec(command))!=null){
/*执行查询*/
var selectCols=result[1];
var tableName=result[2];
var where=result[4];
if(typeof where=='undefined'||/^\s*(\w+)\s*=\s*(['|"]?\w+['|"]?)\s*$/.test(where)){
exeSelect(tableName,selectCols,where);
}else{
showInfo("目前where条件支持有限，我已经尽力了，期待明天会更好吧！");
}
}else if((result=insertRegexp.exec(command))!=null){
/*执行插入*/
var tableName=result[1];
var cols=(typeof result[2]!='undefined')?result[2].replace(/[\(|\)]/g,"").split(","):[];
var values=result[3].replace(/['|"]/g,"").split(",");
exeInsert(tableName,cols,values);
}else if((result=updateRegexp.exec(command))!=null){
/*执行更新*/
var tableName=result[1];
var updateCols=result[2];
var where=result[4];
if(typeof where=='undefined'||/^\s*(\w+)\s*=\s*(['|"]?\w+['|"]?)\s*$/.test(where)){
exeUpdate(tableName,updateCols,where);
}else{
showInfo("目前where条件支持有限，我已经尽力了，期待明天会更好吧！");
}
}else if((result=deleteRegexp.exec(command))!=null){
/*执行删除*/
var tableName=result[1];
var where=result[3];
if(typeof where=='undefined'||/^\s*(\w+)\s*=\s*(['|"]?\w+['|"]?)\s*$/.test(where)){
exeDelete(tableName,where);
}else{
showInfo("目前where条件支持有限，我已经尽力了，期待明天会更好吧！");
}
}else{
showInfo("不晓得你输入的是啥玩意，我咋就看不懂呢。也许你是对的，敬请期待以后的版本吧！");
}
}
function createTable(tableName,colDefs){
var table=$(".data db_table[name='"+tableName+"']");
if(table.length!=0){
showInfo("表【"+tableName+"】已存在！");
}else{
$(".data").append("<db_table name='"+tableName+"'><table_def></table_def><table_data></table_data></db_table>");
for(var i=0;i<colDefs.length;i++){
$(".data db_table[name='"+tableName+"'] table_def").append("<column name='"+colDefs[i].name+"' type='"+colDefs[i].type+"'/>");
}
showInfo("表【"+tableName+"】已创建！");
}
}
function dropTable(tableName){
var table=$(".data db_table[name='"+tableName+"']");
if(table.length==0){
showInfo("表【"+tableName+"】不存在！");
}else{
table.remove();
showInfo("表【"+tableName+"】已删除！");
}
}
function exeSelect(tableName,selectCols,where){
var table=$(".data db_table[name='"+tableName+"']");
if(table.length==0){
showInfo("表【"+tableName+"】不存在！");
}else{
cols=[];
if(selectCols=="*"){
table.find("table_def column").each(function(i){
cols.push($(this).attr("name"));
});
}else{
cols=selectCols.split(/,|\s/);
}
var selectOutput="<table>"
selectOutput+="<tr>"
for(var i=0;i<cols.length;i++){
selectOutput+="<th>"+cols[i]+"</th>";
}
selectOutput+="</tr>"
var selectRowData;
if(typeof where=='undefined'){
selectRowData=table.find("table_data").find("row_data");
}else{
var condition=where.split("=");
var colName=$.trim(condition[0]);
var colVal=$.trim(condition[1]).replace(/['|"]/g,"");
selectRowData=table.find("table_data").find("row_data["+colName+"='"+colVal+"']");
}
selectRowData.each(function(i){
selectOutput+="<tr>"
for(var i=0;i<cols.length;i++){
selectOutput+="<td>"+$(this).attr(cols[i])+"</td>";
}
selectOutput+="</tr>"
});
selectOutput+="</table>"
showInfo(selectOutput);
showInfo("查询完毕！");
}
}
function exeInsert(tableName,cols,values){
var table=$(".data db_table[name='"+tableName+"']");
if(table.length==0){
showInfo("表【"+tableName+"】不存在！");
}else{
if(cols==""||cols==[]){
cols=[];
table.find("table_def column").each(function(i){
cols.push($(this).attr("name"));
});
}
var rowId=randomString(32);
table.find("table_data").append("<row_data id='"+rowId+"' />");
var newRow=table.find("table_data").find("row_data[id='"+rowId+"']");
for(var i=0;i<cols.length;i++){
newRow.attr(cols[i],values[i]);
}
showInfo("记录已插入！");
}
}
function exeUpdate(tableName,updateCols,where){
var table=$(".data db_table[name='"+tableName+"']");
if(table.length==0){
showInfo("表【"+tableName+"】不存在！");
}else{
updateCols=updateCols.replace(/['|"]/g,"");
var updateColArray=updateCols.split(",");
for(var i=0;i<updateColArray.length;i++){
var updateInfo=updateColArray[i].split("=");
var updateColName=$.trim(updateInfo[0]);
var updateColVal=$.trim(updateInfo[1]);
if(typeof where=='undefined'){
table.find("table_data").find("row_data").attr(updateColName,updateColVal);
}else{
var condition=where.split("=");
var colName=$.trim(condition[0]);
var colVal=$.trim(condition[1]).replace(/['|"]/g,"");
table.find("table_data").find("row_data["+colName+"='"+colVal+"']").attr(updateColName,updateColVal);
}
}
showInfo("数据已更新！");
}
}
function exeDelete(tableName,where){
var table=$(".data db_table[name='"+tableName+"']");
if(table.length==0){
showInfo("表【"+tableName+"】不存在！");
}else{
if(typeof where=='undefined'){
table.find("table_data").find("row_data").remove();
}else{
var condition=where.split("=");
var colName=$.trim(condition[0]);
var colVal=$.trim(condition[1]).replace(/['|"]/g,"");
table.find("table_data").find("row_data["+colName+"='"+colVal+"']").remove();
}
showInfo("记录已删除！");
}
}
//生成随机字符串
function randomString(len){
len = len || 32;
var $chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890';
var maxPos = $chars.length;
var str = '';
for (i = 0; i < len; i++) {
str += $chars.charAt(Math.floor(Math.random() * maxPos));
}
return str;
}
});