使用React和Flask开发一个留言板

前端之家收集整理的这篇文章主要介绍了使用React和Flask开发一个留言板前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

近期要在生产环境上使用react,所以,自己学习了一下,写了一个简单的留言板小程序。完整的代码可以到这里下载:message-board

Use

前端使用React,然后还有Bootstrap和jQuery,React负责前端展现,jQuery主要是向服务器发送ajax请求。
后端使用Flask和MongoDB,为前端提供数据。这里主要关注前端,对于后端不做过多说明。
使用webpack,对js文件进行打包。

About React

React是facebook开发一个用于前段交互的Javascript库。
刚刚开始使用,有这么几个特点:
1. 组件化开发。React提倡无状态的组件,便于重用。
2. VirtualDOM。React的性能比较高,得益于虚拟DOM。它不会每次都去直接操作DOM,因为操作DOM的代价是很大的,所以,它在内存中维护了虚拟DOM,通过计算虚拟DOM和浏览器上的DOM的变更进行操作。
3. 专注于View。React不是MVC框架,它只是一个专注于View的库,所以,它也可以和很多其他框架或者库一起使用。
4. 提供完成的生命周期。

Message Board

这个留言板小应用,主要有这样几个功能
1.添加留言,一个表单:用户名内容
2.列表展示,显示所有留言
3.简单的分页

Code

使用React,就要对应用进行组件的切分,尽量保持组件的无状态。

App

从宏观上组织整个应用,切分三个大组件:
1. MessageForm,添加留言表单。
2. MessageList,留言列表
3. Pager,留言的分页控制
当然,组件还可以继续划分。
子组件的数据都会回调到MessageBoard中,在这里统一控制。
MessageBoard.js

  1. javascriptvar React = require("react");
  2. var MessageList = require("./MessageList");
  3. var MessageForm = require("./MessageForm");
  4. var Pager = require("./Pager");
  5.  
  6. var MessageBoard = React.createClass({
  7. getInitialState : function(){
  8. return {
  9. messages: [],page:0,pages:0
  10. }
  11. },submitMessage : function (author,content) {
  12. $.ajax({
  13. type:'post',url:'/message',data:{author:author,content:content}
  14. }).done(function (data) {
  15. console.log(data);
  16. this.listMessage(1);
  17. }.bind(this));
  18. },listMessage : function(page){
  19. console.log("listMessages page:"+page)
  20. $.ajax({
  21. type:'get',url:'/messages',data:{page:page}
  22. }).done(function (resp) {
  23. if(resp.status == "success"){
  24. var pager = resp.pager;
  25. console.log(pager);
  26. this.setState({
  27. messages:pager.messages,page:pager.page,pages:pager.pages
  28. });
  29. }
  30. }.bind(this));
  31. },componentDidMount : function(){
  32. this.listMessage(1);
  33. },render : function(){
  34. var pager_props = {
  35. page : this.state.page,pages : this.state.pages,listMessage : this.listMessage
  36. };
  37. return(
  38.  
  39.  
  40. <div>
  41. <MessageForm submitMessage={this.submitMessage}/>
  42. <MessageList messages = {this.state.messages}/>
  43. <Pager {...pager_props}/>
  44. </div>
  45.  
  46.  
  47. )
  48. }
  49. });
  50.  
  51. module.exports = MessageBoard;

MessageForm

一个简单的表单,保存留言。用户提交后,数据会传给父组件。
MessageForm.js

  1. javascriptvar React = require("react");
  2.  
  3. var MessageForm = React.createClass({
  4. handleSubmit : function (e) {
  5. e.preventDefault();
  6. var author = this.refs.author.getDOMNode().value.trim();
  7. var content = this.refs.content.getDOMNode().value.trim();
  8.  
  9. this.props.submitMessage(author,content);
  10.  
  11. this.refs.author.getDOMNode().value = "";
  12. this.refs.content.getDOMNode().value = ""
  13. },render : function(){
  14. return(
  15. <div className="well">
  16. <h4>Leave a Message:</h4>
  17. <div role="form">
  18. <div className="form-group">
  19. <input ref="author" className="form-control" placeholder="Name"/>
  20. <textarea ref="content" className="form-control" rows="3" placeholder="Leave your message here"></textarea>
  21. </div>
  22. <a className="btn btn-primary" onClick={this.handleSubmit}>Submit</a>
  23. </div>
  24. </div>
  25. )
  26. }
  27. });
  28. module.exports = MessageForm;

MessageList

留言的列表展示,在写列表之前,把每条留言写成一个组件
Message.js

  1. javascriptvar React = require("react");
  2.  
  3. var Message = React.createClass({
  4. render : function(){
  5. var msg = this.props.message;
  6. return(
  7.  
  8.  
  9. <div>
  10. <h3>{msg.author}&nbsp;&nbsp;
  11. <small>{msg.time.toLocaleString()}</small>
  12. </h3>
  13. <p>{msg.content}</p>
  14. </div>
  15.  
  16.  
  17. )
  18. }
  19. });
  20.  
  21. module.exports = Message;

然后,再写列表.
数据从父组件通过props传递进来
MessageList.js

  1. javascriptvar React = require("react");
  2. var Message = require("./Message");
  3.  
  4. var MessageList = React.createClass({
  5. render : function () {
  6. var messages = this.props.messages.map(function(item){
  7. return <Message message={item}/>
  8. });
  9. console.log(messages);
  10. return(
  11. <div>
  12. {messages}
  13. </div>
  14. )
  15. }
  16. });
  17.  
  18. module.exports = MessageList;

Pager

这是一个简单的分页,会显示当前页和总页数,还有上一页下一页功能
Pager.js

  1. javascriptvar React = require("react/addons");
  2.  
  3. var Pager = React.createClass({
  4. getDefaultProps : function(){
  5. return{
  6. page:0,clickHandler: function(e){
  7. e.preventDefault();
  8. console.log(e.target.dataset.page);
  9. console.log(e.target.dataset.page.value);
  10. this.props.listMessage(e.target.dataset.page);
  11.  
  12. },render : function(){
  13. var cx = React.addons.classSet;
  14. var preClass = cx({
  15. 'prevIoUs':true,'disabled':this.props.page == 1
  16. });
  17. var nextClass = cx({
  18. 'next':true,'disabled':this.props.page == this.props.pages
  19. });
  20.  
  21. return(
  22. <ul className="pager">
  23. <li className={preClass} onClick={this.clickHandler}>
  24. <a href="#" data-page={this.props.page-1}>&larr;Prev</a>
  25. </li>
  26. <li>
  27. <span>{this.props.page}/{this.props.pages}</span>
  28. </li>
  29. <li className={nextClass} onClick={this.clickHandler}>
  30. <a href="#" data-page={this.props.page+1}>Next&rarr;</a>
  31. </li>
  32. </ul>
  33. )
  34. }
  35. });
  36.  
  37. module.exports = Pager;

Summary

一个简单的小程序只能简单的感受一下React,这个库的思路和当前流行的库和框架相比,还是比较新颖的,值得学习~

猜你在找的React相关文章