웹 프런트 엔드는 캐시를 어떻게 업데이트하나요? 싱글톤 모드는 개방형 데이터베이스를 캡슐화합니다.-HTML 튜토리얼-php.cn

웹 프런트 엔드는 캐시를 어떻게 업데이트하나요? 싱글톤 모드는 개방형 데이터베이스를 캡슐화합니다.

云罗郡主

풀어 주다： 2018-10-17 14:29:25

앞으로

2139명이 탐색했습니다.

이 글의 내용은 웹 프런트엔드에서 캐시를 업데이트하는 방법에 관한 것입니다. 싱글톤 모드는 오픈데이터베이스를 캡슐화하고 특정 참조 가치를 갖고 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

오픈데이터베이스의 동작을 이해하지 못하신다면, 이전 글 "Web Front-end Cache Four Opendatabase"를 먼저 공부하신 후, 이 글의 내용을 보시는 것을 추천드립니다. 이 장의 내용은 프론트엔드 캐시 시리즈의 마지막이기도 합니다. 다시 한번 말씀드리지만, 오픈데이터베이스 데이터베이스를 간단히 캡슐화한 것입니다. 물론 Java 기본 사항을 알고 있는 분들은 이 글을 무시하셔도 됩니다.

좋아, 헛소리는 하지 말고 바로 본론으로 들어가자. 본문을 읽어보자(여전히 이전 기사의 예를 바탕으로 함):

<!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>

로그인 후 복사

위 내용은 정확합니다. 웹 프런트엔드는 캐시를 어떻게 업데이트하나요? 싱글톤 모드는 오픈데이터베이스의 전체 소개를 요약합니다. HTML 비디오 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹사이트를 주목하세요.

위 내용은 웹 프런트 엔드는 캐시를 어떻게 업데이트하나요? 싱글톤 모드는 개방형 데이터베이스를 캡슐화합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!