支付模块

列举一些常用的镜像启动配置，方便用到复制 👍


# 集合


## mysql,npm,portainer 个人新系统必备三镜像

```
version: '3.1'
services:
  #数据库
  mysql:
    image: mysql:latest
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: "a1075858260"
      MYSQL_DATABASE: "database"
      MYSQL_USER: "ln"
      MYSQL_PASSWORD: "a1075858260"
      MYSQL_COLLATION_SERVER: utf8mb4_unicode_ci
      MYSQL_CHARACTER_SET_SERVER: utf8mb4
    ports:
      - "6611:3306"
    volumes:
      - /home/docker_data/mysql_data:/var/lib/mysql
    command: --default-authentication-plugin=mysql_native_password
    #nginx管理
  app:
    image: 'chishin/nginx-proxy-manager-zh:latest'
    # image: 'jc21/nginx-proxy-manager:latest'
    restart: unless-stopped
    ports:
    - '80:80'
    - '81:81'
    - '443:443'
    volumes:
    - /home/docker_data/nginx-proxy-manager/data:/data
    - /home/docker_data/nginx-proxy-manager/letsencrypt:/etc/letsencrypt
    #docker管理
  portainer:
    image: portainer/portainer-ce
    ports:
      - 8000:8000
      - 9000:9000
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
      - /home/docker_data/portainer_data:/data
    restart: always

```

## .Net开发常用

### AgileConfig 配置中心
```dockercospom
version: '3.8'
services:
  agile_config:
    container_name: agile_config
    environment:
    - TZ=Asia/Shanghai
    - adminConsole=true
    - db__provider=mysql
    - db__conn=server=xxx;Port=6607;Database=agile_config;Uid=root;Pwd=a1075858260
    ports:
    - 172.17.0.1:5001:5000
    volumes:
    - /home/ln/volumes/agile_config:/app/db
    image: kklldog/agile_config:latest
    restart: always

```


### rabbitMQ 消息的队列
```
docker run -d --name my-rabbitmq -p 5672:5672 -p 15662:15672 rabbitmq:3-management 
```

### 私有图床miniuo

- #### 直接run起来

```
docker run -p 9000:9000 -p 9090:9090 \
     --net=host \
     --name minio \
     -d --restart=always \
     -e "MINIO_ACCESS_KEY=minioadmin" \
     -e "MINIO_SECRET_KEY=minioadmin" \
     -v /home/ln/minio/data:/data \
     -v /home/ln/minio/config:/root/.minio \
     minio/minio server \
     /data --console-address ":9090" -address ":9000"
```
- #### docker-compose 方式
```
version: '3.8'
services:
  minio:
    image: minio/minio
    container_name: minio
    restart: always
    networks:
      - host
    ports:
      - "9000:9000"
      - "9090:9090"
    environment:
      - MINIO_ACCESS_KEY=minioadmin
      - MINIO_SECRET_KEY=minioadmin
      - MINIO_CONSOLE_ADDRESS=:9090
    volumes:
      - /home/ln/volumes/minio/data:/data
      - /home/ln/volumes/minio/config:/root/.minio
    command: server /data --console-address ":9090" --address ":9000"
networks:
  host:
    external: true
```

### mongodb 数据库
```
# Use root/example as user/password credentials
version: '3.1'

services:

  mongo:
    image: mongo
    restart: always
    environment:
      MONGO_INITDB_ROOT_USERNAME: root
      MONGO_INITDB_ROOT_PASSWORD: example
    ports:
      - 27017:27017
    volumes:
      - ./db:/data/db
      - ./configdb:/data/configdb

  mongo-express:
    image: mongo-express
    restart: always
    ports:
      - 8081:8081
    environment:
      ME_CONFIG_MONGODB_ADMINUSERNAME: root
      ME_CONFIG_MONGODB_ADMINPASSWORD: example
      ME_CONFIG_MONGODB_SERVER: mongo
    depends_on:
      - mongo


```


### redis 字典数据库
```
docker run -d --name redis -p 6610:6379 \
-v /home/ln/web/redis-data:/data \
redis redis-server --appendonly yes --requirepass "123456789"
```


### BBS

` docker run -d -p 9080:80 -v answer-data:/data --name answer answerdev/answer:latest `

docker常用镜像

> 🔊 dom类型断言是：HTMLElement





# 第一种方式
```html
<template>
  <div class="block-area" ref="area">
    <div v-for="i of 3" :key="i" class="block" ref="divs">
      {{ i }}
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, reactive, toRef } from 'vue';





const area = ref<HTMLElement | null>(null);
// const arrBlock = ref<HTMLElement[]>([]);
const divs = ref<HTMLElement[]>();

onMounted(() => {

  //预留：
  //1.api传来block总数
  //2.block 长宽高，颜色，行为 由api传递
  const min = 50;
  const max = 150;

  divs.value?.forEach((element, index, array) => {
    console.log(`Element: ${element} 索引: ${index} ary: ${array}`);

    let h = Math.floor(Math.random() * (max - min + 1)) + min;
    let w = Math.floor(Math.random() * (max - min + 1)) + min;
    element.style.height = `${h}px`;
    element.style.width = `${w}px`;
    element.style.backgroundColor = `#000`;
  });


})





// const divs = (el: HTMLElement) => {
//   // 断言为HTMLElement类型的数组
//   if (el)
//     (arrBlock.value as Array<HTMLElement>).push(el);
// };
</script>
<style scoped lang='scss'>
.block-area {
  position: relative;
  .block {
    position: absolute;
  }
}
</style>
```

# 其他方式处理dom数组

```html

<div :ref="(el)=> boxHanddlde(el)"></div>


<div :ref="(el)=> boxArray.push(el)"></div>

<script lang='ts'>
let boxArray = reactive<any[]>([])
const boxHanddle(e:any){
    console.log(e)
}
onMounted(()=>{
    console.log(boxArray)
})
</script>

```

vue3操作dom

- [👍快捷启动工具 Dawnlauncher](https://dawnlauncher.com/)

工具收集汇总

- [老牌bootcss](https://v5.bootcss.com/docs/components/toasts/)

- [谷歌的一款](https://m2.material.io/components/banners/web#using-banners)
- [Bulma样式](https://bulma.io/documentation/overview/)






# Vue 相关 🎀

- [Vue.js 的头号组件库 Vuetify](https://vuetifyjs.com/en/components/buttons/)
- [也很不错的Quasar](https://quasar.dev/layout/gallery)
- [buefy](https://buefy.org/)