React完结撒花

calc/package-lock.json

@@ -13,6 +13,7 @@
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^13.5.0",
         "bootstrap": "^5.2.0",
+        "jquery": "^3.6.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-redux": "^8.0.2",
@@ -10607,6 +10608,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.6.1.tgz",
+      "integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -23947,6 +23953,11 @@
         }
       }
     },
+    "jquery": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.6.1.tgz",
+      "integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",

calc/package.json

@@ -8,6 +8,7 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "bootstrap": "^5.2.0",
+    "jquery": "^3.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.2",

calc/src/components/app.jsx

@@ -5,18 +5,46 @@ import Calc from './content/calc';
 import Login from './content/login';
 import Register from './content/register';
 import { Routes, Route, Navigate } from 'react-router-dom';
+import $ from 'jquery';
+
 
 class App extends Component {
-    state = {  } 
+    state = { 
+        is_login: true,
+        username: "zfp",
+     } 
+
+    // api会有跨域问题
+    componentDidMount =  () => {
+        $.ajax({
+            url: "https://app165.acapp.acwing.com.cn/calculator/get_status/",
+            type: "get",
+            success: resp => {
+                console.log(resp);
+                if (resp.result === "login") {
+                    this.setState({
+                        is_login: true,
+                        username: resp.username,
+                    })
+                }else {
+                    this.setState({
+                        is_login: false,
+                    })
+                }
+            }
+
+        })
+    }
+
     render() { 
         return (
             <React.Fragment>
                 <div className='container'>
-                    <NavBar />
+                    <NavBar is_login={this.state.is_login} username={this.state.username} />
                     <Routes>
                             <Route path='/' element={<Home />}></Route>
                             <Route path='/home' element={<Home />}></Route>
-                            <Route path='/calc' element={<Calc />}></Route>
+                            <Route path='/calc' element={this.state.is_login ? <Calc /> : <Navigate replace to="/login" />}></Route>
                             <Route path='/login' element={<Login />}></Route>
                             <Route path='/register' element={<Register />}></Route>
                             <Route path="*" element={ <Navigate replace to="/404" /> } />

calc/src/components/content/login.jsx

@@ -1,13 +1,65 @@
 import React, { Component } from 'react';
 import Base from './base';
-
+import $ from 'jquery';
 
 class Login extends Component {
-    state = {  } 
+    state = {
+         error_msg: "",
+         username: "",
+         password: "",
+    } 
+
+    handleClickLogin = e => {
+        e.preventDefault();
+        if (this.state.username === "") {
+            this.setState({error_msg: "用户名不能为空"});
+        }else if (this.state.password === "") {
+            this.setState({error_msg: "密码不能为空"});
+        }else {
+            $.ajax({
+                url: "https://app165.acapp.acwing.com.cn/calculator/login/",
+                type: "GET",
+                data: {
+                    username: this.state.username,
+                    password: this.state.password,
+                },
+                dataType: "json",
+                success: resp => {
+                    if (resp.result === "success") {
+                        window.location.href = "/home";
+                    }else {
+                        this.setState({error_msg: resp.result});
+                    }
+                }
+
+            });
+
+        }
+    }
     render() { 
         return (
             <Base>
-                <h3>登录</h3>
+                <div className="container">
+                    <div className="row justify-content-md-center">
+                        <div className="col col-sm-3">
+                        <form>
+                            <div className="mb-3">
+                                <label htmlFor="username" className="form-label">用户名</label>
+                                <input onChange={e => {this.setState({username: e.target.value})}} type="email" className="form-control" id="username" aria-describedby="emailHelp"/>
+                            </div>
+                            <div className="mb-3">
+                                <label htmlFor="password" className="form-label">密码</label>
+                                <input onChange={e => {this.setState({password: e.target.value})}} type="password" className="form-control" id="password"/>
+                            </div>
+
+                            <div className='error_msg' style={{marginTop: "1rem",marginBottom:"1rem",color:"red", fontWeight: "bold"}}>
+                                {this.state.error_msg}
+                            </div>
+                            <button onClick={this.handleClickLogin} type="submit" className="btn btn-primary" style={{width:"100%"}}>登录</button>
+                            </form>
+                        </div>
+                    </div>
+                </div>
             </Base>
         );
     }

calc/src/components/content/register.jsx

@@ -1,12 +1,78 @@
 import React, { Component } from 'react';
 import Base from './base';
+import $ from 'jquery';
 
 class Register extends Component {
-    state = {  } 
+    state = { 
+        error_msg: "",
+        username: "",
+        confirm_password: "",
+        password: "",
+    }; 
+
+    handleClickRegister = e => {
+        e.preventDefault();
+        if (this.state.username === "") {
+            this.setState({error_msg: "用户名不能为空"});
+        }else if (this.state.password === "") {
+            this.setState({error_msg: "密码不能为空"});
+        }else if (this.state.confirm_password === "") {
+                this.setState({error_msg: "确认密码不能为空"});
+        }else if (this.state.confirm_password !== this.state.password) {
+                    this.setState({error_msg: "两次密码输入不一致"});
+        }else {
+            $.ajax({
+                url: "https://app165.acapp.acwing.com.cn/calculator/register/",
+                type: "GET",
+                data: {
+                    username: this.state.username,
+                    password: this.state.password,
+                    password_confirm: this.state.confirm_password
+                },
+                dataType: "json",
+                success: resp => {
+                    if (resp.result === "success") {
+                        window.location.href = "/home";
+                    }else {
+                        this.setState({error_msg: resp.result});
+                    }
+                }
+
+            });
+        }
+        console.log(this.state);
+    }
+
+
     render() { 
         return (
             <Base>
-                <h3>注册</h3>
+                <div className="container">
+                    <div className="row justify-content-md-center">
+                        <div className="col col-sm-3">
+                        <form>
+                            <div className="mb-3">
+                                <label htmlFor="username" className="form-label">用户名</label>
+                                <input onChange={e => {this.setState({username: e.target.value})}} type="email" className="form-control" id="username" aria-describedby="emailHelp"/>
+                            </div>
+                            <div className="mb-3">
+                                <label htmlFor="password" className="form-label">密码</label>
+                                <input onChange={e => {this.setState({password: e.target.value})}} type="password" className="form-control" id="password"/>
+                            </div>
+
+                            <div className="mb-3">
+                                <label htmlFor="confirm_password" className="form-label">确认密码</label>
+                                <input onChange={e => {this.setState({confirm_password: e.target.value})}} type="password" className="form-control" id="confirm_password"/>
+                            </div>
+
+                            <div className='error_msg' style={{marginTop: "1rem",marginBottom:"1rem",color:"red", fontWeight: "bold"}}>
+                                {this.state.error_msg}
+                            </div>
+                            <button onClick={this.handleClickRegister} type="submit" className="btn btn-primary" style={{width:"100%"}}>注册</button>
+                            </form>
+                        </div>
+                    </div>
+                </div>
             </Base>
         );
     }

calc/src/components/navbar.jsx

@@ -1,7 +1,59 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
+import $ from 'jquery';
+
 class NavBar extends Component {
     state = {  } 
+
+    render_calc = () => {
+        if (this.props.is_login){
+            return (
+            <li className="nav-item">
+                <Link className="navbar-brand" to="/calc">计算器</Link>
+            </li>);
+        }
+        else return "";
+    }
+
+    handleClickLogout = () => {
+        $.ajax({
+            url: "https://app165.acapp.acwing.com.cn/calculator/logout/",
+            type: "GET",
+            success: resp => {
+                console.log(resp);
+                if (resp.result === "success") {
+                    window.location.href = "/home";
+                    
+                }
+            }
+        });
+    }
+
+    render_logout = () => {
+        if (this.props.is_login) {
+            return (
+            <ul className="navbar-nav">
+                <li className="nav-item">
+                <div className="navbar-brand" style={{cursor: "pointer"}}>{this.props.username}</div>
+                </li>
+                <li className="nav-item ">
+                <div onClick={this.handleClickLogout} className="navbar-brand" style={{cursor: "pointer"}}>退出</div>
+                </li>
+            </ul>);
+        }else {
+            return (
+                <ul className="navbar-nav">
+                    <li className="nav-item">
+                    <Link className="navbar-brand" to="/login">登录</Link>
+                    </li>
+                    <li className="nav-item">
+                    <Link className="navbar-brand" to="/register">注册</Link>
+                    </li>
+                </ul>);
+        }
+    }
+
+
     render() { 
         return (
             <nav className="navbar navbar-expand-lg navbar-light bg-light">
@@ -15,18 +67,9 @@ class NavBar extends Component {
                         <li className="nav-item">
                         <Link className="navbar-brand" to="/home">首页</Link>
                         </li>
-                        <li className="nav-item">
-                        <Link className="navbar-brand" to="/calc">计算器</Link>
-                        </li>
-                    </ul>
-                    <ul className="navbar-nav">
-                        <li className="nav-item">
-                        <Link className="navbar-brand" to='/login'>登录</Link>
-                        </li>
-                        <li className="nav-item ">
-                        <Link className="navbar-brand" to='/register'>注册</Link>
-                        </li>
+                        {this.render_calc()}
                     </ul>
+                        {this.render_logout()}
                     </div>
                 </div>
             </nav>