Springboot + Vue ElementUI 实现MySQLPostgresql可视化

一、功能展示:

效果如图:

DB连接配置维护:

Schema功能:集成Screw生成文档,导出库的表结构,导出表结构和数据

 表对象操作:翻页查询,查看创建SQL,生成代码

可以单个代码文件下载,也可以全部下载(打成zip包下载返回)

可以自定义文件名称,包路径和代码信息

二、实现过程

一开始只是想实现若依的生成代码功能:

然后我发现若依的这个只能使用SpringBoot配置的单例数据源

实际上来说应该可以像Navicat一样配置多个连接访问多个数据源

1、解决数据源问题

开动态数据源太麻烦了,我只是针对这个功能需要动态访问,所以第一步要解决的是访问DB的问题

在默认数据源下建了一张连接配置表来维护:

CREATE TABLE `db_conn` (`id` int NOT NULL AUTO_INCREMENT,`conn_name` varchar(32) COLLATE utf8mb4_general_ci NOT NULL,`username` varchar(32) COLLATE utf8mb4_general_ci NOT NULL,`password` varchar(32) COLLATE utf8mb4_general_ci NOT NULL,`host` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,`port` varchar(6) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,`creator` varchar(24) COLLATE utf8mb4_general_ci DEFAULT NULL,`updater` varchar(24) COLLATE utf8mb4_general_ci DEFAULT NULL,`create_time` datetime DEFAULT NULL,`update_time` datetime DEFAULT NULL,PRIMARY KEY (`id`),UNIQUE KEY `unq_idx_conn_name` (`conn_name`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

除了Mybatis,轻量级的操作工具类我选择了Hutool的DB操作

使用容器对象保管使用的数据源,每次动态操作都需要从容器存取

package cn.cloud9.server.tool.ds;import cn.cloud9.server.struct.constant.ResultMessage;
import cn.cloud9.server.struct.file.FileProperty;
import cn.cloud9.server.struct.file.FileUtil;
import cn.cloud9.server.struct.spring.SpringContextHolder;
import cn.cloud9.server.struct.util.Assert;
import cn.cloud9.server.struct.util.DateUtils;
import cn.hutool.core.io.IoUtil;
import cn.hutool.db.Db;
import cn.hutool.db.Entity;
import cn.hutool.db.Page;
import cn.hutool.db.PageResult;
import com.alibaba.druid.pool.DruidDataSource;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.collections.CollectionUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.context.annotation.Lazy;
import org.springframework.stereotype.Service;import javax.annotation.Resource;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import javax.sql.DataSource;
import java.io.BufferedInputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.sql.SQLException;
import java.time.LocalDateTime;
import java.util.*;
import java.util.concurrent.ConcurrentHashMap;@Lazy
@Slf4j
@Service("dbConnService")
public class DbConnServiceImpl extends ServiceImpl<DbConnMapper, DbConnDTO> implements IDbConnService {/* 数据源管理容器 */private static final Map<Integer, DataSource> dsContainer = new ConcurrentHashMap<>();private static final DbConnMapper dbConnMapper = SpringContextHolder.getBean("dbConnMapper", DbConnMapper.class);/*** 获取数据源对象的方法 (所有的接口操作都需要经过这个步骤)* @param dbId 连接参数实体ID* @return 参数对应的数据源对象*/public static DataSource getDsById(Integer dbId) {DataSource dataSource = dsContainer.get(dbId);boolean isEmpty = Objects.isNull(dataSource);if (isEmpty) {DbConnDTO dbConn = dbConnMapper.selectById(dbId);Assert.isTrue(Objects.isNull(dbConn), ResultMessage.NOT_FOUND_ERROR, "连接配置");DruidDataSource druidDs = new DruidDataSource();druidDs.setUrl("jdbc:mysql://" + dbConn.getHost() + ":" + dbConn.getPort() + "/sys");druidDs.setUsername(dbConn.getUsername());druidDs.setPassword(dbConn.getPassword());druidDs.addConnectionProperty("useInformationSchema", "true");druidDs.addConnectionProperty("characterEncoding", "utf-8");druidDs.addConnectionProperty("useSSL", "false");druidDs.addConnectionProperty("serverTimezone", "UTC");druidDs.addConnectionProperty("useAffectedRows", "true");dataSource = druidDs;/* 置入容器 */dsContainer.put(dbId, druidDs);}return dataSource;}}

2、界面信息的获取

只要有访问 information_schema 的权限就可以获取db的大部分信息了

【后面什么触发器,视图都没写,只是列在那留个坑以后来填】

就是hutool的翻页用的人很少没什么资料,我这里是自己看API注释琢磨的写的

这个pageResult我一开始以为和mp的page对象一样,结果发现是继承了ArrayList,序列化之后输出的只有结果集合,没有翻页的信息

所以要自己提取出来,他会算好放在里面

Entity就理解为一个Map对象,返回就是存键值对,按键值对取就行了,也可以作为SQL查询条件的封装对象

@SuppressWarnings("all")
@Override
public IPage<Entity> getTablePage(Integer dbId, String schemaName, DbTableDTO dto) throws SQLException {Db db = Db.use(getDsById(dbId));Entity condition = Entity.create();condition.setTableName("`information_schema`.`TABLES`");condition.set("`TABLE_TYPE`", "BASE TABLE");condition.set("`TABLE_SCHEMA`", schemaName);if (StringUtils.isNotBlank(dto.getTableName()))condition.put("`TABLE_NAME`", "LIKE '%" + dto.getTableName() + "%'");if (StringUtils.isNotBlank(dto.getTableComment()))condition.put("`TABLE_COMMENT`", "LIKE '%" + dto.getTableComment() + "%'");if (StringUtils.isNotBlank(dto.getStartCreateTime()) && StringUtils.isNotBlank(dto.getEndCreateTime())) {condition.put("`CREATE_TIME`", "BETWEEN '" + dto.getStartCreateTime() + "' AND '" + dto.getEndCreateTime() + "'");}IPage<Entity> page = dto.getPage();PageResult<Entity> pageResult = db.page(condition, new Page((int)page.getCurrent() - 1, (int)page.getSize()));page.setRecords(pageResult);page.setTotal(pageResult.getTotal());page.setPages(pageResult.getTotalPage());return page;
}

3、生成代码的思路

生成这种模板文件肯定是用模板引擎来做的,若依用的是velocity好像,那我这里就还是用freemarker,因为对freemarker接触的多一点

这还外加了一个starter,不过我没怎么用到,有原始支持包就行了

<!-- https://mvnrepository.com/artifact/org.freemarker/freemarker -->
<dependency><groupId>org.freemarker</groupId><artifactId>freemarker</artifactId><version>2.3.32</version>
</dependency><!--        <dependency>-->
<!--            <groupId>org.springframework.boot</groupId>-->
<!--            <artifactId>spring-boot-starter-freemarker</artifactId>-->
<!--        </dependency>-->

先写好模板文件,里面标记的变量名称,FreeMarker会通过一个Map参数去取出来打在模板文件里渲染

 我先开了一个简单的测试Controller检查生成情况:

package cn.cloud9.server.test.controller;import cn.cloud9.server.struct.common.BaseController;
import cn.cloud9.server.struct.file.FileUtil;
import cn.cloud9.server.struct.util.DateUtils;
import freemarker.cache.FileTemplateLoader;
import freemarker.cache.TemplateLoader;
import freemarker.template.Configuration;
import freemarker.template.Template;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.io.BufferedWriter;
import java.io.File;
import java.io.OutputStreamWriter;
import java.io.Writer;
import java.nio.charset.StandardCharsets;
import java.time.LocalDateTime;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;@RestController
@RequestMapping("/test/ftl")
public class TemplateTestController extends BaseController {@GetMapping("/getTemplate")public void getCodeFile() throws Exception {Map<String, Object> paramMap = new ConcurrentHashMap<>();paramMap.put("modelPath", "cn.cloud9.sever.test.model");paramMap.put("author", "cloud9");paramMap.put("tableName", "info_account");paramMap.put("description", "测试模板代码生成");paramMap.put("projectName", "tt-server");paramMap.put("dateTime", DateUtils.format(LocalDateTime.now(), DateUtils.DEFAULT_DATE_TIME_FORMAT));paramMap.put("modelName", "InfoAccount");List<Map<String, String>> columns = new ArrayList<>();Map<String, String> field1 = new ConcurrentHashMap<>();field1.put("columnName", "id");field1.put("fieldName", "id");field1.put("type", "Integer");columns.add(field1);Map<String, String> field2 = new ConcurrentHashMap<>();field2.put("columnName", "field_2");field2.put("fieldName", "field2");field2.put("type", "String");columns.add(field2);paramMap.put("columns", columns);String path = this.getClass().getResource("/code-template").getFile();File file = new File(path);Configuration config = new Configuration();TemplateLoader loader = new FileTemplateLoader(file);config.setTemplateLoader(loader);Template template = config.getTemplate("/java/Model.java.ftl", "UTF-8");FileUtil.setDownloadResponseInfo(response, "TestDTO.java");Writer out = new BufferedWriter(new OutputStreamWriter(response.getOutputStream(), StandardCharsets.UTF_8));template.process(paramMap, out);out.flush();out.close();}
}

模板文件内容:

package ${modelPath};import java.math.BigDecimal;
import java.time.LocalDateTime;
import java.util.Date;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import lombok.EqualsAndHashCode;/*** @author ${author}* @description ${tableName} 实体类 ${modelDescription!}* @project ${projectName}* @date ${dateTime}*/
@Data
@EqualsAndHashCode(callSuper = false)
@TableName("${tableName}")
public class ${modelName} {<#list columns as column>@TableField("${column.columnName}")private ${column.type} ${column.fieldName};</#list>@TableField(exist = false)private Page<${modelName}> page;
}

然后要解决输出文件和输出内容的两个方式:

两个方法基本是一样的,就是输出对象不一样,一个流,一个Writter

/*** 下载模板生成文件* @param response 响应对象* @param tp 模板参数* @throws Exception IO异常*/
public void downloadTemplateFile(HttpServletResponse response, TemplateParam tp) throws Exception {TemplateType tt = tp.getTemplateTypeByCode();tp.setDateTime();if (TemplateType.MODEL.equals(tt)) getColumnsMetaData(tp);Assert.isTrue(TemplateType.NONE.equals(tt), ResultMessage.NOT_FOUND_ERROR, "模板类型编号");Map<String, Object> paramMap = BeanUtil.beanToMap(tp);Template template = configuration.getTemplate(tt.getPath(), "UTF-8");FileUtil.setDownloadResponseInfo(response, paramMap.get(tt.getFilenameKey()) + tt.getSuffix());Writer out = new BufferedWriter(new OutputStreamWriter(response.getOutputStream(), StandardCharsets.UTF_8));/* 输出成型的文件 */template.process(paramMap, out);out.flush();out.close();
}/*** 获取模板生成的输出内容* @param tp 模板参数* @return 输出内容* @throws Exception IO异常*/
public String getTemplateContent(TemplateParam tp, TemplateType tt) throws Exception {tp.setDateTime();if (TemplateType.MODEL.equals(tt)) getColumnsMetaData(tp);Assert.isTrue(TemplateType.NONE.equals(tt), ResultMessage.NOT_FOUND_ERROR, "模板类型编号");Map<String, Object> paramMap = BeanUtil.beanToMap(tp);Template template = configuration.getTemplate(tt.getPath(), "UTF-8");/* 代替方法 String content = FreeMarkerTemplateUtils.processTemplateIntoString(template, paramMap); */StringWriter result = new StringWriter(1024);template.process(paramMap, result);return result.toString();
}

下载全部文件,返回的是zip包,就要先把文件在服务器上创建好打包返回,然后再删除缓存的文件:

/**
* 下载全部模板文件
* @param response
* @param tp
*/
public void downloadAllTemplateFile(HttpServletResponse response, TemplateParam tp) throws Exception {final String cachePath = fileProperty.getBaseDirectory() + ROOT_PATH;File file = new File(cachePath);if (!file.exists()) file.mkdirs();List<TemplateType> templateTypes = TemplateType.getAvailableTypes();List<File> cacheFiles = new ArrayList<>(templateTypes.size());for (TemplateType templateType : templateTypes) {/* 获取输出的文件名 */String fileName = ReflectUtil.getFieldValue(tp, templateType.getFilenameKey()).toString();fileName = fileName + templateType.getSuffix();/* 创建模板文件 */String fullPath = cachePath + File.separator + fileName;File templateFile = new File(fullPath);if (!templateFile.exists()) file.createNewFile();/* 获取输出的成型内容 */tp.setTemplateCode(templateType.getCode());String content = this.getTemplateContent(tp, templateType);/* 写入本地文件 */FileOutputStream fos = new FileOutputStream(fullPath);fos.write(content.getBytes());fos.close();cacheFiles.add(templateFile);}/* 创建压缩文件 */String zipFileName = cachePath + File.separator + tp.getTableName() + ".zip";File zipFile = new File(zipFileName);ZipUtil.zip(zipFile, false, cacheFiles.toArray(new File[]{}));/* 给压缩文件设置信息 */FileUtil.setDownloadResponseInfo(response, zipFile, zipFile.getName());/* 输出压缩文件 */BufferedInputStream in = cn.hutool.core.io.FileUtil.getInputStream(zipFile.getAbsolutePath());ServletOutputStream os = response.getOutputStream();IoUtil.copy(in, os, IoUtil.DEFAULT_BUFFER_SIZE);in.close();os.close();/* 删除本地缓存 */zipFile.delete();cacheFiles.forEach(File::delete);
}

上面的模板类型用枚举区分,枚举顺便存储一下模板的信息,这样取参数就方便了

一些没有写好的模板暂时设置null,逻辑就会跳过

package cn.cloud9.server.tool.template;import lombok.Getter;import java.util.Arrays;
import java.util.List;
import java.util.Objects;
import java.util.stream.Collectors;@Getter
public enum TemplateType {/* 没有文件 */NONE(null, null, null, null),/* 后台文件 */MODEL(1001, "/java/Model.java.ftl", "modelName", ".java"),MAPPER(1002, "/java/Mapper.java.ftl", "mapperName", ".java"),I_SERVICE(1003, "/java/IService.java.ftl", "iServiceName", ".java"),SERVICE_IMPL(1004, "/java/ServiceImpl.java.ftl", "serviceImplName", ".java"),CONTROLLER(1005, "/java/Controller.java.ftl", "controllerName", ".java"),/* 前端文件 */VUE_API(2001, "/vue/Api.js.ftl", "apiName", ".js"),/* VUE_VIEW(2002, "/vue/View.vue.ftl", "viewName", ".vue"), */VUE_VIEW(2002, "/vue/View.vue.ftl", null, null),;/* 编号和模板文件路径 */private final Integer code;private final String path;private final String filenameKey;private final String suffix;TemplateType(Integer code, String path, String filenameKey, String suffix) {this.code = code;this.path = path;this.filenameKey = filenameKey;this.suffix = suffix;}/*** 获取可用的模板类型集合* @return List<TemplateType>*/public static List<TemplateType> getAvailableTypes() {return Arrays.stream(values()).filter(t -> Objects.nonNull(t.code) && Objects.nonNull(t.path) && Objects.nonNull(t.filenameKey) && Objects.nonNull(t.suffix)).collect(Collectors.toList());}}

所有的模板参数统一用一个对象接受:

package cn.cloud9.server.tool.template;import cn.cloud9.server.struct.util.DateUtils;
import cn.hutool.db.Entity;
import lombok.Data;import java.time.LocalDateTime;
import java.util.List;@Data
public class TemplateParam {/* 注释信息部分 */private String author;private String projectName;private String dateTime;private String modelDescription;private String mapperDescription;private String iServiceDescription;private String serviceImplDescription;private String controllerDescription;/* 包路径 */private String modelPath;private String mapperPath;private String iServicePath;private String serviceImplPath;private String controllerPath;/* 类名称 & 文件名 */private String modelName;private String mapperName;private String iServiceName;private String serviceImplName;private String controllerName;private String apiName;/* controller接口与路径 */private String urlPath;/* 元数据信息 */private Integer dbConnId;private String schemaName;private String tableName;private List<Entity> columns;/* 模板类型枚举编号 */private Integer templateCode;/*** 设置当前时间*/public void setDateTime() {dateTime = DateUtils.format(LocalDateTime.now(), DateUtils.DEFAULT_DATE_TIME_FORMAT);}public TemplateType getTemplateTypeByCode() {return TemplateType.getAvailableTypes().stream().filter(tt -> tt.getCode().equals(templateCode)).findFirst().orElse(TemplateType.NONE);}public static TemplateType getTemplateTypeByCode(Integer ttCode) {return TemplateType.getAvailableTypes().stream().filter(tt -> tt.getCode().equals(ttCode)).findFirst().orElse(TemplateType.NONE);}
}

解决字段列的模板参数问题:

/**
* 获取列的元数据
* @param tp
*/
private void getColumnsMetaData(TemplateParam tp) throws Exception {Db db = Db.use(DbConnServiceImpl.getDsById(tp.getDbConnId()));String querySql ="SELECT\n" +"\tCOLUMN_NAME AS `columnName`,\n" +"\tREPLACE(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(\n" +"\tLOWER(COLUMN_NAME), '_a','A'),'_b','B'),'_c','C'),'_d','D'),'_e','E'),'_f','F'),'_g','G'),'_h','H'),'_i','I'),'_j','J'),'_k','K'),'_l','L'),'_m','M'),'_n','N'),'_o','O'),'_p','P'),'_q','Q'),'_r','R'),'_s','S'),'_t','T'),'_u','U'),'_v','V'),'_w','W'),'_x','X'),'_y','Y'),'_z','Z') AS `fieldName`,\n" +"\tCASE\n" +"\t\tWHEN DATA_TYPE ='bit' THEN 'Boolean'\n" +"\t\tWHEN DATA_TYPE ='tinyint' THEN 'Byte'\n" +"\t\tWHEN LOCATE(DATA_TYPE, 'smallint,mediumint,int,integer') > 0 THEN 'Integer'\n" +"\t\tWHEN DATA_TYPE = 'bigint' THEN 'Long'\n" +"\t\tWHEN LOCATE(DATA_TYPE, 'float, double') > 0 THEN 'Double'\n" +"\t\tWHEN DATA_TYPE = 'decimal' THEN 'BigDecimal'\n" +"\t\tWHEN LOCATE(DATA_TYPE, 'time, date, year, datetime, timestamp') > 0 THEN 'LocalDateTime'\n" +"\t\tWHEN LOCATE(DATA_TYPE, 'json, char, varchar, tinytext, text, mediumtext, longtext') > 0 THEN 'String'\n" +"\tELSE 'String' END AS `type`\n" +"FROM\n" +"\t`information_schema`.`COLUMNS`\n" +"WHERE\n" +"\t`TABLE_SCHEMA` = ? \n" +"\tAND `TABLE_NAME` = ? ";List<Entity> entityList = db.query(querySql, tp.getSchemaName(), tp.getTableName());tp.setColumns(entityList);
}

数据类型可以用CASE WHEN 解决,但是头疼的问题是,怎么解决MySQL的下划线转驼峰处理

大部分提供的方法都是所有字母全部Replace一边,办法笨归笨,但是有效,所有我这里也是用这个办法,没有写成函数处理

但是牛逼的群友提供了一个子查询的办法来实现:

SET @target = 'ABC_DEF_gh_asdqw';
SELECT group_concat(concat(upper(substr(SUBSTRING_INDEX(SUBSTRING_index(@target,'_',help_topic_id+1),'_',-1) ,1,1)),substr(lower(SUBSTRING_INDEX(SUBSTRING_index(@target,'_',help_topic_id+1),'_',-1)) ,2))separator '') AS num
FROM mysql.help_topic
WHERE help_topic_id <= length(@target)-LENGTH(replace(@target,'_',''))
order by help_topic_id desc

4、页面展示代码的几个功能问题:

一、展示代码块:

我看了若依源码是用了高亮JS,然后百度搜了下

"highlight.js": "^11.7.0",
"vue-highlightjs": "^1.3.3",

全局注册:

/* 挂载highlightJS */
import VueHighlightJS from 'vue-highlightjs'
import 'highlight.js/styles/monokai-sublime.css'
Vue.use(VueHighlightJS)

然后使用:

<pre v-loading="loadingFlag" v-highlightjs><code class="sql" v-text="createSQL" />
</pre>

二、复制粘贴功能:

这个再vue-admin后台框架里面已经装了,而且有案例:

标签添加粘贴板指令:

<div class="dialog-bottom-bar"><el-button v-clipboard:copy="createSQL" v-clipboard:success="clipboardSuccess" type="primary" size="mini" icon="el-icon-document">复制</el-button><el-button type="default" size="mini" icon="el-icon-close" @click="closeDialog">取消</el-button>
</div>

这里我没有全局注册,因为案例也没这么做,应该是个别功能用用

在使用的组件中导入指令并注册:

import clipboard from '@/directive/clipboard' // use clipboard by v-directiveexport default {name: 'CreateSqlView',directives: { clipboard }
}

复制成功事件绑定一个方法:

clipboardSuccess() {this.$message.success('复制成功')
},

三、扩展延申

一、集成Screw文档生成:

这个之前写过一份固定的,用读取ini配置文件方式生成的

https://www.cnblogs.com/mindzone/p/16315169.html

我想反正我都解决动态数据源的问题了,干脆把文档生成集成进来正好

文档参数对象:

package cn.cloud9.server.tool.doc;import cn.smallbun.screw.core.engine.EngineFileType;
import lombok.Data;import java.util.List;@Data
public class DbDocDTO {/* 文档名称 */private String docName;/* 文档标题 */private String docTitle;/* 组织名称 */private String organization;/* 组织连接 */private String organizationUrl;private String version;private String description;private Integer docType; /* 1,HTML 2,WORD 3,MD *//* 按指定的表名生成 */private List<String> specifyTables;/* 按指定的表前缀生成 */private List<String> specifyTablePrefixes;/* 按指定的表后缀生成 */private List<String> specifyTableSuffixes;/* 需要忽略的表名 */private List<String> ignoreTables;/* 需要忽略的表前缀 */private List<String> ignoreTablePrefixes;/* 需要忽略的表后缀 */private List<String> ignoreTableSuffixes;public EngineFileType getDocType() {switch (docType) {case 2: return EngineFileType.WORD;case 3: return EngineFileType.MD;default: return EngineFileType.HTML;}}
}

文档生成逻辑,就用官方Demo随便改改参数组合就OK了

package cn.cloud9.server.tool.doc;import cn.cloud9.server.struct.file.FileProperty;
import cn.cloud9.server.struct.file.FileUtil;
import cn.cloud9.server.tool.ds.DbConnDTO;
import cn.cloud9.server.tool.ds.DbConnMapper;
import cn.hutool.core.io.IoUtil;
import cn.smallbun.screw.core.Configuration;
import cn.smallbun.screw.core.engine.EngineConfig;
import cn.smallbun.screw.core.engine.EngineTemplateType;
import cn.smallbun.screw.core.execute.DocumentationExecute;
import cn.smallbun.screw.core.process.ProcessConfig;
import com.zaxxer.hikari.HikariConfig;
import com.zaxxer.hikari.HikariDataSource;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.collections.CollectionUtils;
import org.springframework.stereotype.Service;import javax.annotation.Resource;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedInputStream;
import java.io.File;
import java.io.IOException;
import java.util.Collections;@Slf4j
@Service
public class DbDocService {@Resourceprivate FileProperty fileProperty;@Resourceprivate DbConnMapper dbConnMapper;/*** 生成mysql文档* @param dbId 连接实体* @param schemaName 约束名* @param dto 文档参数实体* @param response 响应对象* @throws IOException IO异常*/public void getDbSchemaDoc(Integer dbId, String schemaName, DbDocDTO dto, HttpServletResponse response) throws IOException {Configuration config = Configuration.builder().organization(dto.getOrganization()) // 组织机构.organizationUrl(dto.getOrganizationUrl()) // 组织链接.title(dto.getDocTitle()) // 文档标题.version(dto.getVersion()) // 版本.description(dto.getDescription()) // 描述.dataSource(buildDataSource(dbId, schemaName)) // 数据源.engineConfig(buildEngineConfig(dto)) // 引擎配置.produceConfig(buildProcessConfig(dto)) // 处理配置.build();new DocumentationExecute(config).execute();/* 从服务器本地读取生成的文档文件下载 */final String fileName =  dto.getDocName() + dto.getDocType().getFileSuffix();final File docFile = new File(fileProperty.getBaseDirectory() + File.separator + fileName);if (!docFile.exists()) return;FileUtil.setDownloadResponseInfo(response, docFile, fileName);/* 下载 */BufferedInputStream in = cn.hutool.core.io.FileUtil.getInputStream(docFile.getAbsolutePath());ServletOutputStream os = response.getOutputStream();long copySize = IoUtil.copy(in, os, IoUtil.DEFAULT_BUFFER_SIZE);log.info("文档生成成功! {}bytes", copySize);in.close();os.close();/* 必须要等到其他IO流使用完毕资源释放了才能操作删除 */docFile.delete();}private HikariDataSource buildDataSource(Integer dbId, String schemaName) {DbConnDTO dbConn = dbConnMapper.selectById(dbId);// 创建 HikariConfig 配置类HikariConfig hikariConfig = new HikariConfig();hikariConfig.setDriverClassName("com.mysql.cj.jdbc.Driver");hikariConfig.setJdbcUrl("jdbc:mysql://" + dbConn.getHost() + ":" + dbConn.getPort() + "/" + schemaName);hikariConfig.setUsername(dbConn.getUsername());hikariConfig.setPassword(dbConn.getPassword());// 设置可以获取 tables remarks 信息hikariConfig.addDataSourceProperty("useInformationSchema", "true");hikariConfig.addDataSourceProperty("characterEncoding", "utf-8");hikariConfig.addDataSourceProperty("useSSL", "false");hikariConfig.addDataSourceProperty("serverTimezone", "UTC");hikariConfig.addDataSourceProperty("useAffectedRows", "true");hikariConfig.setMinimumIdle(2);hikariConfig.setMaximumPoolSize(5);// 创建数据源return new HikariDataSource(hikariConfig);}private ProcessConfig buildProcessConfig(DbDocDTO dto) {return ProcessConfig.builder()// 根据名称指定表生成.designatedTableName(CollectionUtils.isEmpty(dto.getSpecifyTables()) ? Collections.emptyList() : dto.getSpecifyTables())// 根据表前缀生成.designatedTablePrefix(CollectionUtils.isEmpty(dto.getSpecifyTablePrefixes()) ? Collections.emptyList() : dto.getSpecifyTablePrefixes())// 根据表后缀生成.designatedTableSuffix(CollectionUtils.isEmpty(dto.getSpecifyTableSuffixes()) ? Collections.emptyList() : dto.getSpecifyTableSuffixes())// 忽略数据库中address这个表名.ignoreTableName(CollectionUtils.isEmpty(dto.getIgnoreTables()) ? Collections.emptyList() : dto.getIgnoreTables())// 忽略表前缀,就是db1数据库中表名是t_开头的都不生产数据库文档(t_student,t_user这两张表).ignoreTablePrefix(CollectionUtils.isEmpty(dto.getIgnoreTablePrefixes()) ? Collections.emptyList() : dto.getIgnoreTablePrefixes())// 忽略表后缀(就是db1数据库中表名是_teacher结尾的都不生产数据库文档:stu_teacher).ignoreTableSuffix(CollectionUtils.isEmpty(dto.getIgnoreTableSuffixes()) ? Collections.emptyList() : dto.getIgnoreTableSuffixes()).build();}/*** 引擎配置创建* @param dto 文档参数实体* @return EngineConfig*/private EngineConfig buildEngineConfig(DbDocDTO dto) {return EngineConfig.builder()// 生成文件路径.fileOutputDir(fileProperty.getBaseDirectory())// 打开目录.openOutputDir(false)// 文件类型.fileType(dto.getDocType())// 文件类型.produceType(EngineTemplateType.freemarker)// 自定义文件名称.fileName(dto.getDocName()).build();}
}

Vue前端表单view:

<template><div><el-form :ref="formRef" :model="form" :rules="formRules" size="small"><el-row :gutter="$ui.layout.gutter.g10"><el-col :span="$ui.layout.span.two"><el-form-item label="文件名" prop="docName"><el-input v-model="form.docName" placeholder="文件名" clearable maxlength="32" show-word-limit /></el-form-item></el-col><el-col :span="$ui.layout.span.two"><el-form-item label="文档标题" prop="docTitle"><el-input v-model="form.docTitle" placeholder="文档标题" clearable maxlength="32" show-word-limit /></el-form-item></el-col><el-col :span="$ui.layout.span.two"><el-form-item label="文档版本" prop="version"><el-input v-model="form.version" placeholder="文档版本" clearable maxlength="32" show-word-limit /></el-form-item></el-col><el-col :span="$ui.layout.span.two"><el-form-item label="文档描述" prop="description"><el-input v-model="form.description" placeholder="文档描述" clearable maxlength="32" show-word-limit /></el-form-item></el-col><el-col :span="$ui.layout.span.two"><el-form-item label="组织机构" prop="organization"><el-input v-model="form.organization" placeholder="组织机构" clearable maxlength="32" show-word-limit /></el-form-item></el-col><el-col :span="$ui.layout.span.two"><el-form-item label="组织机构链接" prop="organizationUrl"><el-input v-model="form.organizationUrl" placeholder="组织机构链接" clearable maxlength="64" show-word-limit /></el-form-item></el-col><el-col :span="$ui.layout.span.two"><el-form-item label="指定生成的表" prop="specifyTables"><el-input v-model="form.specifyTables" placeholder="指定生成的表" clearable maxlength="128" show-word-limit /></el-form-item></el-col><el-col :span="$ui.layout.span.two"><el-form-item label="指定生成的表前缀" prop="specifyTablePrefixes"><el-input v-model="form.specifyTablePrefixes" placeholder="指定生成的表前缀" clearable maxlength="128" show-word-limit /></el-form-item></el-col><el-col :span="$ui.layout.span.two"><el-form-item label="指定生成的表后缀" prop="specifyTableSuffixes"><el-input v-model="form.specifyTableSuffixes" placeholder="指定生成的表后缀" clearable maxlength="128" show-word-limit /></el-form-item></el-col><el-col :span="$ui.layout.span.two"><el-form-item label="要忽略的表" prop="specifyTables"><el-input v-model="form.ignoreTables" placeholder="要忽略的表" clearable maxlength="128" show-word-limit /></el-form-item></el-col><el-col :span="$ui.layout.span.two"><el-form-item label="要忽略的表前缀" prop="specifyTablePrefixes"><el-input v-model="form.ignoreTablePrefixes" placeholder="要忽略的表前缀" clearable maxlength="128" show-word-limit /></el-form-item></el-col><el-col :span="$ui.layout.span.two"><el-form-item label="要忽略的表后缀" prop="specifyTableSuffixes"><el-input v-model="form.ignoreTableSuffixes" placeholder="要忽略的表后缀" clearable maxlength="128" show-word-limit /></el-form-item></el-col><el-col :span="$ui.layout.span.two"><el-form-item label="文件类型" prop="docType"><el-select v-model="form.docType" placeholder="请选择" clearable style="width: 100%"><el-option v-for="item in docTypes" :key="item.value" :label="item.label" :value="item.value" /></el-select></el-form-item></el-col></el-row></el-form><div align="center"><el-button size="mini" type="primary" icon="el-icon-check" @click="formSubmit">确定</el-button><el-button size="mini" type="default" plain icon="el-icon-close" @click="formCancel">取消</el-button></div></div>
</template><script>
import { getDbSchemaDoc } from '@/api/tt-server/tool-lib/mysql-visualize'
import { axiosDownloadFile } from '@/utils'export default {name: 'CreateDocView',props: {param: {type: Object,required: true,default: () => {}}},data() {return {formRef: 'formRefKey',form: {docName: '',docTitle: '',version: 'V1.0.0',docType: 1,description: '',organization: 'OnCloud9',organizationUrl: 'https://www.cnblogs.com/mindzone/',/* 输出的表指定参数 */specifyTables: '',specifyTablePrefixes: '',specifyTableSuffixes: '',ignoreTables: '',ignoreTablePrefixes: '',ignoreTableSuffixes: ''},formRules: {docName: [{ required: true, message: '请填写文件名', trigger: 'blur' }],docTitle: [{ required: true, message: '请填写文档标题', trigger: 'blur' }],version: [{ required: true, message: '请填写文档版本', trigger: 'blur' }],description: [{ required: true, message: '请填写文档描述', trigger: 'blur' }],organization: [{ required: true, message: '请填写组织机构', trigger: 'blur' }],organizationUrl: [{ required: true, message: '请填写组织机构链接', trigger: 'blur' }],docType: [{ required: true, message: '请选择文件类型', trigger: 'blur' }]},docTypes: [{ label: 'html | .html', value: 1 },{ label: 'word | .docx', value: 2 },{ label: 'markdown | .md', value: 3 }]}},methods: {formSubmit() {this.$refs[this.formRef].validate(async(isValid) => {if (!isValid) returnconst docParam = JSON.parse(JSON.stringify(this.form))docParam.specifyTables = docParam.specifyTables ? docParam.specifyTables.split(',') : ''docParam.specifyTablePrefixes = docParam.specifyTablePrefixes ? docParam.specifyTablePrefixes.split(',') : ''docParam.specifyTableSuffixes = docParam.specifyTableSuffixes ? docParam.specifyTableSuffixes.split(',') : ''docParam.ignoreTables = docParam.ignoreTables ? docParam.ignoreTables.split(',') : ''docParam.ignoreTablePrefixes = docParam.ignoreTablePrefixes ? docParam.ignoreTablePrefixes.split(',') : ''docParam.ignoreTableSuffixes = docParam.ignoreTableSuffixes ? docParam.ignoreTableSuffixes.split(',') : ''const res = await getDbSchemaDoc(this.param.dbConnId, this.param.schemaName, docParam)axiosDownloadFile(res)})},formCancel() {this.$parent.$parent['closeAllDrawer']()}}
}
</script>

二、实现导出SQL脚本

先看导出表结构,表结构的SQL是有SQL可以直接查询的

mysql> SHOW CREATE TABLE sys_role;
+----------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| Table    | Create Table                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+----------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| sys_role | CREATE TABLE `sys_role` (`id` int NOT NULL AUTO_INCREMENT COMMENT '角色主键',`role_name` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '角色名称',`role_value` varchar(32) COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '角色值',`creator` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '创建人',`create_time` datetime DEFAULT NULL COMMENT '创建时间',`updater` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '更新人',`update_time` datetime DEFAULT NULL COMMENT '更新时间',PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci COMMENT='系统角色表' |
+----------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
1 row in set (0.10 sec)

  

但是导出数据脚本就没有,这个SQL脚本难就难在这里,于是我百度了下看看别人的思路:

然后参考了这位的:

https://blog.csdn.net/z1353095373/article/details/109679268?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22109679268%22%2C%22source%22%3A%22unlogin%22%7Dy 

他的办法就是从查询的结果集里面提取key和value一个个拼过去

但是我们都知道,前面的INSERT的句式是固定的,只是值动态的,所以我不太接受他这个拼的做法

因为既然是固定的东西就不应该浪费资源去反复做,一开始就拼好固定句式再加动态值就行了

1、提取表的所有字段:

SQL我就不细说过程了,直接贴:

mysql> SELECT GROUP_CONCAT(DISTINCT CONCAT('`', COLUMN_NAME, '`') ORDER BY `ORDINAL_POSITION` ASC SEPARATOR ', ') AS `fields` FROM `information_schema`.`COLUMNS` WHERE TABLE_SCHEMA = 'tt' AND TABLE_NAME = 'sys_role';
+-------------------------------------------------------------------------------------+
| fields                                                                              |
+-------------------------------------------------------------------------------------+
| `id`, `role_name`, `role_value`, `creator`, `create_time`, `updater`, `update_time` |
+-------------------------------------------------------------------------------------+

 

通过上面的SQL你就可以直接得到SELECT要查询的字段,

再把字段用SEPARATOR的字符分割成数组,就得到结果集需要按顺序遍历提取的字段了

由于Hutool的查询默认小写处理,所以这个结果默认也小处理,顺便移除反引号(解决key取不到的问题)

/* 获取这个表的字段, 按原始定位排序, 并列为一行, 逗号空格分隔 */
Entity fieldsEntity= db.queryOne("SELECT GROUP_CONCAT(DISTINCT CONCAT('`', COLUMN_NAME, '`') ORDER BY `ORDINAL_POSITION` ASC SEPARATOR ', ') AS `fields` FROM `information_schema`.`COLUMNS` WHERE TABLE_SCHEMA = ? AND TABLE_NAME = ?", schemaName, tableName);
String fields = fieldsEntity.get("fields").toString();
String[] columns = fields.trim().toLowerCase().replaceAll("`", "").split(", ");

  

有前面的字段,就有了固定句式了

1

2

/* 这张表固定的字段格式 */

final String specifyFields = "INSERT INTO `" + tableName + "` (" + fields + ") VALUES (";

  

 再通过翻页查询,动态组装值就可以了

如果值是NULL,就写NULL,数值和时间都可以是字符型来存

/**
* 翻页查询来组装INSERT脚本 缓解IO压力
* @param builder 脚本组装对象
* @param db sql执行对象
* @param schemaName 库名
* @param tableName 表明
* @param insertSqlPrePart INSERT前半部分
* @param columns 列名数组
*/
public void batchBuildInsertSql(StringBuilder builder, Db db, String schemaName, String tableName, String insertSqlPrePart, String[] columns) {try {int pageIdx = 0;int pageSize = 1000;int pageTotal = 1;final Entity condition = Entity.create();condition.setTableName("`" + schemaName + "`.`" + tableName + "`");while(pageIdx < pageTotal) {PageResult<Entity> pageResult = db.page(condition, new Page(pageIdx, pageSize));if (CollectionUtils.isEmpty(pageResult)) return;pageTotal = pageResult.getTotalPage();++ pageIdx;/* 组装INSERT语句 */for (Entity recordEntity : pageResult) {builder.append(insertSqlPrePart);List<String> valList = new ArrayList<>();for (String column : columns) {Object val = recordEntity.get(column.trim());boolean isEmpty = Objects.isNull(val);valList.add(isEmpty ? "NULL" : "'" + val + "'");}String joinedValues = String.join(", ", valList);builder.append(joinedValues).append(");\n");}builder.append("\n\n");}} catch (Exception e) {e.printStackTrace();}
}

  

三、Axios下载文件的问题

1、文件的接口都需要声明响应类型是blob,这要才能认定为文件

/*** 下载模板文件* @param data* @returns {*}*/
export function downloadTemplate(data) {return request({url: `${PATH}/download`,method: 'post',responseType: 'blob',data})
}/*** 下载全部文件* @param data* @returns {*}*/
export function downloadAllTemplate(data) {return request({url: `${PATH}/download-all`,method: 'post',responseType: 'blob',data})
}

  

2、改写Request.js,因为默认的axios是不接受任何文件形式的响应对象

只要没有code就直接报错,但是接口实际上是正常返回

 改写就是追加前置条件,如果请求头说明了content-type信息,并且能在以下type中找到,就直接返回整个response对象

const fileHeaders = ['text/plain','text/html','application/vnd.ms-word2006ml','text/x-web-markdown','application/x-rar-compressed','application/x-zip-compressed','application/octet-stream','application/zip','multipart/x-zip','text/x-sql'
]

  

 然后axios包装的response,不能直接下载,要给浏览器包装之后通过超链接点击实现下载:

/*** 转成文件流之后,可以通过模拟点击实现下载效果* axios下载文件, 请求接口需要追加属性:responseType: 'blob'* @param response*/
export function axiosDownloadFile(response) {/* js创建一个a标签 */const element = document.createElement('a')/* 文档流转化成Base64 */const href = window.URL.createObjectURL(response.data)element.href = href/* 下载后文件名 */element.download = decodeURIComponent(response.headers['content-disposition'].match(/filename=(.*)/)[1])document.body.appendChild(element)/* 点击下载 */element.click()/* 下载完成移除元素 */document.body.removeChild(element)window.URL.revokeObjectURL(href)
}

  

源码仓库,已开放访问:

https://download.csdn.net/download/askuld/88216937

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/91603.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微服务与Nacos概述-6

RBAC 模型 RBAC 基于角色的访问控制是实施面向企业安全策略的一种有效的访问控制方式。 基本思想是&#xff0c;对系统操作的各种权限不是直接授予具体的用户&#xff0c;而是在用户集合与权限集合之间建立一个角色集合。每一种角色对应一组相应的权限。一旦用户被分配了适当…

时序预测 | MATLAB实现EEMD-GRU、GRU集合经验模态分解结合门控循环单元时间序列预测对比

时序预测 | MATLAB实现EEMD-GRU、GRU集合经验模态分解结合门控循环单元时间序列预测对比 目录 时序预测 | MATLAB实现EEMD-GRU、GRU集合经验模态分解结合门控循环单元时间序列预测对比效果一览基本介绍模型搭建程序设计参考资料 效果一览 基本介绍 1.MATLAB实现EEMD-GRU、GRU时…

SpringBoot 的自动装配特性

1. Spring Boot 的自动装配特性 Spring Boot 的自动装配&#xff08;Auto-Configuration&#xff09;是一种特性&#xff0c;它允许您在应用程序中使用默认配置来自动配置 Spring Framework 的各种功能和组件&#xff0c;从而减少了繁琐的配置工作。通过自动装配&#xff0c;您…

操作系统—网络系统

什么是零拷贝 磁盘是计算机系统最慢的的硬件之一&#xff0c;所以有不少优化磁盘的方法&#xff0c;比如零拷贝、直接IO、异步IO等等&#xff0c;这些优化的目的是为了提高系统的吞吐量&#xff0c;另外操作系统内核中的磁盘高度缓存区&#xff0c;可以有效的减少磁盘的访问次…

matlab使用教程(15)—图论基础

1.有向图和无向图 1.1什么是图&#xff1f; 图是表示各种关系的节点和边的集合&#xff1a; • 节点 是与对象对应的顶点。 • 边 是对象之间的连接。 • 图的边有时会有权重 &#xff0c;表示节点之间的每个连接的强度&#xff08;或一些其他属性&#xff09;。 这些定…

嵌入式Linux开发实操(八):UART串口开发

串口可以说是非常好用的一个接口,它同USB、CAN、I2C、SPI等接口一样,为SOC/MCU构建了丰富的接口功能。那么在嵌入式linux中又是如何搭建和使用UART接口的呢? 一、Console接口即ttyS0 ttyS0通常做为u-boot(bootloader的一种,像是Windows的BIOS),它需要一个交互界面,一般…

pytest 编写规范

一、pytest 编写规范 1、介绍 pytest是一个非常成熟的全功能的Python测试框架&#xff0c;主要特点有以下几点&#xff1a; 1、简单灵活&#xff0c;容易上手&#xff0c;文档丰富&#xff1b;2、支持参数化&#xff0c;可以细粒度地控制要测试的测试用例&#xff1b;3、能够…

问AI一个严肃的问题

chatgpt的问世再一次掀起了AI的浪潮&#xff0c;其实我一直在想&#xff0c;AI和人类的关系未来会怎样发展&#xff0c;我们未来会怎样和AI相处&#xff0c;AI真的会完全取代人类吗&#xff0c;带着这个问题&#xff0c;我问了下chatgpt&#xff0c;看一看它是怎么看待这个问题…

DNS WEB HTTP

DNS与域名 网络是基于 TCP/IP 协议进行通信和连接的。 每一台主机都有唯一的标识&#xff0c;用于区别在网络上成千上万个用户和计算机。即固定的IP地址&#xff08;32位二进制数转换成为十进制数——点分十进制&#xff09;。每一个与网络相连接的计算机和服务器都被指派一个…

应用程序运行报错:First section must be [net] or [network]:No such file or directory

应用程序报错环境&#xff1a; 在linux下&#xff0c;调用darknet训练的模型&#xff0c;报错&#xff1a;First section must be [net] or [network]:No such file or directory&#xff0c;并提示&#xff1a;"./src/utils.c:256: error: Assertion 0 failed." 如…

pytest自动化测试框架tep环境变量、fixtures、用例三者之间的关系

tep是一款测试工具&#xff0c;在pytest测试框架基础上集成了第三方包&#xff0c;提供项目脚手架&#xff0c;帮助以写Python代码方式&#xff0c;快速实现自动化项目落地。 在tep项目中&#xff0c;自动化测试用例都是放到tests目录下的&#xff0c;每个.py文件相互独立&…

TPAMI, 2023 | 用压缩隐逆向神经网络进行高精度稀疏雷达成像

CoIR: Compressive Implicit Radar | IEEE TPAMI, 2023 | 用压缩隐逆向神经网络进行高精度稀疏雷达成像 注1:本文系“无线感知论文速递”系列之一,致力于简洁清晰完整地介绍、解读无线感知领域最新的顶会/顶刊论文(包括但不限于Nature/Science及其子刊;MobiCom, Sigcom, MobiSy…

go的gin和gorm框架实现切换身份的接口

使用go的gin和gorm框架实现切换身份的接口&#xff0c;接收前端发送的JSON对象&#xff0c;查询数据库并更新&#xff0c;返回前端信息 接收前端发来的JSON对象&#xff0c;包含由openid和登陆状态组成的一个string和要切换的身份码int型 后端接收后判断要切换的身份是否低于该…

云原生网关API标准背景及发展现状

Gateway API是一个开源的API标准&#xff0c;源自Kubernetes SIG-NETWORK兴趣组。从出身角度讲&#xff0c;可谓根正苗红&#xff0c;自从开源以来备受关注&#xff0c;被寄予厚望。Gateway API旨在通过声明式、可扩展性和面向角色的接口来发展Kubernetes服务网络&#xff0c;并…

基于Selenium技术方案的爬虫入门实践

通过爬虫技术抓取网页&#xff0c;动态加载的数据或包含 JavaScript 的页面&#xff0c;需要使用一些特殊的技术和工具。以下是一些常用的技术方法&#xff1a; 使用浏览器模拟器&#xff1a;使用像 Selenium、PhantomJS 或其他类似工具可以模拟一个完整的浏览器环境&#xff0…

vue基础知识三:v-show和v-if有什么区别?使用场景分别是什么?

一、v-show与v-if的共同点 我们都知道在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else)&#xff0c;都能控制元素在页面是否显示 在用法上也是相同的 <Model v-show"isShow" /> <Model v-if"isShow" />当表达式为true的时候&#…

9.3.2.2网络原理(传输层TCP)

TCP全部细节参考RFC标准文档 一.TCP特点: 有连接,可靠传输,面向字节流,全双工. 二.TCP数据报: 1.端口号是传输层的重要概念. 2.TCP的报头是变长的(UDP是固定的8字节),大小存在4位首部长度中,用4个bit位(0~15)表示长度单位是4字节.(TCP报头最大长度是60字节,前面20字节是固定…

[MAUI]在.NET MAUI中实现可拖拽排序列表

.NET MAUI 中提供了拖放(drag-drop)手势识别器&#xff0c;允许用户通过拖动手势来移动控件。在这篇文章中&#xff0c;我们将学习如何使用拖放手势识别器来实现可拖拽排序列表。在本例中&#xff0c;列表中显示不同大小的磁贴&#xff08;Tile&#xff09;并且可以拖拽排序。 …

【D3.js 01】

D3.js 01 说在前面1 概述2 配置Web环境3 HTML4 SVG5 DOM6 JS7 常用接口8 D3语法基础9 使用D3查询SVG10 使用D3设置SVG中属性11 修改整组属性12 使用D3添加与删除SVG元素13 数据读取 —— CSV数据14 D3.js的数值计算15 比例尺Scale - LinearScale - Band 16 引入坐标轴17 DATA-J…

13.3 目标检测和边界框

锚框的计算公式 假设原图的高为H,宽为W 详细公式推导 以同一个像素点为锚框&#xff0c;可以生成 (n个缩放 m个宽高比 -1 )个锚框 锚框的作用&#xff1a; 不用直接去预测真实框的四个坐标&#xff0c;而是&#xff1a; 1.先生成多个锚框。 2.预测每个锚框里是否含有要预测…