Cách kết hợp NodeJS ở back-end với ReactJS trên front-end

BƯỚC 1:

1. Tên của user
2. Message của user

> Show dbs
> Use signatures
switched to db signatures
> show collections
> db.createCollection(guest_signatures)

BƯỚC 2:

const mongoose = require('mongoose');
let Schema = mongoose.Schema;
const signatureSchema = new Schema({
  guestSignature: {
    type: mongoose.Schema.Types.Mixed,
    required: true,
  },
  message: {
    type: mongoose.Schema.Types.Mixed,
    required: true,
  },
})
const Signature = mongoose.model('Signature', signatureSchema);
module.exports = Signature;

BƯỚC 3:

//====LIST DEPENDENCIES===//
const express = require('express');
const parseurl = require('parseurl');
const bodyParser = require('body-parser');
const path = require('path');
const expressValidator = require('express-validator');
const mongoose = require('mongoose');
const Signature = require('./models/signature.js')
const app = express();
const url = 'mongodb://localhost:27017/signatures';
//=========================//

1. Ở thư mục root "/", chúng ta sẽ redirect đến API
2. API, chúng ta gọi "/api/signatures" để read/write vào

//====ROOT DIRECTORY===//
app.get('/', function(req, res) {
  res.json('you did it');
});
//==========================//
//====GET ALL SIGNATURES===//
app.get('/api/signatures', function(req, res) {
  Signature.find({}).then(eachOne => {
    res.json(eachOne);
    })
  })
//==========================//
//====POST NEW SIGNATURE===//
app.post('/api/signatures', function(req, res) {
  Signature.create({
    guestSignature: req.body.SignatureOfGuest,
    message: req.body.MessageofGuest,
  }).then(signature => {
    res.json(signature)
  });
});
//==========================//

BƯỚC 4:

const url = 'mongodb://localhost:27017/signatures';

//====MONGOOSE CONNECT===//
mongoose.connect(url, function (err, db) {
 if (err) {
   console.log('Unable to connect to the mongoDB server. Error:', err);
 } else {
   console.log('Connection established to', url);
 }
});
//==========================//

BƯỚC 5:

BƯỚC 6:

1. Sau khi tạo tài khoản mLab, click vào nút Create New và chọn Single node sandbox. Có nhiều lựa chọn tốn phí, nhưng sandbox có rất nhiều thứ để bắt đầu. Đặt tên cho database, tôi dùng cùng tên với database mLab
2. Tạo xong database, bạn có thể bắt đầu một collection mới
3. Bạn cũng sẽ cần add một User hoặc nhóm các User kết nối vào database. Nếu không làm bước này mà add chính bạn như là User thì khi truy cập sẽ bị fail khi deploy.

mongodb://<dbuser>:<dbpassword>@ds79234.mlab.com:9234/signatures

const url = 'mongodb://localhost:27017/signatures';

const url = 'mongodb://username:password@ds79234.mlab.com:9234/signatures';

export MONGOLAB_URI="mongodb://username:password@ds79234.mlab.com:9234/signatures';

const url = process.env.MONGOLAB_URI;

app.listen(process.env.PORT || 3000);
console.log('starting applicaiton.  Good job!');

heroku config:set MONGOLAB_URI=mongodb://username:password@ds79234.mlab.com:9234/signatures

BƯỚC 7:

BƯỚC 8:

1. Trong một component mới, tạo class mới.

class GuestBook extends Component

constructor(props) {
    super(props);

this.handleSignatureOfGuest = this.handleSignatureOfGuest.bind(this);
    this.handleMessageofGuest = this.handleMessageofGuest.bind(this);

this.state = {
      SignatureOfGuest: "",
      MessageofGuest: "",
    };

handleSignatureOfGuest(event) {
    this.setState({ SignatureOfGuest: event.target.value });
  }
  handleMessageofGuest(event) {
      this.setState({ MessageofGuest: event.target.value });
    }

addToGuestBook = event => {
    event.preventDefault();
    this.setState({
      SignatureOfGuest: event.target.value,
      MessageofGuest: event.target.value,
});

axios.post('<your-heroku-url here>', {
        SignatureOfGuest: this.state.SignatureOfGuest,
        MessageofGuest: this.state.MessageofGuest,
      })
    .then(response => {
      console.log(response, 'Signature added!');
    })
    .catch(err => {
      console.log(err, 'Signature not added, try again');
    });

this.setState({
      SignatureOfGuest: "",
      MessageofGuest: "",
    });
};

<input
           onChange={this.handleSignatureOfGuest}
           name="SignatureOfGuest"
           className="NameinputForm"
           value={this.state.SignatureOfGuest}
           placeholder="Enter your name"
            />
  <textarea
              onChange={this.handleMessageofGuest}
              name="MessageofGuest"
              className="MessageinputForm"
              value={this.state.MessageofGuest}
              placeholder="Type a message"
               />

<button
            className="submitbuttonguestbook"
            type="submit"
            onClick={this.addToGuestBook}
              >
            Submit to Guestbook<i className="GuestBookButton2" aria-hidden="true" />
            </button>

BƯỚC 9:

1. Trong một component mới, tạo 1 class mới.

class GuestNames extends Component {

constructor(props) {
    super(props);

this.state = {
      messages: "",
    };

componentDidMount() {

fetch('<your-heroku-url-goes-here>')
    .then(results => {
      return results.json();

data.map((msg) => {
        return(
          <div key={msg.results}>
            <h3 className="h3msg">{msg.message}</h3>
<h2 className="h2sig">-{msg.guestSignature}</h2>
          </div>

this.setState({messages: messages});

render() {

return (<div className="guestdataContainer">
          <h6>Guestbook Messages</h6>
          {this.state.messages}
        </div>

export default GuestNames;