文章目录
- 1. 使用糊涂工具,将时间字符串转化为LocalDateTime类型
- 2. Date类型转换LocalDate类型
- 3. jdk8 LocalDateTime获取当前时间和前后推时间
- 4. echarts图中显示表格是需要添加宽高
- 5. 前端往后端传值时,需要转一下对象再往后端传
- 6. 使用 `value-format="yyyy-MM-dd HH:mm:ss"`来指定element生成的时间格式
- 7. 使用stream流将结果按类型分组
- 8. 业务类型下拉框
- 9. 使用validator做校验
- 10. 打开修改表单数据回显问题
- 11. 点击按钮上传文件
- 12. 使用 EasyPoi 来实现 Excel 文件的导出
- 13. vue查看插件版本和安装指定版本
- 14. 浏览器本地存储
- 15. vue路由使用
- 16. 图片保存到本地
1. 使用糊涂工具,将时间字符串转化为LocalDateTime类型
public static LocalDateTime stringToLocalDateTime(String stringTime){
//CST格式的时间 Mon Oct 24 10:18:54 CST 202
//正常格式的时间 yyyy-MM-dd HH:mm:ss
//对于不知道是什么时间格式的字符串进行LocalDateTime的时间转换,这里介绍使用hutool包,将字符串先转换成DateTime,再转LocalDateTime
DateTime parse = DateUtil.parse(stringTime);
Instant instant = parse.toInstant();
ZoneId zoneId = ZoneId.systemDefault();
return instant.atZone(zoneId).toLocalDateTime();
}
2. Date类型转换LocalDate类型
/**
* 使用糊涂工具,将时间字符串转化为LocalDateTime类型
* @param stringTime 时间字符串
* @return LocalDateTime
*/
public static LocalDateTime stringToLocalDateTime(String stringTime){
//CST格式的时间 Mon Oct 24 10:18:54 CST 202
//正常格式的时间 yyyy-MM-dd HH:mm:ss
//对于不知道是什么时间格式的字符串进行LocalDateTime的时间转换,这里介绍使用hutool包,将字符串先转换成DateTime,再转LocalDateTime
DateTime parse = DateUtil.parse(stringTime);
Instant instant = parse.toInstant();
ZoneId zoneId = ZoneId.systemDefault();
return instant.atZone(zoneId).toLocalDateTime();
}
/**
* Date类型转LocalDate
* @param date
* @return
*/
public static LocalDate dateToLocalDate(Date date){
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
String format = sdf.format(date);
LocalDateTime localDateTime = stringToLocalDateTime(format);
return localDateTime.toLocalDate();
}
3. jdk8 LocalDateTime获取当前时间和前后推时间
@Test
void test() {
LocalDateTime now = LocalDateTime.now();
//当前时间往后推一周
LocalDateTime plusweek = now.plus(1, ChronoUnit.WEEKS);
//当前时间往前推一周
LocalDateTime minusWeek = now.minus(1, ChronoUnit.WEEKS);
}
4. echarts图中显示表格是需要添加宽高
5. 前端往后端传值时,需要转一下对象再往后端传
export default {
data() {
return {
queryOrder: ''
}
},
methods: {
getOrderCount() {
//这里需要将字段转一下对象,后端使用monDate接收
var param = {monDate: this.queryOrder}
getOrderCount(param).then(res => {
。。。
}
}
6. 使用 value-format="yyyy-MM-dd HH:mm:ss"
来指定element生成的时间格式
<div class="container">
<span class="demonstration">请选择时间</span>
<el-date-picker
v-model="queryOrder"
@change="getOrderCount()"
value-format="yyyy-MM-dd HH:mm:ss"
type="week"
format="yyyy 第 WW 周"
placeholder="最近7天订单量">
</el-date-picker>
</div>
7. 使用stream流将结果按类型分组
//将开始时间结束时间封装为参数
Map<String, Object> param = new HashMap<>();
param.put("startTime", startDate);
param.put("endTime", endDate);
//查询出list结果
List<OrderTypeNum> orderTypeNumList = shlibVirtualOrderRepository.findAllByNativeQuery("getOrderCount", param, OrderTypeNum.class);
//使用stream流将结果按类型分组
Map<String, List<OrderTypeNum>> collect = orderTypeNumList.stream().collect(Collectors.groupingBy(OrderTypeNum::getType));
8. 业务类型下拉框
注意v-model="form.businessType"的值要与:label="item.label"的值对应,并且类型一致(字符串不会转为int)不对应也不会显示
prop=“businessType” 是表单校验的属性
9. 使用validator做校验
<!--使用hibernate框架提供的校验器做实现-->
<dependency>
<groupId>org.hibernate.validator</groupId>
<artifactId>hibernate-validator</artifactId>
</dependency>
<!--1.导入JSR303规范-->
<dependency>
<groupId>javax.validation</groupId>
<artifactId>validation-api</artifactId>
</dependency>
在实体类上需要校验的地方加上相应的注解
使用的时候加上@Validated
注解
不符合校验的规格后会抛出异常,可以做一个拦截器统一拦截
10. 打开修改表单数据回显问题
打开修改的表单时,改完之后再次打开就不是数据库中的数据,
因为这里用的是一个引用
//打开修改的表单
openUpdate(row) {
this.form = row;
this.form.flgIp = row.flgIp.toString();
this.dialogUpdateForm = true;
},
这里转一下json,就不会影响原本的数据
//打开修改的表单
openUpdate(row) {
//this.form = row;
var rowInfo = JSON.parse(JSON.stringify(row));
this.form = rowInfo;
this.form.flgIp = rowInfo.flgIp.toString();
this.dialogUpdateForm = true;
},
11. 点击按钮上传文件
按钮
<el-upload
class="upload-demo"
:action="importUrl"
:multiple="false"
:show-file-list="false"
:before-upload="beforeUpload"
:on-error = "errorUpload"
:on-success = "successUpload"
:headers="header">
<el-button :loading="upLoading" size="small" type="primary">点击上传</el-button>
</el-upload>
data中的数据
methods 方法
只允许上传 .xls 和 .xlsx 文件
beforeUpload(file) {
const isXlsx = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
const isXls = file.type === 'application/vnd.ms-excel'
if (!isXlsx && !isXls) {
this.$message.error('只能上传 xls 或 xlsx 格式的文件')
return isXlsx || isXls
}
this.upLoading = true;
return isXlsx || isXls
},
// 上传的url地址
importUrl: process.env.VUE_APP_BASE_API + "api/organ/import",
// 请求头,添加token
header: {Authorization: getToken()}
process.env.VUE_APP_BASE_API
可以直接拿到文件中的值
header: {Authorization: getToken()}
是添加一个Authorization的Token的请求头
getToken()
方法是拿到token
12. 使用 EasyPoi 来实现 Excel 文件的导出
导出功能的工具类:
import cn.afterturn.easypoi.excel.ExcelExportUtil;
import cn.afterturn.easypoi.excel.entity.ExportParams;
import cn.afterturn.easypoi.excel.entity.enmus.ExcelType;
import lombok.extern.slf4j.Slf4j;
import org.apache.poi.ss.usermodel.Workbook;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
/**
* @Description Excel导入导出工具类
* @Author shangtf
* @Date 2023/4/23 9:41
*/
@Slf4j
public class ExcelUtils {
/**
* 导出 Excel(xls)
*
* @param list 数据 list
* @param title 表格标题名
* @param sheetName 工作表名称
* @param pojoClass Excel 对应实体类
* @param fileNamePrefix 文件名前缀
* @param response HttpServletResponse
*/
public static void exportExcel(List<?> list,
String title,
String sheetName,
Class<?> pojoClass,
String fileNamePrefix,
HttpServletResponse response) throws IOException {
ExportParams exportParams = new ExportParams(title, sheetName, ExcelType.HSSF);
Workbook workbook = ExcelExportUtil.exportExcel(exportParams, pojoClass, list);
outputExcel(fileNamePrefix + ".xls", workbook, response);
}
/**
* 导出 Excel(xlsx)
*
* @param list 数据 list
* @param title 表格标题名
* @param sheetName 工作表名称
* @param pojoClass Excel 对应实体类
* @param fileNamePrefix 文件名前缀
* @param response HttpServletResponse
*/
public static void exportExcelX(List<?> list,
String title,
String sheetName,
Class<?> pojoClass,
String fileNamePrefix,
HttpServletResponse response) throws IOException {
ExportParams exportParams = new ExportParams(title, sheetName, ExcelType.XSSF);
Workbook workbook = ExcelExportUtil.exportExcel(exportParams, pojoClass, list);
outputExcel(fileNamePrefix + ".xlsx", workbook, response);
}
/**
* Excel 输出到 HttpServletResponse
*
* @param fileName 文件名(含后缀名)
* @param workbook Workbook
* @param response HttpServletResponse
*/
private static void outputExcel(String fileName, Workbook workbook, HttpServletResponse response) throws IOException {
response.setHeader("Content-Disposition", "attachment;filename="
+ new String(fileName.getBytes("UTF-8"), "ISO8859-1"));
response.setContentType("application/octet-stream;charset=UTF-8");
ServletOutputStream outputStream = response.getOutputStream();
workbook.write(outputStream);
outputStream.flush();
outputStream.close();
workbook.close();
}
}
使用时,需要在项目中引入 EasyPoi Spring Boot Starter 的依赖,然后直接调用方法进行导出即可,例如:
@GetMapping("/export")
public void export(HttpServletResponse response) throws Exception {
List<XxxEntity> list = // 查询数据
// 导出到 xls 文件
ExcelUtils.exportExcel(list, "表格标题", "工作表名称", XxxEntity.class, "文件名前缀", response);
// 导出到 xlsx 文件
ExcelUtils.exportExcelX(list, "表格标题", "工作表名称", XxxEntity.class, "文件名前缀", response);
}
13. vue查看插件版本和安装指定版本
查看less-loader的所有版本
npm view less-loader versions
安装less-loader的7版本(默认会安装7的最新版)
npm i less-loader@7
14. 浏览器本地存储
-
存储内容大小一般支持5MB左右(不同浏览器可能还不一样)
-
浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
-
相关API:
-
xxxxxStorage.setItem('key', 'value');
该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。 -
xxxxxStorage.getItem('person');
该方法接受一个键名作为参数,返回键名对应的值。
-
xxxxxStorage.removeItem('key');
该方法接受一个键名作为参数,并把该键名从存储中删除。
-
xxxxxStorage.clear()
该方法会清空存储中的所有数据。
-
-
备注:
- SessionStorage存储的内容会随着浏览器窗口关闭而消失。
- LocalStorage存储的内容,需要手动清除才会消失。
xxxxxStorage.getItem(xxx)
如果xxx对应的value获取不到,那么getItem的返回值是null。JSON.parse(null)
的结果依然是null。
15. vue路由使用
-
安装vue-router,命令:
npm i vue-router
-
应用插件:
Vue.use(VueRouter)
(在main.js中先引入再使用) -
编写router配置项:
在router文件夹下创建一个路由index.js内容如下
//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'
//创建router实例对象,去管理一组一组的路由规则
const router = new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
]
})
//暴露router
export default router
-
实现切换(active-class可配置高亮样式)
<router-link active-class="active" to="/about">About</router-link>
-
指定展示位置
<router-view></router-view>
- 路由组件通常存放在
pages
文件夹(或views
),一般组件通常存放在components
文件夹。- 通过切换,“隐藏”了的路由组件,默认是被销毁掉的,需要的时候再去挂载。
- 每个组件都有自己的
$route
属性,里面存储着自己的路由信息。- 整个应用只有一个router,可以通过组件的
$router
属性获取到。
16. 图片保存到本地
@Value("${upload.file.filePath}")
private String filePath;
/**
* 保存多个文件到指定目录
*
* @param files MultipartFile类型的多个文件
* @throws IOException 文件读写异常
*/
public List<Map<String, Object>> saveFiles(MultipartFile[] files) throws IOException {
//指定目录后拼接上日期目录
String path = filePath + LocalDate.now() + File.separator;
List<Map<String, Object>> resultList = new ArrayList<>();
// 限制上传文件的类型和大小
String[] allowedTypes = {"png", "jpg", "jpeg", "gif"};
long maxSize = 20 * 1024 * 1024; // 20MB
for (MultipartFile file : files) {
String originalFilename = file.getOriginalFilename();
if (StringUtils.isBlank(originalFilename)) {
throw new IllegalArgumentException("请选择文件上传");
}
int index = originalFilename.lastIndexOf(".");
if (index == -1) {
// 没有找到 "."
throw new IllegalArgumentException("文件格式不正确");
}
String suffix = originalFilename.substring(index + 1);
// 判断文件类型是否合法
if (!Arrays.asList(allowedTypes).contains(suffix.toLowerCase())) {
throw new IllegalArgumentException("文件类型不支持");
}
// 判断文件大小是否超过限制
if (file.getSize() > maxSize) {
throw new IllegalArgumentException("文件大小超过限制,最大为20MB");
}
// 拼接文件的名称
String fileName = UUID.randomUUID() + "." + suffix;
Path destPath = Paths.get(path + fileName);
// 创建目录
Files.createDirectories(destPath.getParent());
// 保存文件
Files.copy(file.getInputStream(), destPath, StandardCopyOption.REPLACE_EXISTING);
//封装返回结果
HashMap<String, Object> result = new HashMap<>();
//文件名
result.put("fileName", fileName);
//文件地址
result.put("path", path);
//文件的绝对路径
result.put("absolutePath", path + fileName);
//源文件名
result.put("originalFilename", originalFilename);
resultList.add(result);
}
return resultList;
}
注意
@Value
只能用在被Spring管理的类中,否则拿不到配置文件中的值