ReactJS +jQuery+Node后台取数据

最新推荐文章于 2024-09-18 23:27:31 发布

zhenzigis

最新推荐文章于 2024-09-18 23:27:31 发布

阅读量2.8k

点赞数

分类专栏： JavaScript 文章标签： ajax express html

本文链接：https://blog.csdn.net/zhenzigis/article/details/50547028

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

这个例子结合react和ajax技术，从后台取图片，然后进行交互。为了模拟真实环境，我用node建了一个简易的后台服务。这里使用的是node5.3版本。在chrome浏览器下测试通过。

首先看项目结构：
这里写图片描述

views里html静态文件，public里是js,css,images资源。app-express.js是启动脚本，是用node express创建的一个后台服务。

先不管后台，奉上/view/index.html的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
* {
    padding:0;
    margin:0;
}

html{
    font:14px normal Arial, sans-serif;
    color:#626771;
    background-color:#fff;
}

body{
    padding:20px;
    text-align: center;
}

h1{
    font-size: 18px;
    margin-bottom: 30px;
    padding-top: 20px;
}

div.picture{
    display: inline-block;
    margin: 5px;
    cursor:pointer;
    position: relative;
}

div.picture.favorite:after{
    content: '❤';
    position: absolute;
    font-size: 80px;
    line-height: 200px;
    color: #FF224D;
    width: 100%;
    text-align: center;
    left: 0;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    font-weight: bold;
}

.pictures, .favorites{
    white-space: nowrap;
    overflow-y: auto;
    margin-bottom: 20px;
    height: 230px;
    background-color: #F3F3F3;
}

.pictures p, .favorites p {
    padding-top: 100px;
    font-size: 13px;
}
    </style>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/react.min.js"></script>
    <script src="js/react-dom.min.js"></script>
    <script src="js/browser.min.js"></script>
</head>
<body>
    <script  type="text/babel">
    var Picture = React.createClass({
        clickHandler: function(){   
            this.props.onClick(this.props.pid);
        },

        render: function(){
            var cls = 'picture ' + (this.props.favorite ? 'favorite' : '');
            return (
                <div className={cls} onClick={this.clickHandler}>
                    <img src={this.props.src} width="200" title={this.props.title} />
                </div>
            );
        }
    });

    var PictureList = React.createClass({
        getInitialState: function(){        
            // 通过AJAX取图片列表，用户点击图片加入收藏        
            return { pictures: [], favorites: [] };
        },

        componentDidMount: function(){ 
            // 组件加载完成后发送一个AJAX请求
            var self = this;
            // 从node服务中获取图片列表
            var url = '/pictures';
            $.getJSON(url, function(result){
                if(!result || !result.pictures || !result.pictures.length){
                    return;
                }

                var pictures = result.pictures.map(function(p){
                    return { 
                        pid: p.pid, 
                        src: p.src, 
                        title: p.title ? p.title : '', 
                        favorite: false 
                    };
                });

                // 更新组件状态，这会触发一次render，此处只更新Pictures数组，不会删除favorites数组
                self.setState({ pictures: pictures });
            });

        },

        pictureClick: function(pid){
            // id变量即点击图片的ID，从pictures数组里找出它并把它加到favorites数组中去
            var favorites = this.state.favorites,
                pictures = this.state.pictures;

            for(var i = 0; i < pictures.length; i++){
                // 从pictures数组里找出  pid
                if(pictures[i].pid == pid) {  
                    if(pictures[i].favorite){
                        return this.favoriteClick(pid);
                    }
                    // 把它加到favorites数组中,标记它的favorite为true
                    favorites.push(pictures[i]);
                    pictures[i].favorite = true;

                    break;
                }
            }

            // 更新状态，重新触发一次render
            this.setState({pictures: pictures, favorites: favorites});
        },

        favoriteClick: function(pid){
            // 在favorites 数组中找出这个picture并移除. 然后在pictures数组中找出picture并标记non-favorite
            var favorites = this.state.favorites,
                pictures = this.state.pictures;

            for(var i = 0; i < favorites.length; i++){
                if(favorites[i].pid == pid) break;
            }

            // 移除
            favorites.splice(i, 1);

            for(i = 0; i < pictures.length; i++){
                if(pictures[i].pid == pid) {
                    pictures[i].favorite = false;
                    break;
                }
            }

            // 更新状态并触发render
            this.setState({pictures: pictures, favorites: favorites});

        },

        render: function() {
            var self = this;
            var pictures = this.state.pictures.map(function(p){
                return <Picture pid={p.pid} src={p.src} title={p.title} favorite={p.favorite} onClick={self.pictureClick} />
            });

            if(!pictures.length){
                pictures = <p>Loading images..</p>;
            }

            var favorites = this.state.favorites.map(function(p){
                return <Picture pid={p.pid} src={p.src} title={p.title} favorite={true} onClick={self.favoriteClick} />
            });

            if(!favorites.length){
                favorites = <p>Click an image to mark it as a favorite.</p>;
            }

            return (
                <div>
                    <h1>热门图片</h1>
                    <div className="pictures"> {pictures} </div>

                    <h1>我的收藏</h1>
                    <div className="favorites"> {favorites} </div>
                </div>
            );
        }
    });


    // Render  PictureList 组件并加到body中
    React.render(
        <PictureList apiKey="642176ece1e7445e99244cec26f4de1f" />,
        document.body
    );
    </script>
</body>
</html>

图片和脚本资源准备（请自行准备）
这里写图片描述

这里写图片描述

用的全是windows自带的图片，哈哈。

脚本：
这里写图片描述

多了个jquery，我们主要使用jquery的ajax，不喜欢用框架的自已去写吧。

OK，现在打开页面还不能运行，把app-express.js的脚本加上：

var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var http = require('http');
var fs=require('fs');
var mime=require('mime');


var app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.set('views', path.join(__dirname, 'views'));
app.use(express.static(path.join(__dirname, 'public')));
app.get('/', function(req, res) {
    var fname="views/index.html";
    fs.readFile(fname,function(err,buf){
        res.writeHead(200,{'Content-Type':mime.lookup(fname),'Content-Length':buf.length});
        res.end(buf);
    });

});


app.get('/pictures', function(req, res) {
    res.writeHead(200,{'Content-Type':'application/json'});
    res.end(JSON.stringify({
        pictures: [{
             pid:"1",
             src:"images/Chrysanthemum.jpg",
             title:"Chrysanthemum",
             favorite: false 
         },{
             pid:"2",           
             src:"images/Desert.jpg",
             title:"Desert",
             favorite: false 
         },{
             pid:"3",           
             src:"images/Hydrangeas.jpg",
             title:"Hydrangeas",
             favorite: false 
         },{
             pid:"4",           
             src:"images/Jellyfish.jpg",
             title:"Jellyfish",
             favorite: false 
         },{
             pid:"5",           
             src:"images/Koala.jpg",
             title:"Koala",
             favorite: false 
         },{
             pid:"6",           
             src:"images/Lighthouse.jpg",
             title:"Lighthouse",
             favorite: false 
         },{
             pid:"7",           
             src:"images/Penguins.jpg",
             title:"Penguins",
             favorite: false 
         },{
             pid:"8",           
             src:"images/Tulips.jpg",
             title:"Tulips",
             favorite: false 
         }] 
    }));
});


var server = http.createServer(app);
server.listen('8100');