Bang's Blog

MinIo简介对象存储方式对比 存储方式 优点 缺点 服务器磁盘 开发便捷、成本低 可扩展性差 分布式文件系统 容易实现扩容（增加存储节点） 管理复杂度高 第三方存储 功能强大，免维护 收费 分布式文件系统目前主流的分布式文件系统有FastDFS和MinIo FastDFS优点 主备服务、高可用 支持主从文件，支持自定义扩展名 支持动态扩容 缺点 没有完备的官方文档，近几年文档未更新 环境搭建比较麻烦 MinIo优点 性能高，准硬件条件下，能够达到55GB/s的读，35GB/s的写速率 部署自带管理界面 MinIo.Inc运营的开源项目，社区活跃度高 提供了所有主流开发语言的SDK 缺点 不支持动态增加节点 MinIo概述 MinIO基于Apache License v2.0开源协议的对象存储服务，可以做为云存储的解决方案用来保存海量的图片，视频，文档。由于采用Golang实现，服务端可以工作在Windows,Linux, OS X和FreeBSD上。配置简单，基本是复制可执行程序，单行命令可以运行起来。 MinIO兼容亚马逊S3云存储服 ...

freemarker概述FreeMarker是一款模板引擎，即能够基于模板和要改变的数据，来生成输出文本（比如html网页、电子邮件、配置文件、源代码等）的通用工具。 入门案例springboot整合freemarker，生成的静态文件作为mvc视图返回 导入依赖12345678910111213141516171819202122232425262728293031<dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> <version>2.3.9.RELEASE</version> </dependency> <dependency> <grou ...

vue3入门vue3介绍vue3官方文档 与vue2相比，vue3的优势： 实现同样功能，所需的代码量变少了 分散式维护转为集中式维护 create-vuecreate-vue是一个基于 Vite 的 Vue 3 项目脚手架工具，由 Vue.js 核心团队成员和社区贡献者开发。它旨在提供更快的开发体验和更现代化的项目结构。create-vue 专注于 Vue 3，并且与 Vite 集成，提供了更快速的热重载和构建性能。 使用create-vue创建项目前提条件 已经安装16.0或者更高版本的NodeJs 创建一个vue应用 1npm init vue@latest 这一指令会自动安装并执行create-vue，让后根据命令行提示输入项目名、各种配置即可 启动项目 123456#切换到项目目录cd 项目名#安装依赖npm install#启动项目npm run dev vue3项目目录和关键文件 关键文件 vite.config.js：项目的配置文件，基于vite的配置 package.json：项目包文件，核心依赖项变成了Vuex3.x和vite main.js：入口文件，利用 ...

Vuexvuex概述vuex是一个vue的状态管理工具，所谓的状态就是数据，它可以帮助我们管理vue通用的数据（多组件共享的数据） vuex的常用场景 某个数据在多个组件来使用，比如个人信息 多个组件共同维护一份数据，比如购物车数据 vuex的优势 数据集中化管理，共同维护一份数据 数据响应式变化 操作简洁，vuex提供了一些辅助函数 vuex使用步骤12graph LR安装vuex-->新建vuex模块文件-->创建仓库-->在main.js中导入挂载 安装vuex 1npm i vuex@3 新建vuex模块文件 新建src/store/index.js专门存放vuex 1234567891011import Vue from 'vue'import Vuex from 'vuex'// 插件安装Vue.use(Vuex)// 创建仓库const store = new Vuex.Store()// 导出export default store 创建仓库 12Vue.use(Vuex)new Vuex.Store() ...

阿里图标引用阿里矢量图官网 如何在web项目中应用阿里图标？ 在主页搜索想要的图库，然后将其加入购物车 在项目的index.html文件中添加如下代码： 12<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4911750_exqkgo67eb.css"/><!-- 其中//at.alicdn.com/t/c/font_4911750_exqkgo67eb.css就是上图中复制的代码--> 复制想要图标的代码 在想要使用图标的位置添加: 12<i class="iconfont icon-xxx"></i><!--其中icon-xxx从上图中选择对应图标进行复制代码即可--> 每次新加入图标，需要重新更新代码，在index,html中引入新的css 对于每个图标，可以自己设置命名

