reactjs前后臺交互Vscode，HBuilder例子，Ajax，Ant Design，2個終端界面【詩書畫唱】
導讀：
講義
筆記
步驟
別人的步驟
query是用來接收訪問路徑中傳的參數(shù)的，比如我想獲得act的值，后面的話，我可以通過
ps.act就可以獲取到。
這里的this.rt是自己用字面量的方式來命名Ajax部分的內(nèi)容，其實this指的是組件，this.rt的意思是給組件添加一個自己命名的rt屬性。
每次在VScode中寫組件，調(diào)用組件等等，都要記得要寫導出的代碼，比如export?default?Dg;
<></>就是匿名標簽
用bind方法改變this的指向
自己的步驟
自己的實踐（在VScode中實現(xiàn)簡單的Ant Design?中的表格例子）
Ant Design網(wǎng)址：https://ant.design/index-cn
例子1：在VScode中開啟后臺服務器把數(shù)據(jù)傳到http://localhost:8777這個網(wǎng)頁，后面通過開啟使用了antd這個ui框架的前臺服務器獲取并且顯示http://localhost:8777這個網(wǎng)頁的數(shù)據(jù)到http://localhost:3000/這個使用npm start后默認的reactjs會跳轉(zhuǎn)的網(wǎng)頁
Dg.js
MyTable.js
index.js
serv.js
傳數(shù)據(jù)的要開啟的服務器后臺部分，通過node serv或node serv.js開啟服務器
拆分終端的方法
例子2：創(chuàng)建HBuilder中的項目用Ajax接收數(shù)據(jù)，使用JSONP跨域訪問的前臺服務器，VScode中傳數(shù)據(jù)的后臺服務器
serv.js
AJAX.html
科普
React介紹
Ant Design（我個人認為也可以簡稱為antd）介紹
講義
在reactjs中，可以使用原生的js實現(xiàn)ajax，XMLHttpRequest, 也可以使用jquery來發(fā)送ajax請求。
發(fā)送ajax請求的代碼應該寫在什么地方？就是在生命周期的六個鉤子函數(shù)中選擇就可以了。
考慮跨域的問題
筆記
步驟
別人的步驟
query是用來接收訪問路徑中傳的參數(shù)的，比如我想獲得act的值，后面的話，我可以通過
ps.act就可以獲取到。
這里的this.rt是自己用字面量的方式來命名Ajax部分的內(nèi)容，其實this指的是組件，this.rt的意思是給組件添加一個自己命名的rt屬性。
每次在VScode中寫組件，調(diào)用組件等等，都要記得要寫導出的代碼，比如export?default?Dg;
<></>就是匿名標簽
volcano
space
用bind方法改變this的指向
自己的步驟
自己的實踐（在VScode中實現(xiàn)簡單的Ant Design 中的表格例子）
Ant Design網(wǎng)址：https://ant.design/index-cn
例子1：在VScode中開啟后臺服務器把數(shù)據(jù)傳到http://localhost:8777這個網(wǎng)頁，后面通過開啟使用了antd這個ui框架的前臺服務器獲取并且顯示http://localhost:8777這個網(wǎng)頁的數(shù)據(jù)到http://localhost:3000/這個使用npm start后默認的reactjs會跳轉(zhuǎn)的網(wǎng)頁
Dg.js
//src/comp/Dg.js
import?{?Table,?Tag,?Space?}?from?'antd';
import?React?from?'react';
//npm?install?jquery?--save
import?$?from?'jquery';
//自定義組件
class?Dg?extends?React.Component?{
????constructor(){
????????super();
????????this.detail?=?this.detail.bind(this);
????????this.state?=?{
????????????myDate:?[]
????????}
????}
????componentWillMount(){
????????//當組件將要被掛載到頁面時獲取數(shù)據(jù)
????????$.ajax({
????????????url:?'http://localhost:8777/?callback=?',
????????????type:?'POST',
????????????dataType:?'jsonp',
????????????success:?(data)?=>?{
????????????????this.setState({
????????????????????myDate:?data
????????????????});
????????????}
????????});
????}
????detail(){
????????console.log('查看詳細信息');
????}
????render()?{
????????//表頭
????????const?columns?=?[
????????????{
????????????????title:?'姓名',
????????????????dataIndex:?'name',
????????????????key:?'name',
????????????????render:?text?=>?<a?onClick={this.detail}>{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;
MyTable.js
import?React?from?'react';
//npm?install?antd?--save-dev
import?{Table,?Tag,?Space}?from?'antd';
class?MyTable?extends?React.Component{
????test?=?()?=>?{
????????console.log('1111111111111111111');
????}
????render(){
????????const?columns?=?[
????????????{
????????????????title:?'姓名',
????????????????dataIndex:?'name',
????????????????key:?'name',
????????????????render:?text?=>?<a?onClick={this.test.bind(this)}?>{text}</a>,
????????????},
????????????{
????????????????title:?'年齡',
????????????????dataIndex:?'age',
????????????????key:?'age',
????????????},
????????????{
????????????????title:?'地址',
????????????????dataIndex:?'address',
????????????????key:?'address',
????????????},
????????????{
????????????????title:?'標簽',
????????????????key:?'tags',
????????????????dataIndex:?'tags',
????????????????render:?tags?=>?(
????????????????????<div>
????????????????????{tags.map(tag?=>?{
????????????????????let?color?=?tag.length?>?5???'geekblue'?:?'green';
????????????????????if?(tag?===?'失敗者')?{
????????????????????????color?=?'volcano';
????????????????????}
????????????????????return?(
????????????????????????<Tag?color={color}?key={tag}>
????????????????????????{tag.toUpperCase()}
????????????????????????</Tag>
????????????????????);
????????????????????})}
????????????????</div>
????????????????),
????????????},
????????????{
????????????????title:?'操作',
????????????????key:?'action',
????????????????render:?(text,?record)?=>?(
????????????????<Space?size="middle">
????????????????????<a>邀請?{record.name}</a>
????????????????????<a>刪除</a>
????????????????</Space>
????????????????),
????????????},
????????];
????????????
????????const?data?=?[
????????????{
????????????????key:?'1',
????????????????name:?'劉德華',
????????????????age:?32,
????????????????address:?'中國香港',
????????????????tags:?['德藝雙馨',?'自律'],
????????????},
????????????{
????????????????key:?'2',
????????????????name:?'汪方',
????????????????age:?42,
????????????????address:?'武漢',
????????????????tags:?['失敗者'],
????????????},
????????????{
????????????????key:?'3',
????????????????name:?'吳彥祖',
????????????????age:?32,
????????????????address:?'阿拉斯加',
????????????????tags:?['酷',?'非常受歡迎'],
????????????},
????????];
????????return?<Table?dataSource={data}?columns={columns}?/>;
????}
}
export?default?MyTable;
index.js
import?React?from?'react';
import?ReactDOM?from?'react-dom';
//?import?Router?from?'./comp/Router';
import?'./index.css';
import?'antd/dist/antd.css';
import?MyTable?from?'./comp/MyTable';
import?Dg?from?'./comp/Dg';
import?reportWebVitals?from?'./reportWebVitals';
ReactDOM.render(
??<Dg?/>,
??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();
serv.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)?+?')');
}).listen(8777);
console.log('http://localhost:8777');
npm?install?jquery?--save
在package.json的文件中可以看出我是安裝jquery的3.6.0版本成功了
npm?install?antd?--save-dev
傳數(shù)據(jù)的要開啟的服務器后臺部分，通過node serv或node serv.js開啟服務器
啟動2個項目的服務器的方法（一個是前臺用了antd的服務器，一個是用了nodejs傳數(shù)據(jù)到前臺的serv.js的服務器）：開啟2個界面的終端。
一個界面的終端先用 “cd? ??serv.js所在文件夾的目錄?”跳轉(zhuǎn)到該文件夾，用node serv或node serv.js開啟后臺服務器，把數(shù)據(jù)傳到一個訪問地址網(wǎng)頁上，等前臺服務器開啟后拿到數(shù)據(jù)。
另一個界面的終端中用npm start開啟前臺服務器，其中含接收后臺傳到一個訪問地址網(wǎng)頁的數(shù)據(jù)。
用cd? ?D:\vsCodeProject\reactjs_homework_day1_vscode\myapp_servlet_data的指令跳轉(zhuǎn)到D:\vsCodeProject\reactjs_homework_day1_vscode\myapp_servlet_data這個目錄
node serv 開啟后臺服務器
在http://localhost:8777/這個訪問路徑的網(wǎng)頁中傳了如下的數(shù)據(jù)（暫時的亂碼沒關系，接收數(shù)據(jù)后，顯示在前臺時，會處理成非亂碼）
前臺都是默認跳轉(zhuǎn)到http://localhost:3000/這個訪問路徑的網(wǎng)頁（其中已經(jīng)使用了后臺傳到http://localhost:8777/這個訪問路徑的網(wǎng)頁中的數(shù)據(jù)）
點擊名字后會控制臺打印以下內(nèi)容，因為我給名字綁定了點擊事件
拆分終端的方法
科普
React介紹
React是一個用于前端開發(fā)的開源JavaScript庫，由Facebook開發(fā)。其基于組件的庫使您可以為Web應用程序構建高質(zhì)量的用戶界面。
React主要用于構建UI，很多人認為 React 是 MVC 中的 V（視圖）。React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關注和使用它。
React 起源于 Facebook 的內(nèi)部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設Instagram 的網(wǎng)站。做出來以后，發(fā)現(xiàn)這套東西很好用，就在2013年5月開源了。
由于 React的設計思想極其獨特，屬于革命性創(chuàng)新，性能出眾，代碼邏輯卻非常簡單。所以，越來越多的人開始關注和使用，認為它可能是將來 Web 開發(fā)的主流工具。
Ant Design（我個人認為也可以簡稱為antd）介紹
Ant Design是螞蟻金服出品的開源框架，是一個 ui框架，和 bootstrap 一樣是ui框架。里面的組件很完善，開發(fā)中后臺系統(tǒng)非常方便。分別基于react、vue、angular框架，各自開發(fā)了一套 Ant Design 的UI框架。（這里主要講react框架的 Ant Design）
1、通用組件
1、Button 按鈕
2、Icon 圖標
3、Typography 排版： 這個是文案的排版
2、布局
1)、Grid 柵格：24 柵格系統(tǒng)，和 bootstrap中的12柵格系統(tǒng)一樣的功能。
a、<Row gutter={16}>，給Col 組件之間 添加16像素的間距【原理和bootstrap差不多】。他們之間的間距是以padding撐出來的，所以在 Col 組件上不要使用背景色，最好其它的樣式都不要設置吧。
b、兩種柵格系統(tǒng)【基礎柵格、flex柵格布局】
2)、Layout布局：這個是針對 頁面級整體布局
例子
例子1：在VScode中開啟后臺服務器把數(shù)據(jù)傳到http://localhost:8777這個網(wǎng)頁，后面通過開啟使用了antd這個ui框架的前臺服務器獲取并且顯示http://localhost:8777這個網(wǎng)頁的數(shù)據(jù)到http://localhost:3000/這個使用npm start后默認的reactjs會跳轉(zhuǎn)的網(wǎng)頁
具體內(nèi)容步驟看上面的內(nèi)容，我已經(jīng)詳細說明了。
例子2：創(chuàng)建HBuilder中的項目用Ajax接收數(shù)據(jù)，使用JSONP跨域訪問的前臺服務器，VScode中傳數(shù)據(jù)的后臺服務器
記得先用下面的2條cmd命令在終端安裝http和url這2個模塊：
npm?install?http?-g
npm?install?url?-g
//npm?install?http?-g
let?http?=?require('http');
//npm?install?url?-g
let?url?=?require('url');
//創(chuàng)建一個后臺服務
http.createServer(function(req,res){
????const?ps?=?url.parse(req.url,true).query;
????//用jsonp解決跨域訪問的問題
????const?cb?=?ps.callback;
????res.end(cb?+?'({"msg":"給詩書畫唱三連"})');
}).listen(8666);
console.log('服務器啟動成功：http://localhost:8666/?act=admin&pwd=123');
AJAX.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
//1.先定義一個MyHello組件用來聲明一個含有txt屬性的state對象：
class MyHello extends React.Component {
constructor(){
super();
this.state = {
txt: ''
};
}
//2.在組件將要被掛載的時候自動調(diào)用componentWillMount方法加載遠程數(shù)據(jù)：
componentWillMount(){
//3.url中的callback=?不可以少
this.rt = $.ajax({
url: 'http://localhost:8666/?callback=?',
type: 'POST',
dataType: 'jsonp',
success: data => {
//console.log(data.msg);
this.setState({
txt: data.msg
});
}
});
}
//當組件被卸載時，用abort方法取消未完成的請求：
componentWillUnmount(){
this.rt.abort();
}
render(){
return (<div>獲取到的遠程數(shù)據(jù)是:{this.state.txt}</div>);
}
}
ReactDOM.render(<MyHello />,
document.getElementById('app'));
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
