1.创建一个React项目create-react-app app-master
2.安装依赖：react,react-router-dom,react-redux,react-scripts
3.创建路由文件
import React, { Component } from 'react'
import { HashRouter as Router,Route,Switch } from 'react-router-dom'
import App from '../pages/App'
import Register from '../pages/Register/Register'
import Login from '../pages/Login/Login'
import Nav from '../components/Nav/Nav'
export default class index extends Component {
render() {
return (
<Router>
<Nav/>
<Switch>
<Route exact path="/" component={App}></Route>
<Route path="/register" component={Register}></Route>
<Route path="/login" component={Login}></Route>
</Switch>
</Router>
)
}
}
在入口文件index.js中引入路由
4.创建页面
在public文件下index.html文件下引入Bootstrap的CDN地址：
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
页面文件结构如下：
登录页源码：（注册页同理）
import React, { Component } from "react";
import api from "../../api/index"
export default class ogin extends Component {
constructor(){
super();
this.state={
username:'',
password:''
}
}
onSubmit=(e)=>{
e.preventDefault();
console.log(this.state);
api.login({
username:this.state.username,
password:this.state.password
}).then(res=>{
console.log(res);
}).catch(error=>{
console.log(error);
})
}
changeHandle=(e)=>{
//console.log(e.target.value);
this.setState({
[e.target.name]:e.target.value
})
}
render() {
const {username,password}=this.state;
return (
<div className="row">
<div className="col-md-3"></div>
<div className="col-md-6">
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label htmlFor="exampleInputEmail1">用户名</label>
<input
type="username"
className="form-control"
placeholder="username"
name="username"
value={username}
onChange={this.changeHandle}
/>
</div>
<div className="form-group">
<label htmlFor="exampleInputPassword1">密码</label>
<input
type="password"
className="form-control"
placeholder="Password"
name="password"
value={password}
onChange={this.changeHandle}
/>
</div>
<div className="form-group">
<button className="btn btn-primary btn-lg">登录</button>
</div>
</form>
</div>
<div className="col-md-3"></div>
</div>
);
}
}
5.封装axios请求
文件结构如下，先创建request.js
request.js源码：
import axios from "axios";
const instance=axios.create({
baseURL:"http://localhost:8000",
timeout:5000
})
//请求拦截器
instance.interceptors.request.use((config)=>{
return config;
});
//响应拦截器
instance.interceptors.response.use((res)=>{
return res.data;
},(error)=>{
console.log("err"+error);
});
export default instance;
index.js文件二次封装具体请求，源码如下：（注：后端已经处理过跨域，前端无需处理）
import axios from "./request"
const base={
register:"/user/register",
login:"/user/login"
}
//（1）跨域，后台解决
const api={
register(params){
return axios.post(base.register,params)
},
login(params){
return axios.post(base.login,params)
}
}
export default api;
登录成功：
该案例只是为了了解react流程，打通数据。