美文网首页
vue中 websql

vue中 websql

作者: 晴空万里_d3c2 | 来源:发表于2019-02-14 20:37 被阅读0次

新建一个weqsl.js文件  mian.js中添加import Websqldbfrom './assets/js/websql' ;Vue.use(Websqldb)

关于wesql有一个蛋疼的地方就是,你在vue页面中无法获得weqsl中定义操作数据库方法return的数据

当然 node.js中也是一样,,所以,,只能用promise中reslove操作了,至少本人这样认为滴

main.js中如下

export default {

install(Vue){

var dbname='websql';/*数据库名*/

    var version ='1.0'; /*数据库版本*/

    var dbdesc ='websql'; /*数据库描述*/

    var dbsize =2*1024*1024; /*数据库大小*/

    var dataBase =null; /*暂存数据库对象*/

/*数据库中的表单名*/

    var websqlTable ="websqlTable";

    //drop table friend 删除表

//打开数据库

    dataBase = window.openDatabase(dbname, version, dbdesc, dbsize,function() {});

}

Vue.prototype.websqlOpenDB=function () {

console.log("数据库打开成功")

return dataBase;

}

//

这里添加操作数据库的方法

}

关于操作websql数据库,嗯,,时间久远,不知道理解的对不对,那就在我的代码里复制吧

//新建firend表

Vue.prototype.frienddbbcreat=function () {

var tableName="friend"+localStorage.getItem("userid")

var creatTableSQL ='CREATE TABLE IF  NOT EXISTS '+ tableName +' (userid number,text text,time text,type text,photo text,name text,PRIMARY KEY (`userid`))';

  dataBase.transaction(function (ctx,result) {

ctx.executeSql(creatTableSQL,[],function(ctx,result){

console.log("表创建成功 " + tableName);

    },function(tx, error){

console.log('创建表失败:' + tableName + error.message);

    });

  });

};

//friend表插入数据

Vue.prototype.frienddbinsert=function (obj) {

var tableName="friend"+localStorage.getItem("userid");

  var insterTableSQL ='INSERT INTO ' + tableName +' (userid,text,time,type,photo,name) VALUES (?,?,?,?,?,?)';

  dataBase.transaction(function (ctx) {

ctx.executeSql(insterTableSQL,[obj.userid,obj.text,obj.time,obj.type,obj.photo,obj.name],function (ctx,result){

console.log("插入" + tableName  +"成功");

      },

      function (tx, error) {

console.log('插入'+ tableName  +'失败: ' + error.message);

      });

  });

};

//friend表更新数据1

Vue.prototype.frienddbupdate=function (obj) {

var tableName="friend"+localStorage.getItem("userid")

var sql ='UPDATE ' + tableName +' SET text = ? ,time = ?, type = ?  WHERE userid = ?';

  dataBase.transaction(function (ctx,result) {

ctx.executeSql(sql,[obj.text,obj.time,obj.type,obj.userid],function(ctx,result){

console.log("更新成功 " + tableName + name);

    },function(tx, error){

console.log('更新失败:' + tableName  + name + error.message);

    });

  });

};

//通过userid从chat表获取数据

Vue.prototype.chatget=function (userid) {

var tableName="chat"+localStorage.getItem("userid");

  var sql ='SELECT * FROM ' + tableName +' WHERE send = ?  OR  receive = ? order by time asc'

  var pp =new Promise(function (resolve,reject) {

dataBase.transaction(function (ctx) {

ctx.executeSql(sql,[userid,userid],function (ctx,result){

resolve(result)

},

        function (tx, error) {

console.log('chatget查询失败: ' + error.message);

          reject(error)

});

    });

  });

  return pp

}

相关文章

  • vue中 websql

    新建一个weqsl.js文件 mian.js中添加import Websqldbfrom './assets/js...

  • webSQL

    HTML5 Web 存储 HTML5 应用程序缓存HTML5 Web SQL 数据库Web SQL 数据库 API...

  • 封装webSQL(一)做个help先

    首先,webSQL并不在HTML的标准内,这里封装 webSQL 主要是为了后端的 MySQL。 因为想在前端做一...

  • 前端中的数据存储(不考虑服务端)

    localStorage、sessionStorage、coookie、indexDb、webSql 区别 coo...

  • indexedDB 使用记录

    由于之前的项目采用过websql作为数据存储,就是因为websql和真机的sqlite都是属于关系型数据库,可以使...

  • websql存储

    前端存储中,如果遇到大量的数据存储,localstorage(5M)满足不了的话,可以用websql,不需要借助第...

  • 前端数据库——WebSQL和IndexedDB

    一、WebSQL WebSQL是前端的一个独立模块,是web存储方式的一种,我们调试的时候会经常看到,只是一般很少...

  • 前端数据库——WebSQL和IndexedDB

    一、WebSQL WebSQL是前端的一个独立模块,是web存储方式的一种,我们调试的时候会经常看到,只是一般很少...

  • 在 cordova 项目中使用 sqlite

    websql-orm 框架,支持 typescript angular cordova chrome 的sqlit...

  • JavaScript操作sqlite

    在html5中内置了两种数据库,一种为SQLite(也是WebSQL),另一种为indexedDB。sqlite的...

网友评论

      本文标题:vue中 websql

      本文链接:https://www.haomeiwen.com/subject/tepyeqtx.html