React中调用Asp.netWebApi

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

1、安装node 相关包

npm install --save react react-dom superagent

2、安装gulp相关包

npm install --save gulp-browserify gulp reactify gulp-connect

3、编写gulpfile.js 构建React文件

var gulp = require('gulp'),
    browserify = require('gulp-browserify'),
    reactify = require('reactify'),
    connect = require('gulp-connect');


gulp.task('build', function() {
    gulp.src('index.js').
    pipe(browserify({
            transform: ['reactify']
        }))
        .pipe(gulp.dest('build.js'))
})

gulp.task('connect', function() {
    connect.server({
        port: 3000,
        livereload: true
    })
})

gulp.task('html', function() {
    gulp.src('*.html')
        .pipe(connect.reload())
})
gulp.task('js',['build'], function() {

    gulp.src('*.js')
        .pipe(connect.reload())
})

gulp.task('watch', function() {
    gulp.watch('*.html', ['html'])
    gulp.watch('*.js', ['js'])
})

gulp.task('default', ['build', 'watch', 'connect'])

4、编写request请求

　　1、新增常量文件 constants.js 用来存放 request 请求中 Basic 认证的用户名密码

module.exports={
    uname:'123',
    pwd:'123'
}

　　2、新增调用 API 文件 api.js

var request = require('superagent');
var constants = require('./constants.js');


module.exports = {
    Get: function(callback) {
        request
            .get('http://localhost:53691/api/value')
            .auth(constants.uname, constants.pwd)
            .end(function(err, res) {
                if(err){
                    alert(err);
                }
                callback(res.body);
            });
    }
}

5、新增index.js

var React=require('react'),
    ReactDOM=require('react-dom'),
    API=require('./Api.js');



var ItemList=React.createClass({
    getInitialState:function(){
        return {
            Users:[]
        }
    },
    componentWillMount:function(){
        var users=API.Get(function(users){
            this.setState({
                Users: users
            })
        }.bind(this));
        
    },
    render:function(){
        var users=this.state.Users;
         if(Array.isArray(users)==false)throw new Error('users is not array')
        var lists=users.map(function(item){
            return <li key={item.ID}>{item.ID}:{item.Name}</li>
        })
        return (
            <ul>
                {lists}
            </ul>
        )
    }
});


ReactDOM.render(<ItemList />,document.getElementById('app'))

6、新增index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>SuperAgent!</h1>
    <div id="app"></div>
    <script src="build.js/index.js"></script>
</body>
</html>