reactjs前后台交互Vscode，HBuilder例子，Ajax，Ant Design，2个终端界面【诗书画唱】
导读：
讲义
笔记
步骤
别人的步骤
query是用来接收访问路径中传的参数的，比如我想获得act的值，后面的话，我可以通过
ps.act就可以获取到。
这里的this.rt是自己用字面量的方式来命名Ajax部分的内容，其实this指的是组件，this.rt的意思是给组件添加一个自己命名的rt属性。
每次在VScode中写组件，调用组件等等，都要记得要写导出的代码，比如export default Dg;
<></>就是匿名标签
用bind方法改变this的指向
自己的步骤
自己的实践（在VScode中实现简单的Ant Design 中的表格例子）
Ant Design网址：https://ant.design/index-cn
例子1：在VScode中开启后台服务器把数据传到http://localhost:8777这个网页，后面通过开启使用了antd这个ui框架的前台服务器获取并且显示http://localhost:8777这个网页的数据到http://localhost:3000/这个使用npm start后默认的reactjs会跳转的网页
Dg.js
MyTable.js
index.js
serv.js
传数据的要开启的服务器后台部分，通过node serv或node serv.js开启服务器
拆分终端的方法
例子2：创建HBuilder中的项目用Ajax接收数据，使用JSONP跨域访问的前台服务器，VScode中传数据的后台服务器
serv.js
AJAX.html
科普
React介绍
Ant Design（我个人认为也可以简称为antd）介绍
讲义
在reactjs中，可以使用原生的js实现ajax，XMLHttpRequest, 也可以使用jquery来发送ajax请求。
发送ajax请求的代码应该写在什么地方？就是在生命周期的六个钩子函数中选择就可以了。
考虑跨域的问题
笔记
步骤
别人的步骤
query是用来接收访问路径中传的参数的，比如我想获得act的值，后面的话，我可以通过
ps.act就可以获取到。
这里的this.rt是自己用字面量的方式来命名Ajax部分的内容，其实this指的是组件，this.rt的意思是给组件添加一个自己命名的rt属性。
每次在VScode中写组件，调用组件等等，都要记得要写导出的代码，比如export default Dg;
<></>就是匿名标签
volcano
space
用bind方法改变this的指向
自己的步骤
自己的实践（在VScode中实现简单的Ant Design 中的表格例子）
Ant Design网址：https://ant.design/index-cn
例子1：在VScode中开启后台服务器把数据传到http://localhost:8777这个网页，后面通过开启使用了antd这个ui框架的前台服务器获取并且显示http://localhost:8777这个网页的数据到http://localhost:3000/这个使用npm start后默认的reactjs会跳转的网页
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(){
//当组件将要被挂载到页面时获取数据
$.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
传数据的要开启的服务器后台部分，通过node serv或node serv.js开启服务器
启动2个项目的服务器的方法（一个是前台用了antd的服务器，一个是用了nodejs传数据到前台的serv.js的服务器）：开启2个界面的终端。
一个界面的终端先用 “cd serv.js所在文件夹的目录 ”跳转到该文件夹，用node serv或node serv.js开启后台服务器，把数据传到一个访问地址网页上，等前台服务器开启后拿到数据。
另一个界面的终端中用npm start开启前台服务器，其中含接收后台传到一个访问地址网页的数据。
用cd D:\vsCodeProject\reactjs_homework_day1_vscode\myapp_servlet_data的指令跳转到D:\vsCodeProject\reactjs_homework_day1_vscode\myapp_servlet_data这个目录
node serv 开启后台服务器
在http://localhost:8777/这个访问路径的网页中传了如下的数据（暂时的乱码没关系，接收数据后，显示在前台时，会处理成非乱码）
前台都是默认跳转到http://localhost:3000/这个访问路径的网页（其中已经使用了后台传到http://localhost:8777/这个访问路径的网页中的数据）
点击名字后会控制台打印以下内容，因为我给名字绑定了点击事件
拆分终端的方法
科普
React介绍
React是一个用于前端开发的开源JavaScript库，由Facebook开发。其基于组件的库使您可以为Web应用程序构建高质量的用户界面。
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
由于 React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。
Ant Design（我个人认为也可以简称为antd）介绍
Ant Design是蚂蚁金服出品的开源框架，是一个 ui框架，和 bootstrap 一样是ui框架。里面的组件很完善，开发中后台系统非常方便。分别基于react、vue、angular框架，各自开发了一套 Ant Design 的UI框架。（这里主要讲react框架的 Ant Design）
1、通用组件
1、Button 按钮
2、Icon 图标
3、Typography 排版： 这个是文案的排版
2、布局
1)、Grid 栅格：24 栅格系统，和 bootstrap中的12栅格系统一样的功能。
a、<Row gutter={16}>，给Col 组件之间 添加16像素的间距【原理和bootstrap差不多】。他们之间的间距是以padding撑出来的，所以在 Col 组件上不要使用背景色，最好其它的样式都不要设置吧。
b、两种栅格系统【基础栅格、flex栅格布局】
2)、Layout布局：这个是针对 页面级整体布局
例子
例子1：在VScode中开启后台服务器把数据传到http://localhost:8777这个网页，后面通过开启使用了antd这个ui框架的前台服务器获取并且显示http://localhost:8777这个网页的数据到http://localhost:3000/这个使用npm start后默认的reactjs会跳转的网页
具体内容步骤看上面的内容，我已经详细说明了。
例子2：创建HBuilder中的项目用Ajax接收数据，使用JSONP跨域访问的前台服务器，VScode中传数据的后台服务器
记得先用下面的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');
//创建一个后台服务
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.在组件将要被挂载的时候自动调用componentWillMount方法加载远程数据：
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>获取到的远程数据是:{this.state.txt}</div>);
}
}
ReactDOM.render(<MyHello />,
document.getElementById('app'));
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
