antd，reactjs，nodejs，ajax实现重名验证，下拉框3级联动效果，联级选择【诗书画唱】
前言：
坐了几乎一下午，一动不动地从下午1点写到晚上8点左右，几乎没有动过坐的位置，有时很佩服自己的耐心和毅力，我专栏还是很用心写的，求三连！只点赞和收藏也可以啊！我正在各方面不断自我改进和进化中......
单词：
cascade
目录：
例子
例子1：在Vscode中使用antd中的组件的方法（以表单组件举例）
滑动到该组件展示网页的最后面或直接CTRL+F搜索“API”关键字，之后查看API，含有说明的内容，方便我们使用
一般可改的是label，message的部分，name等的部分一般不改
FormZuJian.js
个人习惯写注释文件
index.js
例子2：reactjs+nodejs ajax实现重名验证，在例子1的基础上实现后（myapp_servlet_data）ajax传数据到http://localhost:6666这个网页，前台（myapp）接收数据，进行重名验证（暂时不连接数据库，以后连接数据库）
FormZuJian.js
index.js
serv2.js
重名验证用于注册，所以这里的代码中的提交按钮的"登录"文本建议读者们使用时更改成"注册"
例子3：reactjs+nodejs ajax实现省份城市县的下拉框联动效果，下拉框默认选中，使用antd。
可以把别人写好的3级联动组件化
Cascade.js
index.js
serv3.js
下拉框默认选中其实很容易，我HBuilder中写好的下拉框默认选择的组件，直接写到VScode中，成为组件，和上面一样的调用就可以了，如果想用Ajax，就把写死的数据改写成Ajax的部分的Mydata等等。
例子4：用onInput事件，ref和innerHTML实现的更好且更简洁的重名验证
ChongMingYanZheng.js
index.js
serv2.js（见例2）
例子
例子1：在Vscode中使用antd中的组件的方法（以表单组件举例）
自己选一个组件
自己在自己创建的自己命名的comp文件夹下创建自己命名的FormZuJian.js文件，也就是写组件相关的内容，自己把从Ant Design（个人习惯将Ant Design简称为antd）中复制的代码拷贝到FormZuJian.js文件中，自己进行如下的改写（注释和添加内容）。
//用来使用Reactjs的React模块——>
import React from 'react';
//npm install jquery --save
//用来写Ajax的jquery模块——>
import $ from 'jquery';
//我添加的代码 END
//自定义组件
class FormZuJian extends React.Component {
render(){
return <Demo />;
}
}
//我添加的代码 END
//我添加的代码——>
export default FormZuJian;
自动跳转到显示组件效果的网页：
滑动到该组件展示网页的最后面或直接CTRL+F搜索“API”关键字，之后查看API，含有说明的内容，方便我们使用
一般可改的是label，message的部分，name等的部分一般不改
FormZuJian.js
import { Form, Input, Button, Checkbox } from 'antd';
//我添加的代码 START
//用来使用Reactjs的React模块——>
import React from 'react';
//npm install jquery --save
//用来写Ajax的jquery模块——>
import $ from 'jquery';
//我添加的代码 END
const layout = {
labelCol: {
span: 8,
},
wrapperCol: {
span: 16,
},
};
const tailLayout = {
wrapperCol: {
offset: 8,
span: 16,
},
};
const Demo = () => {
const onFinish = (values) => {
console.log('Success:', values);
};
const onFinishFailed = (errorInfo) => {
console.log('Failed:', errorInfo);
};
return (
<Form
{...layout}
name="basic"
initialValues={{
remember: true,
}}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
<Form.Item
label="用户名"
name="username"
rules={[
{
required: true,
message: '请输入你的用户名!',
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="密码"
name="password"
rules={[
{
required: true,
message: '请输入你的密码!',
},
]}
>
<Input.Password />
</Form.Item>
<Form.Item {...tailLayout} name="remember" valuePropName="checked">
<Checkbox>记住我</Checkbox>
</Form.Item>
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
登录
</Button>
</Form.Item>
</Form>
);
};
//我添加的代码 START
//自定义组件
class FormZuJian extends React.Component {
render(){
return <Demo />;
}
}
//我添加的代码 END
//我添加的代码——>
export default FormZuJian;
//antd中的源码——>
// ReactDOM.render(<Demo />, mountNode);
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';
//个人添加的导入组件的代码部分 END
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<FormZuJian />,
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();
例子2：reactjs+nodejs ajax实现重名验证，在例子1的基础上实现后（myapp_servlet_data）ajax传数据到http://localhost:6666这个网页，前台（myapp）接收数据，进行重名验证（暂时不连接数据库，以后连接数据库）
Success: {username: "诗书画唱", password: "11", remember: true}
遇到的报错：
Error: Objects are not valid as a React child (found: object with keys {name, pwd}). If you meant to render a collection of children, use an array instead.
错误:对象作为反应子对象无效(找到:键为{name，pwd}的对象)。如果您打算呈现一个子集合，请改用数组。
先尝试在成功例子的表单中打印获取的数据：
例子2做了如下的改动，其余和例子1一样：
把data的内容改变了
突然发现从VScode中可以下载的一些插件还挺有用的
运行方法
FormZuJian.js
import { Form, Input, Button, Checkbox } from 'antd';
//我添加的代码 START
//用来使用Reactjs的React模块——>
import React from 'react';
//npm install jquery --save
//用来写Ajax的jquery模块——>
import $ from 'jquery';
//我添加的代码 END
const layout = {
labelCol: {
span: 8,
},
wrapperCol: {
span: 16,
},
};
const tailLayout = {
wrapperCol: {
offset: 8,
span: 16,
},
};
const Demo = () => {
const onFinish = (values) => {
console.log('Success:', values);
//自己加入的代码 START
//自己写过的错误代码： console.log(this.state.myData);
$.ajax({
url: 'http://localhost:8777/?callback=?',
type: 'POST',
dataType: 'jsonp',
success: (data) => {
// this.setState({
// myData: data
// });
let i = 1;
console.log(data)
data.map(o => {
console.log("使用map遍历处理的data中的name的值：" + o.name);
if (o.name == values.username) {
i = i * 0;
}
else if (o.name != values.username) {
i = i * 3;
}
});
console.log('输入的用户名是' + values.username);
console.log('输入的用户密码是' + values.password);
console.log('是否记住：' + values.remember);
// if( values.username==data.name){
// console.log('重名验证的结果是:你已经重名了');
// }
// if( values.username!=data.name){
// console.log('重名验证的结果是:你没有重名');
// }
console.log('i的值是' + i);
if (i == 0) {
alert('重名验证的结果是:你已经重名了');
console.log('重名验证的结果是:你已经重名了');
}
if (i % 3 == 0 && i != 0) {
alert('重名验证的结果是:你没有重名');
console.log('重名验证的结果是:你没有重名');
}
if (i == 1) {
alert('重名验证的结果是:你还没有输入内容！');
console.log('重名验证的结果是:你还没有输入内容！');
}
}
});
//自己加入的代码 END
};
const onFinishFailed = (errorInfo) => {
console.log('Failed:', errorInfo);
};
return (
<Form
{...layout}
name="basic"
initialValues={{
remember: true,
}}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
<Form.Item
label="用户名"
name="username"
rules={[
{
required: true,
message: '请输入你的用户名!',
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="密码"
name="password"
rules={[
{
required: true,
message: '请输入你的密码!',
},
]}
>
<Input.Password />
</Form.Item>
<Form.Item {...tailLayout} name="remember" valuePropName="checked">
<Checkbox>记住我</Checkbox>
</Form.Item>
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit" >
登录
</Button>
</Form.Item>
</Form>
);
};
//我添加的代码 START
//自定义组件
class FormZuJian extends React.Component {
//用Ajax接收后台放到网页的数据的代码部分 START
constructor() {
super();
this.state = {
myData: []
}
}
componentWillMount() {
//当组件将要被挂载到页面时获取数据：
// $.ajax({
// url: 'http://localhost:8777/?callback=?',
// type: 'POST',
// dataType: 'jsonp',
// success: (data) => {
// this.setState({
// myData: data
// });
// console.log(data)
// }
// });
}
//用Ajax接收后台放到网页的数据的代码部分 END
render() {
return <Demo />;
}
}
//自己写过的错误代码： <div><Demo />{this.state.myData}</div> ;
//我添加的代码 END
//我添加的代码——>
export default FormZuJian;
//antd中的源码——>
// ReactDOM.render(<Demo />, mountNode);
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';
//个人添加的导入组件的代码部分 END
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<FormZuJian />,
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 /> ：表单组件*/
serv2.js
let http = require('http');
let url = require('url');
http.createServer(function(req,res){
let ps = url.parse(req.url,true).query;
const data = [
{
name: '三连',
pwd: 666
},
{
name: '关注',
pwd:888
},
{
name: '诗书画唱',
pwd:999
},
];
res.end(ps.callback + '(' + JSON.stringify(data) + ')');
}).listen(8777);
console.log('http://localhost:8777');
例子3：reactjs+nodejs ajax实现省份城市的下拉框联动效果，下拉框默认选中，使用antd。
cascade
运行方法
例子3和例子2很多操作都相同
可以修改数据为中文和3级联动变成2级联动的方法
可以把别人写好的3级联动组件化
运行2个服务器
Cascade.js
import { Cascader } from 'antd';
//我添加的代码 START
//用来使用Reactjs的React模块——>
import React from 'react';
//npm install jquery --save
//用来写Ajax的jquery模块——>
import $ from 'jquery';
//我添加的代码 END
/*我注释掉的源码 START
下面的内容改写到用了nodejs的后台的js文件中和前台中的Cascade.js级联选择组件（下拉框联动）对应。
const options = [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
},
],
},
],
},
];
我注释掉的源码 END*/
function onChange(value) {
console.log(value);
}
//我添加的代码 START
class Cascade extends React.Component {
//用Ajax接收后台放到网页的数据的代码部分 START
constructor() {
super();
this.state = {
myData: []
}
}
componentWillMount() {
$.ajax({
url: 'http://localhost:8777/?callback=?',
type: 'POST',
dataType: 'jsonp',
success: (data) => {
this.setState({
myData: data
});
console.log(data)
}
});
}
//用Ajax接收后台放到网页的数据的代码部分 END
render() {
return <Cascader options={this.state.myData} onChange={onChange} placeholder="请选择" />;
}
}
export default Cascade;
//我添加的代码 END
//我注释掉的源码 START
// ReactDOM.render(
// <Cascader options={options} onChange={onChange} placeholder="Please select" />,
// mountNode,
// );
//我注释掉的源码 END
index.js
// import React from 'react';
// import ReactDOM from 'react-dom';
// import './index.css';
// import App from './App';
// //导入Hello组件
// import ZuJianName1 from './comp/ZuJianName1';
// import reportWebVitals from './reportWebVitals';
// ReactDOM.render(
// <ZuJianName1 />,
// 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();
/******************/
//目录——>
// 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';
//个人添加的导入组件的代码部分 END
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<Cascade />,
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 /> ：联级选择（下拉框联动）组件
*/
serv3.js
let http = require('http');
let url = require('url');
http.createServer(function(req,res){
let ps = url.parse(req.url,true).query;
const data = [
{
value: '浙江',
label: '浙江',
children: [
{
value: '杭州',
label: '杭州',
children: [
{
value: '富阳',
label: '富阳',
},
{
value: '临安',
label: '临安',
},
],
},
{
value: '丽水',
label: '丽水',
children: [
{
value: '景宁',
label: '景宁',
},
],
},
],
},
{
value: '江苏',
label: '江苏',
children: [
{
value: '南京',
label: '南京',
children: [
{
value: '高淳',
label: '高淳',
},
],
},
],
},
];
res.end(ps.callback + '(' + JSON.stringify(data) + ')');
}).listen(8777);
console.log('http://localhost:8777');
下拉框默认选中其实很容易，我HBuilder中写好的下拉框默认选择的组件，直接写到VScode中，成为组件，和上面一样的调用就可以了，如果想用Ajax，就把写死的数据改写成Ajax的部分的Mydata等等。
还可以给父组件加很多属性，state状态机等等，看个人需求吧，比较容易。
例子4：用onInput事件，ref和innerHTML实现的更好且更简洁的重名验证
ChongMingYanZheng.js
import React from 'react';
//npm install jquery --save
import $ from 'jquery';
class ChongMingYanZheng extends React.Component{
constructor(){
super();
this.state={
txt:'aa'
}
}
componentWillMount(){
this.vv=$.ajax({
url:'http://localhost:8777/?callback=?',
type:'POST',
dataType:'jsonp',
success:data=>{
//console.log(data.msg);
this.setState({
txt:data.name
})
}
})
}
componentWillUnmount(){
//当组件被卸载时,取消未完成的请求
this.vv.abort();
}
change=()=>{
this.vv=$.ajax({
url:'http://localhost:8777/',
type:'POST',
dataType:'jsonp',
success:(data) => {data.map(o=>{
console.log(o.name);
if(this.refs.in.value==o.name){
this.refs.div1.innerHTML='用户名已存在';
}
else if(this.refs.in.value!=o.name&&this.refs.in.value!==""){
this.refs.div1.innerHTML='该用户名可用';
}
else if(this.refs.in.value==""){
this.refs.div1.innerHTML='用户名不可以为空';
}
})}
})
}
render(){
return ( <div><input type='text'onInput={this.change} ref='in' />
<div ref='div1' ></div>
</div> )
}
}
export default ChongMingYanZheng;
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';
import ChongMingYanZheng from './comp/ChongMingYanZheng';
//个人添加的导入组件的代码部分 END
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<ChongMingYanZheng/>,
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的表格组件
serv2.js（见例2）
