前端访问地址nginx

前台访问地址dockerNGINX

知识日志

对AntdPro UI一些方面的封装

登陆页面

侧边栏工具栏

全屏界面

组件（二维码||条形码）

公共组件

地图

table

echarts

React中使用AntV-G6

工具类util.js

页面常用工具方法封装

详细会在博客

安装运行

1.下载或克隆项目源码

2.yarn 或者 npm安装相关包文件(使用yarn或者淘宝镜像源）

// 首推荐使用yarn装包
yarn or npm or cnpm istall

3.启动项目

yarn start or npm start

4.打包项目

yarn build or npm run build

5.样式替换

src/antd-style 目录下替换node_modules/antd/es/style

官方antd组件版本更新日志

更新日志

npm常用命令

npm -v
查看npm当前版本

node -v
查看node当前版本

where node/npm
查看node或者npm位置

npm show 包名 versions
查看指定包的所有版本

npm ls 包名
查看当前项目中应用的包版本

npm install 包名 -s 或者 --save
下载包至本地并写入dependencies

npm install 包名 -g
全局安装

npm install -d 或者--save-dev
下载包至本地并写入devDependencies

npm install 包名@latest -g
下载最新版本的包

npm uninstall <package>
删除 node_modules 目录下面的包（package）

npm uninstall --save <package>
如需从 package.json 文件中删除依赖，需要在命令后添加参数 --save

node

 sudo npm install -g n
 安装 n 工具，这个工具是专门用来管理node.js版本的，别怀疑这个工具的名字，是他是他就是他，他的名字就是 "n"
 
 sudo n stable
安装最新版本的node.js

201905271833

• 登陆用户存入sessionstorage（storage工具）
• 登录界面样式修改
• 删除pacage.json提交前校验

"husky": {
    "hooks": {
      "pre-commit": "npm run lint-staged"
    }
  },
  "lint-staged": {
    "**/*.less": "stylelint --syntax less",
    "**/*.{js,jsx}": "npm run lint-staged:js",
    "**/*.{js,ts,tsx,json,jsx,less}": [
      "node ./scripts/lint-prettier.js",
      "git add"
    ]
  },

201905292042

• 登录界面
• 未登录跳转至首页

201906010950

• 数据字典通用组件

201906071620

• 数据字典bug fixed，新增工具方法数据字典码值=>数据字典名称(数据字典翻译)

201906112002

• 详情页使用DescriptionList组件样式修改
• 更新antd组件至"antd": "^3.19.3"

201906151625

全屏||退出全屏 纯js代码
toggleFullScreen = (flag) => {
    this.setState({ fullFlag: flag });
    if (
      !document.fullscreenElement &&
      !document.mozFullScreenElement &&
      !document.webkitFullscreenElement &&
      !document.msFullscreenElement
    ) {
      if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen();
      } else if (document.documentElement.msRequestFullscreen) {
        document.documentElement.msRequestFullscreen();
      } else if (document.documentElement.mozRequestFullScreen) {
        document.documentElement.mozRequestFullScreen();
      } else if (document.documentElement.webkitRequestFullscreen) {
        document.documentElement.webkitRequestFullscreen(
          Element.ALLOW_KEYBOARD_INPUT
        );
      }
    } else if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }

201906161844

新增在react中生成二维码||条形码

201906181436

新增在react中使用地图组件
新增回到顶部backtop组件
table样式修改
内容区域样式修改

201906192047

SpringBoot与AntDPro整合,初步实现前后端分离

201907170900

全屏bug fixed  echarts树图

201908171520

antv-g6的使用

201908201427

antd Card&&pagination 样式重构

201909031030

金钱组件
今日头条西瓜播放器https://github.com/bytedance/xgplayer

Spring-Boot整合AntD-Pro

推荐依赖模块

• screenfull(全屏插件)
• react-qmap(一个对腾讯web地图简单封装的React组件)
• react-amap(基于 React 封装的高德地图组件)
• animate.css(css动画库)
• JsBarcode(前端JavaScript条形码生成解决方案)
• react-barcode(在React中生成条形码)
• qrcode.react(A React component to generate QR codes)

正完善。。。。待续。。。