## 简介

记一次使用EasyExcel模板导出文件的操作。



## 模板

之所以使用模板导出，是因为导出的文件内容格式较为复杂。虽然看起来只是简单的数据列表，但表头较复杂，其中有多级表头，且部分表头级别各部相同，所以为了更简单方便的实现该导出功能，选择使用模板导出的方式。

表头部分示例如下：

![table](https://images.oldmoon.top/images/dingdangdog/dingdangdog1698715821632.jpg)

数据层面只是简单的列表，一列即时一个数据字段，所以采用简单的 `List` 数据即可，模板写法如下：

![template](https://images.oldmoon.top/images/dingdangdog/dingdangdog1698716031024.jpg)

其中第6行即时实体字段映射，以 `{.a}` 为例，固定写法 `{.}` 表示从 `List` 数据中遍历读取数据，数据的Key是 `a`。

## 代码

本次使用的maven依赖版本如下：
```xml
    <dependency>
        <groupId>org.apache.poi</groupId>
        <artifactId>poi</artifactId>
        <version>4.1.2</version>
    </dependency>

    <dependency>
        <groupId>org.apache.poi</groupId>
        <artifactId>poi-ooxml</artifactId>
        <version>4.1.2</version>
    </dependency>

    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>easyexcel</artifactId>
        <version>2.1.1</version>
    </dependency>
```

有了模板文件之后，只需要使用代码读取到该模板和数据，调用`EasyExcel`的工具方法即可，方法封装如下：

```java
    /**
     * @param inputStream-模板文件的输入流
     * @param outputStream-输出文件的输出流
     * @param data-数据集合
     */
    public static <T> void writeExcel(InputStream inputStream, OutputStream , List<T> data) {
        EasyExcel.write(outputStream)
                .excelType(ExcelTypeEnum.XLSX)
                .withTemplate(inputStream)
                .sheet()
                .doFill(data);
    }
```

## 吐槽

`doFill(data)`方法是将数据填入模板文件的方法，`doWrite(data)`是将数据写入文件的方法，所以注意壁坑，选择使用！

PS：EasyExcel官方的文档真垃圾！

EasyExcel模板导出

## 简介

现在很多UI框架都有好看且美观的消息气泡。但有时简单写个东西，只需要一个气泡，不想引入框架中太多的东西，所以就需要手写一个消息气泡。

本文将展示使用原生`JavaScript`实现一个简单的自定义消息气泡，没有太多文字，主要看代码及注释即可。

> 前排提示：老狗前端技术有限，气泡不够美观，会前端的大佬可以自行优化！



## 代码

**提示：可以自己新建个html文件，将下方代码复制填写到该文件中，浏览器打开该文件即可查看代码效果。**

```html
<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>message-babo</title>

    <style type="text/css">
      #msg-container {
        position: fixed;
        top: 5%;
        left: 46%;
        text-align: center;
        display: none;
      }
      /* 成功气泡css */
      .success-msg {
        margin: 5px;
        padding: 5px 10px;
        border-radius: 3px;
        border: 1px solid #2e7b20;
        background-color: #80d970;
        color: #2e7b20;
        font-size: 16px;
      }
      
      /* 失败气泡css */
      .error-msg {
        margin: 5px;
        padding: 5px 10px;
        border-radius: 3px;
        border: 1px solid #e51717;
        background-color: #ffb9b9;
        color: #e51717;
        font-size: 16px;
      }
      
      .buttons{
        padding: 1rem;
      }
    </style>
    
    <script>
      // 显示成功气泡的方法
      function alertSuccess(msg, duration) {
        alertCust(msg, "success-msg", duration);
      }
      
      // 显示失败气泡的方法
      function alertError(msg, duration) {
        alertCust(msg, "error-msg", duration);
      }
      
      /**
       * 显示气泡的方法
       * 
       * @param msg        气泡显示内容
       * @param className  自定义元素的类名
       * @param duration   气泡消失时间-毫秒
       */
      function alertCust(msg, className, duration) {
        // console.log(msg, className);
        // 获取气泡容器
        const msgContainer = document.getElementById("msg-container");
        // 创建一个div
        let msgDiv = document.createElement("div");
        // 给新建div赋予气泡属性及信息
        msgDiv.innerText = msg;
        msgDiv.className = className;
        // 将气泡添加到气泡容器
        msgContainer.appendChild(msgDiv);
        msgContainer.style.display = "block";
        
        // 设置一个定时任务，用于让气泡消失
        window.setTimeout(function () {
          // 删除上面新建的气泡
          msgContainer.removeChild(msgDiv);
          // 如果气泡容器内部没有内容了，则将气泡容器隐藏
          if (msgContainer.innerHTML == null || msgContainer.innerHTML.length === 0){
            msgContainer.style.display = "none";
          }
        }, duration)
      }
    </script>
  </head>

  <body>
    <div style="text-align: center">
      
      <button onclick="alertSuccess('成功', 3000)" class="buttons">show-success</button>
      
      <button onclick="alertError('失败', 10000)" class="buttons">show-error</button>
    <div>
    
    <div id="msg-container"></div>
  </body>

</html>
```

## 赞助

如果你觉得本文对你有用，想要给作者一些赞助，可以动动小手点击下方广告给予支持，万分感谢~

您的每次点击都能给予作者更多分享的动力！**请无情点击吧：**


<div class="article-ads"></div>

原生JS实现自定义消息气泡

## 简介

现在很多WEB项目都有右键自定义菜单，覆盖浏览器右键功能，用以实现一部分自定义功能。

本文将展示使用原生`JavaScript`实现一个简单的自定义右键菜单，没有太多文字，主要看代码及注释即可，最后有个简单的总结。



## 代码

**提示：可以自己新建个html文件，将下方代码复制填写到该文件中，浏览器打开该文件即可查看代码效果。**

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Right-click menu example</title>
    <style type="text/css">
      /* css */
      #manager-menu {
        display: none;
        position: absolute;
        background-color: #393737;
        border: 1px solid #ccc;
        padding: 5px;
        border-radius: 5px;
        z-index: 9999; /* make sure it appears on top of other elements */
      }
      .menu {
        text-align: center;
        padding: 0.5rem 1.5rem 0.5rem 1rem;
        cursor: pointer;
        margin: 0.1rem;
        color: #FFF;
        border-radius: 5px;
      }
      .menu:hover{
        background: #939393;
      }

      .click-me {
        text-align: center;
        background-color: #96d296;
        padding: 1rem;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    
    <div class="click-me" id="click-me">右键点我</div>

    
    <div id="manager-menu">
      <div class="menu" id="menu1">菜单1</div>
      <div class="menu" id="menu2">菜单2</div>
    </div>

    <script type="text/javascript">
      // 获取需要实现右键菜单的元素
      var clickDiv = document.getElementById("click-me");
      // 获取右键菜单元素
      var rightClickMenu = document.getElementById("manager-menu");

      // 给clickDiv设置右键(contextmenu)监听
      clickDiv.addEventListener('contextmenu', function(e) {
        // 禁用默认的右键行为
        e.preventDefault();
        // 保存当前右键点击的元素的id属性，以便后续业务使用
        window.localStorage.setItem("clickId", e.target.id);
        // 使用定位跟随鼠标显示右键菜单元素
        rightClickMenu.style.display = "block";
        rightClickMenu.style.left = e.pageX + "px";
        rightClickMenu.style.top = e.pageY + "px";
      });

      // 给整个dom页面设置点击(左键)事件
      document.addEventListener('click', function() {
        // 隐藏(关闭)右键菜单
        rightClickMenu.style.display = "none";
        // 移除右键时保存的元素id
        window.localStorage.removeItem("clickId");
      });
    
      // 获取右键菜单中的"菜单1"元素
      var menu1 = document.getElementById("menu1");
        // 给菜单1设置点击事件，弹出相关信息
        menu1.addEventListener('click', function() {
        alert('You clicked ：' + window.localStorage.getItem("clickId") + ' and menu1');
      });
    </script>
  </body>
</html>
```

## 总结

要想实现一个优秀的 `Web` 网站自定义右键菜单，有几个关键点：
1. 禁止浏览器默认的右键行为；
2. 控制好自定义菜单的出现和隐藏！
3. 自定义菜单的定位要注意。

根据这几个关键点，可以总结出右键自定义菜单的几个主要部分：
1. 被右键时，会出现自定义菜单的元素（`show`），如示例代码中的 `class="click-me"` div。
2. 被左键时，会隐藏自定义菜单的元素（`hidden`），一般是整个dom元素，如示例中的一样。
3. 自定义菜单的元素（默认隐藏），如示例中的 `id="manager-menu"` div。
4. `show` 元素监听右键，编写菜单出现时的逻辑，尤其注意定位问题、参数传递问题，如示例中的 `// 给clickDiv设置右键(contextmenu)监听` 部分代码。
5. `hidden` 元素监听左键，编写菜单隐藏的逻辑，如示例中的 `// 给整个dom页面设置点击(左键)事件` 部分代码。
6. 自定义菜单的监听事件，一般是左键（点击自定义菜单后会发生什么），如示例中的 `// 获取右键菜单中的"菜单1"元素` 部分代码。

特别注意：要注意这些代码的执行顺序，本文示例中的部分顺序可以打乱，但如果你是通过 `js` 动态添加（`append`）的菜单元素DIV，要特别注意！

## 赞助

如果你觉得本文对你有用，想要给作者一些赞助，可以动动小手点击下方广告给予支持，万分感谢~

您的每次点击都能给予作者更多分享的动力！**请无情点击吧：**


<div class="article-ads"></div>

原生JS实现右键自定义菜单

## 简介

在Vue2时代，Element是一个国内市占率很高的UI库，其中尤其是`vue-elemnet-admin`开源项目的使用。

**Element Plus** 是基于 Vue 3，面向设计师和开发者的组件库。

- 官网：https://element-plus.org/

本文用于记录Vue3空项目集成**Element Plus**的基本配置。



## 基本步骤

> 参考官网：https://element-plus.org/zh-CN/guide/installation.html

### 1. 安装依赖

```bash
npm install element-plus
```

运行成功后可以在项目的`package.json`的`dependences`标签下看到相关依赖及版本，如下：

```json
  "dependencies": {
    "element-plus": "^2.3.14"
  }
```

### 2. 全局引入依赖

在`main.ts`或`main.js`中引入`ElementPlus`和相应的`css`，如下：

```typescript
import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

// 引入ElementPlus
import ElementPlus from 'element-plus';
// 引入中文支持
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
// 引入ElementPlus-css
import 'element-plus/dist/index.css';
// 如果只想导入css变量
import 'element-plus/theme-chalk/dark/css-vars.css';

const app = createApp(App)

app.use(createPinia())
app.use(router)
// 全局使用ElementPlus
app.use(ElementPlus, { locale: zhCn })

app.mount('#app')
```

以上引入中文支持的代码，在typescript环境下可能会报红，可以在`main.ts`同级创建`declaration.d.ts`文件，填入以下内容：
```typescript
// 忽略vue中文支持文件的ts检查
declare module 'element-plus/dist/locale/zh-cn.mjs';
```

### 3. 使用测试

经过以上两步，已经成功将Element-plus引入到项目中，下面来测试一下引入是否成功：

将一下代码拷贝到你的`App.vue`文件中：

```html
<el-button type="success">Element-plus Success</el-button>
```

运行项目查看相应的页面，可以看到一个按钮如下，则说明引入成功：

![success](https://images.oldmoon.top/images/dingdangdog/dingdangdog1696683124704.png)


## 拓展：引入Element-plus图标

> 参考官网：https://element-plus.org/zh-CN/component/icon.html

Element-plus的图标资源需要单独引入到项目中，可以运行以下命令安装依赖：

```bash
npm install @element-plus/icons-vue
```

安装成功后，可以在任何需要使用的地方引入所需图标，基本使用如下：
```html
<template>
  
  <el-button :icon="Search" />
</template>

<script setup lang="ts">
  // 引入查询、删除、编辑图标
  import { Search, Delete, Edit } from '@element-plus/icons-vue';
</script>
```

Vue3空项目集成ElementPlus

**Deleted, please go to [github](https://github.com/dingdangdog/oldmoon) to read.**

## 赞助请求

 **建站不易，以下是一个广告，还请动动您的小拇指，点击一次以示鼓励，谢谢！**


<div class="article-ads"></div>

> 就目前的访问量，即便每个访客都点一次广告，收入也不足以支付运营成本，`如果看不到广告，可能是网络原因或被拦截了，那就算了吧。祝你生活愉快~~`