PouchDB —— build applications that work as well offline

2022-03-29 03:00:07 阅读：149 来源： 互联网

标签：const err PouchDB well work db new doc console

1. synax

1.0 intro

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pouchdb/7.2.2/pouchdb.min.js"></script>
    <script>

        const db = new PouchDB('users');

        db.info()
            .then((info) => {
                console.log(info);
            })
    </script>
</body>

</html>

1.1 create

const db = new PouchDB('users');

const doc = {
    _id: new Date().toISOString(),
    name: 'Peter',
    age: 23,
    occupation: 'designer'
};

db.put(doc).then((res) => {
    console.log("Document inserted OK");
}).catch((err) => {
    console.error(err);
});

1.2 delete

const db = new PouchDB('users');

db.get('2022-03-28T04:15:21.236Z').then((doc) => {
    return db.remove(doc);
}).then((res) => {
    console.log("The document has been removed");
}).catch((err) => {
    console.error(err);
});

1.3 read

const db = new PouchDB('users');

db.get('2022-03-28T04:15:21.236Z').then((doc) => {
    console.log(doc);
}).catch((err) => {
    console.error(err);
});

1.4 update

const db = new PouchDB('users');

db.get('2022-03-28T04:15:21.236Z').then((doc) => {
    doc.age = 45;
    return db.put(doc);
}).then(() => {

    return db.get('2022-03-28T04:15:21.236Z');
}).then((doc) => {

    console.log(doc);
}).catch((err) => {

    console.error(err);
});

Effect: npx http-server

2. use PouchDB to generate QRcode

index.html: npx http-server后8080直接到达

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title class="title">Document</title>
</head>
<body>
    <h1 class="title"></h1>
    <div id="docs"></div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pouchdb/7.2.2/pouchdb.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-md5@0.7.3/src/md5.min.js"></script>
    <script type="text/javascript">
        const db = new PouchDB('urls');
        const sUrl1 = 'https://mbartist.com'
        const doc1 = {_id:md5(sUrl1),url:sUrl1};
        const sUrl2 = 'https://francinedelagdo.com'
        const doc2= {_id:md5(sUrl2),url:sUrl2};
        const sUrl3 = 'https://stevenahola.com'
        const doc3 = {_id:md5(sUrl3),url:sUrl3};
        const aUrls = [doc1,doc2,doc3];
db.bulkDocs(aUrls).then((res)=>{
    console.log("Documents inserted OK");
}).catch(()=>{
    console.error(err);
})

db.allDocs({ include_docs: true, descending: true }, (err, doc) => {

doc.rows.forEach(e => {
    $("#docs").append(`<p><a href="showQrCode.html?q=${e.doc._id}">${e.doc.url}</a></p>`)
});

}).catch((err) => {
console.error(err);
});;

    </script>
</body>

showQrCode.html：接受urlsearchparam，display different QR code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title class="title">Document</title>
</head>
<body>
    <h1 class="title"></h1>
    <div id="qrcode"></div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pouchdb/7.2.2/pouchdb.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-md5@0.7.3/src/md5.min.js"></script>
    <script type="text/javascript">
       const params = new URLSearchParams(window.location.search);
       const sQuery = params.get("q");
       const db = new PouchDB('urls');
        db.get(sQuery).then((doc)=>{
            const sUrl = doc.url;
            $(".title").html(sUrl);
            new QRCode($("#qrcode")[0], sUrl);
        }).catch((err)=>{
            console.error(err);
        })
    </script>
</body>

标签：const,err,PouchDB,well,work,db,new,doc,console
来源： https://www.cnblogs.com/sabertobih/p/16069971.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9