【问题】问题总结

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. 浏览器本地存储

1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

3. 相关API：

   1. xxxxxStorage.setItem('key', 'value');
      该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

   2. xxxxxStorage.getItem('person');

      ​ 该方法接受一个键名作为参数，返回键名对应的值。

   3. xxxxxStorage.removeItem('key');

      ​ 该方法接受一个键名作为参数，并把该键名从存储中删除。

   4. xxxxxStorage.clear()

      ​ 该方法会清空存储中的所有数据。

4. 备注：

   1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
   2. LocalStorage存储的内容，需要手动清除才会消失。
   3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
   4. JSON.parse(null)的结果依然是null。

15. vue路由使用

1. 安装vue-router，命令：npm i vue-router

2. 应用插件：Vue.use(VueRouter) (在main.js中先引入再使用）

3. 编写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

5. 实现切换（active-class可配置高亮样式）

   <router-link active-class="active" to="/about">About</router-link>
   

6. 指定展示位置

   <router-view></router-view>
   

1. 路由组件通常存放在pages文件夹（或views），一般组件通常存放在components文件夹。
2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。
4. 整个应用只有一个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管理的类中，否则拿不到配置文件中的值