继续上一篇文章
一index代码详解
路径/src/view/tool/gen/index
1、引入依赖组件
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低代码开发平台
请关注我,本星球会持续推出更多的开源项目代码解析,如有更好的意见请留言回复或者私信