萬事開頭難，特別是寫程序開頭更難！那么怎么在Myeclipse或者帶CodeMix的Eclipse使用React和Django構建一個CRUD應用程序用來做圖書管理呢？今天我們將用3個步驟和實際代碼為您演示！

應用程序的用戶界面將使用React構建（學習本篇只需要有前端知識即可），而后端將使用Django構建（這是一個高級Python Web框架，鼓勵快速開發和簡潔實用的設計）。使用Django Rest框架可以輕松地在Django中構建API。

我們將分三個階段構建應用程序：

1.在React中創建前端

2.在Django中創建API

3.將前端與API連接

一、準備工作

推薦使用Myeclipse+CodeMix或者其他Eclipse+CodeMix開發工具，如果你還沒有安裝，您可以點擊這里。

如果尚未安裝React pack，請使用CodeMix擴展瀏覽器（幫助> CodeMix擴展）安裝它。也可以直接從Eclipse市場上安裝它。

另外，我們需要在系統中安裝Python，因此請確保正確安裝了Python。。

二、在React中創建前端

我們將使用CodeMix向導創建React應用程序。

要創建應用程序，請導航至文件>新建>項目> CodeMix> React Project。在出現的對話框中輸入react-book-app作為應用程序的名稱，然后單擊“完成”。

新的CodeMix創建的react應用程序的文件夾結構如圖

如果你和上圖一樣發現目錄中沒有node_modules文件夾，我們需要安裝節點軟件包。使用Terminal +，運行：npm install

另外我們將使用bootstrap和fontawesome進行一些其他樣式設置和某些圖標，上述資源內容添加到src / index.js中的部分。

三、建設前端

React是一個組件驅動的庫。因此，我們需要將我們的應用分為不同的組件來實現下方界面：

該頁面可以分為不同的組件：

• Book Dashboard組件：這是應用程序中的父組件。它包含圖書清單組件和“可切換的圖書表單”組件。
• 圖書清單組件：該組件承擔列出應用程序中已創建的所有圖書的責任。它包含可編輯書籍組件的列表。
• 可編輯的Book組件：呈現Book組件和Book Form組件。如果單擊編輯圖標，則“可編輯書籍”組件將呈現一個“書籍表單”組件，該組件允許編輯已創建的書籍。
• 書籍組件：此組件顯示書籍的詳細信息。
• 書籍表格組件：此組件顯示一個允許創建或編輯書籍的表單。
• 可切換的書籍表單組件：此組件負責創建新的書籍。當 +  按鈕被點擊，圖書表單組件將被渲染，使我們能夠創建一個新的書。

以上組件中可以處理所有4個CRUD （創建讀取更新刪除）操作。接下來我們開始用代碼還原這個過程！

我們將從父組件開始按層次創建組件。要創建的第一個組件是Book Dashboard組件。修改src / index.js 使其類似于：

class BookDashboard extends React.Component {
    state = {
        books: [
            {
                id: 1,
                title: 'A simple book',
                author: 'Jude Ben',
                description: `Lorem ipsum dolor sit amet, consectetur
                    adipiscing elit, sed do eiusmod tempor incididunt
                    ut labore et dolore magna aliqua. Ut enim ad minim
                    veniam, quis nostrud`
            },
            {
                id: 2,
                title: 'A book of secrets',
                author: 'James John',
                description: `Sed ut perspiciatis unde omnis iste natus
                    error sit voluptatem accusantium doloremque laudantium,
                    totam rem aperiam, eaque ipsa quae ab illo inventore
                    veritatis et quasi architecto beatae vitae dicta sunt
                    explicabo.`
            }
      ]
  }

  createNewBook = (book) => {
      book.id = Math.floor(Math.random() * 1000);
      this.setState({books: this.state.books.concat([book])});
  }

  updateBook = (newBook) => {
      const newBooks = this.state.books.map(book => {
          if(book.id === newBook.id) {
                return Object.assign({}, newBook)
          } else {
                return book;
          }
      });

      this.setState({books: newBooks});
  }

  deleteBook = (bookId) => {
      this.setState({books: this.state.books.filter(book => book.id !== bookId)})
  }
  render() {
      return (
<main className="d-flex justify-content-center my-4"> <div  className="col-5"> 
<BookList books={this.state.books} 
onDeleteClick={this.deleteBook} 
onUpdateClick={this.updateBook} /> 
<ToggleableBookForm onBookCreate={this.createNewBook} /> 
</div> </main>


)
  }
}

如上所示，BookDashboard組件保存了書籍數據。然后將書籍數據傳遞給BookList組件，以及一些處理書籍刪除和更新的功能。
BookDashboard還呈現ToggleableBookForm，并傳遞一個作為參數的函數來處理書的創建。我們定義處理函數：createNewBook ，updateBook ，deleteBook更新狀態
接下來，我們需要為此創建BookList組件，將以下代碼添加到index.js。

