您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
websql也很犀利啊，可惜了一个被冷落的技术
发布时间：2023-04-26 15:16:53编辑：雪饮阅读（）
-
websql的模糊搜索也很犀利啊，看看效果先
用vue的cdn方式实现的一个demo咯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<script src="https://i.mazey.net/cdn/layer/layer.js"></script>
</head>
<body>
<div id="app">
<div>
<label>音乐标题</label>
<input v-model="title"/>
</div>
<div>
<label>音乐作者</label>
<input v-model="author" placeholder="佚名"/>
</div>
<button @click="addData()">增</button>
<hr/>
<input v-model="keyword"><button @click="select()">查</button>
<ul>
<li v-for="(item,index) in list" style="border:1px solid pink;">
<p>音乐编号：{{item.id}}</p>
<p>音乐标题：{{item.title}}</p>
<p>音乐作者:{{item.author}}</p>
<button @click="del(item.id)">删除</button>
<button @click="edit(index)">改</button>
<div v-if="item.edit">
<div>
<label>音乐标题</label>
<input ref="music_title" :value="item.title" />
</div>
<div>
<label>音乐作者</label>
<input ref="music_author" :value="item.author" placeholder="佚名"/>
</div>
<button @click="save(index)">保存</button>
</div>
</li>
</ul>
</div>
<script>
const { createApp } = Vue
//创建或打开一个名为mydb的数据库，设定版本号为1.0，数据库的备注为Test Db，数据库大小为dbSize
var dbSize=2 * 1024 * 1024;
var db = openDatabase('mydb', '1.0', 'Test DB', dbSize);
db.transaction(function (tx) {
//如果没有音乐表就建立音乐表 支持主键自增
tx.executeSql('CREATE TABLE IF NOT EXISTS MUSIC (id integer primary key AutoIncrement,title,author)');
});
createApp({
data() {
return {
title: 'Hello Vue!',
author:'佚名',
keyword:'',
link:'',
list:[],
}
},
methods:{
//增
addData(){
var title=this.title;
var author=this.author;
db.transaction(function (tx) {
//数据插入
tx.executeSql('INSERT INTO MUSIC (title,author) VALUES ("'+title+'", "'+author+'")');
});
layer.msg("添加成功！");
},
//删
del(id){
var that=this;
db.transaction(function (tx) {
tx.executeSql('DELETE FROM MUSIC WHERE id='+id);
that.select();
});
},
//改
edit(index){
console.log("index",index);
console.log("this.list[index]",this.list[index]);
this.list[index].edit=true;
},
//查
select(){
var keyword=this.keyword;
var that=this;
db.transaction(function (tx) {
var sql="SELECT * FROM MUSIC";
if(keyword){
sql=`SELECT * FROM MUSIC WHERE title LIKE'%`+keyword+`%'`;
}
tx.executeSql(sql, [], function (tx, results) {
console.log("results",results);
var new_rows=[];
for(var i=0;i<results.rows.length;i++){
var row=results.rows.item(i);
console.log("row",row);
row.edit=false;
new_rows.push(row);
}
console.log("new_rows",new_rows);
that.list=new_rows;
}, null);
});
},
save(index){
var that=this;
var id=this.list[index].id;
var title=this.$refs.music_title[0].value;
var author=this.$refs.music_author[0].value;
db.transaction(function (tx) {
tx.executeSql(`UPDATE MUSIC SET title='`+title+`',author='`+author+`' WHERE id=`+id);
layer.msg("修改成功!");
that.select();
});
}
}
}).mount('#app')
</script>
</body>
</html>
关键字词：JavaScript,websql
上一篇：纯web前端video标签JavaScript视频截图
下一篇：返回列表