前端和数据

在日常编写一些页面的时候总希望能够把“用户生产”的数据保存下来到数据库中。今天学习了如何用WEBSQL（可以理解为浏览器自带的SQLite数据库）进行数据的保存以及在前端页面中对数据库进行操作。

需要准备

一个支持使用WEBSQL的浏览器，本例使用的是Chrome。
首先一上来先把html里的元素写好，以及之后按钮对应的函数名等等

  <div><table style=" width:100%"><input type="button" value="创建数据库JAY" onclick="createdb()" id="first"/><input type="button" id="second" value="创建一个song表" onclick="createtable()"/><input type="button" id="third" value="插入一首歌曲" onclick="insert()"/></table></div>
<div>歌曲名：<input type="text" id="inputsong" />喜欢人数：<input type="text" id="inputlove" />
<input type="button" id="insong" value="插入你写的歌" onclick="inputsong()"/>
</div>
<hr>
<div>
<input type="button" value="查询歌库" onclick="query()" id="query"/>
</div>
<div>
<ul id="ul">
</ul>
</div>

JS部分

初始化和创建数据库

var db = openDatabase("JAY", "1.0", "it's to save jay'songs data!", 1024 * 1024); function initDatabase() {//初始化数据库var db = getCurrentDb();if(!db) {alert("对不起，浏览器不支持");return;}    db.transaction(function (trans) {trans.executeSql("create table if not exists Movie(title text null,url text null)", [], function (trans, result) {}, function (trans, message) {alert(message);});}, function (trans, result) {}, function (trans, message) {});}//创建数据库first.onclick =function(){//打开数据库，或者直接连接数据库参数：数据库名称，版本，概述，大小if(db!=""){alert("ok");}return db;}

首先介绍一下
openDatabase() 方法对应的五个参数：
1.数据库名称 2.版本号 3.描述文本 4.数据库大小 5.创建回调
第五个参数，创建回调会在创建数据库后被调用。这里的代码比较简单，主要就是声明了db，创建了这个db（数据库）‘JAY’。此时通过F12查看资源

数据库已经被创建完毕，接下来就是创建表。

创建表

second.onclick=function(){db.transaction(function (context) {context.executeSql('CREATE TABLE song (name VARCHAR,love INT)');}, function (error) {console.log('创建表失败:[' + error.message + ']');}, function () {console.log('创建表成功');});}

这里的代码就比较显而易见了，transaction的中文意思是事务，这里要进行的就是数据库db的一个事务。具体内容，执行sql语句创建song表，以及设置其对应字段名。失败则返回创建表失败，成功则返回创建表成功。

插入数据

创建代码写死的数据

//往表里插入数据var a="说好不哭";var b="5461686"third.onclick=function(){db.transaction(function (context) {context.executeSql('INSERT INTO song (name,LOVE) VALUES (?,?)',[a,b]);//使用占位符的方法，再获取用户输入的信息即可}, function (error) {console.log('插入数据失败:[' + error.message + ']');}, function () {console.log('插入数据成功');});}

创建用户自己填写的数据

//往表里获取用户输入的数据insong.onclick=function(){var song = document.getElementById("inputsong").value;var love = document.getElementById("inputlove").value;db.transaction(function (context) {context.executeSql('INSERT INTO song (name,LOVE) VALUES (?,?)',[song,love]);//使用占位符的方法，再获取用户输入的信息即可}, function (error) {console.log('插入数据失败:[' + error.message + ']');}, function () {console.log('插入数据成功');});}

这两种方法的原理都是一样的，第二种只是通过dom操作获取到用户输入进来的value值后再通过占位符将sql语句完整后再执行。

查看数据

//查询数据库query.onclick=function(){db.transaction(function (context) {context.executeSql('SELECT * FROM song', [], function (context, results) {var items = results.rows;for (i = 0; i < items.length; i++) {var item = items.item(i);var li=document.createElement('li');li.innerText=item.name;ul.append(li);console.log(li);// var t1=["t1","t2","t3"];// document.getElementById(t1[i]).innerText=item.name; }});}, function (error) {console.log('查询数据失败:[' + error.message + ']');}, function () {console.log('查询数据成功');});}

因为不使用框架，使用原生js这个代码稍显笨拙，通过for循环创建对应数量的li标签，把歌名用innerText的方式赋值给li。然后将li标签append到ul中这样即可完成查看数据库中的name的全部数据。

总结

本次的练习主要是把前端页面和数据库练习起来，通过前端页面的元素操作数据库。

利用HTML+WEBSQL（sqlite）完成创建数据库，完成对数据的增删改查（使用原生JS编写）相关推荐

sqlLite数据库实现对数据的增删改查以及用list显示出数据内容
效果图: 1 .创建class:BlackNumberDBHelper 黑名单数据库的DBHelp import android.content.Context; import android.dat ...
数据库开发——MySQL——数据的增删改查
一.介绍 MySQL数据操作:DML 在MySQL管理软件中,可以通过SQL语句中的DML语言来实现数据的操作,包括 1.使用INSERT实现数据的插入 2.使用UPDATE实现数据的更新 3.使用D ...
R操作MySQL数据库创建表、删除表、增删改查（CRUD）
R操作MySQL数据库创建表.删除表.增删改查(CRUD) 关系数据中的数据是按照一定范式去存储的.当我们需要非常高级和复杂的Sql查询就可以使用关系数据库的数据资产.不光java和python可以容 ...
SQL Server创建数据库和数据的增删改查
SQL Server创建数据库和数据的增删改查本文是针对数据的增删改查,数据的创建首先我们使用命令创建sql server数据库 D盘新建一个文件夹DB use master go --创建数据库 ...
mysql用创建的用户登陆并修改表格_MySQL 基础学习二：创建一个用户表，并增删改查...
MySQL 基础学习二:创建一个用户表,并增删改查提示:MySQL 命令建议都用大写,因为小写运行时,还是翻译成大写的. 第一步,创建一个用户表 1,打开控制台,进入数据库 C:\Users\Ad ...
Unity 2021连接外网数据库，建表，增删改查遇到的问题记录
目录一.连接外网数据库遇到的问题二.解决问题的方案动态链接库下载地址: 效果图一.连接外网数据库遇到的问题先抛出问题,就是连接内网数据库不会报错,连接外网时和查询时就报这个错: The gi ...
C++数据库编程 MySQL Connecttor C++增删改查
C++数据库编程简介 C++数据库编程 ODBC简介 C++数据库编程 ODBC连接SQL Server数据库 C++数据库编程 ODBC插入数据 C++数据库编程 ODBC查询数据 C++数据库编程 ...
MySQL数据库安装以及SQL基本增删改查
目录 1.介绍下数据库 1.1.DB概念和特点 1.2.常见DB软件 1.3.数据库结构 2.MySQL安装与使用 2.1.安装 2.2.卸载 2.3.MySQL服务启动与关闭 2.4.MySQL登录 ...
创建Dao接口，用impl类实现对数据的增删改查
大家在JAVA的学习过程中都知道DAO是一个为数据库或其他持久化机制提供了抽象接口的对象,在不暴露数据库实现细节的前提下提供了各种数据操作,然后在impl类中实现对DAO的具体操作. 放一个经典的DA ...
c#利用反射+特性实现简单的实体映射数据库操作类实现自动增删改查（一）
///对字段特性的映射类 using System; using System.Collections.Generic; using System.Linq; using System.Text; u ...

利用HTML+WEBSQL（sqlite）完成创建数据库，完成对数据的增删改查（使用原生JS编写）