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')
}
/>