Uni-App 使用plus.sqlite对数据库进行增删改查小记

缺乏、安全感 2024-04-06 11:51 46阅读 0赞

**点滴积累，贵在坚持，感谢您的阅览！**

前言：所有代码都写在一个类里，直接拷贝粘贴后可以运行测试，不过注意勾选一下工程的这个配置：

![bfd9980d384d4a2aab180a7f49518c0b.png][]

Demo 图示如下：

Uni-App plus.database 数据库操作录屏

1、布局如下：

<template>
        <view class="style-content style-column">
            <view>注意：操作数据库之前需先打开数据库并创建数据表</view>
            <view class="style-line style-row">
                <view class="style-half style-row">
                    <view class="style-one-of-third">姓名：</view>
                    <editor id="editor" class="style-two-of-third" placeholder="点击输入" @input="onNameChange"></editor>
                </view>
                <view class="style-half style-row">
                    <view class="style-one-of-third">工号：</view>
                    <editor class="style-two-of-third" placeholder="点击输入" @input="onIdChange"></editor>
                </view>
            </view>
            <view>操作结果：{
       {log}}</view>
            <button class="style-line" @click="isOpen">数据库是否已打开</button>
            <button class="style-line" @click="openDatabase">打开数据库</button>
            <button class="style-line" @click="closeDatabase">关闭数据库</button>
            <button class="style-line" @click="createTable">创建数据表</button>
            <button class="style-line" @click="insertOneData">插入一条数据</button>
            <button class="style-line" @click="deleteDataByName">根据姓名删除数据</button>
            <button class="style-line" @click="deleteAllData">删除所有数据</button>
            <button class="style-line" @click="querryTargetData">根据姓名查询数据，刷新数据列表</button>
            <button class="style-line" @click="querryAllData">查询所有数据，刷新数据列表</button>
            <view class="style-line">数据列表</view>
            <uni-list>
                <uni-list-item v-for="(userInfo, index) in userInfos" :title="userInfo.name" :rightText="userInfo.id"
                    :key="index">
                </uni-list-item>
            </uni-list>
        </view>
    </template>

2、代码执行逻辑如下：

