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
参考のコード
ルーティング / api
https://github.com/kuc-arc-f/app6_react2/blob/master/routes/tasks.js
https://github.com/kuc-arc-f/app6_react2/blob/master/routes/api.js
画面
・new
https://github.com/kuc-arc-f/app6_react2/blob/master/views/tasks/new.ejs
・index
https://github.com/kuc-arc-f/app6_react2/blob/master/views/tasks/index.ejs
・show
https://github.com/kuc-arc-f/app6_react2/blob/master/views/tasks/show.ejs
・edit/delete
https://github.com/kuc-arc-f/app6_react2/blob/master/views/tasks/edit.ejs
実装など
・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 の登録で、
少しコード量削減、改良してみました。