接上篇,我们封装后,肯定需要调用我们看下如何去调用的。
首先我们先导入
import api from "../api/index"
然后我们可以在fuction 中这么去调用
const parame = {};
parame['id'] = value
api.delete_interface(parame).then(res => res.json()).then(data => {
if (data.code != 0) {
message.error(data.msg)
} else {
message.success("删除成功")
window.location.reload()
}
})
我们先去组织参数,然后对请求,传参,接受返回数据,对数据进行接受处理。这样就可以进行展示 或者弹出来对应的信息,我这里的message 是利用antd框架中的。
那么我们接下来看看路由
我们是需要安装的,输入命令
npm install react-router-dom --save
就可以让他进行安装。
路由的作用
单页面应用,路由跳转:来实现切换视图。
我们去创建一个pages目录,然后我们去创建几个页面, 注意 pages 在src 目录下面,创建了一个project.jsx,和interface.jsx
import React from "react";
export default class Project extends React.Component{
render() {
return (
<h1>project</h1>
)}
}
import React from "react";
const Inteface=()=>{
return(
<h1>Inteface</h1>
)
}
export default Inteface
我们去编辑下app.jsx
import React from "react"
import Project from "./pages/project"
import Inteface from './pages/interface'
function App(){
return (
<div className="app">
<Project/>
<Inteface/>
</div>
)
}
这样我们可以去启动 npm start ,访问展示页面
我们想要在不同的链接跳转到不同的页面,我们就需要引入到我们路由
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
我们需要改造下
function App(){
return (
<div className="app">
<Router>
<Route path="/project" component={Project}></Route>
<Route path="/interface" component={Inteface}></Route>
</Router>
</div>
)
} export default App
这样,我们访问,直接展示空白,但是我们直接访问/project
就可以正常访问
使用HashRouter 也可以实现,这里的,只需要把BrowserRouter 改成HashRouter 即可,访问的时候的区别是
HashRouter 访问
http://localhost:3000/#/project
锚点链接
BrowserRouter 访问
http://localhost:3000/project#/
h5的新特性,可能会出现404处理