From 548c59e715843ad572d8b9ab27b5d57e947f6f8c Mon Sep 17 00:00:00 2001 From: pan <1029559041@qq.com> Date: Wed, 27 May 2020 04:43:52 +0800 Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E6=A8=A1=E5=9D=97=E5=AF=B9?= =?UTF-8?q?=E6=8E=A5=E6=9C=8D=E5=8A=A1=E7=AB=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 28 ++++++++++------------ src/Main.tsx | 16 ++++++++----- src/account/Login.tsx | 44 +++++++++++++++++++++++++++++----- src/account/PropCookie.ts | 1 + src/account/Register.tsx | 6 ++--- src/entity.ts | 6 +++-- src/interface.ts | 5 ++-- src/result.ts | 50 +++++++++++++++++++++++++++++++++++++-- 8 files changed, 119 insertions(+), 37 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index c876f28..979ba54 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,9 +5,11 @@ import {Login} from './account/Login'; import {Cookies, withCookies} from 'react-cookie'; import {Main} from "./Main"; import {Register} from "./account/Register"; -import {user_cookie} from "./account/PropCookie"; +import {user_cookie, user_type_cookie} from "./account/PropCookie"; +import {UserType} from "./entity"; -class App extends React.Component<{ allCookies:any;cookies:Cookies }, { page?:JSX.Element}> { +class App extends React.Component<{ allCookies:any;cookies:Cookies }, + { page?:JSX.Element;}> { constructor(props: Readonly) { @@ -21,7 +23,7 @@ class App extends React.Component<{ allCookies:any;cookies:Cookies }, { page?:JS const { cookies } = this.props if((cookies.get(user_cookie)||"").length>0){ this.setState({ - page:
this.logout()} /> + page:
this.logout()} /> }) }else{ this.toLogin() @@ -43,24 +45,18 @@ class App extends React.Component<{ allCookies:any;cookies:Cookies }, { page?:JS }) } - //登录 - login(user:string,password:string){ - - console.debug("user_cookie="+user) - this.props.cookies.set(user_cookie,user) - - - this.setState({ - page:
this.logout()} user={user}/> - }) - } - /** * 跳转登录 */ toLogin(){ this.setState({ - page:this.toRegister()} login={(user:string,password:string)=>this.login(user,password)}/> + page:this.toRegister()} onLoginSuccess={(userId:string,userType:UserType)=> { + this.props.cookies.set(user_cookie,userId) + this.props.cookies.set(user_type_cookie,userType) + this.setState({ + page:
this.logout()} user={userId} userType={userType}/> + }) + }}/> }) } diff --git a/src/Main.tsx b/src/Main.tsx index a9b1190..3eb5800 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -31,7 +31,10 @@ enum DialogType { * 主菜单 */ export class Main extends React.Component< - { user:string,userType?:string,logout:Function}, + + { user:string; + userType?:string; + logout:Function;}, { //菜单 menu:Menu; @@ -44,8 +47,9 @@ export class Main extends React.Component< content:JSX.Element|null; open:boolean; }, - //用户身份 - userType?:string; + //用户身份 + userType?:string; + result:boolean } >{ @@ -53,6 +57,7 @@ export class Main extends React.Component< super(props); //默认菜单 this.state={ + result: true, //一级菜单 menu:Menu.index, //二级菜单 @@ -137,9 +142,6 @@ export class Main extends React.Component< } } - onUserUpdate(user:UserEdit){ - console.debug(user) - } render() { return ( @@ -178,6 +180,8 @@ export class Main extends React.Component< + 欢迎用户{this.props.user}登录本系统} open={this.state.result} titleId="login-tip" menuName="登录提示" onClose={()=>this.setState({result:false})}/> + {this.state.subMenu} ); diff --git a/src/account/Login.tsx b/src/account/Login.tsx index 4f93032..56fe8a1 100644 --- a/src/account/Login.tsx +++ b/src/account/Login.tsx @@ -2,6 +2,9 @@ import React from "react"; import {Button, Form} from 'react-bootstrap' import {Input} from "../ui/InputGroup"; import {LoginProps, LoginState} from "../entity"; +import {API, Method, request} from "../interface"; +import {LoginRes, LoginResMessage, LoginTransform} from "../result"; +import {MyDialog} from "../ui/MyDialog"; /** * 登陆表单组件 @@ -13,28 +16,57 @@ export class Login extends React.Component{ super(props) this.state={ - user:"", - password:"" + userId:"", + password:"", + result:null } } + //登录 + login(){ + + let that=this + request(API.account.login,Method.POST,{ + userId:this.state.userId, + password:this.state.password + },function () { + return new LoginTransform() + },function (res:LoginRes) { + let message + switch (res.customResult) { + case LoginResMessage.ok: + that.props.onLoginSuccess(res.userId,res.userType);break + case LoginResMessage.form_error:message="表单不合法，请联系管理员" + // eslint-disable-next-line no-fallthrough + case LoginResMessage.valid_error:message="账号或密码错误" + that.setState({ + result:

{message}

+ }) + break + } + }) + + } + render() { return (
- {this.setState({user:value})}} valid={{check:this.state.user.length>0}}/> + {this.setState({userId:value})}} valid={{check:this.state.userId.length>0}}/> {this.setState({password:value})}} valid={{check:this.state.password.length>0}}/> - +
+ + this.setState({result:null})}/>
); } diff --git a/src/account/PropCookie.ts b/src/account/PropCookie.ts index 87ade7b..8995245 100644 --- a/src/account/PropCookie.ts +++ b/src/account/PropCookie.ts @@ -3,3 +3,4 @@ * cookie信息，组件间传递 */ export const user_cookie="user_cookie" +export const user_type_cookie="user_type_cookie" diff --git a/src/account/Register.tsx b/src/account/Register.tsx index 75955e9..f2d19c2 100644 --- a/src/account/Register.tsx +++ b/src/account/Register.tsx @@ -4,8 +4,8 @@ import {Button, Form} from 'react-bootstrap' import {RegisterProps, RegisterState, UserType} from "../entity"; import {UploadImg} from "../ui/UploadImg"; import {Address} from "../ui/Address"; -import {API, JSONResponse, Method, request} from "../interface" -import {RegisterMessage, RegisterTransform} from "../result"; +import {API, Method, request} from "../interface" +import {RegisterMessage, RegisterRes, RegisterTransform} from "../result"; import {MyDialog} from "../ui/MyDialog"; /** @@ -59,7 +59,7 @@ export class Register extends React.Component{ },function () { return new RegisterTransform() - },function(res:JSONResponse){ + },function(res:RegisterRes){ let message switch (res.customResult) { case RegisterMessage.ok:message="注册成功"; diff --git a/src/entity.ts b/src/entity.ts index 7e3ca9c..8628a99 100644 --- a/src/entity.ts +++ b/src/entity.ts @@ -292,7 +292,7 @@ export interface LoginProps { //跳转注册 toRegister: Function; //登录 - login: Function; + onLoginSuccess: Function; } /** @@ -300,7 +300,9 @@ export interface LoginProps { */ export interface LoginState{ //管理员名 - user: string; + userId: string; //密码 password: string; + // + result:JSX.Element|null } diff --git a/src/interface.ts b/src/interface.ts index 67a885e..22341ce 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -8,7 +8,8 @@ const prefix={ //服务器接口地址 export const API={ account:{ - register:prefix.user+"/register" + register:prefix.user+"/register", + login:prefix.user+"/login" } } @@ -71,7 +72,7 @@ export function request,T extends TransformData formData.append(formParam,formParams[formParam]) } fetch(server+api,{ - method:Method.PUT, + method:method, body:formData }) .then( diff --git a/src/result.ts b/src/result.ts index 2b9142a..4347ea2 100644 --- a/src/result.ts +++ b/src/result.ts @@ -1,8 +1,12 @@ /** * 返回信息 */ -import {JSONResponse, TransformData} from "./interface"; +import {JSONResponse, Result, TransformData} from "./interface"; +import {UserType} from "./entity"; +/** + * 注册响应信息 + */ export enum RegisterMessage { //注册成功 ok = "ok", @@ -14,13 +18,55 @@ export enum RegisterMessage { form_parse_error = "form_parse_error" } -class RegisterRes implements JSONResponse { +/** + * 注册数据载体 + */ +export class RegisterRes implements JSONResponse { + customResult?: RegisterMessage; + result?: Result; } +/** + * 注册响应结果转换 + */ export class RegisterTransform extends TransformData { protected newObject(): RegisterRes { return new RegisterRes(); } +} + +/** + * 登陆结果 + */ +export enum LoginResMessage { + // 登陆成功 + ok="ok", + // 账号或密码错误 + valid_error="valid_error", + // 表单不合法，请联系管理员 + form_error="form_error" +} + +/** + * 登录响应结果转换 + */ +export class LoginRes implements JSONResponse{ + userId?:string + userType?:UserType + customResult?: LoginResMessage; + result?: Result; +} + +export class LoginTransform extends TransformData{ + protected newObject(): LoginRes { + return new LoginRes(); + } + protected transformBody(data: any) { + if(data.body!==null) { + this.target.userId = data.body.userId + this.target.userType = data.body.userType + } + } }