如何在ReactBoilerPlate上连接本地/离线预填充DB

时间:2017-12-14 11:35:24

标签: node.js sqlite react-boilerplate

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

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

可以这样做吗?你可以给我一些如何完成的例子,所以我可以在这里试试。

非常感谢。

1 个答案:

答案 0 :(得分:0)

我找到了解决方案

我创建了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>
    );
  }
}

我希望能帮助别人。