登录模块对接服务端

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<any>) {
@@ -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:<Main  user={cookies.get(user_cookie)} logout={()=>this.logout()} />
+        page:<Main userType={cookies.get(user_type_cookie)} user={cookies.get(user_cookie)} logout={()=>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:<Main logout={()=>this.logout()}  user={user}/>
-    })
-  }
-
   /**
    * 跳转登录
    */
   toLogin(){
     this.setState({
-      page:<Login toRegister={()=>this.toRegister()} login={(user:string,password:string)=>this.login(user,password)}/>
+      page:<Login toRegister={()=>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:<Main logout={()=>this.logout()}  user={userId} userType={userType}/>
+        })
+      }}/>
     })
   }
 

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<
                     </Nav>
                 </Navbar>
 
+                <MyDialog content={<h1 className="text-info text-center">欢迎用户{this.props.user}登录本系统</h1>} open={this.state.result} titleId="login-tip" menuName="登录提示" onClose={()=>this.setState({result:false})}/>
+
                 {this.state.subMenu}
             </div>
         );

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<LoginProps, LoginState>{
         super(props)
 
         this.state={
-            user:"",
+            userId:"",
-            password:""
+            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:<h3 className="text-danger text-center">{message}</h3>
+                    })
+                    break
+            }
+        })
+
+    }
+
     render() {
         return (
             <div className="d-flex align-items-center" style={{height:window.screen.availHeight+'px'}}>
                 <div className="container">
                     <Form>
-                        <Input name="user" type="text" desc="用户账号" value={this.state.user}
+                        <Input name="user" type="text" desc="用户账号" value={this.state.userId}
-                               onChange={(value: string)=>{this.setState({user:value})}} valid={{check:this.state.user.length>0}}/>
+                               onChange={(value: string)=>{this.setState({userId:value})}} valid={{check:this.state.userId.length>0}}/>
 
                         <Input name="password" type="password" desc="用户密码" value={this.state.password}
                                onChange={(value: string)=>{this.setState({password:value})}} valid={{check:this.state.password.length>0}}/>
 
-                        <Button variant="success" className="mt-3 col-2 mr-3"  disabled={!(this.state.user.length>0&&this.state.password.length>0)}
+                        <Button variant="success" className="mt-3 col-2 mr-3"  disabled={!(this.state.userId.length>0&&this.state.password.length>0)}
-                                onClick={()=>this.props.login(this.state.user,this.state.password)}>登录</Button>
+                                onClick={()=>this.login()}>登录</Button>
 
                         <Button variant="info" className="mt-3 col-2"  onClick={()=>this.props.toRegister()}>跳转到注册</Button>
                     </Form>
                 </div>
+
+                <MyDialog content={this.state.result} open={this.state.result!==null} titleId="login-tip" menuName="登录反馈" onClose={()=>this.setState({result:null})}/>
             </div>
         );
     }

src/account/PropCookie.ts

@@ -3,3 +3,4 @@
  * cookie信息，组件间传递
  */
 export const user_cookie="user_cookie"
+export const user_type_cookie="user_type_cookie"

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 {API, Method, request} from "../interface"
-import {RegisterMessage, RegisterTransform} from "../result";
+import {RegisterMessage, RegisterRes, RegisterTransform} from "../result";
 import {MyDialog} from "../ui/MyDialog";
 
 /**
@@ -59,7 +59,7 @@ export class Register extends React.Component<RegisterProps, RegisterState>{
 
        },function () {
             return new RegisterTransform()
-       },function(res:JSONResponse<RegisterMessage>){
+       },function(res:RegisterRes){
            let message
            switch (res.customResult) {
                case RegisterMessage.ok:message="注册成功";

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
 }

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<Q,E extends JSONResponse<Q>,T extends TransformData<Q,E>
         formData.append(formParam,formParams[formParam])
     }
     fetch(server+api,{
-        method:Method.PUT,
+        method:method,
         body:formData
     })
     .then(

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<RegisterMessage> {
+/**
+ * 注册数据载体
+ */
+export class RegisterRes implements JSONResponse<RegisterMessage> {
+    customResult?: RegisterMessage;
+    result?: Result;
 
 }
 
+/**
+ * 注册响应结果转换
+ */
 export class RegisterTransform extends TransformData<RegisterMessage, RegisterRes> {
     protected newObject(): RegisterRes {
         return new RegisterRes();
     }
+}
+
+/**
+ * 登陆结果
+ */
+export enum LoginResMessage {
+    //    登陆成功
+    ok="ok",
+    //    账号或密码错误
+    valid_error="valid_error",
+    //    表单不合法，请联系管理员
+    form_error="form_error"
+}
+
+/**
+ * 登录响应结果转换
+ */
+export class LoginRes implements JSONResponse<LoginResMessage>{
+    userId?:string
+    userType?:UserType
+    customResult?: LoginResMessage;
+    result?: Result;
+}
+
+export class LoginTransform extends TransformData<LoginResMessage,LoginRes>{
+    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
+        }
+    }
 }