Go_Webapp React

Go_Webapp前端搭建

本次项目采用前后端分离开发，项目的技术栈是react+go+mongo。我主要负责前端部分的搭建。

React 前端

为了更加方便的开发前端，我们采用框架开发本次项目。这次我便尝试了采用react框架进行前端框架的开发。本次项目我主要负责了登录注册界面以及redux以及连接api数据部分的数据接口的编写。

登录注册界面

通过render函数渲染login组件

<div style={bgGround}>
    <LoginNav/>
    <div className="auth-wrapper" >
        <div className="auth-inner" style={LoginDiv}>
            <form>
                <h3>Sign In</h3>

                <div className="form-group">
                    <label>Username</label>
                    <input type="text" className="form-control" placeholder="Enter username" onChange={(e) => this.formUserName(e)} value={this.state.username}/>
                </div>

                <div className="form-group">
                    <label>Password</label>
                    <input type="password" className="form-control" placeholder="Enter password" onChange={(e) => this.formPassword(e)} value={this.state.password}/>
                </div>

                <div className="form-group">
                    <div className="custom-control custom-checkbox">
                        <input type="checkbox" className="custom-control-input" id="customCheck1" />
                        <label className="custom-control-label" htmlFor="customCheck1">Remember me</label>
                    </div>
                </div>

                <button type="submit" className="btn btn-primary btn-block" onClick={(e) => this.clickLogin(this.state.username, this.state.password)}>Sign In</button>
            </form>
        </div>
    </div>

</div>

通过render函数渲染signup组件

          <div style={bgGround}>
    <LoginNav/>
    <div className="auth-wrapper">
        <div className="auth-inner" style={SignUpDiv}>
            <form>
                <h3>Sign Up</h3>

                <div className="form-group">
                    <label>Username</label>
                    <input type="text" className="form-control" placeholder="Username" onChange={(e) => this.formUserName(e)} value={this.state.username}/>
                </div>

                <div className="form-group">
                    <label>Password</label>
                    <input type="password" className="form-control" placeholder="Enter password" onChange={(e) => this.formPassword(e)} value={this.state.password}/>
                </div>

                <div className="form-group">
                    <label>Confirm Password</label>
                    <input type="password" className="form-control" placeholder="Confirm password" onChange={(e) => this.formConfirm(e)} value={this.state.confirm}/>
                </div>

                <button type="submit" className="btn btn-primary btn-block" onClick={(e) => {this.clickSignUp(this.state.username, this.state.password, this.state.confirm)}}>Sign Up</button>
                <p className="forgot-password text-right">
                    Already registered <a href="http://localhost:3000/login">login?</a>
                </p>
            </form>
        </div>
    </div>
</div>

数据接口

通过axios来编写数据接口

axios.get(`${process.env.REACT_APP_API_URL}/api/users`)
    .then(resp => {
        console.log(resp.data);
        this.setState({
            userInfo: resp.data
        });
    });

• 登录逻辑

clickLogin(username, password) {
    console.log(username, password);

    let flag = 0;

    for (let i = 0; i < this.state.userInfo.length; i++) {
        if (this.state.userInfo[i].username === username) {
            if (this.state.userInfo[i].password === password) {
                this.props.history.push(`/index/${username}`);
            } else {
                console.log("Error Password");
            }
        } else
            flag++;
    }

    if (flag === this.state.userInfo.length)
        console.log("No Such Username");
    else
        console.log("Login Successfully");

    axios.get(`${process.env.REACT_APP_API_URL}/api/users/${username}`)
        .then(resp => {
            console.log(resp.data);
            this.setState({
                user: resp.data[0]
            });
            console.log(this.state.user);
        });

}

• 注册逻辑

clickSignUp(username, password, confirm) {
    console.log(username, password, confirm);

    let flag = 0;

    /*
    * 首先判断用户名是否被使用过
    * 如果 flag === userInfo.length，则用户名未被使用过
    * */
    for (let i = 0; i < this.state.userInfo.length; i++)
        if (this.state.userInfo[i].username === username)
            break;
        else
            flag++;

    /*
    * 当用户名未被使用过时，确认两次输入密码是否一致
    * */
    if (flag === this.state.userInfo.length) {
        if (password === confirm) {
            axios.post(`${process.env.REACT_APP_API_URL}/users/register`, qs.stringify({
                "username": username,
                "password": password
            })).then(resp => {
                console.log(resp.data);
                this.props.history.push(`/index/${username}`);
            }, error => {
                console.log("error: ", error.message);
                console.log("Unable to sign up");
            });
        } else
            console.log("Confirm Password is not the same as Password");
    } else
        console.log("Username Exists");


}

总结

本次实验主要负责前端的编写，根据前端接口稍微修改了一下后台的api接口。通过本次项目，不仅学习了一个新的前端框架，还熟悉了前后端分离项目的开发流程。希望在接下来的学习中能够学习到更多知识。