class BookList extends React.Component {
  render() {
    const books = this.props.books.map(book => (
<EditableBook key={book.id} id={book.id} 
title={book.title} 
author={book.author} 
description={book.description} 
onDeleteClick={this.props.onDeleteClick} 
onUpdateClick={this.props.onUpdateClick} >
</EditableBook>
));
    return (

<div> {books} </div>

);
  }
}
class EditableBook extends React.Component {
  state = {
    inEditMode: false
  };
  enterEditMode = () => {
    this.setState({inEditMode: true});
  }
  leaveEditMode = () => {
    this.setState({inEditMode: false});
  }
  handleDelete = () => {
    this.props.onDeleteClick(this.props.id);
  }
  handleUpdate = (book) => {
    this.leaveEditMode()
    book.id = this.props.id;
    this.props.onUpdateClick(book);
  }
  render() {
    const component = () => {
      if(this.state.inEditMode) {
        return (
<BookForm id={this.props.id} 
title={this.props.title} 
author={this.props.author} 
description={this.props.description} 
onCancelClick={this.leaveEditMode} 
onFormSubmit={this.handleUpdate} />
);
      }
      return (
<Book title={this.props.title} 
author={this.props.author} 
description={this.props.description} 
onEditClick={this.enterEditMode} onDeleteClick={this.handleDelete} />
)
    }
    return (
<div className="mb-3 p-4" style={{boxShadow: '0 0 10px #ccc'}} > {component()} </div>
)
  }
}

該書目組件接收書籍數據，映射在其上，并返回的數組EditableBook然后在組件上展示。EditableBook是一個組件，如果用戶單擊Book組件上的edit book按鈕，則該組件將呈現Book或BookForm。這個組件可以展示書籍信息，它還接收一些處理單擊編輯按鈕和刪除按鈕的功能。讓我們創建Book和BookForm組件。

class Book extends React.Component {
  render() {
    return (
<div className="card" /* style="width: 18rem;" */> 
<div className="card-header d-flex justify-content-between"> 
<span> <strong>Title: </strong>{this.props.title} </span> 
<div> 
<span onClick={this.props.onEditClick} className="mr-2"><i className="far fa-edit"></i></span> 
<span onClick={this.props.onDeleteClick}><i className="fas fa-trash"></i></span> 
</div>
</div> 
<div className="card-body"> {this.props.description} </div> 
<div className="card-footer"> <strong>Author:</strong> {this.props.author} </div> </div>
);
  }
}
class BookForm extends React.Component {
  state = {
    title: this.props.title || '',
    author: this.props.author || '',
    description: this.props.description || ''
  }
  handleFormSubmit = (evt) => {
    evt.preventDefault();
    this.props.onFormSubmit({...this.state});
  }
  handleTitleUpdate = (evt) => {
    this.setState({title: evt.target.value});
  }
  handleAuthorUpdate = (evt) => {
    this.setState({author: evt.target.value});
  }
  handleDescriptionUpdate = (evt) => {
    this.setState({description: evt.target.value});
  }
  render() {
    const buttonText = this.props.id ? 'Update Book': 'Create Book';
    return (
<form onSubmit={this.handleFormSubmit}> 
<div className="form-group"> 
<label> Title </label> <input type="text" placeholder="Enter a title" value={this.state.title} onChange={this.handleTitleUpdate} className="form-control" /> 
</div> 
<div className="form-group"> <label> Author </label> <input type="text" placeholder="Author's name" value={this.state.author} onChange={this.handleAuthorUpdate} className="form-control" /> </div> 
<div className="form-group"> <label> Description </label> 
<textarea className="form-control" placeholder="Book Description" rows="5" value={this.state.description} onChange={this.handleDescriptionUpdate} > {this.state.description} </textarea> </div> 
<div className="form-group d-flex justify-content-between"> 
<button type="submit" className="btn btn-md btn-primary"> {buttonText} </button> 
<button type="button" className="btn btn-md btn-secondary" onClick={this.props.onCancelClick}> Cancel </button> 
</div> 
</form>


)
  }
}

Book組件僅呈現用于顯示書籍的標記，它需要的所有數據以及用于編輯和刪除操作的處理程序都從父組件EditableBook中獲得。
該BookForm組件，而另一方面，使包含從道具書詳細信息的形式更新操作。
對于將由ToggleableBookForm處理的創建操作，將在修改輸入字段時通過調用setState使表單變為可響應的，而不會發送任何道具。為此，我們為每個字段創建不同的處理程序并偵聽change事件。
處理此表單上的提交事件的功能將從主機組件EditableBook或ToggleableBookForm中作為handler發送。最后要構建的組件是ToggleableBookForm，該頁面將用于創建書籍。

// index.js
class ToggleableBookForm extends React.Component {
  state = {
    inCreateMode: false
  }
  handleCreateClick = () => {
    this.setState({inCreateMode: true});
  }
  leaveCreateMode = () => {
    this.setState({inCreateMode: false});
  }
  handleCancleClick = () => {
    this.leaveCreateMode();
  }
  handleFormSubmit = (book) => {
    this.leaveCreateMode();
    this.props.onBookCreate(book);
  }
  render() {
    if (this.state.inCreateMode) {
      return (
<div className="mb-3 p-4" style={{boxShadow: '0 0 10px #ccc'}} > 
<BookForm onFormSubmit={this.handleFormSubmit} onCancelClick={this.handleCancleClick}></BookForm> 
</div>

	
)
    }
    return (
<button onClick={this.handleCreateClick} className="btn btn-secondary"> <i className="fas fa-plus"></i> </button>
 );
  }
}

如前所述，ToggleableBookForm呈現了一個按鈕，用戶單擊該按鈕可以創建一本書。單擊按鈕后，將呈現BookForm組件。
最后，我們使用ReactDOM渲染BookDashboard組件。

// index.js
ReactDOM.render(, document.getElementById('root'));

重新加載瀏覽器后，圖書應用程序前端應能正常運行。

如何在myeclipse中用React和Django創建一個CRUD應用程序（后端篇）

標簽：