使用react+ant+flask实现简易图书管理系统
近期使用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实现,
![查询页面](https://i-blog.csdnimg.cn/blog_migrate/4e4a87af5d1f4075f026c2472c11eabb.png#pic_center)