From f28d8c283a4a39c819ac9395f7d480773b2df98f Mon Sep 17 00:00:00 2001 From: pan <1029559041@qq.com> Date: Wed, 27 May 2020 03:21:45 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=AF=B7=E6=B1=82=E5=93=8D?= =?UTF-8?q?=E5=BA=94=E5=B7=A5=E5=85=B7=E7=B1=BB=20=E6=B3=A8=E5=86=8C?= =?UTF-8?q?=E6=A8=A1=E5=9D=97=E5=AF=B9=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/account/Register.tsx | 71 +++++++++++++++++++++++++------ src/entity.ts | 12 ++++-- src/interface.ts | 92 ++++++++++++++++++++++++++++++++++++++++ src/my/MyInfo.tsx | 10 +++-- src/my/MyLeaveWord.tsx | 2 +- src/result.ts | 26 ++++++++++++ src/sub/SendHelp.tsx | 6 +-- src/sub/Volunteer.tsx | 2 +- src/ui/TestData.ts | 1 + src/ui/UploadImg.tsx | 47 +++++++++++--------- 10 files changed, 220 insertions(+), 49 deletions(-) create mode 100644 src/interface.ts create mode 100644 src/result.ts diff --git a/src/account/Register.tsx b/src/account/Register.tsx index 97a55de..75955e9 100644 --- a/src/account/Register.tsx +++ b/src/account/Register.tsx @@ -1,9 +1,12 @@ -import React, {RefObject} from "react"; +import React from "react"; import {Input} from "../ui/InputGroup"; 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 {MyDialog} from "../ui/MyDialog"; /** * 图片尺寸限制 @@ -13,23 +16,20 @@ const maxImageSize={ height:100 } -const headimgTip="请上传头像" /** * 注册 */ export class Register extends React.Component{ - //存放头像 - private fileImg: RefObject; - constructor(props: Readonly) { super(props) this.state={ + result: null, sex: "", - address: "", + address:"", + serviceAddress: "", age: 0, email: "", - headImg: headimgTip, info: "", mobile: 0, name: "", @@ -39,13 +39,46 @@ export class Register extends React.Component{ userType:"" } - this.fileImg=React.createRef() } //注册 register(){ - console.debug(this.state); - + let that=this + request(API.account.register,Method.PUT, { + userId:this.state.userId, + password:this.state.password, + name:this.state.name, + sex:this.state.sex, + imgFile:this.state.imgFile, + address:this.state.address, + serviceAddress:this.state.serviceAddress, + userType:this.state.userType, + mobile:String(this.state.mobile), + email:this.state.email, + info:this.state.info + + },function () { + return new RegisterTransform() + },function(res:JSONResponse){ + let message + switch (res.customResult) { + case RegisterMessage.ok:message="注册成功"; + that.setState({ + result:
+ }) + break + case RegisterMessage.fail:message="注册失败，请联系管理员"; + // eslint-disable-next-line no-fallthrough + case RegisterMessage.form_parse_error:message="表单不合法，请联系管理员" + // eslint-disable-next-line no-fallthrough + case RegisterMessage.user_repeat:message="用户id'"+that.state.userId+"'重复,请更换" + that.setState({ + result:

{message}

