继续上一篇文章
一index代码详解
路径/src/view/tool/gen/index1、引入依赖组件
import { listTable, previewTable, delTable, genCode, synchDb } from "@/api/tool/gen";
import importTable from "./importTable";
import hljs from "highlight.js/lib/highlight";
import "highlight.js/styles/github-gist.css";
hljs.registerLanguage("java", require("highlight.js/lib/languages/java"));
hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("html", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("vue", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("javascript", require("highlight.js/lib/languages/javascript"));
hljs.registerLanguage("sql", require("highlight.js/lib/languages/sql"));"@/api/tool/gen"：封装后端接口服务，listTable（获取列表接口），previewTable（预览数据库表），delTable（删除数据库表），genCode（代码生成），synchDb（同步数据库字段）
import importTable from "./importTable"; // 引用页面组件，导入数据库表页面。该组件生效需要在export default 里面的components进行声明
components: { importTable },importTable在页面使用如下：
<import-table ref="import" @ok="handleQuery" />import hljs from "highlight.js/lib/highlight"; //Highlight 用于将源码输出为语法高亮的格式文件：
- 支持输出为 HTML, XHTML, RTF, ODT, TeX, LaTeX, SVG 格式
- 支持 180 种编程语言
- 包含 80 种着色风格
- 语法定义方式为正则表达式或文本列表
- 自定义关键词分组
- 识别语言内嵌套的其他语言
- 支持格式化 C, C++, C# 和 Java 代码（通过 AStyle 实现）
- 语言定义和主题风格都是用的 Lua 脚本
- 插件功能
- 提供了 CLI 命令行工具和 GUI 界面（有中文界面）的程序，以及 Libs
- 跨平台工具
hljs.registerLanguage//hljs是highlight创建的一个实列对象，参见上面的import，该方法是注册开发语言。
2、activated（）函数说明
keep-alive和created
当keepalive页面缓存下来的时候，只会调用一次created这个钩子函数，因为已经被缓存下来了，所以我们在created中获取按钮权限的话，tab栏再次进入的话 就不会 触发created钩子了，created这个钩子就是只有页面渲染的时候会触发，取而代之的是使用我们的activated钩子函数
注意：当keepalive页面缓存下来的时候,如果页面有activated钩子和created钩子函数，这两个函数会被同时触发
- activated被 keep-alive 缓存的组件激活时调用。
- 下面的逻辑是从路由里面获取参数时间（this.$route.query.t），页数（this.$route.query.pageNum），再调用this.getList() 方法获取数据列表
activated() {
const time = this.$route.query.t;
if (time != null && time != this.uniqueId) {
this.uniqueId = time;
this.queryParams.pageNum = Number(this.$route.query.pageNum);
this.getList();
}
},3、this.getList()函数说明
getList函数里面会调用listTable函数，该函数是从import { listTable, previewTable, delTable, genCode, synchDb } from "@/api/tool/gen";引入，从gen.js文件可以看到listTable的方法
/** 查询表集合 */
getList() {
this.loading = true;
listTable(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.tableList = response.rows;
this.total = response.total;
this.loading = false;
}
);
},如下是gen.js的listTable函数，函数里面使用httpget请求，调用后台的接口（接口地址是：'/tool/gen/list'）
// 查询生成表数据
export function listTable(query) {
return request({
url: '/tool/gen/list',
method: 'get',
params: query
})
}4、生成代码按钮实现逻辑
如下图，列表右侧有一个生成代码的按钮
按钮的代码
<el-button
type="text"
size="small"
icon="el-icon-download"
@click="handleGenTable(scope.row)"
v-hasPermi="['tool:gen:code']"
>生成代码</el-button>按钮代码里面有一个click的方法，这个是指点击后执行handleGenTable的操作，其中函数传入一个参数scope.row，该行的记录，下面是handleGenTable执行逻辑
/** 生成代码操作 */
handleGenTable(row) {
const tableNames = row.tableName || this.tableNames;
if (tableNames == "") {
this.$modal.msgError("请选择要生成的数据");
return;
}
if(row.genType === "1") {
genCode(row.tableName).then(response => {
this.$modal.msgSuccess("成功生成到自定义路径：" + row.genPath);
});
} else {
this.$download.zip("/tool/gen/batchGenCode?tables=" + tableNames, "ruoyi.zip");
}
},handleGenTable处理逻辑
1.判断表名称是否为空，如果为空，则请选择生成的数据
2.如果生成的类型是1（row.genType），则自动生成到指定的文件夹
3.否则直接下载到本地
二、未来计划
1、ruoyi非分离版本拆解
2、ruoyi-vue-pro：讲解工作流
3、ruoyi-vue-pro：支付模块，电商模块
4、基于ruoyi-vue-pro项目开发
5、JEECG低代码开发平台
请关注我，本星球会持续推出更多的开源项目代码解析，如有更好的意见请留言回复或者私信