基于RuoYI-App完善基础框架

ZhangY1217

于 2024-09-14 14:35:47 发布

阅读量115

点赞数 3

文章标签： vue uniapp

本文链接：https://blog.csdn.net/ZhangY1217/article/details/142256726

版权

本框架基于ruoyiapp进而完善相关基础功能，便于快速开发
框架地址https://gitee.com/zy1217/ruoyi-app-vue3

环境

vue3、 pinia、vite
tailwindcss原子化css、autoprefixer、postcss
i18n和i18next-scanner、crc

功能实现

动态菜单
全局弹窗（对话框、错误提示框、更新弹窗）
多语言（多语言scan和多语言占位符）
全局指令：扫码（v-scan）、权限、角色
菜单搜索和快捷菜单

开发过程中的问题点

taildwind编译后的css包含自定义变量，导致打包后的APP在部分安卓机型中样式丢失，在tailwind.config.js的corePlugins禁用相关插件,其中grid布局里面的语法不适配部分安卓机型，需要自己全局定义grid布局样式

	corePlugins: {
		//以下部分安卓机型不适配--生成的css包含自定义变量，安卓机无法识别
		preflight: false,
		container: false,
		backgroundOpacity: false,//去掉背景里的自定义变量
		textOpacity: false,
		borderOpacity:false,
		gridTemplateColumns:false,
		gridTemplateRows:false,
		gradientColorStops:false,
		// 以下功能小程序不支持  
		space: false, // > 子节点选择器  
		divideWidth: false,
		divideColor: false,
		divideStyle: false,
		divideOpacity: false
	}

使用uni.uploadFile实现批量文件上传(这里和网页的上传逻辑有一点不一样)，其中files的参数如下：

这里的name是和后端的参数对应的，所以我们如果要批量上传，只能让files数组中的name是唯一的不能重复，这样就会导致后端定义的参数files 接收不到，如下图这样定义

public class Param: PagerInfo
{
    public string batch {  get; set; }
    public string fileType {  get; set; }
    public List<IFormFile> files {  get; set; }
}

这里后端接收，就需要特殊处理一下了，首先通过表单提交的数据都会在Form对象中，其中提交的文件都会在Form的Files中，那么接口可以通过以下方式变化一下

 public IActionResult uploadAttachment([FromForm] Param parm)
 {
     if (parm.files == null || parm.files.Count == 0)
     {
         if(HttpContext.Request.Form.Files.Count==0)
            throw new CustomException(ResultCode.PARAM_ERROR, _localizer["uploadfile_not_null"]);
         parm.files = (List<IFormFile>?)HttpContext.Request.Form.Files;
     }
     var response = _QmsZjiqcBaseService.uploadAttachment(parm);
     return SUCCESS(response);
 }