axios：antd等位置，界面跳转，路由配置，事件传参和路由传参，终端侧栏【诗书画唱】
一、使用axios实现数据请求
二、路由配置
三、事件传参和路由传参
路径：http://localhost:3000/
目录：
例子
例子1：使用antd，axios进行后台用nodejs传数据到一个网页，后台获取并且使用这个网页的数据，显示成一个表格（使用axios传输数据，前后台交互）
以后的话，传数据的话一般都用axios,而不用jQuery了。
npm install axios --save
后台在用axios传输数据的时候，不会出现中文的乱码。之前后台用jsonp，传数据到一个网页显示后，会出现中文乱码（但2种方式在前台获取时，基本不会出现乱码）。因为jsonp是和jQuery有关的，像一间大房子，没必要总是引入，而axios是模块，符合VScode的模块化开发，所以我以后一般都用axios
CTRL+F后，点其下拉框等等后就可以进行替换文本。
一般下载的模块，ui框架（比如antd）都可以在node_modules这个文件夹中找到，然后就可以找到后改用。
显示终端侧栏和隐藏终端侧栏，改变终端视图界面的方法（一般用powershell，输入cmd命令来使用时有颜色区分，个人认为看起来比cmd好看）
Windows PowerShell 是微软公司开发的任务自动化和配置管理框架。
选择默认配置文件为powershell而非cmd的方法
split
serv4.js
npm install axios --save安装axios模块到node_modules目录下
例子2：在例子1的基础上进行页面跳转，设置路由，界面调整，有超链接，查看详情界面，加上表格组件，登录注册等等
Dg_axios.js
detail.js
index.js
login.js
reg.js
index.js
route.js
serv4.js
例子
例子1：使用antd，axios进行后台用nodejs传数据到一个网页，后台获取并且使用这个网页的数据，显示成一个表格（使用axios传输数据，前后台交互）
以后的话，传数据的话一般都用axios,而不用jQuery的jsonp了。
npm install axios --save
后台在用axios传输数据的时候，不会出现中文的乱码。之前后台用jsonp，传数据到一个网页显示后，会出现中文乱码（但2种方式在前台获取时，基本不会出现乱码）。因为jsonp是和jQuery有关的，像一间大房子，没必要总是引入，而axios是模块，符合VScode的模块化开发，所以我以后一般都用axios
CTRL+F后，点其下拉框等等后就可以进行替换文本。
一般下载的模块，ui框架（比如antd）都可以在node_modules这个文件夹中找到，然后就可以找到后改用。
显示终端侧栏和隐藏终端侧栏，改变终端视图界面的方法（一般用powershell，输入cmd命令来使用时有颜色区分，个人认为看起来比cmd好看）
Windows PowerShell 是微软公司开发的任务自动化和配置管理框架。
选择默认配置文件为powershell而非cmd的方法
split
Dg_axios.js
//src/comp/Dg.js
import { Table, Tag, Space } from 'antd';
import React from 'react';
//npm install axios --save
import axios from 'axios';
//解决页面跳转时，history属性为空的问题
// import { withRouter } from "react-router-dom";
//自定义组件
class Dg_axios extends React.Component {
constructor(){
super();
this.state = {
myDate: []
}
}
componentDidMount(){
//请求后台数据
axios.get('http://localhost:8777')
.then(res => {
//res就是后台请求的数据
//console.log(res.data);
this.setState({
myDate: res.data
});
});
}
detail(n){
//console.log(n);
//跳转到Detail页面
this.props.history.push('/dl/' + n);
}
render() {
//表头
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
render: text => <a onClick={this.detail.bind(this,text)}>{text}</a>,
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '地址',
dataIndex: 'address',
key: 'address',
},
{
title: '标签',
key: 'tags',
dataIndex: 'tags',
render: tags => (
<>
{tags.map(tag => {
let color = tag.length > 3 ? 'geekblue' : 'green';
if (tag === 'loser') {
color = 'volcano';
}
return (
<Tag color={color} key={tag}>
{tag.toUpperCase()}
</Tag>
);
})}
</>
),
},
{
title: '操作',
key: 'action',
render: (text, record) => (
<Space size="middle">
<a>邀请 {record.name}</a>
<a>删除</a>
</Space>
),
},
];
return <Table columns={columns} dataSource={this.state.myDate} />
}
}
export default Dg_axios;
// export default withRouter(Dg_axios);
index.js
/******************/
//目录——>
// reactjs必备源码部分
// 个人添加的导入antd.css的代码部分
// 个人添加的导入组件的代码部分
// 个人科普——>
// 个人注释：Dg是表格组件
// FormZuJian.js是表单组件
//个人总结的导入代码模板：import 自定义文件别名（一般我习惯和导入文件名统一） from 文件路径;
/******************/
//reactjs必备源码部分 START
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
//reactjs必备源码部分 END
//（Router是要自己写的路由的部分，暂时我不写和不用导入） START
// import Router from './comp/Router';
//（Router是要自己写的路由的部分，暂时我不写和不用导入） END
//个人添加的导入antd.css的代码部分 START
import 'antd/dist/antd.css';
//个人添加的导入antd.css的代码部分 END
//个人添加的导入组件的代码部分 START
import MyTable from './comp/MyTable';
import Dg from './comp/Dg';
import FormZuJian from './comp/FormZuJian';
import Cascade from './comp/Cascade';
import Dg_axios from './comp/Dg_axios';
//个人添加的导入组件的代码部分 END
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<Dg_axios/>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
/*可选择的组件
<Dg /> ：表格组件
<FormZuJian /> ：表单组件
<Cascade /> ：联级选择（下拉框联动）组件
<Dg_axios/>:是用了axios技术接收数据的用了antd的表格组件
*/
serv4.js
let http = require('http');
let url = require('url');
http.createServer(function(req,res){
let ps = url.parse(req.url,true).query;
const data = [
{
key: '1',
name: '刘德华',
age: 32,
address: '中国香港',
tags: ['德艺双馨', '自律'],
},
{
key: '2',
name: '汪方',
age: 42,
address: '武汉',
tags: ['失败者'],
},
{
key: '3',
name: '吴彦祖',
age: 32,
address: '阿拉斯加',
tags: ['酷', '非常受欢迎'],
},
];
//res.end(ps.callback + '(' + JSON.stringify(data) + ')');
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Headers", "Content-Type");
res.setHeader("content-type", "application/json");
res.end(JSON.stringify(data));
}).listen(8777);
console.log('http://localhost:8777');
npm install axios --save安装axios模块到node_modules目录下
cd D:\vsCodeProject\reactjs_homework_day1_vscode\myapp_servlet_data
node serv4
npm start
http://localhost:8777
http://localhost:3000/
例子2：在例子1的基础上进行页面跳转，设置路由，界面调整，有超链接，查看详情界面，加上表格组件，登录注册等等
npm install 'react-router-dom' --save
截图记录学习：
//解决页面跳转时，history属性为空的问题
import { withRouter } from "react-router-dom";
export default withRouter(Dg_axios);
detail(n){
//n就是传的text等参数（比如姓名等等
//console.log(n);
//跳转到Detail页面
this.props.history.push('/dl/' + n);
}
这个nm是自定义的命名。
为了直观，我做出如下更改
Dg_axios.js
//src/comp/Dg.js
import { Table, Tag, Space } from 'antd';
import React from 'react';
//npm install axios --save
import axios from 'axios';
//解决页面跳转时，history属性为空的问题
import { withRouter } from "react-router-dom";
//自定义组件
class Dg_axios extends React.Component {
constructor(){
super();
this.state = {
myDate: []
}
}
componentDidMount(){
//请求后台数据
axios.get('http://localhost:8777')
.then(res => {
//res就是后台请求的数据
//console.log(res.data);
this.setState({
myDate: res.data
});
});
}
detail(name){
//name触发点击事件和传的name的值（一般数据库连接时，详情界面知道id就可以传所有信息等等）
//console.log(n);
//跳转到Detail页面
this.props.history.push('/dl/' + name);
}
render() {
//表头
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
render: name => <a onClick={this.detail.bind(this,name)}>{name}</a>,
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
// render: text => <a onClick={this.detail.bind(this,text)}>{text}</a>,
},
{
title: '地址',
dataIndex: 'address',
key: 'address',
},
{
title: '标签',
key: 'tags',
dataIndex: 'tags',
render: tags => (
<>
{tags.map(tag => {
let color = tag.length > 3 ? 'geekblue' : 'green';
if (tag === 'loser') {
color = 'volcano';
}
return (
<Tag color={color} key={tag}>
{tag.toUpperCase()}
</Tag>
);
})}
</>
),
},
{
title: '操作',
key: 'action',
render: (text, record) => (
<Space size="middle">
<a>邀请 {record.name}</a>
<a>删除</a>
</Space>
),
},
];
return <Table columns={columns} dataSource={this.state.myDate} />
}
}
// export default Dg_axios;
export default withRouter(Dg_axios);
detail.js
//src/pages/detail.js
import React from 'react';
class Detail extends React.Component{
render(){
return (<div>详情页面 {this.props.match.params.name}
<a href="#">返回主页</a> </div>);
}
}
export default Detail;
index.js
//src/pages/index.js
import React from 'react';
import Dg_axios from '../comp/Dg_axios';
class Index extends React.Component{
render(){
return (<div>
<h1>招聘列表 主页
<a href="#/reg">注册</a>
<a href="#/lg">登录</a>
</h1>
<Dg_axios></Dg_axios>
</div>);
}
}
export default Index;
login.js
//src/pages/login.js
import React from 'react';
class Login extends React.Component{
render(){
return (<div>登录页面 <a href="#">返回主页</a>
<a href="#/reg">前往注册界面</a></div>);
}
}
export default Login;
reg.js
//src/pages/reg.js
import React from 'react';
class Reg extends React.Component{
render(){
return (<div>注册页面 <a href="#">返回主页</a>
<a href="#/lg">登录</a></div>);
}
}
export default Reg;
index.js
/******************/
//目录——>
// reactjs必备源码部分
// 个人添加的导入antd.css的代码部分
// 个人添加的导入组件的代码部分
// 个人科普——>
// 个人注释：Dg是表格组件
// FormZuJian.js是表单组件
//个人总结的导入代码模板：import 自定义文件别名（一般我习惯和导入文件名统一） from 文件路径;
/******************/
//reactjs必备源码部分 START
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
//reactjs必备源码部分 END
//（Router是要自己写的路由的部分，暂时我不写和不用导入） START
import Router from './route';
//（Router是要自己写的路由的部分，暂时我不写和不用导入） END
//个人添加的导入antd.css的代码部分 START
import 'antd/dist/antd.css';
//个人添加的导入antd.css的代码部分 END
//个人添加的导入组件的代码部分 START
import MyTable from './comp/MyTable';
import Dg from './comp/Dg';
import FormZuJian from './comp/FormZuJian';
import Cascade from './comp/Cascade';
import Dg_axios from './comp/Dg_axios';
//个人添加的导入组件的代码部分 END
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<Router />,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
/*可选择的组件
<Dg /> ：表格组件
<FormZuJian /> ：表单组件
<Cascade /> ：联级选择（下拉框联动）组件
<Dg_axios/>:是用了axios技术接收数据的用了antd的表格组件
<Router />：路由组件（跳转功能）
*/
route.js
//src/route.js 路由文件
import React from 'react';
//npm install 'react-router-dom' --save
import {HashRouter, Route, Switch} from 'react-router-dom';
import Index from './pages/index';
import Login from './pages/login';
import Reg from './pages/reg';
import Detail from './pages/detail';
const BasicRoute = () => (
<HashRouter>
<Switch>
{/* http://localhost:3000/#/ */}
<Route exact path="/" component={Index}/>
{/* http://localhost:3000/#/lg */}
<Route exact path="/lg" component={Login}/>
{/* http://localhost:3000/#/reg */}
<Route exact path="/reg" component={Reg}/>
{/* http://localhost:3000/#/dl/:nm */}
<Route exact path="/dl/:name" component={Detail}/>
</Switch>
</HashRouter>
);
export default BasicRoute;
serv4.js
let http = require('http');
let url = require('url');
http.createServer(function(req,res){
let ps = url.parse(req.url,true).query;
const data = [
{
key: '1',
name: '刘德华',
age: 32,
address: '中国香港',
tags: ['德艺双馨', '自律'],
},
{
key: '2',
name: '汪方',
age: 42,
address: '武汉',
tags: ['失败者'],
},
{
key: '3',
name: '吴彦祖',
age: 32,
address: '阿拉斯加',
tags: ['酷', '非常受欢迎'],
},
];
//res.end(ps.callback + '(' + JSON.stringify(data) + ')');
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Headers", "Content-Type");
res.setHeader("content-type", "application/json");
res.end(JSON.stringify(data));
}).listen(8777);
console.log('http://localhost:8777');
运行
