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

标签: react flask | 发表时间:2015-01-12 23:19 | 作者:defshine
出处:http://segmentfault.com/blogs

近期要在生产环境上使用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

  javascript  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

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

  javascript  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

  javascript  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;

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

  javascript  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

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

  javascript  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,这个库的思路和当前流行的库和框架相比,还是比较新颖的,值得学习~

相关 [react flask 开发] 推荐:

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

- - SegmentFault 最新的文章
近期要在生产环境上使用react,所以,自己学习了一下,写了一个简单的留言板小程序. 完整的代码可以到这里下载: message-board. 前端使用React,然后还有Bootstrap和jQuery,React负责前端展现,jQuery主要是向服务器发送ajax请求. 后端使用Flask和MongoDB,为前端提供数据.

Flask-Babel 简介

- yinseny - python.cn(jobs, news)
本文有一个格式好看一点,并且有语法高亮的版本放在 readthedocs,欢迎浏览. 本文是原创,不是翻译,不过本文其实是谈翻译的. 话说用 wordpress 的 WYSIWYG 编辑器写这样的文章真痛苦啊,格式一不小心就乱了,本文是用 rst 写成,编译为 html,然后贴到这边来的. 最近用 Flask 给公司做了个小 web 应用,做的时候用英文了,现在要求翻译成中文.

谈谈 React Native

- - 唐巧的技术博客
几天前,Facebook 在 React.js Conf 2015 大会上推出了 React Native( 视频链接). 我发了一条微博( 地址),结果引来了 100 多次转发. 为什么 React Native 会引来如此多的关注呢. 我在这里谈谈我对 React Native 的理解. 一个新框架的出现总是为了解决现有的一些问题,那么对于现在的移动开发者来说,到底有哪些问题 React Native 能涉及呢.

浅谈移动应用的跨平台开发工具(Xamarin和React Native)

- - 酷 壳 – CoolShell.cn
谈移动应用的跨平台开发不能不提HTML5,PhoneGap和Sencha等平台一直致力于使用HTML5技术来开发跨平台的移动应用,现在看来这个方向基本算是失败的,基于HTML5的移动应用在用户体验上与原生应用仍然存在着明显的差距. 与上述HTML5平台不同,Xamarin和React Native通过各自的方式来实现跨平台.

Webpack 和 React 小书

- - SegmentFault 最新的文章
Webpack 和 React 小书. 这本小书的目的是引导你进入 React 和 Webpack 的世界. 他们两个都是非常有用的技术,如果同时使用他们,前端开发会更加有趣. 这本小书会提供所有相关的技能. 如果你只是对 React 感兴趣,那可以跳过 Webpack 相关的内容,反之亦然. 如果想学习更多的相关知识可以移步 SurviveJS - Webpack and React.

Flask + Gunicorn + Nginx 部署 - Ray Liang

- - 博客园_首页
最近很多朋友都在问我关于 Flask 部署的问题,说实在的我很乐意看到和回答这样的问题,至少证明了越来越多人开始用 Flask 了. 之前我曾发表过一篇在 Ubuntu 上用 uwsgi + nginx 的 Flask 部署方法,说实在的 uwsgi 是个大坑可能用在 Django 上还好吧,不过用在 Flask 上未必就如此.

NervJS/taro: 开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/

- -
👽Taro['tɑ:roʊ],泰罗·奥特曼,宇宙警备队总教官,实力最强的奥特曼. Taro是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5 等应用. 现如今市面上端的形态多种多样,Web、React Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要.

React入门实例学习

- - JavaScript - Web前端 - ITeye博客
        React可以在浏览器运行,也可以在服务器运行,但是在这为了尽量保持简单,且React语法是一致的,服务器的用法和浏览器差别不大,在这只涉及浏览器. 一. HTML模板.         使用React的网页源码,结构大致如下:.         1.最后一个script标签的type属性为text/jsx.

轻松入门React和Webpack

- - SegmentFault 最新的文章
小广告:更多内容可以看 我的博客和 读书笔记. 最近在学习React.js,之前都是直接用最原生的方式去写React代码,发现组织起来特别麻烦,之前听人说用Webpack组织React组件得心应手,就花了点时间学习了一下,收获颇丰. 一个组件,有自己的结构,有自己的逻辑,有自己的样式,会依赖一些资源,会依赖某些其他组件.

React 入门实例教程

- - 阮一峰的网络日志
现在最热门的前端框架,毫无疑问是 React. 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.