创建一个博客,功能1:登陆功能 --react

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 设置静态文件目录 这个要写在前面 如果写在后面 他可能不是静态的了

推荐阅读更多精彩内容