![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
umi
泛泛之素
君子不器
展开
-
Spring WebFlux + React搭建后台管理系统(14):项目前端docker image并实现云端部署
前端的image制作流程其实跟后端的也没啥区别,首先通过build生成静态文件,也就是dist文件夹中的文件,然后通过放到nginx的image中,配置nginx的配置文件,进行包装即可。1. Dockerfile这里dist文件夹,是项目build之后生成的静态文件,一般是npm buildEXPOSE 指令是声明运行时容器提供服务端口,这只是一个声明。在 Dockerfile 中写入这样的声明有两个好处,一个是帮助镜像使用者理解这个镜像服务的守护端口,以方便配置映射;另一个用处则是在运行时使用随原创 2020-09-17 19:54:42 · 392 阅读 · 0 评论 -
Spring WebFlux + React搭建后台管理系统(11):尝试RSocket数据流传输
reactor等响应式可以轻松的传递流数据,想起了spring的webflux也支持以rsocket,它可以通过websocket或是tcp的方式进行数据传输,正好有java版本和js版本,且spring也支持rsocket,下面尝试是哟给你rsocket模拟天气数据的传输,前端接到数据通过折线图展示。1. 后端部分1.1 model实现创建一个weather类用于传输包装数据包含时间、风速、风向、温度数据/** * @author: ffzs * @Date: 2020/9/2 下午5:原创 2020-09-03 13:57:50 · 1151 阅读 · 2 评论 -
Spring WebFlux + React搭建后台管理系统(9):通过上传excel实现批量新增
有这样的需求,需要批量新增数据,但是一个一个的表单填写太麻烦,可以通过excel将数据汇总,然后通过上传的方式显示出来,在前端页面进行勾选,实现批量上传,需要实现一下功能:新增上传页面的切换上传的文件通过表格展示通过勾选将选定数据进行上传效果展示1.添加API表处理excel逻辑添加controller处理excel跟user的主体逻辑基本相同@PostMapping(value = "/upload/url/excel", consumes = MediaType.MULTIPA原创 2020-09-01 23:13:20 · 677 阅读 · 0 评论 -
Spring WebFlux + React搭建后台管理系统(8):通过access鉴权
不得不说umi这个access功能还是比较实用的,现在鉴权的逻辑写起来要方便的多。我们可以通过access轻松实现很多功能:通过不同权限展示不同的菜单在组建中展示不同的内容对写入功能进行限制做一个简单的实践,下面是三个用户不同权限,以及不同权限能达到的目的:用户权限功能ffzsadmin可以查看所有内容包括权限,修改人等,以及添加用户,修改用户,删除用户dzit可以看到部分用户信息,可以修改用户部分信息vincenthr只能查看用户部分信息,不可修原创 2020-08-31 22:02:33 · 500 阅读 · 0 评论 -
Spring WebFlux + React搭建后台管理系统(7): 实现excel文件上传下载
后台管理系统的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原创 2020-08-31 20:45:13 · 1599 阅读 · 1 评论 -
Spring WebFlux + React搭建后台管理系统(5): antd pro v5 ProTable使用
本篇配合antdpro的 ProTable实现简单的CRUD操作:官方网站更改了ProTable获取数据改写UpdateForm内容,实现新增用户更改用户信息删除用户信息修改删除需要admin权限处理效果图1. 设置自己的tableItem跟据自己的数据编写Table使用的tableItem类:export interface UserDetails { key: number; username: string; avatar: string; createBy:原创 2020-08-29 22:19:09 · 1420 阅读 · 0 评论 -
Spring WebFlux + React搭建后台管理系统(4): antd pro v5 设置
本篇使用l研究一下ayout中的一些设置,以及locale使用,更改标题,添加logo,更改样式样式功能。点我进入官方教程内容分为一下几点:更改标题更改logoroute配置locale修改样式设置footer修改rightContent美化登录页面1. 更改标题,logo通过config文件夹的defaultSetting文件进行layout设置的更改,也可以在config.ts文件中更改,config中的修改会覆盖setting中内容title指的就是logo旁边的名原创 2020-08-28 21:58:34 · 1358 阅读 · 0 评论 -
Spring WebFlux + React搭建后台管理系统(3): antd pro v5实现登入登出
antdpro是蚂蚁金服开发的后台管理框架模板,继承了许多组建,可以满足快速开发,组建使用的antd,组建种类比较多,功能比较全,设计也挺好看的,但是封装程度有点高,用起来可能不是很灵活,一些功能需要研究一下。1. 创建antd项目官方创建项目说明1.1 命令行键入:yarn create umi1.2 选择Pro v5:这时项目文件全部拉下来了:1.3 下载依赖通过yarn下载,时间会比较长yarn1.4 运行项目通过键入yarn start启动项目通过浏览器原创 2020-08-28 14:26:56 · 1911 阅读 · 2 评论 -
React + UmiJS: 实现简单登录鉴权
在之前的文章Spring WebFlux (7): Springboot Security+jwt登录鉴权实现了后端的鉴权登录,只是通过postman进行了测试,本篇以此为基础通过reactjs和umijs架构编写一个前段登录界面,简单测试登录,页面如下功能:登入,访问后端api获取token以及权限信息登入后实现跳转token信息和roles放入localStorage中其他路由设置访问权限,通过wrappers进行权限判断登出,擦除localStorage信息,跳转到login界面技术栈原创 2020-08-19 14:08:10 · 9625 阅读 · 6 评论