表单提交

This commit is contained in:
2020-02-06 00:50:34 +08:00
committed by ChenXuzheng
parent 5d90ba0b3d
commit d7ecb90af3
23 changed files with 1323 additions and 0 deletions
+23
View File
@@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
+13
View File
@@ -0,0 +1,13 @@
{
"name": "my-app",
"version": "0.1.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"react-confirm-alert": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/react-confirm-alert/-/react-confirm-alert-2.4.1.tgz",
"integrity": "sha512-Sc2N1paCTCS5HWEAhik2IQa9/vwSQLAoCT5uccjPH/VyTaBAkRPZPx9sUqFTy3q5VnnGwCPsoz7fnw54x79d/w=="
}
}
}
+38
View File
@@ -0,0 +1,38 @@
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"antd": "^3.26.7",
"axios": "^0.19.2",
"react": "^16.12.0",
"react-confirm-alert": "^2.4.1",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

+43
View File
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

+25
View File
@@ -0,0 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
+2
View File
@@ -0,0 +1,2 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
+30
View File
@@ -0,0 +1,30 @@
import React from "react";
import { HashRouter, Route, Switch, Link } from "react-router-dom";
import LearnMore from "./components/LearnMore";
import History from "./components/History";
import Entry from "./Entry.js";
import Main from "./components/Main";
import Login from "./components/Login";
function App() {
return (
<div className="App">
<header className="App-header">
<div className="App">
<HashRouter>
<Switch>
<Route exact path='/history' component={History} />
<Route exact path='/ticket' component={Entry} />
<Route exact path='/' component={Main} />
<Route exact path='/learnMore' component={LearnMore} />
<Route exact path='/login' component={Login} />
</Switch>
</HashRouter>
</div>
</header>
</div>
);
}
export default App;
+28
View File
@@ -0,0 +1,28 @@
import React from 'react';
import Sheet from './components/Sheet';
import { Upload, Button, Icon, BackTop } from 'antd';
function Entry() {
return (
<div>
<h2 class="ant-typography" style={{ textAlign: 'center' }}>
浙江大学学生E志者协会2020年纳新报名表
</h2>
<center>
<Upload>
<Button style={{ marginBlockEnd: 20 }}>
<Icon type="upload" />
上传照片
</Button>
</Upload>
</center>
<Sheet />
<BackTop visibilityHeight={200} />
<p style={{ textAlign: 'center' }}>
浙江大学学生E志者协会©2020 Created by EVATech
</p>
</ div>
)
}
export default Entry;
+93
View File
@@ -0,0 +1,93 @@
import React from 'react';
import { Button } from "antd";
import { HashRouter, Route, Switch, Link } from "react-router-dom";
class History extends React.Component {
render() {
return (
<body >
<div>
<div class="bg1">
<h2>
协会历史
</h2>
<div class="para" label-module="para">浙江大学学生E志者协会的前身是1984年陈强先生创办的电器工程学院电气维修小组。</div>
<div class="para" label-module="para">步入21世纪,为适应新时期学校教育体制的改革和管理模式的创新,在电气工程学院团委的大力支持和推动下,电器维修小组终于在2008年9月正式成为校级学生社团,面向全校吸纳志愿维修的志愿者,在全校范围内搭建以志愿维修为主体的服务平台,做志愿维修的践行者,做安全用电和节约用电的实践者和宣传者,做电力热点问题及电器电脑新尖问题的引领者。</div>
<div class="para" label-module="para">在此后,协会抓紧机遇,在做好本职工作的同时,积极开拓其他公益志愿活动,服务广大师生与社会群众。多年来,协会还在组织架构、运行管理机制、文化建设、对外宣传等方面展开了积极的探索,开展了多项校级精品活动,提高了协会在校园文化中的知名度和影响力。</div>
<div class="para" label-module="para">近五年来,浙江大学学生E志者协会凭借出色的表现,屡次获得“浙江大学校级优秀社团”、“校级十佳社团”、“青年志愿服务优秀集体”等荣誉称号。2015年4月,浙江大学E志者协会荣升为校四星级社团。2016年6月,浙江大学学生E志者协会获评“浙江大学学生示范性社团”,该奖项是浙江大学社团最高荣誉。</div>
<div class="para" label-module="para">浙江大学学生E志者协会是浙江大学位数不多的拥有自己办公室的社团之一,为社团活动提供了良好载体,办公室位于紫金港校区东三教学楼200室,供社团日常值班维修和社团活动使用。</div>
</div>
<div class="bg2">
<h2>
活动回顾
</h2>
<div class="para" label-module="para"><b>校园维修&amp;社区维修</b></div>
<div class="para" label-module="para">协会日常值班维修,每月一次的学园义务维修和不定期开展的社区义务维修为同学们和社区居民的生活带来了极大的便利。</div>
<div class="para" label-module="para"><b>电脑电器维修知识课堂(社联精品课程)</b></div>
<div class="para" label-module="para">协会每个长学期都会开办电脑电器维修知识精品课程,旨在传授对于电脑电器维修感兴趣的同学相关的知识并交流经验,方便同学们自主解决生活中遇到的简单的电脑电器故障。2015年秋冬学期精品课程荣获浙江大学学生社团精品课程评比一等奖。</div>
<div class="para" label-module="para"><b>浙江大学学生E志者协会30周年庆典暨电气工程学院公益论坛</b></div>
<div class="para" label-module="para">协会向全校师生展示30年来E志者们在公益实践中取得的成果,同时也邀请到了校内大型公益组织的代表们分享他们的公益之路。活动一经举办,即在全校范围内掀起了热心公益实践</div>
<div class="para" label-module="para">的巨大浪潮,激发了广大青年学子的投身公益事业的热情,点亮了大学生心中公益实践的明灯。</div>
</div>
<div class="bg">
<h2>
协会日常
</h2>
<div class="para" label-module="pare">
浙江大学E志者协会,其宗旨为“以服务社会为己任,搭建电器维修爱好者交流平台,做安全用电和节约用电的实践者和宣传者,研究电力电气热点问题,为建设社会主义和谐社会贡献力量。”</div>
<div class="para" label-module="pare">
在过去的三十年里,协会一如既往的做好自己的最本职工作——<b>免费电器维修</b>,服务于广大的师生;并在各方面展开了积极的探索,开展了多项校级精品活动。
协会活动主要分为以下三大部分:
<pre>
</pre>
<h3 class="titleh3">
一、公益活动
</h3>
<pre>
</pre>
<div class="para" ><b>日常值班</b>:协会在日常服务中,为满足校内师生日常维修需求、提高志愿维修质量与效率,特设立了值班制度,每天固定值班时间超过6小时,为同学们提供免费维修电脑电器的服务。在刚刚过去的2014-2015学年,协会在校内共进行电脑清灰247次,维修电脑硬件软件问题共计794次,维修大小电器共计145件,电脑维修成功率达到90.7%,电器维修成功率达到81.3%。</div>
<div class="para">
<b>线上交流:</b>近三年,协会始终坚持通过各类平台发布指导购买笔记本的帖子,为广大新生以及全校师生提供购机基础知识普及以及免费的购机咨询。协会官方微信平台每周推送有关电脑电器及前沿科技的推文,在及时为全校师生解决电脑电器疑惑的过程中承担起普及科学技术知识的任务。
</div>
<div class="para">
<b>社会实践:</b>在80年代,我们就已经开展社区维修服务,也深入少年宫、社区夏令营等场所向青少年讲解相关知识。此外,我们还积极参加诸如长三角高校公益论坛等社会性的公益活动,并积极与在杭其他高校拓展合作关系,曾作为代表受邀奔赴浙江工商大学参加电脑维修交流峰会,并发表重要讲话。
</div>
<pre>
</pre>
<h3 class="titleh3">
二、社团活动</h3>
<pre>
</pre>
<div class="para">浙江大学学生E志者协会努力追求发展成一家展现大学生风貌,发扬电气特色的优秀公益社团,开展如电路板焊接、全息投影等内容详实、寓教于乐的实践类活动。</div>
<div class="para">协会每年推陈出新,举办了形式内容各异、特点鲜明的精品活动,如“电路的特技”,鼓励同学自行设计新奇的电路并进行自主焊接;“功放传心声”DIY大赛让同学现场焊接可传声的电路并传达自己的心声;“地球一小时”:向全校师生传播正确用电、合理节电小常识;“全息投影DIY烙铁画”:利用自制全息投影技术让同学体验用烙铁作画的乐趣……这一系列形式多样、独具协会特色的精品活动,吸引了一大批同学的参与,获得了同学们的一致好评。</div>
<pre>
</pre>
<h3 class="titleh3">三:创新创意</h3>
<pre>
</pre>
<div class="para">在日常维修中,我们基于网络、创新方法,通过理论和实践的结合提升自己的能力,如通过自主实践编写命令提示符批处理文件解决一些系统问题、通过沙箱模拟研究校园流行病毒攻击原理并找出源头。同时关注切合当代大学生实际的前沿技术,曾撰写《windows10测评报告》、《office2016评测》、《2016年暑假购机指南》文件,将所学前沿科技知识应用于日常维修实践。</div>
<div class="para">同时每年,协会均会组织中高年级成员组队参加智能车竞赛,与智能车基地保持联系,在技术难题上交换经验。协会还举办废旧电子元件(电器)创意DIY大赛,面向全校同学征集创意,充分发挥动手实践能力,在校内推广电器创意创新的理念。协会还曾受邀参加中国大学生创意节(杭州赛区)活动,荣获“创意装饰奖”。</div>
</div>
</div>
<a href='./'>
<Button type="primary" size={"large"}>to home</Button>
</a>
</div>
</body>
)
}
}
export default History
+42
View File
@@ -0,0 +1,42 @@
import React from "react";
class LearnMore extends React.Component {
render() {
return (
<body>
<div class="para-title level-2" label-module="para-title">
<h2 class="title-text"><span class="title-prefix">浙江大学学生E志者协会</span>协会规划</h2>
</div>
<div class="para" label-module="para">三十年间,E志者协会作为一个公益组织,着眼实际,立足于电脑电器维修;开拓创新,积极学习应用前沿知识;扎根实践,广泛开展校内外志愿服务活动。</div>
<div class="para" label-module="para">三十年间,E志者协会的公益之路渐行渐宽,从校内到校外,从服务师生到服务社会群众,从一个电器维修小组发展到如今如此规模的志愿者团队。</div>
<div class="para" label-module="para">三十年间,E志者协会不忘初心,在E志者三十年志愿服务精神的传承中开拓进取,汲取课堂及课外前沿科学技术之精华,以服务社会为己任,传播先进公益文化为己责,致力于创建更为优秀的、能展现浙江大学青年学生风貌的公益服务团体。</div>
<div class="para" label-module="para">我们在2015年提出了引领社团发展的E愿计划,核心是提高服务质量、开展合作交流和传播公益理念。在三十年发展的基础上,我们除了打算完善已有服务制度外,还规划着在紧密跟进时代步伐、 结合学校社团建设制度的情况下,推进与其他组织的合作交流,结合新技术大力建设协会网络平台以及专属APP,借助这些通道以及精品课程,完成我们协会从授人以鱼到授人以渔的关键过渡,同时也通过我们的身体力行以及新媒体的影响力传播公益理念,让公益理念的种子在每个人的心里萌发。</div><div class="anchor-list ">
<a name="8" class="lemma-anchor para-title" ></a>
<a name="sub19873141_8" class="lemma-anchor " ></a>
<a name="协会荣誉" class="lemma-anchor " ></a>
</div><div class="para-title level-2" label-module="para-title">
<h2 class="title-text"><span class="title-prefix">浙江大学学生E志者协会</span>协会荣誉</h2>
</div>
<div class="para" label-module="para">2009年浙江大学学生E志者协会获“浙江省优秀志愿者服务队伍”荣誉称号</div>
<div class="para" label-module="para">2009年浙江大学学生E志者协会获“浙江大学十大优秀志愿者服务集体”荣誉称号</div>
<div class="para" label-module="para">2009年浙江大学学生E志者协会成为“浙江大学素质拓展基地候补基地”</div>
<div class="para" label-module="para">2009年浙江大学学生E志者协会荣获“2009年度浙江大学优秀青年志愿者服务项目”荣誉称号</div>
<div class="para" label-module="para">2010年浙江大学学生E志者协会被评为“2009-2010年度浙江大学校级优秀社团”</div>
<div class="para" label-module="para">2010年末浙江大学学生E志者协会由一星级社团跃升为三星级社团</div>
<div class="para" label-module="para">2010——2012年连续三年浙江大学学生E志者协会获评“浙江大学学生十佳社团”</div>
<div class="para" label-module="para">2014年浙江大学学生E志者协会荣升为浙江大学四星级社团</div>
<div class="para" label-module="para">2015年浙江大学学生E志者协会入选浙江大学最美公益服务集体</div>
<div class="para" label-module="para">2015年浙江大学学生E志者协会获社团文化节精品活动二等奖</div>
<div class="para" label-module="para">2015年浙江大学学生E志者协会获社团精品课程一等奖</div>
<div class="para" label-module="para">2015年浙江大学学生E志者协会“小手共大手,点亮求知之光”暑期社会实践入选为校级重点社会实践项目</div>
<div class="para" label-module="para">2016年浙江大学学生E志者协会荣获“2015——2016年度浙江大学学生示范性社团”(浙江大学社团最高荣誉),指导老师赵梓衫老师获“浙江大学十佳社团指导老师”,副会长田畅获“浙江大学优秀学生社团干部”</div>
<div class="para" label-module="para">2016年浙江大学电路板焊接大赛中协会成员范俊崇、童丹妮同学获低年级组一等奖(第一名),汤继祥、田畅同学获高年级组一等奖(第一名)</div>
<div class="para" label-module="para">2016年浙江大学第十一届“中控杯”机器人竞赛机器人竞赛购物挑战赛项目中协会电器部副部长王溯恺获一等奖</div>
<div class="para" label-module="para">2016年美国大学生数学建模竞赛(MCM/ICM)中协会成员贺自怡等同学获M奖</div>
<div class="para" label-module="para">另每年协会成员都有多人进入竺可桢学院工高班和爱迪生班等荣誉班级就读</div>
</body>
)
}
}
export default LearnMore;
+45
View File
@@ -0,0 +1,45 @@
import React, { useEffect, useState } from "react";
import axios from "axios";
function Login() {
const [items, setItems] = useState([]);
useEffect(() => {
const fetchItems = async () => {
let fetchItems = [];
for (let i = 1; i <= 7; i++) {
let result = await axios(
'api/info/' + i,
{
method: 'GET',
}
);
console.log("2312");
fetchItems.push({
id: result.id
})
}
setItems(fetchItems);
}
})
return (
<p>
{
items.map((item, i) => {
return (
<div>
<tr id={i}>
<td>
{item.id}
</td>
</tr>
</div>
);
})
}
</p>
)
}
export default Login;
+176
View File
@@ -0,0 +1,176 @@
import React from 'react';
import { Button } from "antd";
import background from "./background.jpg";
import { Route, Switch, Link } from "react-router-dom";
class Main extends React.Component {
render() {
return (
<html>
<body >
<div class='background'>
<a href="https://baike.baidu.com/item/%E6%B5%99%E6%B1%9F%E5%A4%A7%E5%AD%A6%E5%AD%A6%E7%94%9FE%E5%BF%97%E8%80%85%E5%8D%8F%E4%BC%9A">
<h1 class='header'> 浙江大学学生E志者协会 </h1>
</a>
<Link to='/login'>
<div class='header_r_t'>
登陆
</div>
</Link>
<div ><img class='picture1' src='./components/background.jpg'></img>
<dl class="basicInfo-block basicInfo-left">
<dt class="basicInfo-item name">中文名</dt>
<dd class="basicInfo-item value">
浙江大学学生E志者协会
</dd>
<dt class="basicInfo-item name">外文名</dt>
<dd class="basicInfo-item value">
Electrical Volunteer Association of ZJU
</dd>
<dt class="basicInfo-item name">成立年份</dt>
<dd class="basicInfo-item value">
1984年
</dd>
</dl><dl class="basicInfo-block basicInfo-right">
<dt class="basicInfo-item name">前&nbsp;&nbsp;&nbsp;&nbsp;身</dt>
<dd class="basicInfo-item value">
电气工程学院电器维修小组
</dd>
<dt class="basicInfo-item name">社团创始人</dt>
<dd class="basicInfo-item value">
陈强
</dd>
<dt class="basicInfo-item name">社团星级</dt>
<dd class="basicInfo-item value">
五星级
</dd>
</dl></div>
<div class='Button1' >
<Link to='/ticket'>
<Button type="dashed" size={"large"}>
<div class="tmp1">加入我们
</div>
</Button>
</Link>
</div>
<pre>
</pre>
<div class='row-one'>
<div class='container'>
<div class='row-one-cont'>
<ul>
<li>
<p class="arc-tit">
<b>财务外联部</b> </p>
<p class="are-cont">
财外部的主要职能是负责协会的财务工作,包括协会年度财务预算和结算的制定,规范协会各项财务手续,做好各类收支记录,妥善管理各种票据以及为协会争取更多的资金支持等。
</p>
</li>
<li>
<p class="arc-tit">
<b>文化宣传部</b></p>
<p class="are-cont">
文化宣传部的主要职能是负责协会的对外宣传工作,包括协会形象的塑造和宣传,制定和执行每次活动前的宣传方案,活动现场的摄影和记录,活动后新闻稿的撰写和投出等。
</p>
</li>
<li>
<p class="arc-tit">
<b>人力资源部</b> </p>
<p class="are-cont">
人力资源部的主要职能是负责协会活动的现场执行以及普通会员的管理,包括纳新方案的制定和执行,活动现场的安排和布置,普通会员志愿服务小时数的统计等,同时负责管理人员调动。
</p>
</li>
<li>
<p class="arc-tit">
<b>电脑部</b> </p>
<p class="are-cont">
电脑部的主要职能是负责协会日常电脑维修服务,是协会的核心部门,另外,为了加强会员维修水平,电脑部会开展若干次培训活动,面向全体会员旨在提高大家的维修水平
</p>
</li>
<li>
<p class="arc-tit">
<b>电器部</b></p>
<p class="are-cont">
电器部的主要职能是负责协会的电器维修以及维修技术的沉淀和积累,技术资料的编撰等,也会定期向会员科普一些电器的保养维修常识以及工具的使用方法与基础的模电知识
</p>
</li>
</ul>
</div>
</div>
</div>
<div class='footer' >
<div class='Button2'>
<div>
<div><p class="ft-info ">
<span >
地址:浙江大学东三教学楼204
</span>
</p>
</div>
<p class="ft-info1 ">
<span >
联系电话:12345678900
</span>
</p>
<p class="ft-info2 ">
<span >
QQ:1796452364
</span>
</p>
<p class="ft-info3 ">
<span >
公众号:浙江大学学生E志者协会
</span>
</p>
</div>
<Link to='/history'>
<Button type="primary" size={"large"}>
<div >历史展望
</div>
</Button>
</Link>
</div>
<div class='Button3'>
<Link to='/learnMore' >
<Button type="primary" size={"large"}>
<div >了解更多
</div>
</Button>
</Link>
</div>
<p class='ft-bot'>
Copyright © 2020 浙江大学学生E志者协会 版权所有
</p>
</div>
</div>
</body>
</html>
)
}
}
export default Main;
+377
View File
@@ -0,0 +1,377 @@
import React from 'react'
import axios from 'axios'
import { Button, Form, Input,Icon, Radio, message } from 'antd'
import 'antd/dist/antd.css'
import { confirmAlert } from 'react-confirm-alert'
import 'react-confirm-alert/src/react-confirm-alert.css';
import qs from 'qs';
class NewForm extends React.Component {
componentDidMount() {
this.loadLocalStorage();
}
loadLocalStorage = () => {
const values = JSON.parse(localStorage.getItem('formCache') || '{}');
this.props.form.setFieldsValue(values);
}
saveLocalStorage = () => {
const values = this.props.form.getFieldsValue();
localStorage.setItem('formCache', JSON.stringify(values));
}
handleSubmit = e => {
e.preventDefault();
const validateFieldsAndScroll = this.props.form.validateFieldsAndScroll
confirmAlert({
title: '提交报名表',
message: '您填写的表格已经保存在浏览器中,以后可以修改后覆盖提交。点击 OK 进行提交。',
buttons: [
{
label: 'Yes',
onClick: () => {
validateFieldsAndScroll(
(err, values) => {
if (err) {
message.error('填写不正确,请按照提示修改');
}
else {
console.log(values);
let addForm = async () => {
let result = await axios(
'api/submit',
{
headers:{'Content-Type': 'application/x-www-form-urlencoded'},
method: "POST",
data: qs.stringify({"dto":JSON.stringify(values)})
}
)
if (result.data.success) {
message.success("提交成功!后续的面试时间会以短信形式通知,期待你的加入!")
}
else {
message.error("提交失败!可能是网络问题。")
}
}
addForm();
}
}
)
}
},
{
label: 'No',
onClick: () => {}
}
]
});
}
render() {
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 8 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 },
},
};
const tailFormItemLayout = {
wrapperCol: {
xs: {
span: 24,
offset: 0,
},
sm: {
span: 16,
offset: 8,
},
},
};
const { getFieldDecorator } = this.props.form;
return (
<Form {...formItemLayout} onSubmit={this.handleSubmit}>
<Form.Item label="姓名">
{
getFieldDecorator('name', {
rules: [
{
required: true,
message: "请在此处填入你的姓名"
}
]
})(
<Input />
)
}
</Form.Item>
<Form.Item label="学号" >
{getFieldDecorator('id', {
rules: [
{
required: true,
message: '请在此处填入你的学号',
},
{ pattern: /^[0-9]+$/, message: "混进去了数字以外的东西呀" }
],
})(<Input />)}
</Form.Item>
<Form.Item label="性别">
{
getFieldDecorator('sex', {
rules: [
{
required: true,
message: '请选择你的性别'
}
]
}
)
(
<Radio.Group>
<Radio.Button value={0} ><div><Icon type="man" />男</div></Radio.Button>
<Radio.Button value={1} ><div><Icon type="woman" />女</div></Radio.Button>
</Radio.Group>
)
}
</Form.Item>
<Form.Item label="年级">
{
getFieldDecorator('grade', {
rules: [
{
required: true,
message: '请选择你的年级'
}
]
}
)
(
<Radio.Group >
<Radio.Button value={1}>大一</Radio.Button>
<Radio.Button value={2}>大二</Radio.Button>
<Radio.Button value={3}>大三</Radio.Button>
<Radio.Button value={4}>大四</Radio.Button>
</Radio.Group>
)
}
</Form.Item>
<Form.Item label="专业/大类">
{
getFieldDecorator('major', {
rules: [
{
required: true,
message: '请在这里填入你的专业'
}
]
}
)(
<Input placeholder="例如:工科试验班(电气)" />
)
}
</Form.Item>
<Form.Item label="E-mail">
{getFieldDecorator('email', {
rules: [
{
required: true,
message: '请在此处填入你的E-mail'
}, { type: 'email', message: "邮箱格式不正确" }
],
})(<Input />)}
</Form.Item>
<Form.Item label="联系电话">
{getFieldDecorator('phone', {
rules: [
{
required: true,
message: '请在此处填入你的电话号码',
},
{ pattern: /^1[345678]\d{9}$/, message: "手机号不太对呀" }
],
})(<Input />)}
</Form.Item>
<Form.Item label="第一志愿(两志愿请不要重复选择)">
{
getFieldDecorator('firstWish', {rules: [
{
required: true,
message: '请选择第一志愿'
}
]})(
<Radio.Group name="firstWish" size="medium">
<Radio.Button value={1}>电脑部</Radio.Button>
<Radio.Button value={2}>电器部</Radio.Button>
<Radio.Button value={3}>文宣部</Radio.Button>
<Radio.Button value={4}>人资部</Radio.Button>
<Radio.Button value={5}>财务部</Radio.Button>
</Radio.Group>
)
}
</Form.Item>
<Form.Item label="第二志愿(两志愿请不要重复选择)">
{
getFieldDecorator('secondWish', {rules: [
{
required: true,
message: '请选择第二志愿'
}
]})(
<Radio.Group name="secondWish" size="medium">
<Radio.Button value={1}>电脑部</Radio.Button>
<Radio.Button value={2}>电器部</Radio.Button>
<Radio.Button value={3}>文宣部</Radio.Button>
<Radio.Button value={4}>人资部</Radio.Button>
<Radio.Button value={5}>财务部</Radio.Button>
</Radio.Group>
)
}
</Form.Item>
<Form.Item label="是否服从调剂">
{
getFieldDecorator('adjustment', {
rules: [
{
required: true,
message: '请选择是否服从调剂'
}
]
}
)(
<Radio.Group >
<Radio value={true}>是</Radio>
<Radio value={false}>否</Radio>
</Radio.Group>
)
}
</Form.Item>
<Form.Item label="简述你选择第一志愿的原因">
{
getFieldDecorator('firstReason', {
rules: [
{
required: true,
message: '请填入你选择志愿的原因'
}
]
}
)(
<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />
)
}
</Form.Item>
<Form.Item label="简述你选择第二志愿的原因">
{
getFieldDecorator('secondReason', {
rules: [
{
required: true,
message: '请填入你选择志愿的原因'
}
]
}
)
(
<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />
)
}
</Form.Item>
<Form.Item label="简单介绍一下你的特长">
{
getFieldDecorator('question1', {
rules: [
{
required: true,
message: '请简单介绍一下你的特长'
}
]
}
)
(
<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />
)
}
</Form.Item>
<Form.Item label="你希望未来能在E志者协会得到什么?又能为E志付出什么?">
{
getFieldDecorator('question2', {
rules: [
{
required: true,
message: '请填入问题的回答'
}
]
}
)
(
<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />
)
}
</Form.Item>
<Form.Item style={{display:"none"}}>
{
getFieldDecorator('time1', {initialValue:0,rules: [{required:true}]})
}
</Form.Item>
<Form.Item style={{display:"none"}}>
{
getFieldDecorator('time2', {initialValue:0,rules: [{required:true}]})
}
</Form.Item>
<Form.Item style={{display:"none"}}>
{
getFieldDecorator('time3', {initialValue:0,rules: [{required:true}]})
}
</Form.Item>
<Form.Item style={{display:"none"}}>
{
getFieldDecorator('time4', {initialValue:0,rules: [{required:true}]})
}
</Form.Item>
<Form.Item style={{display:"none"}}>
{
getFieldDecorator('time5', {initialValue:0,rules: [{required:true}]})
}
</Form.Item>
<Form.Item style={{display:"none"}}>
{
getFieldDecorator('time6', {initialValue:0,rules: [{required:true}]})
}
</Form.Item>
<Form.Item style={{display:"none"}}>
{
getFieldDecorator('time7', {initialValue:0,rules: [{required:true}]})
}
</Form.Item>
<Form.Item {...tailFormItemLayout}>
<Button icon="copy" style={{ textAlign: 'center' }} type="primary" htmlType="submit">提交</Button>
<Button icon="save" style={{ margin: "20px", textAlign: 'center' }} onClick={() => { this.saveLocalStorage(); message.success('草稿已保存') }}>保存草稿</Button>
</Form.Item>
</Form>
)
}
}
const Sheet = Form.create({})(NewForm);
export default Sheet;
Binary file not shown.

