axios：antd等位置，界面跳轉(zhuǎn)，路由配置，事件傳參和路由傳參，終端側(cè)欄【詩書畫唱】
一、使用axios實(shí)現(xiàn)數(shù)據(jù)請求
二、路由配置
三、事件傳參和路由傳參
路徑：http://localhost:3000/
目錄：
例子
例子1：使用antd，axios進(jìn)行后臺用nodejs傳數(shù)據(jù)到一個網(wǎng)頁，后臺獲取并且使用這個網(wǎng)頁的數(shù)據(jù)，顯示成一個表格（使用axios傳輸數(shù)據(jù)，前后臺交互）
以后的話，傳數(shù)據(jù)的話一般都用axios,而不用jQuery了。
npm?install?axios?--save
后臺在用axios傳輸數(shù)據(jù)的時候，不會出現(xiàn)中文的亂碼。之前后臺用jsonp，傳數(shù)據(jù)到一個網(wǎng)頁顯示后，會出現(xiàn)中文亂碼（但2種方式在前臺獲取時，基本不會出現(xiàn)亂碼）。因?yàn)閖sonp是和jQuery有關(guān)的，像一間大房子，沒必要總是引入，而axios是模塊，符合VScode的模塊化開發(fā)，所以我以后一般都用axios
CTRL+F后，點(diǎn)其下拉框等等后就可以進(jìn)行替換文本。
一般下載的模塊，ui框架（比如antd）都可以在node_modules這個文件夾中找到，然后就可以找到后改用。
顯示終端側(cè)欄和隱藏終端側(cè)欄，改變終端視圖界面的方法（一般用powershell，輸入cmd命令來使用時有顏色區(qū)分，個人認(rèn)為看起來比cmd好看）
Windows PowerShell?是微軟公司開發(fā)的任務(wù)自動化和配置管理框架。
選擇默認(rèn)配置文件為powershell而非cmd的方法
split
serv4.js
npm?install?axios?--save安裝axios模塊到node_modules目錄下
例子2：在例子1的基礎(chǔ)上進(jìn)行頁面跳轉(zhuǎn)，設(shè)置路由，界面調(diào)整，有超鏈接，查看詳情界面，加上表格組件，登錄注冊等等
Dg_axios.js
detail.js
index.js
login.js
reg.js
index.js
route.js
serv4.js
例子
例子1：使用antd，axios進(jìn)行后臺用nodejs傳數(shù)據(jù)到一個網(wǎng)頁，后臺獲取并且使用這個網(wǎng)頁的數(shù)據(jù)，顯示成一個表格（使用axios傳輸數(shù)據(jù)，前后臺交互）
以后的話，傳數(shù)據(jù)的話一般都用axios,而不用jQuery的jsonp了。
npm?install?axios?--save
后臺在用axios傳輸數(shù)據(jù)的時候，不會出現(xiàn)中文的亂碼。之前后臺用jsonp，傳數(shù)據(jù)到一個網(wǎng)頁顯示后，會出現(xiàn)中文亂碼（但2種方式在前臺獲取時，基本不會出現(xiàn)亂碼）。因?yàn)閖sonp是和jQuery有關(guān)的，像一間大房子，沒必要總是引入，而axios是模塊，符合VScode的模塊化開發(fā)，所以我以后一般都用axios
CTRL+F后，點(diǎn)其下拉框等等后就可以進(jìn)行替換文本。
一般下載的模塊，ui框架（比如antd）都可以在node_modules這個文件夾中找到，然后就可以找到后改用。
顯示終端側(cè)欄和隱藏終端側(cè)欄，改變終端視圖界面的方法（一般用powershell，輸入cmd命令來使用時有顏色區(qū)分，個人認(rèn)為看起來比cmd好看）
Windows PowerShell?是微軟公司開發(fā)的任務(wù)自動化和配置管理框架。
選擇默認(rèn)配置文件為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';
//解決頁面跳轉(zhuǎn)時，history屬性為空的問題
//?import?{?withRouter?}?from?"react-router-dom";
//自定義組件
class??Dg_axios?extends?React.Component?{
????constructor(){
????????super();
????????this.state?=?{
????????????myDate:?[]
????????}
????}
????componentDidMount(){
????????//請求后臺數(shù)據(jù)
????????axios.get('http://localhost:8777')
????????????.then(res?=>?{
????????????????//res就是后臺請求的數(shù)據(jù)
????????????????//console.log(res.data);
????????????????this.setState({
????????????????????myDate:?res.data
????????????????});
????????????});
????}
????detail(n){
????????//console.log(n);
????????//跳轉(zhuǎ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:?'標(biāo)簽',
????????????????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必備源碼部分
//?個人添加的導(dǎo)入antd.css的代碼部分
//?個人添加的導(dǎo)入組件的代碼部分
//?個人科普——>
//?個人注釋：Dg是表格組件
//?FormZuJian.js是表單組件
//個人總結(jié)的導(dǎo)入代碼模板：import?自定義文件別名（一般我習(xí)慣和導(dǎo)入文件名統(tǒng)一）?from??文件路徑;
/******************/
//reactjs必備源碼部分?START?
import?React?from?'react';
import?ReactDOM?from?'react-dom';
import?'./index.css';
//reactjs必備源碼部分?END
//（Router是要自己寫的路由的部分，暫時我不寫和不用導(dǎo)入）?START?
//?import?Router?from?'./comp/Router';
//（Router是要自己寫的路由的部分，暫時我不寫和不用導(dǎo)入）?END
//個人添加的導(dǎo)入antd.css的代碼部分?START
import?'antd/dist/antd.css';
//個人添加的導(dǎo)入antd.css的代碼部分?END
//個人添加的導(dǎo)入組件的代碼部分?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';
//個人添加的導(dǎo)入組件的代碼部分?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?/>?：聯(lián)級選擇（下拉框聯(lián)動）組件
??<Dg_axios/>:是用了axios技術(shù)接收數(shù)據(jù)的用了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的基礎(chǔ)上進(jìn)行頁面跳轉(zhuǎn)，設(shè)置路由，界面調(diào)整，有超鏈接，查看詳情界面，加上表格組件，登錄注冊等等
npm?install?'react-router-dom'?--save
截圖記錄學(xué)習(xí)：
//解決頁面跳轉(zhuǎn)時，history屬性為空的問題
import?{?withRouter?}?from?"react-router-dom";
export?default?withRouter(Dg_axios);
detail(n){
????????//n就是傳的text等參數(shù)（比如姓名等等
????????//console.log(n);
????????//跳轉(zhuǎ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';
//解決頁面跳轉(zhuǎn)時，history屬性為空的問題
import?{?withRouter?}?from?"react-router-dom";
//自定義組件
class??Dg_axios?extends?React.Component?{
????constructor(){
????????super();
????????this.state?=?{
????????????myDate:?[]
????????}
????}
????componentDidMount(){
????????//請求后臺數(shù)據(jù)
????????axios.get('http://localhost:8777')
????????????.then(res?=>?{
????????????????//res就是后臺請求的數(shù)據(jù)
????????????????//console.log(res.data);
????????????????this.setState({
????????????????????myDate:?res.data
????????????????});
????????????});
????}
????detail(name){
????????//name觸發(fā)點(diǎn)擊事件和傳的name的值（一般數(shù)據(jù)庫連接時，詳情界面知道id就可以傳所有信息等等）
????????//console.log(n);
????????//跳轉(zhuǎ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:?'標(biāo)簽',
????????????????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必備源碼部分
//?個人添加的導(dǎo)入antd.css的代碼部分
//?個人添加的導(dǎo)入組件的代碼部分
//?個人科普——>
//?個人注釋：Dg是表格組件
//?FormZuJian.js是表單組件
//個人總結(jié)的導(dǎo)入代碼模板：import?自定義文件別名（一般我習(xí)慣和導(dǎo)入文件名統(tǒng)一）?from??文件路徑;
/******************/
//reactjs必備源碼部分?START?
import?React?from?'react';
import?ReactDOM?from?'react-dom';
import?'./index.css';
//reactjs必備源碼部分?END
//（Router是要自己寫的路由的部分，暫時我不寫和不用導(dǎo)入）?START?
import?Router?from?'./route';
//（Router是要自己寫的路由的部分，暫時我不寫和不用導(dǎo)入）?END
//個人添加的導(dǎo)入antd.css的代碼部分?START
import?'antd/dist/antd.css';
//個人添加的導(dǎo)入antd.css的代碼部分?END
//個人添加的導(dǎo)入組件的代碼部分?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';
//個人添加的導(dǎo)入組件的代碼部分?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?/>?：聯(lián)級選擇（下拉框聯(lián)動）組件
??<Dg_axios/>:是用了axios技術(shù)接收數(shù)據(jù)的用了antd的表格組件
????<Router?/>：路由組件（跳轉(zhuǎn)功能）
??*/
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');
運(yùn)行
