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

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

我們將分三個階段構(gòu)建應(yīng)用程序：

1.在React中創(chuàng)建前端

2.在Django中創(chuàng)建API

3.將前端與API連接

一、準(zhǔn)備工作

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

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

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

二、在React中創(chuàng)建前端

我們將使用CodeMix向?qū)?chuàng)建React應(yīng)用程序。

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

新的CodeMix創(chuàng)建的react應(yīng)用程序的文件夾結(jié)構(gòu)如圖

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

另外我們將使用bootstrap和fontawesome進(jìn)行一些其他樣式設(shè)置和某些圖標(biāo)，上述資源內(nèi)容添加到src / index.js中的部分。

三、建設(shè)前端

React是一個組件驅(qū)動的庫。因此，我們需要將我們的應(yīng)用分為不同的組件來實現(xiàn)下方界面：

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

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

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

我們將從父組件開始按層次創(chuàng)建組件。要創(chuàng)建的第一個組件是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組件保存了書籍?dāng)?shù)據(jù)。然后將書籍?dāng)?shù)據(jù)傳遞給BookList組件，以及一些處理書籍刪除和更新的功能。
BookDashboard還呈現(xiàn)ToggleableBookForm，并傳遞一個作為參數(shù)的函數(shù)來處理書的創(chuàng)建。我們定義處理函數(shù)：createNewBook ，updateBook ，deleteBook更新狀態(tài)
接下來，我們需要為此創(chuàng)建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>
)
  }
}

該書目組件接收書籍?dāng)?shù)據(jù)，映射在其上，并返回的數(shù)組EditableBook然后在組件上展示。EditableBook是一個組件，如果用戶單擊Book組件上的edit book按鈕，則該組件將呈現(xiàn)Book或BookForm。這個組件可以展示書籍信息，它還接收一些處理單擊編輯按鈕和刪除按鈕的功能。讓我們創(chuàng)建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組件僅呈現(xiàn)用于顯示書籍的標(biāo)記，它需要的所有數(shù)據(jù)以及用于編輯和刪除操作的處理程序都從父組件EditableBook中獲得。
該BookForm組件，而另一方面，使包含從道具書詳細(xì)信息的形式更新操作。
對于將由ToggleableBookForm處理的創(chuàng)建操作，將在修改輸入字段時通過調(diào)用setState使表單變?yōu)榭身憫?yīng)的，而不會發(fā)送任何道具。為此，我們?yōu)槊總€字段創(chuàng)建不同的處理程序并偵聽change事件。
處理此表單上的提交事件的功能將從主機(jī)組件EditableBook或ToggleableBookForm中作為handler發(fā)送。最后要構(gòu)建的組件是ToggleableBookForm，該頁面將用于創(chuàng)建書籍。

// 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呈現(xiàn)了一個按鈕，用戶單擊該按鈕可以創(chuàng)建一本書。單擊按鈕后，將呈現(xiàn)BookForm組件。
最后，我們使用ReactDOM渲染BookDashboard組件。

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

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

如何在myeclipse中用React和Django創(chuàng)建一個CRUD應(yīng)用程序（后端篇）

標(biāo)簽：