knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

React.js +node/express +mongoDB で CRUDの作成

index:

概要:

前の React.js+ express 関連となりますが
mongoDb で CRUD作成となります

api側は、Vue.js+ node.js版とほぼ同じです
・ejsテンプレートに、React.js書いて、
axios で通信となります。

環境

node.js 10.16.0
express : 4.16.1

React
react-dom
mongo DB 2.4.14

参考のコード

github.com

実装など

・new

class Create extends React.Component {
  constructor(props){
    super(props)
    this.state = {title: '', description: ''}
  }
  handleChangeTitle(e){
    this.setState({title: e.target.value})
  }
  handleChangeDesc(e){
    this.setState({description: e.target.value})
  }
  handleSubmit(e){
    e.preventDefault()
    const task = {
      title: this.state.title,
      content: this.state.description
    }
    let uri = '/api/tasks_new'
    axios.post(uri, task ).then((response) => {
      // browserHistory.push('/list')
      window.location.href="/tasks"
      console.log("success")
    })
  }
  render() {
    return (
    <div>
      <h1>Create a ToDo</h1>
      <hr />
      <form onSubmit={this.handleSubmit.bind(this)}>
        <div className="row">
          <div className="col-md-6">
            <div className="form-group">
              <label>Title:</label>
              <input type="text" className="form-control" onChange={this.handleChangeTitle.bind(this)}/>
            </div>
          </div>
          </div>
          <div className="row">
            <div className="col-md-6">
              <div className="form-group">
                <label>Description:</label>
                <input type="text" className="form-control col-md-6" onChange={this.handleChangeDesc.bind(this)}/>
              </div>
            </div>
          </div><br />
          <div className="form-group">
            <button className="btn btn-primary">Create</button>
          </div>
      </form>
    </div>
    )
  }
}
ReactDOM.render(<Create />, document.getElementById('app'));


・index

class List extends React.Component {
    constructor(props) {
        super(props);
        this.state = {data: ''}
    }
    componentDidMount(){
        axios.get('/api/tasks_index').then(response => {
            this.setState({ data: response.data.docs })
            console.log( response.data.docs )
        })
        .catch(function (error) {
            console.log(error)
        })
    }
    tabRow(){
        if(this.state.data instanceof Array){
            return this.state.data.map(function(row, index){
                return (
                    <tr key={index}>
                        <td>
                            <a href={"/tasks/show/"+row._id}>{row._id}</a><br />
                        </td>
                        <td>{row.title}</td>
                        <td>{row.content}</td>
                        <td><a href={"/tasks/edit/"+row._id}>[ edit ]</a></td>                        
                    </tr>            
                )
            })
        }
    }
    render(){
        return (
            <div>
                <h1>index</h1>
                <table className="table table-hover">
                    <thead>
                    <tr>
                        <td>ID</td>
                        <td>Title</td>
                        <td>content</td>
                    </tr>
                    </thead>
                    <tbody>
                    {this.tabRow()}
                    </tbody>
                </table>            
            </div>
        )
    }
  
}

ReactDOM.render(<List />, document.getElementById('app'));

update

・ 見直しで、form の登録で、
 少しコード量削減、改良してみました。

タグの削除
INPUT / onChangeイベントからの関数共通化
ボタンの、A要素のonClickイベント変更、
bind関数の追加

・new
https://github.com/kuc-arc-f/app6_react2/blob/master/views/task2/new.ejs

class Create extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            title: '', 
            content: ''
        }
    }
    handleChange = event => {
        const { name, value } = event.target
        this.setState({
            [name]: value
        })
    }
    add_task(){
//        console.log(this.state)
        const task = {
            title: this.state.title,
            content: this.state.content
        }
        let uri = '/api/tasks_new'
        axios.post(uri, task ).then((response) => {
            window.location.href="/task2"
            console.log("success")
        })        
    }
    render() {
//        console.log(this.state)
        const { title, content } = this.state;
        return (
        <div>
            <div className="row">
            <div className="col-md-6">
                <div className="form-group">
                <label>Title:</label>
                <input type="text" className="form-control" name="title"
                onChange={this.handleChange}/>
                </div>
            </div>
            </div>
            <div className="row">
                <div className="col-md-6">
                <div className="form-group">
                    <label>content:</label>
                    <input type="text" className="form-control" name="content"
                    onChange={this.handleChange}
                    />
                </div>
                </div>
            </div><br />
            <hr />
            <a className="btn btn-primary" href='#' onClick={this.add_task.bind(this )}>Add</a>
        </div>
        )
    }
}
ReactDOM.render(<Create />, document.getElementById('app'));