在React js上注销表单

时间:2017-01-21 18:15:55

标签: javascript node.js reactjs authentication

家伙!我有一个问题。我需要在React js上写一个注销表单,从hello.ejs重定向到loginindex.html并使用server.js清除一些变量,但不知道如何=(Pls,help =)< / p>

loginindex.html:

<!DOCTYPE html>
<html>
<head>
    <title>Login form</title>
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
<div id="root">Loading... Please,wait...</div>

<script src="js/react/react.js"></script>
<script src="js/react/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel" src="js/login.js"></script>
</body>
</html>

hello.ejs:

<!DOCTYPE html>
<html>
<head>
    <title>Hello</title>
</head>
<body>
<div id="kek">Loading...</div>

<script type="text/javascript" src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script src="js/react/react.js"></script>
<script src="js/react/react-dom.js"></script>

<script type="text/babel">
    var Hello = React.createClass({
        render: function () {
            return <div>
                <h1>Hello, <%= name %>!</h1>
                <a href
                        type="submit"
                        action="/logoutData"
                        className='sub__btn'
                        ref='sub_btn'>
                    LOGOUT
                </a>
            </div>
        }
    });

    ReactDOM.render(
            <Hello />,
        document.getElementById('kek')
    );
</script>
</body>
</html>

server.js:

var express = require('express');
var app = express();
var bodyParser = require('body-parser');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(bodyParser.urlencoded({ extended: true }));

app.set('port', (process.env.PORT || 3000));
app.set('view engine', 'ejs');

app.post('/loginData', function (req, res) {
    console.log(req.body)
    res.render('hello', { name: req.body.add_login });
});

app.post('/logoutData', function (req, res) {
    console.log(req.body)
    res.render();
});


app.use('/', express.static(__dirname));

app.listen(app.get('port'), function() {
    console.log('Server started: http://localhost:' + app.get('port') + '/');
});

login.css:

.form {
    margin: auto;
    width: 210px;
    border: 3px solid #191970;
    padding: 5px;
}
.add__login, .add__password, .sub__btn {
    display: block;
    margin: 0 0 5px 0;
    padding: 5px;
    width: 95%;
    border: 1px solid #191970;
}
.sub__btn {
    box-sizing: content-box;
    color: #FFF;
    text-transform: uppercase;
    background: #007DDC;
}
.sub__btn:disabled {
    background: #CCC;
    color: #999;
}

1 个答案:

答案 0 :(得分:0)

GenderPreferenceInteractorShaddow shadowGender = (GenderPreferenceInteractorShaddow) ShadowExtractor.extract(genderPreferenceInteractor);