用ReactJS和Python的Flask框架編寫留言板的代碼示例

更新時間：2015年12月19日 15:53:57 作者：defshine

這篇文章主要介紹了用ReactJS和Python的Flask框架編寫留言板的代碼示例,其他的話用到了MongoDB這個方便使用JavaScript來操作的數(shù)據(jù)庫,需要的朋友可以參考下

近期要在生產環(huán)境上使用react，所以，自己學習了一下，寫了一個簡單的留言板小程序。完整的代碼可以到這里下載：message-board

Use

前端使用React，然后還有Bootstrap和jQuery，React負責前端展現(xiàn)，jQuery主要是向服務器發(fā)送ajax請求。
后端使用Flask和MongoDB，為前端提供數(shù)據(jù)。這里主要關注前端，對于后端不做過多說明。
使用webpack，對js文件進行打包。

About React

React是facebook開發(fā)一個用于前段交互的Javascript庫。
剛剛開始使用，有這么幾個特點：
1. 組件化開發(fā)。React提倡無狀態(tài)的組件，便于重用。
2. VirtualDOM。React的性能比較高，得益于虛擬DOM。它不會每次都去直接操作DOM，因為操作DOM的代價是很大的，所以，它在內存中維護了虛擬DOM，通過計算虛擬DOM和瀏覽器上的DOM的變更進行操作。
3. 專注于View。React不是MVC框架，它只是一個專注于View的庫，所以，它也可以和很多其他框架或者庫一起使用。
4. 提供完成的生命周期。

Message Board

這個留言板小應用，主要有這樣幾個功能：
1.添加留言，一個表單：用戶名和內容
2.列表展示，顯示所有留言
3.簡單的分頁

Code

使用React，就要對應用進行組件的切分，盡量保持組件的無狀態(tài)。

App

從宏觀上組織整個應用，切分三個大組件：
1. MessageForm，添加留言表單。
2. MessageList，留言列表
3. Pager，留言的分頁控制
當然，組件還可以繼續(xù)劃分。
子組件的數(shù)據(jù)都會回調到MessageBoard中，在這里統(tǒng)一控制。
MessageBoard.js

var React = require("react");
var MessageList = require("./MessageList");
var MessageForm = require("./MessageForm");
var Pager = require("./Pager");

var MessageBoard = React.createClass({
 getInitialState : function(){
  return {
   messages: [],
   page:0,
   pages:0
  }
 },
 submitMessage : function (author, content) {
  $.ajax({
   type:'post',
   url:'/message',
   data:{author:author,content:content}
  }).done(function (data) {
   console.log(data);
   this.listMessage(1);
  }.bind(this));
 },
 listMessage : function(page){
  console.log("listMessages page:"+page)
  $.ajax({
   type:'get',
   url:'/messages',
   data:{page:page}
  }).done(function (resp) {
   if(resp.status == "success"){
    var pager = resp.pager;
    console.log(pager);
    this.setState({
     messages:pager.messages,
     page:pager.page,
     pages:pager.pages
    });
   }
  }.bind(this));
 },
 componentDidMount : function(){
  this.listMessage(1);
 },
 render : function(){
  var pager_props = {
   page : this.state.page,
   pages : this.state.pages,
   listMessage : this.listMessage
  };
  return(


<div>
    <MessageForm submitMessage={this.submitMessage}/>
    <MessageList messages = {this.state.messages}/>
    <Pager {...pager_props}/>
   </div>


  )
 }
});

module.exports = MessageBoard;

MessageForm

一個簡單的表單，保存留言。用戶提交后，數(shù)據(jù)會傳給父組件。
MessageForm.js

var React = require("react");

var MessageForm = React.createClass({
 handleSubmit : function (e) {
  e.preventDefault();
  var author = this.refs.author.getDOMNode().value.trim();
  var content = this.refs.content.getDOMNode().value.trim();

  this.props.submitMessage(author,content);

  this.refs.author.getDOMNode().value = "";
  this.refs.content.getDOMNode().value = ""
 },
 render : function(){
  return(
    <div className="well">
     <h4>Leave a Message:</h4>
     <div role="form">
      <div className="form-group">
       <input ref="author" className="form-control" placeholder="Name"/>
       <textarea ref="content" className="form-control" rows="3" placeholder="Leave your message here"></textarea>
      </div>
      <a className="btn btn-primary" onClick={this.handleSubmit}>Submit</a>
     </div>
    </div>
  )
 }
});
module.exports = MessageForm;

MessageList

留言的列表展示，在寫列表之前，把每條留言寫成一個組件
Message.js

var React = require("react");

var Message = React.createClass({
 render : function(){
  var msg = this.props.message;
  return(


<div>
    <h3>{msg.author}&nbsp;&nbsp;
     <small>{msg.time.toLocaleString()}</small>
    </h3>
    <p>{msg.content}</p>
   </div>


  )
 }
});

module.exports = Message;

然后，再寫列表.
數(shù)據(jù)從父組件通過props傳遞進來
MessageList.js

var React = require("react");
var Message = require("./Message");

var MessageList = React.createClass({
 render : function () {
  var messages = this.props.messages.map(function(item){
   return <Message message={item}/>
  });
  console.log(messages);
  return(
   <div>
    {messages}
   </div>
  )
 }
});

module.exports = MessageList;

Pager

這是一個簡單的分頁，會顯示當前頁和總頁數(shù)，還有上一頁和下一頁功能。
Pager.js

var React = require("react/addons");

var Pager = React.createClass({
 getDefaultProps : function(){
  return{
   page:0,
   pages:0
  }
 },
 clickHandler: function(e){
  e.preventDefault();
  console.log(e.target.dataset.page);
  console.log(e.target.dataset.page.value);
  this.props.listMessage(e.target.dataset.page);

 },
 render : function(){
  var cx = React.addons.classSet;
  var preClass = cx({
   'previous':true,
   'disabled':this.props.page == 1
  });
  var nextClass = cx({
   'next':true,
   'disabled':this.props.page == this.props.pages
  });

  return(
   <ul className="pager">
    <li className={preClass} onClick={this.clickHandler}>
     <a href="#" data-page={this.props.page-1}>&larr;Prev</a>
    </li>
    <li>
     <span>{this.props.page}/{this.props.pages}</span>
    </li>
    <li className={nextClass} onClick={this.clickHandler}>
     <a href="#" data-page={this.props.page+1}>Next&rarr;</a>
    </li>
   </ul>
  )
 }
});

module.exports = Pager;

Summary

一個簡單的小程序只能簡單的感受一下React，這個庫的思路和當前流行的庫和框架相比，還是比較新穎的，值得學習～

您可能感興趣的文章: