Java script数据库的增删改查项目

对着视频敲了一遍代码，一个多小时的视频，花了我差不多一天的时间（8小时）

一、成果展示

二、项目理解
（一）使用IndexDB(用的是dexie)

什么是IndexDB？

随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。

通俗地讲，IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

（二）数据操作
在JS中利用 const userid 将四个输入框中的值，4个button都get到，然后就可以进行一系列的操作了。比如：
1.将数据存入indexDB
bulkcreate是写入数据库的函数，btncreate.onclick实现了点击执行了这个函数。

2.读取数据库的数据
点击btnread这个按钮，触发的是table这个函数，这个函数首先找到tbody，然后create 标签, 然后append到相应的标签下面，这样就生成了表格内容的标签。再通过td.textContent将数据填充进去就可以了。

四、小知识

一、innerText innerHTML textContent 三者在表格里面的区别

innerHTML 可以获取到表格指尖的所有标签机器内容也可以设置表格内的内容

innerText 可以获取表格最下面一层的内容或设置表格最下面一层的内容(
ddd
) (只能对td操作!!!!)

textContent 可以对每一个表格下面的每一个子元素操作可以取值可以赋值; 会打出空白节点

比如下面代码中的textContent 也可以改成innerText。

二、箭头函数
ES6标准新增了一种新的函数：Arrow Function（箭头函数）。

x => x * x
相当于

function (x) {
    return x * x;
}

另一个：

var funcName = params => params + 2;
funcName(2);
#结果是 4

#如果没有参数，可以写成：
() => {
    statements;
};

四、代码
1.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eclectronic Store</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css">
    <link rel="stylesheet" href="./style.css">

</head>
<body>
    <div class="container text-center">         <!--加上text-center，h1居中-->
        <h1 class="bg-light py-4 text-info"><i class="fas fa-plug"></i>  Eclectronic Store</h1>
    </div>
    <div class="d-flex justify-content-center">  <!--加上justify-content-center居中-->
        <form class="w-50">
            <input type="text" id="userid" class="form-control" readonly placeholder="ID" autocomplete="off">
            <input type="text" id="proname" class="form-control" placeholder="product name" autocomplete="off">
            <div class="row">
                <div class="col">
                    <input type="text" id="seller" class="form-control m-0" placeholder="seller" autocomplete="off"> <!--m-0表示 margin为0-->
                </div>
                <div class="col">
                    <input type="text" id="price" class="form-control m-0" placeholder="price" autocomplete="off">
                </div>
            </div>
        </form>
    </div>
    <!--create update read and delet button-->
    <div class="d-flex justify-content-center">
        <button class="btn btn-success" id="btn-create">Create</button>
        <button class="btn btn-primary" id="btn-read">Read</button>
        <button class="btn btn-warning" id="btn-update">Update</button>
        <button class="btn btn-danger" id="btn-delete">Delete All</button>
    </div>

<div class="container d-flex">
    <table class="table table-striped">
        <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Product Name</th>
        <th scope="col">Seller</th>
        <th scope="col">Price</th>
        <th scope="col">Edit</th>
        <th scope="col">Delete</th>
      </tr>
    </thead>
    <tbody id="tbody">
     </tbody>
    </table>
</div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dexie/3.2.1-beta.1/dexie.min.js" integrity="sha512-wAsaGgPPRSexV/zXq6eq39OTY6sQ6qVfnHqmmuW6/fTCYXZUAqWHTiQqFACabeRFPMNh8ANNB396xCMzarJ9Yg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="../js/main.js" type="module"></script>
  </body>
</html>

2.main.js

import productdb,{
    bulkcreate,
    getData,
    createEle
} from './Module.js'


let db = productdb("Productdb",{
    products:'++id,name,seller,price'
});

//input tags
const userid = document.getElementById("userid");
const proname = document.getElementById("proname");
const seller = document.getElementById("seller");
const price = document.getElementById("price");

//buttons
const btncreate = document.getElementById("btn-create");
const btnread = document.getElementById("btn-read");
const btnupdate = document.getElementById("btn-update");
const btndelete = document.getElementById("btn-delete");

//insert value using button
btncreate.onclick = () =>{
    let flag = bulkcreate(db.products,{
        name:proname.value,
        seller:seller.value,
        price:price.value
    })
    // console.log("flag");

    proname.value= seller.value=price.value = "";
    getData(db.products,(data)=>{
        // console.log(data.id);
        userid.value = data.id+1 || 1;
    });

}

//create event on btn read button
btnread.onclick = table;

function table(){
    const tbody = document.getElementById("tbody");
    while(tbody.hasChildNodes()){
       tbody.removeChild(tbody.firstChild); 
    };
    getData(db.products,(data)=>{
        if(data){
            createEle("tr",tbody,tr=>{
                for(const value in data){
                    createEle("td",tr,td=>{
                        // td.textContent = data[value];
                        td.textContent = data.price === data[value] ? `$ ${data[value]}` : data[value];
                    })
                }
                createEle("td",tr,td=>{
                    createEle("i",td,i=>{
                        i.className +="fas fa-edit btnedit"
                    })
                })
                createEle("td",tr,td=>{
                    createEle("i",td,i=>{
                        i.className +="fas fa-trash-alt btndelete"
                    })
                })
            })
        }
    })
}

3.Module.js


// create database
const productdb = (dbname,table) =>{    
    const db = new Dexie(dbname)
    db.version(1).stores(table);
    db.open();
    /*
    const  db = new Dexie('myDb');
    db.version(1).stores({
        friends:'name,age',
    })
*/
    return db;

}

//insert function
const bulkcreate = (dbtable,data)=>{
    let flag = empty(data);
    if(flag){
        dbtable.bulkAdd([data]);
        console.log("success")
    }else{
        console.log("error...")
    }

}


//check textbox validation
const empty = object =>{
    let flag=false;
    for(const value in object){
        if(object[value]!=""&& object.hasOwnProperty(value)){
            flag=true;
        }else{
            flag=false;
        }
    }
    return flag;
}

// get data from the databse
const getData=(dbtable,fn)=>{
    let index = 0;
    let obj = {};
    dbtable.count((count)=>{
        if(count){
            dbtable.each(table=>{
                obj = Sortobj(table);
                fn(obj,index++);
            })
        }else{
            fn(0);
        }
    })
}

//Sort obj
const Sortobj = sortobj=>{
    let obj = {};
    obj = {
        id:sortobj.id,
        name:sortobj.name,
        seller:sortobj.seller,
        price:sortobj.price,
    }
    return obj
}

// create dynamic elements
const createEle = (tagname, appendTo, fn) => {
    const element = document.createElement(tagname);
    if (appendTo) appendTo.appendChild(element);
    if (fn) fn(element);
  };


export default productdb;
export{
    bulkcreate,
    getData,
    createEle,
}

参考：
https://www.youtube.com/watch?v=pcelNF8Ckhk

蜗牛之路

最新

Java script数据库的增删改查项目

暧昧帖

最新

推荐

暧昧帖