创建一个博客，功能1：登陆功能 --react
2017-10-10 本文已影响179人
欧阳司空
react介绍
好像也没有什么可以介绍
代码
<html>
<head></head>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap-grid.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/react/15.6.1/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.6.1/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-core/6.0.19/browser.min.js"></script>
<script src="https://cdn.bootcss.com/react-router/3.0.1/ReactRouter.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.js"></script>
<body>
<div id="app" class="container">
</div>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel" src="main.jsx">
</script>
</body>
</html>
引用bootstrap ui库 因为引入了react react-dom react-router 所以需要引入babel编译
main.jsx 代码
var Router = window.ReactRouter.Router;
var Route = window.ReactRouter.Route;
var hashHistory = window.ReactRouter.hashHistory;
var Link = window.ReactRouter.Link;
class Signin extends React.Component {
constructor(props) {
super(props);
this.handleEmailChange = this.handleEmailChange.bind(this);
this.handlePasswordChange = this.handlePasswordChange.bind(this);
this.signIn = this.signIn.bind(this)
this.state = {
email: '',
password: ''
};
}
handleEmailChange(e) {
this.setState({ email: e.target.value })
}
handlePasswordChange(e) {
this.setState({ password: e.target.value })
}
signIn() {
axios.post('/signin', {
email: this.state.email,
password: this.state.password
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
render() {
return (
<div>
<form className="form-signin">
<h2 className="form-signin-heading"> Please sign in </h2>
<label for="inputEmail" className="sr-only">Email address</label>
<input type="email" onChange={this.handleEmailChange} id="inputEmail" className="form-control" placeholder="Email address" required autofocus />
<label for="inputPassword" className="sr-only">Password</label>
<input type="password" onChange={this.handlePasswordChange} id="inputPassword" className="form-control" placeholder="Password" required />
<button className="btn btn-lg btn-primary btn-block" onClick={this.signIn} type="button">Sign in</button>
</form>
<div>
<Link to="/signup">{'Signup'}</Link>
</div>
</div>
)
}
}
axios.post 是在前面引用这一个库
服务器搭建
const koa = require("koa");
const app = new koa();
const Router = require('koa-router')
const bodyParser = require('koa-bodyparser');
const serve = require('koa-static');
app.use(serve(__dirname + '/html'))
app.use(bodyParser());
app.use( async ( ctx) => {
if(ctx.url == '/signin'&& ctx.method =='POST'){
console.log()
var user_name=ctx.request.body.email;
var password=ctx.request.body.password;
if(user_name==='admin'&&password===“admin”){
ctx.body = 'Success';
}
else{
ctx.body = 'Wrong username password';
}
}
})
app.listen(7777,function(){
console.log("Started listening on port", 7777);
})
使用koa2
koa-router 使用路由
koa-bodyparser 读取parser
koa-static 设置静态文件目录 这个要写在前面 如果写在后面 他可能不是静态的了