vue06路由进阶路由的封装剥离如果关于路由的所有配置均写在main.js文件中是不合适的，将路由模块抽离出来，更利于后期的维护 具体操作 ①抽取路由配置代码 新建src/router/index.js文件，在其中编写路由配置代码 ②引入 在main.js文件中，引入路由对象并注入到vue实例 123456import router from './router/index.js'new Vue({ render:h=>h(App), router}).$mount("#app") 实例 router/index.js 123456789101112131415161718import VueRouter from "vue-router";import Vue from "vue";Vue.use(VueRouter)//相对路径：如果层级较深，使用相对路径可能比较复杂//绝对路径，在vue中，使用@可以指代src的绝对路径import FindMusic from ...

PiniaPinia是Vue专属的最新状态管理库，是vuex状态管理工具的替代品 Pinia官网 Pinia的特点 提供更加简单的API，去掉了mutations 提供符合组合式风格的API 去掉了modules的概念，每一个store都是一个独立的模块 搭配TypeScript一起使用提供可靠的类型推断 三大核心概念：state、getter、action，action既支持同步，也支持异步 安装pinia 1npm install pinia 具体使用步骤 参考官方文档，了解如何定义store、如何使用store，以及如何从store中进行解构 实例 在main.js中创建pinia对象，并绑定到vue实例 1234567import { createPinia } from 'pinia'import { createApp } from 'vue'import App from './App.vue'const pinia = createPinia()createApp(A ...

nvmnvm(Node Version Manager)，是一个用于管理多个Node.js版本的命令行工具。它允许用户在同一台机器上安装和切换不同版本的Node.js，非常适合开发者需要在不同的项目中使用不同版本的Node.js环境 安装nvm官网下载地址 下载nvm-setup.zip文件，解压找到nvm-setup.exe文件，然后按照正常软件安装流程进行安装即可 配置NodeJS 在nvm安装目录下，找到setting.txt文件，在其中设置node和npm的国内镜像下载地址 12node_mirror: https://npmmirror.com/mirrors/node/npm_mirror: https://npmmirror.com/mirrors/npm/ 校验是否安装成功 管理NodeJS常用命令列出当前已经安装的node版本 1nvm ls 列出可用的node版本 1nvm ls available 安装指定的node版本 1nvm install 版本号 设置使用的node版本 1nvm use 版本号 查看当前node版本 1node -v 查看当前npm版 ...

Vue05自定义指令v-for、v-model等指令属于内置指令，每个指令都有自己独立的功能。 开发者自己定义指令，封装一些dom操作，扩展额外的功能 语法 全局注册，在main.js中编写，在所有组件中均可使用 123456Vue.directive(指令名,{ inserted(el){ //inserted指不同的生命周期，当指令绑定的元素被添加到页面的时候触发 //可以对el标签，扩展额外的功能，el就是指令绑定的元素 xxxxx } }) 局部注册，只能在当前组件中使用 12345678directives:{ 指令名:{ inserted:(el){ //可以对el标签，扩展额外的功能 xxxxx } }} 自定义指令使用： 12直接在对应标签上添加: v-指令名比如: <input v-指令名 type="text"/> 实例 自定义指令v-focus，使得页面某些元素自动聚焦 123456789101112131415 ...

Vue快速入门04组件组成三个部分组件的三大组成部分： 结构<template> 只能有一个根元素<div> 样式<style> 全局样式（默认）：影响所有组件 局部样式：scoped下样式，只用于当前组件 逻辑<script> el根实例独有，data是一个函数，其他配置项与引入核心库开发一样的 样式—scoped默认情况：写在组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题 全局样式：默认组件中的样式会作用到全局 局部样式：可以给组件加上scoped属性，可以让样式只作用于当前组件 12<style scoped></style> 为避免不同组件样式冲突，建议给每个组件加上scoped scoped原理 给当前组件内所有的标签都会添加data-v-hash值的属性 css选择器都被添加[data-v-hash值]的属性选择器 最终导致必须是当前组件的元素，最会有这个自定义属性，才会被这个样式作用到 逻辑—data是一个函数一个组件的data选项必须是一个函数， ...