<script>
        export default {
            data() {
                return {
                    userInfos: [],
                    //数据库名称，这里我推测应该是要和下面一行数据库路径中的名称保持一致，暂时没验证过不一致会怎样
                    databaseName: 'project',
                    //数据库路径
                    databasePath: '_doc/project.db',
                    //数据表名称
                    tableName: 'userInfo',
                    //用户输入的名字
                    inputName: '',
                    //用户输入的工号
                    inputId: '',
                    //操作日志
                    log: '请开始操作'
                }
            },
            onLoad() {
                console.log('执行 onLoad');
            },
            methods: {
                onNameChange(e) {
                    let input = e.detail.text;
                    //不知道为啥，这里编辑框的内容最后总是带有一个换行符'\n'，所以需要将其处理掉
                    this.inputName = input.substring(0, input.lastIndexOf("\n"));
                    this.log = this.inputName;
                },
                onIdChange(e) {
                    let input = e.detail.text;
                    this.inputId = input.substring(0, input.lastIndexOf("\n"));
                    this.log = this.inputId;
                },
                isOpen() {
                    let res = plus.sqlite.isOpenDatabase({
                        name: this.databaseName,
                        path: this.databasePath
                    });
                    this.log = res ? "数据库已开启" : '数据库已关闭';
                    return res;
                },
                openDatabase() {
                    plus.sqlite.openDatabase({
                        name: this.databaseName,
                        path: this.databasePath,
                        success: (e) => {
                            this.log = '打开或创建数据库成功';
                        },
                        fail: (e) => {
                            console.log(e);
                            this.log = '打开或创建数据库失败';
                        }
                    });
                },
                closeDatabase() {
                    plus.sqlite.closeDatabase({
                        name: this.databaseName,
                        success: (e) => {
                            this.log = '关闭数据库成功';
                        },
                        fail: (e) => {
                            console.log(e);
                            this.log = '关闭数据库失败';
                        }
                    });
                },
                createTable() {
                    const createSql = 'create table if not exists ' + this.tableName +
                        '(name VARCHAR(32) PRIMARY KEY NOT NULL,id VARCHAR(32) NOT NULL)';
                    console.log(createSql);
                    plus.sqlite.executeSql({
                        name: this.databaseName,
                        sql: createSql,
                        success: (e) => {
                            this.log = '创建数据表成功';
                        },
                        fail: (e) => {
                            console.log(e);
                            this.log = '创建数据表失败';
                        }
                    });
                },
                insertOneData() {
                    if (!this.inputName || 0 === this.inputName.length) {
                        this.log = '姓名为空，请输入姓名和工号';
                        return;
                    }
                    let key = "(name,id)";
                    let value = "'" + this.inputName + "', '" + this.inputId + "'";
                    let insertSql = "insert into " + this.tableName + key + " values(" + value + ")";
                    console.log(insertSql);
                    plus.sqlite.executeSql({
                        // 注意这里 name 传参是数据库名，而不是表名
                        name: this.databaseName,
                        sql: insertSql,
                        success: (res) => {
                            this.log = '插入数据成功';
                            this.userInfos.push({
                                name: this.inputName,
                                id: this.inputId,
                            });
                        },
                        fail: (e) => {
                            console.log(e);
                            if (e.code === -1404) {
                                this.log = '插入失败,该数据已存在';
                            } else {
                                this.log = '插入数据失败';
                            }
                        }
                    });
                },
                deleteDataByName() {
                    let deleteDataByNameSql = `DELETE FROM ${this.tableName} WHERE name = '${this.inputName}'`;
                    console.log(deleteDataByNameSql);
                    plus.sqlite.executeSql({
                        name: this.databaseName,
                        sql: deleteDataByNameSql,
                        success: (res) => {
                            console.log(res);
                            this.log = '根据姓名删除数据成功';
                        },
                        fail: (e) => {
                            console.log(e);
                            this.log = '根据姓名删除数据失败';
                        }
                    });
                },
                deleteAllData() {
                    let deleteAllDstaSql = `DELETE FROM ${this.tableName}`;
                    console.log(deleteAllDstaSql);
                    plus.sqlite.executeSql({
                        name: this.databaseName,
                        sql: deleteAllDstaSql,
                        success: (res) => {
                            console.log(res);
                            this.log = '删除所有数据成功';
                            this.userInfos = [];
                        },
                        fail: (e) => {
                            console.log(e);
                            this.log = '删除所有数据失败';
                        }
                    });
                },
                querryTargetData() {
                    if(!this.inputName || 0 === this.inputName.length) {
                        this.log = '姓名为空，请输入姓名后再查询';
                        return;
                    }
                    let key = "name";
                    let value = "'" + this.inputName + "'";
                    let selectSql = "select * from " + this.tableName + " where " + key + " = " + value;
                    console.log(selectSql);
                    // 注意这里使用的是 selectSql，不是 executeSql
                    plus.sqlite.selectSql({
                        name: this.databaseName,
                        sql: selectSql,
                        success: (res) => {
                            this.userInfos = [];
                            console.log(res);
                            this.log = '查询数据成功';
                            for (let i = 0; i < res.length; i++) {
                                let item = res[i];
                                this.userInfos.push({
                                    name: item.name,
                                    id: item.id
                                });
                            }
                        },
                        fail: (e) => {
                            console.log(e);
                            this.log = '查询数据失败';
                        }
                    });
                },
                querryAllData() {
                    let selectSql = "select * from " + this.tableName;
                    console.log(selectSql);
                    // 注意这里使用的是 selectSql，不是 executeSql
                    plus.sqlite.selectSql({
                        name: this.databaseName,
                        sql: selectSql,
                        success: (res) => {
                            console.log(res);
                            this.log = '查询数据成功';
                            this.userInfos = [];
                            for (let i = 0; i < res.length; i++) {
                                let item = res[i];
                                this.userInfos.push({
                                    name: item.name,
                                    id: item.id,
                                });
                            }
                        },
                        fail: (e) => {
                            console.log(e);
                            this.log = '查询数据失败';
                        }
                    });
                }
            }
        }
    </script>

