彩票走势图

万事开头难，特别是写程序开头更难！那么怎么在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应用程序（后端篇）

标签：