如何在Vue项目中使用websql数据库
*在项目开发中,可能需要因为项目的特殊性需要在本地存储大量的数据,因为我选择使用websql数据库来实现大量数据的存储。
**对于一些懂数据库的可以很好的理解websql,说到底其实他就是一个存在于浏览器端的小型数据库
首先我们先构建自己的Vue项目,构建完成后。新建一个JS放在那里都可以。
比如我在Src目录下新建了一个webSql文件用来写我的数据库链接。
然后我们进入自己的websql.js文件,在头部引入Vue,然后定义一个websql变量,再export default出去。
然后我们需要在函数中检测,是否支持websql
openDatabase('mydb', '1.0', 'TextDb', 2 * 1024 * 1024);
这个方法就是开启数据库,建立数据库链接,数据库链接建立成功了以后我们就需要来创建数据库的表了,通过transaction
方法来打开数据库的事务,然后用executeSql
方法来写SQL语句,transaction
有两个参数两个都是函数function
第一个function
写需要执行的executeSql
方法,第二个function
是执行失败的回调.
db.transaction(function (tx) {`tx.executeSql('CREATE TABLE IF NOT EXISTS UserAdmin (userId unique,userName), [], function (tx, resultSet) {
}, function (tx, error) {console.log('创建stu表失败:' + error.message);
}); });`
db.transaction(function(){},function(){})
第一个function执行创建数据库表的方法,第二个是创建失败的回调函数,其中参数error.message
可以查看到失败的错误信息
所有的tx.executeSql执行数据库的方法外层都需要写db.transaction。数据库的表创建好了以后我们就可以在main.js中引入这个写好的websql了
然后用Vue.use注册一下websql这样我们每次进行启动项目的时候就会自动链接我们的数据库。
然后我们回到websql文件中,把链接挂载在Vue的prototype上就可以进行全局调用了。
比如我在Login.vue中使用可以通过this.$db.transaction
方法来创建事务
如何在Vue项目中使用websql数据库相关推荐
- 如何在vue项目中修改less变量,多主题项目解决方案
如何在vue项目中修改less变量,多主题项目解决方案 参考文章: (1)如何在vue项目中修改less变量,多主题项目解决方案 (2)https://www.cnblogs.com/niubilit ...
- 如何在vue项目中使用Highmaps(vue+Highmaps)
如何在vue项目中使用Highmaps 功能需求 思路 分析 实现 第一步:引入 第二步:介绍一下这个world是个啥. 第三步:调用 注意点(十分重要) 写在最后 功能需求 近日我接到了这么一个需求 ...
- 如何在vue项目中设置首页
如何在vue项目中设置首页 1.首先创建一个vue为后缀名的文件,最好在新建的文件夹下面创建,如下图所示: 说明:一般我们的主要页面代码都是写在vue 项目中的这个src文件夹下,项目中所会引用到的组 ...
- 如何在vue项目中系统的使用iconfont字体图标
如何在vue项目中系统的使用iconfont字体图标 前言 iconfont的特色 官网注册 在项目中使用的方式 前言 今天聊一下前端iconfont的使用方式,前端的图标经过这些年的发展,变得更系统 ...
- 如何在vue项目中使用lodop打印插件
如何在vue项目中使用lodop打印插件 - 简书 先写了个webdemo <%--Created by IntelliJ IDEA.User: AdministratorDate: 2018/ ...
- vux 显示 html,如何在vue项目中使用vux
编者:只需6步,教你如何在vue项目中使用vux, 1.在项目里安装vuxnpm install vux --save2.安装vux-loader (这个vux文档中没有明文跟你说要安装的啦) np ...
- 如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- 如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图(含vue项目创建教程)
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
- 如何在Vue项目中应用TypeScript?
一.前言 在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator, # npm 下载 npm i vue-property-decorator -s # ...
- 如何在vue项目中引入html页面
在vue项目中引入html页面的两种方法 第一种:/static/page.html 第二种:通过iframe嵌入 第一种:/static/page.html 在static或public文件夹下,新 ...
最新文章
- ctf图片隐写之修改图片高度
- OpenGL ES之GLKit的使用功能和API说明
- MyBatis-Plus_Condition作用
- UiPath实践经验总结(二)
- web服务器 apache_如何配置Apache Web服务器
- 迪士尼小哥转行测试,月薪翻倍:成年人的童话世界, 需要自己创造
- opencv 凸包讲解和绘制
- android api版本 闪退_解决 Android 升级 SDK API 27 过程中遇到的问题
- matlab怎么导入数据格式,Matlab导入Excel文件中的数据的详细教程分享
- English--音标拼读
- plot函数--R语言
- 人工智能 —— 语义网络表示法
- 1.静态方法只能访问静态成员(包括变量和方法不能直接访问实例成员,除非使用对象调用2.实例方法既可以访问静态成员,也可以访问实例成员
- C++调用C的函数,出现 undefined reference to 的解决办法
- 2017广州(国际)演艺设备、智能声光产品技术展览会GETshow会刊(参展商名录)
- 计算机房灭火器单具基准,灭火器配置数量的参考
- KOLO是如何赋能NFT音乐行业?
- railgun:通过代码来简单说明
- 公务员考试题汇集之逻辑推理
- android平板怎么双清,华为M2平板10.0怎么双清?华为M2进入recovery格机恢复出厂设置...
热门文章
- 利用EGM96和EGM2008模型,分别计算计算高程异常、重力异常和垂线偏差。
- RK3568开发笔记-buildroot移远EC20模块调试记录
- 重SQL开发和重 Java开发比较
- 047ssm在线视频教育网站源码
- OpenCvSharp DnnSuperres图像超分辨率Demo测试
- python游戏编程之环境配置
- linux电子教室软件,在Deepin Linux系统下安装和设置Veyon多媒体电子教室的方法
- 数据挖掘算法原理与实践:k-均值
- 百度地图多点路线规划_自驾游路线规划神器:高德地图路书功能
- Reg Organizer v8.75 注册表及系统清理优化工具