3、控件style属性定义如下：

<style>
        .style-content {
            width: 100%;
            height: 100%;
        }
    
        .style-line {
            width: 100%;
            height: 75upx;
            line-height: 75upx;
        }
    
        .style-row {
            display: flex;
            flex-direction: row;
        }
    
        .style-column {
            display: flex;
            flex-direction: column;
        }
    
        .style-half {
            width: 50%;
            height: 75upx;
        }
    
        .style-one-of-third {
            width: 33.33%;
            height: 75upx;
            line-height: 75upx;
        }
    
        .style-two-of-third {
            width: 66.67%;
            height: 75upx;
            line-height: 75upx;
        }
    </style>

[bfd9980d384d4a2aab180a7f49518c0b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/83c8f72f8bb849aea12bc2df829ea539.png

发表评论取消回复

表情：

评论列表（有 0 条评论，46人围观）

还没有评论，来说两句吧...

相关阅读

相关 Uni-App 使用plus.sqlite对数据库进行增删改查小记

点滴积累，贵在坚持，感谢您的阅览！前言：所有代码都写在一个类里，直接拷贝粘贴后可以运行测试，不过注意勾选一下工程的这个配置： ![bfd9980d384d4a2aab18

缺乏、安全感/ 2024年04月06日 11:51/ 0 赞/ 47 阅读

相关使用MyBatisPlus进行增删改查

> 代码及文档地址 > > 官方地址: [MyBatis-Plus][] > > 代码发布地址 : > > Github: https://github.com/

谁践踏了优雅/ 2024年03月26日 04:30/ 0 赞/ 102 阅读

相关 SqlServer 对数据库文件进行增删改查

目录前言： 1.增加数据库文件 2.删除 3.查找 4.更改 -------------------- 前言： SqlServer数据库文件有主数据文件（

青旅半醒/ 2023年12月31日 07:10/ 0 赞/ 47 阅读

相关 MongoDB(三)：通过接口对数据库进行增删改查

目录 1.进到路由，比如\`user.js\` 2.引入表person的模型 3.增加一个接口 1.进到路由，比如`user.js` ![在这里

快来打我*/ 2023年07月15日 13:58/ 0 赞/ 100 阅读

相关在Express中对MongoDB数据库进行增删改查

这两天跟着B站的Johnny老师学习NodeJs+Express+MongoDB相关的知识点，前后跟着做了1小时搞定NodeJs(Express)的用户注册、登录和授权、Ele

逃离我推掉我的手/ 2022年11月17日 05:17/ 0 赞/ 317 阅读

相关 django模型类对数据库进行增删改查

查询所有数据变量名=模型类名.objects.all() 查询指定数据变量名=模型类名.objects.fiter(查询条件

╰+攻爆jí腚メ/ 2022年06月03日 07:58/ 0 赞/ 276 阅读

相关使用JDBC对表进行增删改查操作

1、使用properties配置文件开发中获得连接的4个参数（驱动，url ，用户名，密码）通常都存在配置文件，方便后期维护，程序如果需要更换数据，只需要修改

青旅半醒/ 2022年04月23日 01:34/ 0 赞/ 321 阅读

相关 SSM--MyBatis对数据库进行增删改查

一、先附上项目层级目录： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNz

r囧r小猫/ 2022年02月01日 13:27/ 0 赞/ 322 阅读

相关对数据库进行增删改查操作

改： Connection connection=null; PreparedStatement ps=null; ResultSet rs=

青旅半醒/ 2021年12月03日 23:32/ 0 赞/ 458 阅读

相关使用JdbcTemplate对MySQL数据库进行增删改查

> 大家好，我是邵奈一，一个不务正业的程序猿、正儿八经的斜杠青年。 > 1、世人称我为：被代码耽误的诗人、没天赋的书法家、五音不全的歌手、专业跑龙套演员、不合格的运动员…

迈不过友情╰/ 2021年09月25日 02:42/ 0 赞/ 428 阅读