After

Width:  |  Height:  |  Size: 198 KiB

+235
View File
@@ -0,0 +1,235 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
.titleh3 {
font-size: 20px;
font-weight: 400;
margin: 0;
}
.para{
font-size: 14px;
word-wrap: break-word;
color: #333;
margin-bottom: 15px;
margin-left: 10px;
text-indent: 2em;
line-height: 24px;
zoom: 1;
width: 1500px;
}
.tmp1{
font-size: 30px;
background-image: -webkit-linear-gradient(left,blue,rgb(235, 168, 14) 20%,rgb(85, 171, 182) 30%, rgb(207, 55, 149) 40%, rgb(18, 224, 97) 50%,rgb(255, 204, 204) 60%,rgb(218, 12, 156) 70%,#66CCCC 80%,rgb(230, 54, 30) 90%,red 100%);
-webkit-text-fill-color: transparent;/* 将字体设置成透明色 */
-webkit-background-clip: text;/* 裁剪背景图,使文字作为裁剪区域向外裁剪 */
-webkit-animation: masked-animation 4s linear infinite;
word-break: break-all;
}
.Button1{
text-align: center;
font-size: 22px
}
.Button2{
margin: 10px;
font-size: 18px
}
.Button3{
margin: 10px;
font-size: 18px
}
.basicInfo-item.name {
width: 100px;
padding: 0 5px 1px 12px;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
color: #999;
background-color: gold
}
.bg{
background-color: #E8E8FF;
}
.bg1{
background-color: #D7FFF0;
}
.bg2{
background-color: #DDF3FF;
}
.basicInfo-item.value {
zoom: 1;
font-size: 18px;
color: rgb(0, 0, 0);
width: 500px;
float: left;
position: relative;
word-break: break-all;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}
.background {
width: 100%;
height: 100vh; /* 重点一 */
margin: auto;
background-image: url(./components/background.jpg);
background-repeat: no-repeat;
/* 重点二 */
overflow: auto;
background-position:50% 50%;
}
.header {
overflow: hidden;
font-family: "黑体";
color: black;
background-color : black;
text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
-webkit-background-clip : text;
padding: 13px 0px 8px 0px;
}
.header_r_t {
color:rgb(0, 0, 0);
position: absolute;
right: 20px;
top:25px;
border-radius: 5px;
*float: right;
font-size: 17px
}
.row-one {
overflow: hidden;
}
.row-one-cont li {
position: relative;
float: left;
list-style: none;
width: 260px;
margin-right: 16px;
}
.row-one-cont .arc-tit {
margin: 15px 0;
height: 46px;
font-size: 22px;
background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,rgb(204, 162, 63) 20%,rgb(85, 171, 182) 30%, rgb(207, 55, 149) 40%, #00FFFF 50%,rgb(255, 204, 204) 60%,rgb(218, 12, 156) 70%,#66CCCC 80%,rgb(230, 54, 30) 90%,rgb(201, 28, 15) 100%);
-webkit-text-fill-color: transparent;/* 将字体设置成透明色 */
-webkit-background-clip: text;/* 裁剪背景图,使文字作为裁剪区域向外裁剪 */
-webkit-animation: masked-animation 4s linear infinite;
line-height: 23px;
word-break: break-all;
}
.row-one-cont .are-cont {
font-size: 15px;
background-color: rgb(248, 250, 250);
color: rgb(0, 0, 0);
line-height: 28px;
padding-right: 15px;
padding-left: 15px;
word-break: break-all;
border : 1px solid ;
border-top: none;
}
.type1{
font-size: 30px;
}
.footer .ft-bot {
clear: both;
*margin-top: 15px;
}
.footer p {
color: rgb(255, 255, 255);
}
.ft-bot {
text-align: center;
line-height: 20px;
border-top: 1px solid #3c6ba5;
}
.ft-info {
margin: 0px 0 0 80px;
}
.ft-info span {
position: absolute ;
left: 200px;
top:630px;
white-space: nowrap;
color: crimson
}
.ft-info1 span{
position: absolute ;
left: 1200px;
top:630px;
white-space: nowrap;
color: blue
}
.ft-info2 span{
position: absolute ;
left: 200px;
top:680px;
white-space: nowrap;
color:green
}
.ft-info3 span{
position: absolute ;
left: 1200px;
top:680px;
white-space: nowrap;
color: blueviolet
}
.title-prefix {
display: none;
}
.para-title.level-2 .title-text {
float: left;
display: block;
padding: 0 8px 0 18px;
line-height: 24px;
font-size: 22px;
font-weight: 400;
color: #000;
background: #fff;
}
.para-title.level-2 {
display: block;
clear: both;
zoom: 1;
overflow: hidden;
font-size: 20px;
border-left: 12px solid #4F9CEE;
line-height: 24px;
font-size: 22px;
font-weight: 400;
font-family: Microsoft YaHei,SimHei,Verdana;
position: relative;
margin: 35px 0 15px -30px;
}
.picture1{
float: right;
width: 200px ;
height: 50px;
}
+8
View File
@@ -0,0 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import Entry from './Entry';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.register();
+1
View File
File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 8.0 KiB

+135
View File
@@ -0,0 +1,135 @@
// This optional code is used to register a service worker.
// register() is not called by default.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.
// To learn more about the benefits of this model and instructions on how to
// opt-in, read https://bit.ly/CRA-PWA
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://bit.ly/CRA-PWA'
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
);
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
if (
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}
+5
View File
@@ -0,0 +1,5 @@
const proxy = require('http-proxy-middleware')
module.exports = function (app) {
app.use(proxy('/api', { target: 'http://localhost:5000' }));
}
+4
View File
@@ -0,0 +1,4 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1