使用React做个简单的页面-01
1.页面效果
2.项目结构
具体代码
root.js
pc_index.js
pc_header.js
移动端代码调整
页脚页面
1.页面效果
代码实现
pc_index.js
注册模块开发
1.页面效果
代码实现
移动端效果；
代码实现
import
React
from
'react';
import {
Row,
Col}
from
'antd';
import {
Menu,
Icon,
Tabs,
message,
Form,
Input,
Button,
CheckBox,
Modal
}
from
'antd';
const
FormItem =
Form.
Item;
const
SubMenu =
Menu.
SubMenu;
const
TabPane =
Tabs.
TabPane;
const
MenuItemGroup =
Menu.
ItemGroup;
class
MobileHeader
extends
React.
Component {
constructor() {
super();
this.
state = {
current:
'top',
modalVisible:
false,
action:
'login',
hasLogined:
false,
userNickName:
'',
userid:
0
};
};
setModalVisible(
value)
{
this.
setState({
modalVisible:
value});
};
handleClick(
e) {
if (
e.
key =
"register") {
this.
setState({
current:
'register'});
this.
setModalVisible(
true);
}
else {
{
this.
setState({
current:
e.
key});
}
}
};
handleSubmit(
e)
{
//页面开始向 API 进行提交数据
e.
preventDefault();
var
myFetchOptions = {
method:
'GET'
};
var
formData=
this.
props.
form.
getFieldsValue();
console.
log(
formData);
fetch(
"http://newsapi.gugujiankong.com/Handler.ashx?action=register&username=userName&password=password&r_userName="+
formData.
r_userName+
"&r_password="+
formData.
r_password+
"&r_confirmPassword="+
formData.
r_confirmPassword,
myFetchOptions).
then(
response
=>
response.
json()).
then(
json
=>{
this.
setState({
userNickName:json.
NickUserName,
userid:json.
UserId});
});
message.
success(
"请求成功！");
this.
setModalVisible(
false);
};
login(){
this.
setModalVisible(
true);
};
render() {
let {
getFieldProps} =
this.
props.
form;
const
userShow =
this.
state.
hasLogined ?
<
Link
>
<
Icon
type=
"inbox"
/>
Link
>
:
<
Icon
type=
"setting"
onClick=
{this.
login.
bind(
this)
}
/>
return (
<
div
id=
"mobileheader"
>
<
header
>
<
img
src=
"./src/images/logo.png"
alt=
"logo"
/>
<
span
>ReactNews
span
>
{
userShow
}
header
>
<
Modal
title=
"用户中心"
wrapClassName=
"vertical-center-modal"
visible=
{this.
state.
modalVisible
}
onCancel=
{()
=>this.
setModalVisible(
false)
}
onOk=
{()
=>
this.
setModalVisible(
false)
}
okText =
"关闭"
>
<
Tabs
type=
"card"
>
<
TabPane
tab=
"注册"
key=
"2"
>
<
Form
horizontal
onSubmit=
{this.
handleSubmit.
bind(
this)
}
>
<
FormItem
label=
"账户"
>
<
Input
placeholder=
"请输入您的账号"
{...
getFieldProps(
'r_userName')
}
/>
FormItem
>
<
FormItem
label=
"密码"
>
<
Input
type=
"password"
placeholder=
"请输入您的密码"
{...
getFieldProps(
'r_password')
}
/>
FormItem
>
<
FormItem
label=
"确认密码"
>
<
Input
type=
"password"
placeholder=
"请再次输入您的密码"
{...
getFieldProps(
'r_confirmPassword')
}
/>
FormItem
>
<
Button
type=
"primary"
htmlType=
"submit"
>注册
Button
>
Form
>
TabPane
>
Tabs
>
Modal
>
div
>
);
};
}
export
default
MobileHeader =
Form.
create({})(
MobileHeader);
登录注册功能完善
代码
import
React
from
'react';
import {
Row,
Col}
from
'antd';
import {
Menu,
Icon,
Tabs,
message,
Form,
Input,
Button,
CheckBox,
Modal
}
from
'antd';
const
FormItem =
Form.
Item;
const
SubMenu =
Menu.
SubMenu;
const
TabPane =
Tabs.
TabPane;
const
MenuItemGroup =
Menu.
ItemGroup;
import {
Router,
Route,
Link,
browserHistory}
from
'react-router'
class
PCHeader
extends
React.
Component {
constructor() {
super();
this.
state = {
current:
'top',
modalVisible:
false,
action:
'login',
hasLogined:
false,
userNickName:
'',
userid:
0
};
};
setModalVisible(
value)
{
this.
setState({
modalVisible:
value});
};
handleClick(
e) {
if (
e.
key =
"register") {
this.
setState({
current:
'register'});
this.
setModalVisible(
true);
}
else {
{
this.
setState({
current:
e.
key});
}
}
};
handleSubmit(
e)
{
//页面开始向 API 进行提交数据
e.
preventDefault();
var
myFetchOptions = {
method:
'GET'
};
var
formData =
this.
props.
form.
getFieldsValue();
console.
log(
formData);
fetch(
"http://newsapi.gugujiankong.com/Handler.ashx?action=" +
this.
state.
action
+
"&username="+
formData.
userName+
"&password="+
formData.
password
+
"&r_userName=" +
formData.
r_userName +
"&r_password="
+
formData.
r_password +
"&r_confirmPassword="
+
formData.
r_confirmPassword,
myFetchOptions)
.
then(
response
=>
response.
json())
.
then(
json
=> {
this.
setState({
userNickName:
json.
NickUserName,
userid:
json.
UserId});
});
if (
this.
state.
action==
"login") {
this.
setState({
hasLogined:
true});
}
message.
success(
"请求成功！");
this.
setModalVisible(
false);
};
callback(
key) {
if (
key ==
1) {
this.
setState({
action:
'login'});
}
else
if (
key ==
2) {
this.
setState({
action:
'register'});
}
};
render() {
let {
getFieldProps} =
this.
props.
form;
const
userShow =
this.
state.
hasLogined
?
<
Menu.Item
key=
"logout"
class=
"register"
>
<
Button
type=
"primary"
htmlType=
"button"
>
{this.
state.
userNickName
}
Button
>
<
Link
target=
"_blank"
>
<
Button
type=
"dashed"
htmlType=
"button"
>个人中心
Button
>
Link
>
<
Button
type=
"ghost"
htmlType=
"button"
>退出
Button
>
Menu.Item
>
:
<
Menu.Item
key=
"register"
class=
"register"
>
<
Icon
type=
"appstore"
/>注册/登录
Menu.Item
>;
return (
<
header
>
<
Row
>
<
Col
span=
{
2
}
>
Col
>
<
Col
span=
{
4
}
>
<
a
href=
"/"
class=
"logo"
>
<
img
src=
"./src/images/logo.png"
alt=
"logo"
/>
<
span
>ReactNews
span
>
a
>
Col
>
<
Col
span=
{
16
}
>
<
Menu
mode=
"horizontal"
onClick=
{this.
handleClick.
bind(
this)
}
selectedKeys=
{[
this.
state.
current]
}
>
<
Menu.Item
key=
"top"
>
<
Icon
type=
"appstore"
/>头条
Menu.Item
>
<
Menu.Item
key=
"shehui"
>
<
Icon
type=
"appstore"
/>社会
Menu.Item
>
<
Menu.Item
key=
"guonei"
>
<
Icon
type=
"appstore"
/>国内
Menu.Item
>
<
Menu.Item
key=
"guoji"
>
<
Icon
type=
"appstore"
/>国际
Menu.Item
>
<
Menu.Item
key=
"yule"
>
<
Icon
type=
"appstore"
/>娱乐
Menu.Item
>
<
Menu.Item
key=
"tiyu"
>
<
Icon
type=
"appstore"
/>体育
Menu.Item
>
<
Menu.Item
key=
"keji"
>
<
Icon
type=
"appstore"
/>科技
Menu.Item
>
<
Menu.Item
key=
"shishang"
>
<
Icon
type=
"appstore"
/>时尚
Menu.Item
>
{
userShow
}
Menu
>
<
Modal
title=
"用户中心"
wrapClassName=
"vertical-center-modal"
visible=
{this.
state.
modalVisible
}
onCancel=
{()
=>this.
setModalVisible(
false)
}
onOk=
{()
=>
this.
setModalVisible(
false)
}
okText=
"关闭"
>
<
Tabs
type=
"card"
onChange=
{this.
callback.
bind(
this)
}
>
<
TabPane
tab=
"登录"
key=
"1"
>
<
Form
horizontal
onSubmit=
{this.
handleSubmit.
bind(
this)
}
>
<
FormItem
label=
"账户"
>
<
Input
placeholder=
"请输入您的账号"
{...
getFieldProps(
'userName')
}
/>
FormItem
>
<
FormItem
label=
"密码"
>
<
Input
type=
"password"
placeholder=
"请输入您的密码"
{...
getFieldProps(
'password')
}
/>
FormItem
>
<
Button
type=
"primary"
htmlType=
"submit"
>登录
Button
>
Form
>
TabPane
>
<
TabPane
tab=
"注册"
key=
"2"
>
<
Form
horizontal
onSubmit=
{this.
handleSubmit.
bind(
this)
}
>
<
FormItem
label=
"账户"
>
<
Input
placeholder=
"请输入您的账号"
{...
getFieldProps(
'r_userName')
}
/>
FormItem
>
<
FormItem
label=
"密码"
>
<
Input
type=
"password"
placeholder=
"请输入您的密码"
{...
getFieldProps(
'r_password')
}
/>
FormItem
>
<
FormItem
label=
"确认密码"
>
<
Input
type=
"password"
placeholder=
"请再次输入您的密码"
{...
getFieldProps(
'r_confirmPassword')
}
/>
FormItem
>
<
Button
type=
"primary"
htmlType=
"submit"
>注册
Button
>
Form
>
TabPane
>
Tabs
>
Modal
>
Col
>
<
Col
span=
{
2
}
>
Col
>
Row
>
header
>
);
};
}
export
default
PCHeader =
Form.
create({})(
PCHeader);
移动端代码完善
import
React
from
'react';
import {
Row,
Col}
from
'antd';
import {
Menu,
Icon,
Tabs,
message,
Form,
Input,
Button,
CheckBox,
Modal
}
from
'antd';
const
FormItem =
Form.
Item;
const
SubMenu =
Menu.
SubMenu;
const
TabPane =
Tabs.
TabPane;
const
MenuItemGroup =
Menu.
ItemGroup;
import {
Router,
Route,
Link,
browserHistory}
from
'react-router'
class
MobileHeader
extends
React.
Component {
constructor() {
super();
this.
state = {
current:
'top',
modalVisible:
false,
action:
'login',
hasLogined:
false,
userNickName:
'',
userid:
0
};
};
setModalVisible(
value)
{
this.
setState({
modalVisible:
value});
};
handleClick(
e) {
if (
e.
key =
"register") {
this.
setState({
current:
'register'});
this.
setModalVisible(
true);
}
else {
{
this.
setState({
current:
e.
key});
}
}
};
handleSubmit(
e)
{
//页面开始向 API 进行提交数据
e.
preventDefault();
var
myFetchOptions = {
method:
'GET'
};
var
formData=
this.
props.
form.
getFieldsValue();
console.
log(
formData);
fetch(
"http://newsapi.gugujiankong.com/Handler.ashx?action=" +
this.
state.
action
+
"&username="+
formData.
userName+
"&password="+
formData.
password
+
"&r_userName=" +
formData.
r_userName +
"&r_password="
+
formData.
r_password +
"&r_confirmPassword="
+
formData.
r_confirmPassword,
myFetchOptions)
.
then(
response
=>
response.
json())
.
then(
json
=> {
this.
setState({
userNickName:
json.
NickUserName,
userid:
json.
UserId});
});
if (
this.
state.
action==
"login") {
this.
setState({
hasLogined:
true});
}
message.
success(
"请求成功！");
this.
setModalVisible(
false);
};
login(){
this.
setModalVisible(
true);
};
callback(
key) {
if (
key ==
1) {
this.
setState({
action:
'login'});
}
else
if (
key ==
2) {
this.
setState({
action:
'register'});
}
};
render() {
let {
getFieldProps} =
this.
props.
form;
const
userShow =
this.
state.
hasLogined ?
<
Link
>
<
Icon
type=
"inbox"
/>
Link
>
:
<
Icon
type=
"setting"
onClick=
{this.
login.
bind(
this)
}
/>
return (
<
div
id=
"mobileheader"
>
<
header
>
<
img
src=
"./src/images/logo.png"
alt=
"logo"
/>
<
span
>ReactNews
span
>
{
userShow
}
header
>
<
Modal
title=
"用户中心"
wrapClassName=
"vertical-center-modal"
visible=
{this.
state.
modalVisible
}
onCancel=
{()
=>this.
setModalVisible(
false)
}
onOk=
{()
=>
this.
setModalVisible(
false)
}
okText =
"关闭"
>
<
Tabs
type=
"card"
onChange=
{this.
callback.
bind(
this)
}
>
<
TabPane
tab=
"登录"
key=
"1"
>
<
Form
horizontal
onSubmit=
{this.
handleSubmit.
bind(
this)
}
>
<
FormItem
label=
"账户"
>
<
Input
placeholder=
"请输入您的账号"
{...
getFieldProps(
'userName')
}
/>
FormItem
>
<
FormItem
label=
"密码"
>
<
Input
type=
"password"
placeholder=
"请输入您的密码"
{...
getFieldProps(
'password')
}
/>
FormItem
>
<
Button
type=
"primary"
htmlType=
"submit"
>登录
Button
>
Form
>
TabPane
>
<
TabPane
tab=
"注册"
key=
"2"
>
<
Form
horizontal
onSubmit=
{this.
handleSubmit.
bind(
this)
}
>
<
FormItem
label=
"账户"
>
<
Input
placeholder=
"请输入您的账号"
{...
getFieldProps(
'r_userName')
}
/>
FormItem
>
<
FormItem
label=
"密码"
>
<
Input
type=
"password"
placeholder=
"请输入您的密码"
{...
getFieldProps(
'r_password')
}
/>
FormItem
>
<
FormItem
label=
"确认密码"
>
<
Input
type=
"password"
placeholder=
"请再次输入您的密码"
{...
getFieldProps(
'r_confirmPassword')
}
/>
FormItem
>
<
Button
type=
"primary"
htmlType=
"submit"
>注册
Button
>
Form
>
TabPane
>
Tabs
>
Modal
>
div
>
);
};
}
export
default
MobileHeader =
Form.
create({})(
MobileHeader);
退出功能完善
