若依框架二次开发学习、问题解决记录总结（持续更新中）

lsajie

已于 2024-06-26 11:22:33 修改

阅读量2.4k

点赞数 4

文章标签： vue.js 前端后端

于 2023-06-13 16:29:59 首次发布

本文链接：https://blog.csdn.net/lsajie/article/details/130562044

版权

一、前端

部门树应用


import {deptTreeSelect} from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  components: {Treeselect},
  data() {
    return {
      // 部门树选项
      deptOptions: undefined,
      // 部门名称
      deptName: undefined,  
  defaultProps: {
      children: "children",
         label: "label"
      },
  };
  },
  created() {
    this.getList();
    this.getDeptTree();
  },
}

关联查询

//加入关联表
<resultMap>
    <association property="SysDept" javaType="SysDept">
        <id property="deptId" column="dept_id"></id>
        <result property="deptName" column="dept_name"/>
    </association>
</resultMap>

vue中el-date-picker日期选择器清空按钮bug

点击清空按钮时会报错,出现这种情况的原因是: 当点击清除按钮的时候，value会被设置为null。

  watch: {
    /**el-date-picker日期选择器清空按钮bug修复，清空时给赋值为[]*/
    dateRange(newVal) {
      if (!newVal) {
        this.dateRange = [];
      }
    },
  },

Vue中this.$router.push（参数）实现页面跳转

在执行点击按钮跳转页面之前会执行一系列方法，这时可以使用 this.$router.push(location) 来修改 url，完成跳转。push 后面可以是对象，也可以是字符串：

