泛泛之素

前端的image制作流程其实跟后端的也没啥区别，首先通过build生成静态文件，也就是dist文件夹中的文件，然后通过放到nginx的image中，配置nginx的配置文件，进行包装即可。1. Dockerfile这里dist文件夹，是项目build之后生成的静态文件，一般是npm buildEXPOSE 指令是声明运行时容器提供服务端口，这只是一个声明。在 Dockerfile 中写入这样的声明有两个好处，一个是帮助镜像使用者理解这个镜像服务的守护端口，以方便配置映射；另一个用处则是在运行时使用随

看到了react-three-fiber作者展示的作品https://codesandbox.io/embed/r3f-moksha-f1ixt，心声敬佩，大呼卧草，就想能不能用这个套子做一个数据展示的东西，于是搞起。先看一下效果，虽然写的跟大佬的比就是shi，但是还是记录一下知识点：图表部分使用的是plotly1. 滚动实现通过滚动栏控制position的y通过offset和factor来控制各个block的位置，以及位置变更方向function Block({ children,

要说Three.js要先提一下WebGl:WebGl是openGl的前端实现，Three.js是WebGl的进一步封装，react-three-fiber是Three.js进一步封装用于react.js前端架构。WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。1. react-three-fiber只用reactjs时更方便的使用threejs，有一些封装好的组建直

reactor等响应式可以轻松的传递流数据，想起了spring的webflux也支持以rsocket，它可以通过websocket或是tcp的方式进行数据传输，正好有java版本和js版本，且spring也支持rsocket，下面尝试是哟给你rsocket模拟天气数据的传输，前端接到数据通过折线图展示。1. 后端部分1.1 model实现创建一个weather类用于传输包装数据包含时间、风速、风向、温度数据/** * @author: ffzs * @Date: 2020/9/2 下午5:

有这样的需求，需要批量新增数据，但是一个一个的表单填写太麻烦，可以通过excel将数据汇总，然后通过上传的方式显示出来，在前端页面进行勾选，实现批量上传，需要实现一下功能：新增上传页面的切换上传的文件通过表格展示通过勾选将选定数据进行上传效果展示1.添加API表处理excel逻辑添加controller处理excel跟user的主体逻辑基本相同@PostMapping(value = "/upload/url/excel", consumes = MediaType.MULTIPA

不得不说umi这个access功能还是比较实用的，现在鉴权的逻辑写起来要方便的多。我们可以通过access轻松实现很多功能：通过不同权限展示不同的菜单在组建中展示不同的内容对写入功能进行限制做一个简单的实践，下面是三个用户不同权限，以及不同权限能达到的目的：用户权限功能ffzsadmin可以查看所有内容包括权限，修改人等，以及添加用户，修改用户，删除用户dzit可以看到部分用户信息，可以修改用户部分信息vincenthr只能查看用户部分信息，不可修

后台管理系统的excel导出功能，以及使用excel进行批量导入都是必不可少的功能，本篇主要介绍内容如下：java后端 excel的读写excel类型判断以及通过反射适配class后端接收upload服务逻辑实现后端download服务逻辑前端upload组建使用前端download配置先上效果图：1. 读取Excel文件1.1 添加依赖通过使用poi进行excel文件的解析：implementation 'org.apache.poi:poi:4.0.1'implementa

本篇配合antdpro的 ProTable实现简单的CRUD操作：官方网站更改了ProTable获取数据改写UpdateForm内容，实现新增用户更改用户信息删除用户信息修改删除需要admin权限处理效果图1. 设置自己的tableItem跟据自己的数据编写Table使用的tableItem类：export interface UserDetails { key: number; username: string; avatar: string; createBy:

本篇使用l研究一下ayout中的一些设置，以及locale使用，更改标题，添加logo，更改样式样式功能。点我进入官方教程内容分为一下几点：更改标题更改logoroute配置locale修改样式设置footer修改rightContent美化登录页面1. 更改标题，logo通过config文件夹的defaultSetting文件进行layout设置的更改，也可以在config.ts文件中更改，config中的修改会覆盖setting中内容title指的就是logo旁边的名

antdpro是蚂蚁金服开发的后台管理框架模板，继承了许多组建，可以满足快速开发，组建使用的antd，组建种类比较多，功能比较全，设计也挺好看的，但是封装程度有点高，用起来可能不是很灵活，一些功能需要研究一下。1. 创建antd项目官方创建项目说明1.1 命令行键入：yarn create umi1.2 选择Pro v5：这时项目文件全部拉下来了：1.3 下载依赖通过yarn下载，时间会比较长yarn1.4 运行项目通过键入yarn start启动项目通过浏览器

在之前的文章Spring WebFlux (7): Springboot Security+jwt登录鉴权实现了后端的鉴权登录，只是通过postman进行了测试，本篇以此为基础通过reactjs和umijs架构编写一个前段登录界面，简单测试登录，页面如下功能：登入，访问后端api获取token以及权限信息登入后实现跳转token信息和roles放入localStorage中其他路由设置访问权限，通过wrappers进行权限判断登出，擦除localStorage信息，跳转到login界面技术栈

系列文章传送门：react 进阶必学 hook （一）：useState 来一碗大碗宽面react 进阶必学 hook （二）：useEffect 专治不吃宽面react 进阶必学 hook （三）：useContext 面馆分店开张了react 进阶必学 hook （四）：自定义hookuseReducer使用围绕state，如果存在多个功能操作改state进行状态的更改，且更改状态时用得方法彼此独立，那么使用useState就会比较麻烦，且逻辑容易写的比较分散不方便管理；这时我们可以使用u

系列文章传送门：react 进阶必学 hook （一）：useState 来一碗大碗宽面react 进阶必学 hook （二）：useEffect 专治不吃宽面react 进阶必学 hook （三）：useContext 面馆分店开张了什么是自定义hook官网原话如下:自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook，自定义 Hook 是一种自然遵循 Hook 设计的约定，而并不是 React 的特性自定义hook有一下特性或是约定：自定义h

react 中组件上下文状态的传递，以及hook useContext的使用

介绍reac中hook功能中的useEffect功能，结合面馆的例子形象的解释了useEffect的作用，以及如何实现，如何控制，注意点等

react 进阶必学 hook （一）：useState 来一碗大碗宽面React hooks useState

antd 蚂蚁金服组件库官方文档：https://ant.design/docs/react/introduce风格：reactstrap bootstrap4的react实现文档：https://reactstrap.github.io/components/navs/风格：Blueprint 组件类型和风格都比较不错文档：https://blueprintjs.com/do...

问题：使用vscode进行写react时会不显示提示：解决方法：1、打开：文件 -> 首选项 -> 联机服务设置2、勾选 禁用类型获取3、出现提示，解决问题...