React完结撒花

master
barney 2 years ago
parent c9ef3e6b5a
commit 15de0e956a
  1. 11
      calc/package-lock.json
  2. 1
      calc/package.json
  3. 34
      calc/src/components/app.jsx
  4. 58
      calc/src/components/content/login.jsx
  5. 70
      calc/src/components/content/register.jsx
  6. 65
      calc/src/components/navbar.jsx

@ -13,6 +13,7 @@
"@testing-library/react": "^13.3.0", "@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.2.0", "bootstrap": "^5.2.0",
"jquery": "^3.6.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-redux": "^8.0.2", "react-redux": "^8.0.2",
@ -10607,6 +10608,11 @@
"node": ">=10" "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": { "node_modules/js-tokens": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz", "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": { "js-tokens": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz", "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",

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

@ -5,18 +5,46 @@ import Calc from './content/calc';
import Login from './content/login'; import Login from './content/login';
import Register from './content/register'; import Register from './content/register';
import { Routes, Route, Navigate } from 'react-router-dom'; import { Routes, Route, Navigate } from 'react-router-dom';
import $ from 'jquery';
class App extends Component { 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() { render() {
return ( return (
<React.Fragment> <React.Fragment>
<div className='container'> <div className='container'>
<NavBar /> <NavBar is_login={this.state.is_login} username={this.state.username} />
<Routes> <Routes>
<Route path='/' element={<Home />}></Route> <Route path='/' element={<Home />}></Route>
<Route path='/home' 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='/login' element={<Login />}></Route>
<Route path='/register' element={<Register />}></Route> <Route path='/register' element={<Register />}></Route>
<Route path="*" element={ <Navigate replace to="/404" /> } /> <Route path="*" element={ <Navigate replace to="/404" /> } />

@ -1,13 +1,65 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import Base from './base'; import Base from './base';
import $ from 'jquery';
class Login extends Component { 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() { render() {
return ( return (
<Base> <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> </Base>
); );
} }

@ -1,12 +1,78 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import Base from './base'; import Base from './base';
import $ from 'jquery';
class Register extends Component { 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() { render() {
return ( return (
<Base> <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> </Base>
); );
} }

@ -1,7 +1,59 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import $ from 'jquery';
class NavBar extends Component { class NavBar extends Component {
state = { } 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() { render() {
return ( return (
<nav className="navbar navbar-expand-lg navbar-light bg-light"> <nav className="navbar navbar-expand-lg navbar-light bg-light">
@ -15,18 +67,9 @@ class NavBar extends Component {
<li className="nav-item"> <li className="nav-item">
<Link className="navbar-brand" to="/home">首页</Link> <Link className="navbar-brand" to="/home">首页</Link>
</li> </li>
<li className="nav-item"> {this.render_calc()}
<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>
</ul> </ul>
{this.render_logout()}
</div> </div>
</div> </div>
</nav> </nav>

Loading…
Cancel
Save