如何在 React BoilerPlate 上连接本地/离线预填充数据库

Question

我是 react/react 样板世界的新手。我有以下我无法解决的问题。

在反应中显示使用 sqlite3 的本地/离线预填充数据库的结果。

可以这样做吗？你可以给我一些它是如何完成的例子，所以我可以在这里尝试。

非常感谢。

Answer 1

我找到了解决办法

我创建了 3 个文件并更新了我的 index.js：

创建 - mydb.sqlite3、mydb.json（自动创建）、sqlite.js。

sqlite.js 代码：

var sqliteJson = require('sqlite-json');
var sqlite3 = require('sqlite3').verbose();

var db = new sqlite3.Database('./mydb.sqlite3');
exporter = sqliteJson(db);

db.serialize(function() {

  exporter.save('select * FROM lorem', 'mydb.json', function (err, data) {

  });

});

db.close();

还有我的 index.js：

/*
* HomePage
*
* This is the first thing users see of our App, at the '/' route
*
* NOTE: while this component should technically be a stateless functional
* component (SFC), hot reloading does not currently support SFCs. If hot
* reloading is not a necessity for you then you can refactor it and remove
* the linting exception.
*/

import React from 'react';
import { FormattedMessage } from 'react-intl';

import messages from './messages';
import NavBar from 'components/NavBar';
import VerticalNav from 'components/VerticalNav';

import data from 'dataBase/mydb.json';

export default class HomePage extends React.Component { // eslint-disable-line react/prefer-stateless-function

  constructor(props){
    super(props);
    this.state = { lista: [] }
  }

  componentWillMount(){
     this.setState({lista:data});
  }

  render() {
    return (
      <div>
        <NavBar />
        <div className="row ml-0 mr-0">
          <VerticalNav />
          <div className="col-11 pl-0 pr-0">
            <div className="container">
                  {
                        this.state.lista.map(function(data){
                          return (
                            <div className="row mt-5" key={data.id}>
                        <div className="col-6"><b>Info:</b> {data.info}</div>
                            </div>
                          );
                        })
                      }
            </div>
          </div>
        </div>
      </div>
    );
  }
}

我希望我能帮助别人。