// 字符串
this.$router.push('/home/first')
// 对象 query相当与发送了一次get请求，请求参数会显示在浏览器地址栏中
this.$router.push({ path: '/home/first' })
// 命名的路由 params相当与发送了一次post请求，请求参数则不会显示，并且刷新页面之后参数会消失
this.$router.push({ name:'Login', params: { id: this.id } )
// 当路由配置更改为
//路由配置：
//{path:'/login/:id',name:'Login',component:Login}
//并且再次发送请求，请求数据不会随着页面的刷新而消失，跳转页面并传递参数的方法：1.Params

由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。及通过路由配置的name属性访问，在路由配置文件中定义参数：

/* router.js 文件*/
import Vue from "vue";
import Router from "vue-router";
import MediaSecond from "@/views/EnterprisePage/MediaMatrix/second";

//资讯列表
Vue.use(Router);
export default new Router({
routes: [ /* 进行路由配置 */
{
name: "MediaSecond",
path: "/MediaSecond",
component: MediaSecond
},
]
})
/* 后面还需要接一空行，否则无法通过 ESlint 语法验证 */通过name获取页面，传递params：

this.$router.push({ name: 'MediaSecond',params:{artistName:artistName,imgUrl:imgUrl,type:2} })
在目标页面通过this.$route.params获取参数：

if (this.$route.params.type == 2) {
this.type = apis.getAtistDetails;
} else {
this.type = apis.getMessageList;
}
2.Query

页面通过path/name和query传递参数，该实例中row为某行表格数据

this.$router.push({ name: 'DetailManagement', query: { auditID: row.id, type: '2' } });
this.$router.push({ path: '/DetailManagement', query: { auditID: row.id, type: '2' } });
在目标页面通过this.$route.query获取参数：

this.$route.query.type

问题解决汇总

nested exception is org.apache.ibatis.reflection.ReflectionException: There is no getter for property named 'xxx' in 'class com.ruoyi.xxx.domain.xxx'

首先验证参数名拼写是否正确

无法将类 com.ruoyi.common.core.domain.entity.SysRole中的构造器 SysRole应用到给定类型;

我的解决办法是，根据错误提示解决办法创建了对应的构造函数

    /**
     * 查询所有角色
     * 
     * @return 角色列表
     */
    @Override
    public List<SysRole> selectRoleAll()
    {
        return SpringUtils.getAopProxy(this).selectRoleList(new SysRole());
    }

系统接口404异常

感觉没有任何问题的时候仍提示该错误，一定要检查进程中是否真正的断掉了原来的进程，如果没有真正意义上的重启，会总是提示404错误的。

Web server failed to start. Port 8080 was already in use.

关掉占用8080端口的进程

1、键盘输入（win+r），接着在运行对话框中输入“cmd”，进入命令窗口；

2、输入netstat -ano|findstr "8080"，回车；

3、接着输入tasklist|findstr "xxxx"，回车得到占用8080端口的进程；

4、打开“任务管理器”，定位改进程，然后结束进程，8080端口占用被取消或者使用命令关闭：taskkill -PID xxxx -F

5、如果项目变更路径，重新打开导入新路径下的项目后，找到pom文件，对pom文件点击右键，找到maven，点击Reload project即可

出现Unknown custom element: ＜＞ - did you register the component correctly? For recursive compon 检查以下几处

第一种：看 components:{},单词是否拼错，和不要写成components(){}
第二种：本页面components 看写了几个，是否是因为覆盖了。只能有一个components:{}

第三种，检查引入的组件确定是否需要{} , import XXX from "...." 还是 import { XXX } from "...."

第四种： div 的id和 components的name一样也会报这个错误，也就是页面不要出现相同id的名字

Invalid prop: type check failed for prop “dataSource“. Expected , got Array

意思就是参数定义和实际获得的数据类型不一致

//修改前
const props = defineProps({
    dataSource:[]
});
//修改后
const props = defineProps({
    dataSource:{type: Array, default: ()=>[]}
});

ECharts

在vue中使用echarts渲染图表的使用步骤

npm install echarts --save

错误提示：TypeError: Cannot read properties of undefined (reading ‘init‘)

当时检查了导入引用都没有出错，查阅文档发现可能是下载了Echarts的最新版本
所以就重新下载了4.0版本覆盖之前下载的版本启动项目运行成功了

npm install echarts@4.8.0 --save

使用navicat连接远程linux mysql数据库出现10061未知故障

使用使用navicat连接远程linux mysql数据库出现10061未知故障，设置使用ssh连接后出现2013故障

本机环境：win10 navicat premium

mysql数据库主机环境：Linux version 4.15.0-42-generic (buildd@lgw01-amd64-023) (gcc version 7.3.0 (Ubuntu 7.3.0-16ubuntu3)) #45-Ubuntu SMP Thu Nov 15 19:32:57 UTC 2018

mysql Ver 14.14 Distrib 5.7.21, for Linux (x86_64) using EditLine wrapper

故障报错如下：

解决方法：

1. 打开/etc/mysql/mysql.conf.d/mysqld.cnf文件

2. 在bind-address=127.0.0.1前加#注释，或者直接删掉这行

3. 保存关闭mysqld.cnf文件，输入service mysql restart重启mysql数据库

此时再使用navicat重新连接，显示成功。

故障原因：默认状态下Mysql不允许除本机外的主机访问（SSH除外），修改mysqld.cnf文件即可解决问题，但修改文件后可能会导致安全问题，所以建议配置ufw防火墙。

报错：com.mysql.cj.jdbc.exceptions.CommunicationsException: Communications link failure

清理操作系统垃圾，卸载了一些不相关的软件，或许影响了mysql配置，Navicat也无法连接本地库了，连接数据库报错2003-Can‘t connect to MySQL server on ‘localhost‘(10061“Unknown error”)

错误原因：MySQL服务没有开启

首先到系统服务里面找到MYSQL服务并启动MYSQL服务.
打开我的电脑>计算机管理>服务和应用程序>服务中查看MySQL服务状态，发现
MySQL 服务已被禁用或关闭，此时，只需要把 MySQL 服务启动即可。

如果在服务中查找不到 MySQL 服务，可采用下面的方法解决：
1、找到系统中的命令提示符(cmd.exe)
2、右键，选择以管理员身份运行打开该程序
3、切换到你的 mysql 的安装目录下的 bin 目录，执行 mysqld.exe --install 命令，看到 service successfully installed 表示安装服务成功。

Result Maps collection already contains value for 问题

我遇到的问题是因为模块重命名造成target/classes目录下文件重复，删除重复文件，问题解决。

Vue启动前端项目：提示Syntax Error: Error: PostCSS received undefined instead of CSS string

执行npm rebuild node-sass后，还是提示该错误。

Vue 报错: Do not use built-in or reserved HTML elements as component id

vue组件的命名不要与原生的html标签相同。例如a、template

vue-router：Duplicate named routes definition

在配置菜单时，路由地址和组件路径不能相同

还在更新之中……