+ }) + break + } + + }) } //检查是否为空 @@ -65,8 +98,8 @@ export class Register extends React.Component{ //检查表单 check(){ - return this.isNotEmpty(this.state.userId,this.state.password,this.state.name,this.state.sex,this.state.address,this.state.userType,this.state.info) - &&this.state.headImg!==headimgTip&&this.checkPwd()&&this.checkMobile()&&this.checkEmail() + return this.isNotEmpty(this.state.userId,this.state.password,this.state.name,this.state.sex,this.state.serviceAddress,this.state.userType,this.state.info) + &&this.state.imgFile!=null&&this.checkPwd()&&this.checkMobile()&&this.checkEmail() } /** @@ -83,6 +116,8 @@ export class Register extends React.Component{ return /[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}/g.test(this.state.email) } + + render() { return (
@@ -104,9 +139,14 @@ export class Register extends React.Component{ this.setState({sex:value})} options={[,,]}/> - this.setState({headImg:value})} imageName={this.state.headImg}/> + + { + this.setState({imgFile:imgObj}) + }} tip={"请上传头像"} /> + + this.setState({address:value})}/> -
this.setState({address:value})}/> +
this.setState({serviceAddress:value})}/> this.setState({userType:value})} options={[,,]}/> @@ -115,6 +155,7 @@ export class Register extends React.Component{ this.setState({email:value})} valid={{check:this.checkEmail()}}/> + {/*TODO 简介长度要限制*/} this.setState({info:value})} valid={{check:this.isNotEmpty(this.state.info)}}/> @@ -122,6 +163,8 @@ export class Register extends React.Component{
+ + this.setState({result:null})}/> ); } diff --git a/src/entity.ts b/src/entity.ts index 21b6bad..7e3ca9c 100644 --- a/src/entity.ts +++ b/src/entity.ts @@ -110,8 +110,6 @@ export interface SendHelpState extends BaseHelp{ address:string; //推荐方式 recommendType:RecommendType; - //推荐目标 - recommendTarget?:Array; //好友列表 friendList:Array; //已选中好友列表 @@ -185,12 +183,14 @@ export interface User{ mobile:number; //用户邮箱 email:string; - //地点 + //住址 address:string; + //服务地点 + serviceAddress:string; //个人简介 info:string; //头像 - headImg:string; + headImg?:string; //性别 sex:string; //身份 @@ -271,6 +271,10 @@ export interface RegisterState extends User{ password: string; //确认密码 confirmPwd:string; + //用户头像 + imgFile?:any; + //注册结果 + result:JSX.Element|null; } /** diff --git a/src/interface.ts b/src/interface.ts new file mode 100644 index 0000000..67a885e --- /dev/null +++ b/src/interface.ts @@ -0,0 +1,92 @@ +//服务端地址 + +const server="http://localhost:8080" + +const prefix={ + user:"/api/user" +} +//服务器接口地址 +export const API={ + account:{ + register:prefix.user+"/register" + } +} + +export enum Method { + PUT="PUT", + POST="POST", + GET="GET" +} + +export enum Result { + OK, + FAIL +} + + +/** + * 响应数据 + */ +export abstract class JSONResponse { + result?:Result + customResult?:Q +} + +/** + * 数据类型转换 + */ +export abstract class TransformData> { + protected target: T + + constructor() { + this.target = this.newObject(); + } + + protected abstract newObject(): T + + public transform(data:any){ + this.transformResult(data) + this.transformBody(data) + return this.target + } + + protected transformBody(data:any){ + + } + + private transformResult(data:any){ + if("result" in data ) { + this.target.result = data.result + } + if("customResult" in data){ + this.target.customResult = data.customResult + } + } +} + +//发送请求 +export function request,T extends TransformData>(api:string,method:Method,formParams: {[propName:string]: string | Blob},transformFun:Function,callback:Function) { + let formData=new FormData() + for(let formParam in formParams){ + formData.append(formParam,formParams[formParam]) + } + fetch(server+api,{ + method:Method.PUT, + body:formData + }) + .then( + response=>{if(response.status===200){ + return response.json() + }else{ + throw new Error("遇到无法处理的错误，请联系管理员") + + }} + ) + .catch( + error =>console.error('Error:', error) + ) + .then((response:JSONResponse)=>{ + let transform:T=transformFun() + callback(transform.transform(response)) + }) +} diff --git a/src/my/MyInfo.tsx b/src/my/MyInfo.tsx index ce379c6..6d92916 100644 --- a/src/my/MyInfo.tsx +++ b/src/my/MyInfo.tsx @@ -34,8 +34,9 @@ export class MyInfo extends React.Component< mobile:0, //用户邮箱 email:"", - //地点 address:"", + //地点 + serviceAddress:"", //个人简介 info:"", //性别 @@ -61,7 +62,7 @@ export class MyInfo extends React.Component< age:Math.ceil(Math.random()*100)+1, mobile:1234567879, email:"admin@qq.com", - address:"上海高新区", + serviceAddress:"上海高新区", info:"个人简介", userType:UserType.help.toString() }) @@ -137,6 +138,7 @@ export class MyInfo extends React.Component< + {/*TODO 表单校验*/} {this.state.userId} @@ -171,8 +173,8 @@ export class MyInfo extends React.Component< {this.state.contentEditable? - this.setState({address:e.target.value})}/> - :this.state.address} + this.setState({serviceAddress:e.target.value})}/> + :this.state.serviceAddress} diff --git a/src/my/MyLeaveWord.tsx b/src/my/MyLeaveWord.tsx index 560ec20..1c14045 100644 --- a/src/my/MyLeaveWord.tsx +++ b/src/my/MyLeaveWord.tsx @@ -178,6 +178,6 @@ export class MyLeaveWord extends React.Component<{ user:string }, open={this.state.openActivity} titleId="view-activity" menuName="活动详情" onClose={()=>this.setState({activity:undefined,openActivity:false})}/>:null} - ); + ) } } diff --git a/src/result.ts b/src/result.ts new file mode 100644 index 0000000..2b9142a --- /dev/null +++ b/src/result.ts @@ -0,0 +1,26 @@ +/** + * 返回信息 + */ +import {JSONResponse, TransformData} from "./interface"; + +export enum RegisterMessage { + //注册成功 + ok = "ok", + //系统异常，注册失败 + fail = "fail", + //用户id重复 + user_repeat = "user_repeat", + //表单解析错误 + form_parse_error = "form_parse_error" +} + +class RegisterRes implements JSONResponse { + +} + +export class RegisterTransform extends TransformData { + protected newObject(): RegisterRes { + return new RegisterRes(); + } + +} diff --git a/src/sub/SendHelp.tsx b/src/sub/SendHelp.tsx index fadfcdf..53e4401 100644 --- a/src/sub/SendHelp.tsx +++ b/src/sub/SendHelp.tsx @@ -30,8 +30,6 @@ const recommendType=[RecommendType.no, RecommendType.choose,RecommendType.auto] * 我的求助 */ export class SendHelp extends React.Component<{ undefined?:undefined }, SendHelpState>{ - //存放活动背景图 - private fileImg: RefObject; //当前选中的好友索引 private friendIndex:RefObject; @@ -53,8 +51,6 @@ export class SendHelp extends React.Component<{ undefined?:undefined }, SendHelp chooseFriendList: {} } - this.fileImg=React.createRef() - this.friendIndex=React.createRef() } @@ -120,7 +116,7 @@ export class SendHelp extends React.Component<{ undefined?:undefined }, SendHelp }} dateFormat="YYYY-MM-DD" timeFormat="HH:mm:ss"/> - this.setState({activityImg:value})} imageName={this.state.activityImg}/> + this.setState({activityImg:value})} /> {/*服务地点*/}
this.setState({address:value})}/> diff --git a/src/sub/Volunteer.tsx b/src/sub/Volunteer.tsx index cc1ae82..6c79c92 100644 --- a/src/sub/Volunteer.tsx +++ b/src/sub/Volunteer.tsx @@ -99,7 +99,7 @@ export class Volunteer extends React.Component<{ undefined?:undefined }, {
- {[[volunteer.name,volunteer.sex,volunteer.age],[volunteer.mobile,volunteer.email,volunteer.address]].map((tr,index)=> + {[[volunteer.name,volunteer.sex,volunteer.age],[volunteer.mobile,volunteer.email,volunteer.serviceAddress]].map((tr, index)=> {tr.map((td,index)=>)} diff --git a/src/ui/TestData.ts b/src/ui/TestData.ts index 3dd92eb..cb5d9c2 100644 --- a/src/ui/TestData.ts +++ b/src/ui/TestData.ts @@ -14,6 +14,7 @@ export const userObj={ mobile:1234567879, email:"admin@qq.com", address:"上海高新区", + serviceAddress:"上海", info:"个人简介", //性别 sex:"男", diff --git a/src/ui/UploadImg.tsx b/src/ui/UploadImg.tsx index 75d728c..54467a2 100644 --- a/src/ui/UploadImg.tsx +++ b/src/ui/UploadImg.tsx @@ -1,4 +1,4 @@ -import React, {RefObject} from "react"; +import React from "react"; import {Form, Image} from "react-bootstrap"; import path from "path"; @@ -7,8 +7,8 @@ import path from "path"; */ export class UploadImg extends React.Component< { - //文件对象 - fileImg:RefObject; + //tip + tip:string, //图片尺寸限制 maxImageSize:{ width:number, @@ -16,17 +16,18 @@ export class UploadImg extends React.Component< }; //上传事件 onChange:Function; - //图片文件名 - imageName:string; -}, any>{ +}, { + //imgObj + imgObj?:any; + //图片文件名 + imageName?:string; +}>{ - /** - * 获取图片url - */ - getUrl(){ - if(this.props.fileImg.current!==null&&this.props.fileImg.current.files.length>0) { - return URL.createObjectURL(this.props.fileImg.current.files[0]) - } + + constructor(props: Readonly<{ tip: string; maxImageSize: { width: number; height: number }; onChange: Function }>) { + super(props); + + this.state={} } render() { @@ -35,11 +36,11 @@ export class UploadImg extends React.Component< {/* 预览背景图 */} - { - if(s.target instanceof HTMLImageElement){ + { + if (s.target instanceof HTMLImageElement) { //限制图片显示大小 - s.target.width=s.target.width>this.props.maxImageSize.width?this.props.maxImageSize.width:s.target.width - s.target.height=s.target.height>this.props.maxImageSize.height?this.props.maxImageSize.height:s.target.height + s.target.width = s.target.width > this.props.maxImageSize.width ? this.props.maxImageSize.width : s.target.width + s.target.height = s.target.height > this.props.maxImageSize.height ? this.props.maxImageSize.height : s.target.height s.target.classList.remove('d-none') } } @@ -48,11 +49,17 @@ export class UploadImg extends React.Component< {/*上传背景图*/}
this.props.onChange(e.target.value)} + onChange={(e:any)=>{ + const file=e.target.files[0] + this.setState({ + imgObj:URL.createObjectURL(file), + imageName:e.target.value + }) + this.props.onChange(file) + }} />
{td}