使用react做一个简易图书管理系统

近期使用react做了一次小的demo

简易图书管理系统，包含用户登录校验、图书查询、新增书籍，用户密码修改。最终源码会有链接。

使用route布局页面

脚手架搭好后，在App.js中定义各个功能跳转接口，如下：<Route exact path="/" component={Home} /> <Route path="/admin" component={admin} /> <Route path="/login" component={login} /> <Route path="/borrow" component={borrow} /> <Route path="/modify" component={modify} /> <Route path="/search" component={search} /> <Route path="/BookEdit" component={BookEdit} />

同时，在登录首页，定义各个功能跳转函数，如下：
async login(){
this.props.history.push("/login");
}
async admin(){
this.props.history.push("/admin");
}
async borrow(){
this.props.history.push("/borrow");
}
async search(){
this.props.history.push("/search");
}
async modify(){
this.props.history.push("/modify");
}

用户登录认证 admin.js

采用header增加access_token字段，并且保存在本地sessionStorage的方式，即前端携带token字段到后端，进行校验。
let cur_token = sessionStorage.getItem(‘access_token’);
await axios.post(${server}/login,qs.stringify(
this.state
),
{
headers: {
‘access-token’:cur_token,
‘content-type’:“application/x-www-form-urlencoded”}
}).
同时注意后端python的响应函数，中对access-token的处理，
response.headers[‘access-token’]=100;
response.headers[‘Access-Control-Expose-Headers’]=‘access-token’;

采用axios给后端发请求

以查询接口为例，
axios.post(${server}/searchall,qs.stringify(this.state)
, {
headers: {
‘access-token’:cur_token,
‘content-type’:“application/x-www-form-urlencoded”}
}
)
.then((response)=>
如上所示，前端组装信息，给后端。其中this.state在不同功能中，有不同参数，
this.state={
‘search’:"",
list:[],
borrow:’’
}
flask返回信息通过
this.setState({
list:response.data
})
})添加到
list中。

查询信息展示，通过ant的table实现

查询信息展示，通过ant的table实现，