Comment le frontal Web met-il à jour le cache ? Le mode Singleton encapsule la base de données ouverte-tutoriel HTML-php.cn

Comment le frontal Web met-il à jour le cache ? Le mode Singleton encapsule la base de données ouverte

云罗郡主

Libérer： 2018-10-17 14:29:25

avant

2213 Les gens l'ont consulté

Le contenu de cet article explique comment mettre à jour le cache sur le front-end Web ? Le mode singleton encapsule la base de données ouverte et a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

Si vous ne comprenez pas le fonctionnement de la base de données opendatabase, il est recommandé d'étudier l'article précédent "Web Front-end Cache 4 Opendatabase" avant de lire le contenu de cet article. également le dernier de la série de caches frontaux. Une simple encapsulation de la base de données opendatabase. Bien sûr, pour ceux qui ont une expérience Java, vous pouvez ignorer cet article.

D'accord, ne disons pas de bêtises et passons directement au sujet. Merci de lire le texte (toujours basé sur l'exemple de l'article précédent) :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
openDatabase与android里面的sqlite差不多
最好的选型存储
-->

<h1>opendatabse数据库操作</h1>

<button id="btn-create">创建user数据表</button>
<button id="btn-insert">插入数据</button>
<button id="btn-query">查询数据</button>
<button id="btn-update">修改数据</button>
<button id="btn-delete">删除数据</button>
<button id="btn-drop">删除user数据表</button>

<script type="text/javascript">

    let findId = id => document.getElementById(id);

    //模拟一条user数据
    let user = {
        username: "liuqiang",
        password: "123569874",
        info: "beaconApp开发团队中一员"
    };

    /**
     * 创建数据库 或者此数据库已经存在 那么就是打开数据库
     * name: 数据库名称
     * version: 版本号
     * displayName: 对数据库的描述
     * estimatedSize: 设置数据的大小
     * creationCallback: 回调函数(可省略)
     */
    let db = openDatabase("MySql", "1.0", "我的数据库描述", 1024 * 1024);
    let result = db ? "数据库创建成功" : "数据库创建失败";
    console.log(result);


    const USER_TABLE_SQL = "create table if not exists userTable (id integer primary key autoincrement,username varchar(12)," +
        "password varchar(16),info text)";

    const INSERT_USER_SQL = "insert into userTable (username, password,info) values(?,?,?)";

    const QUERY_USER_SQL = "select * from userTable";

    const UPDATE_USER_SQL = "update userTable set password = ? where username = ?";

    const DELETE_USER_SQL = "delete from userTable where username = ?";

    const DROP_USER_SQL = "drop table userTable";

    /**
     * 封装数据库工具类
     */
    class DatabaseUtil {
        /**
         * 构造方法
         * @param sqlSentence 数据库语句
         * @param params 数据库操作的参数
         */
        constructor(sqlSentence, ...params) {
            this.sqlSentence = sqlSentence;
            this.params = params;
        }

        //获取当前实例
        static getInstance(sqlSentence, ...params) {
            return new DatabaseUtil(sqlSentence, ...params)
        }

        /**
         * 执行数据库操作
         * @param callback  成功的回调
         * @param errorCallback 失败的回调
         */
        execute(callback, errorCallback) {
            db.transaction(tx => {
                tx.executeSql(this.sqlSentence, this.params, callback, errorCallback)
            })
        }
    }

    /**
     * 点击事件 增删查改
     */
    let btnCreate = findId("btn-create");
    let btnInsert = findId("btn-insert");
    let btnQuery = findId("btn-query");
    let btnUpdate = findId("btn-update");
    let btnDelete = findId("btn-delete");
    let btnDrop = findId("btn-drop");
    //创建数据表
    btnCreate.onclick = () => DatabaseUtil.getInstance(USER_TABLE_SQL)
        .execute(function (transaction, resultSet) {
            alert('创建user表成功:' + result);
        }, function (transaction, error) {
            alert('创建user表失败:' + error.message);
        });
    //插入数据
    btnInsert.onclick = () => DatabaseUtil.getInstance(INSERT_USER_SQL, user.username, user.password, user.info)
        .execute(function (transaction, resultSet) {
            alert("添加数据成功")
        }, function (transaction, error) {
            alert("添加数据失败:" + error.message)
        });
    //查询数据
    btnQuery.onclick = () => DatabaseUtil.getInstance(QUERY_USER_SQL)
        .execute(function (transaction, resultSet) {
            console.log(resultSet);
        }, function (transaction, error) {
            alert("查询失败:" + error.message)
        });
    //修改数据
    btnUpdate.onclick = () => {
        user.password = "111666666";//修改密码
        DatabaseUtil.getInstance(UPDATE_USER_SQL, user.password, user.username)
            .execute(function (transaction, resultSet) {
                alert("修改数据成功")
            }, function (transaction, error) {
                alert("修改数据失败:" + error.message)
            })
    };
    //删除数据
    btnDelete.onclick = () => DatabaseUtil.getInstance(DELETE_USER_SQL, user.username)
        .execute(function (transaction, resultSet) {
            alert("删除数据成功")
        }, function (transaction, error) {
            alert("删除数据失败:" + error.message)
        });
    //删除数据表
    btnDrop.onclick = () => DatabaseUtil.getInstance(DROP_USER_SQL)
        .execute(function (transaction, resultSet) {
            alert("删除数据表成功")
        }, function (transaction, error) {
            alert("删除数据表失败:" + error.message)
        });

</script>
</body>
</html>

Copier après la connexion

Ce qui précède est la façade web. -end Comment mettre à jour le cache ? Le mode Singleton encapsule toute l'introduction d'opendatabase. Si vous souhaitez en savoir plus sur le Tutoriel vidéo HTML, veuillez faire attention au site Web PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment le frontal Web met-il à jour le cache ? Le mode Singleton encapsule la base de données ouverte