reactjs - 如何从 React 应用程序连接到 sqlite db？

Question

我正在尝试使用 Create React App 以及 sqlite3 模块构建页面。在它们的默认配置中，这两件事似乎开箱即用。一般来说，我是 React 和 JS 的新手，所以我希望我在这里缺少一些明显的东西。

使用 npx v6.9.0 和 Node v12.4.0，我可以通过键入 npx create-react-app test 来重现它。 , cd test , npm start .

到现在为止还挺好。我输入:npm install sqlite3 ，并收到一个 npm 警告，我应该安装 typescript。好的，我输入 npm install typescript .都好。我启动了应用程序，到目前为止它已编译。伟大的!

我打开 App.js，并根据 sqlite3 的自述文档，在 import 下行，我输入 var sqlite3 = require('sqlite3').verbose();
这可能是我做错了什么。我的应用程序现在无法编译，告诉我:

./node_modules/sqlite3/node_modules/node-pre-gyp/lib/info.js
Module not found: Can't resolve 'aws-sdk' in '/Users/brendanlandis/Desktop/test/node_modules/sqlite3/node_modules/node-pre-gyp/lib'

我试试 npm install aws-sdk ，这让我更进一步。我的应用程序仍然无法编译，但现在错误是:

TypeError: stream is undefined
./node_modules/set-blocking/index.js/</module.exports/<
node_modules/set-blocking/index.js:3

  1 | module.exports = function (blocking) {
  2 |   [process.stdout, process.stderr].forEach(function (stream) {
> 3 |     if (stream._handle && stream.isTTY && typeof stream._handle.setBlocking === 'function') {
  4 |       stream._handle.setBlocking(blocking);
  5 |     }
  6 |   });

在谷歌搜索中，我还没有弄清楚我做错了什么。任何帮助，将不胜感激。谢谢!

Answer 1

正如提到的另一个答案，这可能不推荐。你真的应该把你的数据库放在后端的某个地方。
但是，可以使用 sql.js 来执行此操作。我对 sqlite3 模块没有运气。
这是我使用的示例:https://github.com/sql-js/react-sqljs-demo
首先安装 Craco。这是捆绑 wasm 文件所必需的。

npm install @craco/craco --save

用 package.json 中的 Craco 脚本替换你的 react 脚本:

"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
"start": "craco start",
"build": "craco build",
"test": "craco test"
}

在项目的根目录中创建一个 craco.config.js 文件并将此代码放入其中:

module.exports = {
    webpack: {
        configure:{
            // See https://github.com/webpack/webpack/issues/6725
            module:{
                rules: [{
                    test: /\.wasm$/,
                    type: 'javascript/auto',
                }]
            }
        }
    }
};

然后安装 sql.js

  npm install sql.js --save

在此之后您可能需要做更多的后端设置，但现在导入包:

import initSqlJs from 'sql.js';
// Required to let webpack 4 know it needs to copy the wasm file to our assets
import sqlWasm from "!!file-loader?name=sql-wasm-[contenthash].wasm!sql.js/dist/sql-wasm.wasm";

我必须禁用 eslint 才能使第二个导入工作。真的不理想，但是如果你尝试使用文件加载器，eslint 会抛出错误。这些是要在 package.json 中删除的行:

  "eslintConfig": {
      "extends": "react-app"
  },

现在调用图书馆!

const response = fetch("example.com/sqlitedatabase");
const buf = await response.arrayBuffer();
const SQL = await initSqlJs({ locateFile: () => sqlWasm });
const db = new SQL.Database(new Uint8Array(buf));

然后就可以查询数据库了；以下代码运行一个查询，然后将其放入比默认响应更有用的形式。

const query = db.exec(`
   SELECT
     *
   FROM
     table;
`);
const columns = query[0].columns;
const values = query[0].values;
let rows = [];
values.forEach(element => {
    let row = {};
    for (let i = 0; i < columns.length; i++) {
       row[columns[i]] = element[i];
    }
    rows.push(row);
});

这应该可行，但正如我上面提到的，您可能需要稍微弄乱后端。在处理捆绑文件时，单页应用程序经常遇到 CORS 问题。为了在 AWS Amplify 上解决此问题，我在名为 customHttp.yml 的文件中添加了以下代码到我的项目的根目录中:

customHeaders:
- pattern: '**/*'
  headers:
    - key: Access-Control-Allow-Origin
      value: '*'
- pattern: '*.wasm'
  headers:
    - key: Access-Control-Allow-Origin
      value: '*'

(编辑:向文件添加了更通用的模式，没有它就无法工作。)
请注意，自定义 header 可能需要一些时间才能更新，即使它们看起来会立即更新。
同样与单页应用程序相关，需要将 wasm 文件添加到免于重定向的文件列表中:

Source address: </^((?!.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|json|map|wasm)$).)*$/>
Target address: /index.html
Type: 200 (Rewrite)