https://github.com/xyzdata/git/issues/3
# todo
ant design
https://ant.design/docs/react/introduce-cn
Last active
August 11, 2022 15:01
-
-
Save xyzdata/f2b41a63feb21081e9f51d464d7434d7 to your computer and use it in GitHub Desktop.
Ant-Design
https://github.com/kenberkeley/redux-simple-tutorial/blob/master/middleware-onion-model.md
Redux 与 Express 的中间件执行流程一致：层层进入，层层冒出，就像从中间穿过洋葱般的体验
§ === §
PropTypes
$ npm i -S prop-types
import PropTypes from 'prop-types'; // ES6
var PropTypes = require('prop-types'); // ES5 with npm MyComponent.propTypes = {
// You can declare that a prop is a specific JS primitive. By default, these
// are all optional.
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
// Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types.
optionalNode: PropTypes.node,
// A React element.
optionalElement: PropTypes.element,
// You can also declare that a prop is an instance of a class. This uses
// JS's instanceof operator.
optionalMessage: PropTypes.instanceOf(Message),
// You can ensure that your prop is limited to specific values by treating
// it as an enum.
optionalEnum: PropTypes.oneOf(['News', 'Photos']),
// An object that could be one of many types
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]),
// An array of a certain type
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
// An object with property values of a certain type
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
// An object taking on a particular shape
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}),
// You can chain any of the above with `isRequired` to make sure a warning
// is shown if the prop isn't provided.
requiredFunc: PropTypes.func.isRequired,
// A value of any data type
requiredAny: PropTypes.any.isRequired,
// You can also specify a custom validator. It should return an Error
// object if the validation fails. Don't `console.warn` or throw, as this
// won't work inside `oneOfType`.
customProp: function (props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
},
// You can also supply a custom validator to `arrayOf` and `objectOf`.
// It should return an Error object if the validation fails. The validator
// will be called for each key in the array or object. The first two
// arguments of the validator are the array or object itself, and the
// current item's key.
customArrayProp: PropTypes.arrayOf(function (propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
})
};
tree
Project Structure
$ tree --help
$ tree
.
├── build/ # webpack config files
│ └── ...
├── config/
│ ├── index.js # main project config
│ └── ...
├── src/
│ ├── main.js # app entry file
│ ├── App.vue # main app component
│ ├── components/ # ui components
│ │ └── ...
│ └── assets/ # module assets (processed by webpack)
│ └── ...
├── static/ # pure static assets (directly copied)
├── test/
│ └── unit/ # unit tests
│ │ ├── specs/ # test spec files
│ │ ├── index.js # test build entry file
│ │ └── karma.conf.js # test runner config file
│ └── e2e/ # e2e tests
│ │ ├── specs/ # test spec files
│ │ ├── custom-assertions/ # custom assertions for e2e tests
│ │ ├── runner.js # test runner script
│ │ └── nightwatch.conf.js # test runner config file
├── .babelrc # babel config
├── .postcssrc.js # postcss config
├── .eslintrc.js # eslint config
├── .editorconfig # editor config
├── index.html # index.html template
└── package.json # build scripts and dependencies
tree command Linux
https://www.cyberciti.biz/faq/linux-show-directory-structure-command-line/
$ sudo apt-get install tree
tree command Windows
https://www.computerhope.com/treehlp.htm
# TREE [Drive:[[Path] [/F] [/A]
Drive:\Path
> Drive and directory containing disk for display of directory structure.
/F
> Displays file names in each directory.
/A
> ext characters used for linking lines, instead of graphic characters.
/a is used with code pages that do not support graphic characters and to send output to printers that do not properly interpret graphic characters.
https://www.computerhope.com/jargon/t/treestru.htm
https://www.computerhope.com/unix/tree.htm
https://www.computerhope.com/dirhlp.htm
$ tree
React SPA登录与身份认证
JWT
http://blog.csdn.net/awaw00/article/details/54926125
admin-on-rest
Input & Row & Col & Cascader & Switch
Search = Input.Search
https://ant.design/components/input-cn/#API
<Cascader options={options} onChange={onChange} />
https://ant.design/components/cascader-cn/#API
<Cascader
size="large"
style={{width: '100%'}}
options={city}
placeholder="Please pick an address"
onChange={handleChange.bind(null, 'address')}
/>https://ant.design/components/grid-cn/#API
<Row gutter={24}>
<Col
{...ColProps}
xl={{span: 4}}
md={{span: 6}}
>
{
getFieldDecorator('name', {initialValue: name})(
<Search
placeholder="Search Name"
size="large"
onSearch={handleSubmit}
/>
)
}
</Col>
</Row>
Select
Option = Select.Option;
https://ant.design/components/select-cn/
https://ant.design/components/input-cn/#API
const selectBefore = (
<Select defaultValue="Http://" style={{ width: 80 }}>
<Option value="Http://">Http://</Option>
<Option value="Https://">Https://</Option>
</Select>
);
const selectAfter = (
<Select defaultValue=".com" style={{ width: 70 }}>
<Option value=".com">.com</Option>
<Option value=".jp">.jp</Option>
<Option value=".cn">.cn</Option>
<Option value=".org">.org</Option>
</Select>
);
<Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />
Radio
Mock
https://github.com/nuysoft/Mock/wiki/Getting-Started
'roleId|1': [1, 2, 3],
'roleName|1': function() {
return ["管理员", "教师", "学生"][this.roleId - 1]
},
const arr = ["管理员", "教师", "学生"];
arr[0];
arr[1];
arr[2];https://gist.github.com/xgqfrms-GitHub/94607b60e14b998eab87ca8ab86588e4#gistcomment-2141365
fake.js
// 使用 Mock
import Mock from 'mockjs';
let data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'users|1-100': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 101
}]
});
// 输出结果
console.log(
JSON.stringify(data, null, 4)
);
// JSON.stringify(value[, replacer[, space]]);
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
phone & Regex
phone: /^1[34578]\d{9}$/
https://regexper.com/#%2F%5E1%5B34578%5D%5Cd%7B9%7D%24%2Fg
let usersListData = Mock.mock({
'data|80-100': [
{
id: '@id',
name: '@name',
nickName: '@last',
phone: /^1[34578]\d{9}$/,
'age|11-99': 1,
address: '@county(true)',
isMale: '@boolean',
email: '@email',
createTime: '@datetime',
avatar () {
return Mock.Random.image('100x100', Mock.Random.color(), '#ccc', 'png', this.nickName.substr(0, 1));
}
}
]
});
@ 占位符。
https://github.com/nuysoft/Mock/wiki/Syntax-Specification
isMale: '@boolean',
// 'isMale|1': ['Man', 'Woman'],
// shit api
'bm': '@boolean',
'isMale|1': function() {
return ["Man", "Woman"][this.bm + 0]
},
// 连字符转驼峰
String.prototype.hyphenToHump = function() {
return this.replace(/-(\w)/g, function() {
return arguments[1].toUpperCase()
});
};
// 驼峰转连字符
String.prototype.humpToHyphen = function() {
return this.replace(/([A-Z])/g, '-$1').toLowerCase();
};
eslint error
jsx-eslint/eslint-plugin-react#447
// redux constants
export const PAGE_SIZE = 3;
// [eslint] Parsing error: The keyword 'export' is reserved.eslintrc
{
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"modules": true,
"experimentalObjectRestSpread": true
}
},
"plugins": [
"react"
],
"extends": ["eslint:recommended", "plugin:react/recommended"],
"rules": {
"comma-dangle": 0
},
"settings": {
"react": {
"pragma": "React",
"version": "15.4.2"
}
}
}
form layout
https://ant.design/components/form-cn/#components-form-demo-layout
inline
// Form
mode="inine" ???
in brief
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
企业级后台管理系统
https://github.com/pmg1989/dva-admin
https://github.com/pmg1989/dva-admin#注意事项
https://github.com/mzabriskie/axios
目录结构