博客

javaweb_vue 条件查询 （自用）

  • Post author:
  • Post category:java




为了探索适合自己的学习方法，之后的都要分开写，不要写成一坨，自己的懒着翻，虽然写的很详细就是了

在这里插入图片描述



这里是无论如何也要记下来的东西



重复函数封装



记得这种封装最好不要把值写死了，就是形参



我的代码需要把这串都改了

在这里插入图片描述



后台接口



就是根据上级菜单查询子数据



记得非空判断



上级编号（精确查询）



菜单名称（模糊查询）



添加



表单



后台要给前台 反馈

sync synchronization 的缩略词; 同步 java的线程锁

dialogFormVisible diglog 对话



dao

在这里插入图片描述



遍历那里如果数据是一样的 可以绑定同一个List

在这里插入图片描述



vue 加不加（）的区别




vue 加不加（）的区别




$event



vue axios post data 简化方式

在这里插入图片描述



vue axios post data 简化方式



我怎么感觉我的记忆出现了偏差啊


添加链接描述



添加链接描述



老师教你怎么调整样式



覆盖样式不成功，调整样式优先级


添加链接描述



数据添加之后，查询栏也要刷新（就是重新获取）

在这里插入图片描述

再添加这里，也要获取下拉列表

在这里插入图片描述



数据添加之后，查询栏也要刷新（就是重新获取）

每次打开添加窗口里面的数据也要清一下

在这里插入图片描述



加prop 加ref

在这里插入图片描述



上面的ref写错地方了

resetFields()



vue 自己的问题，我们没法通过代码的编写顺序，来决定执行的顺序

在这里插入图片描述



第一次打开这个组件的时候，这个组件还没有注册上，但是因为里面本来就是空的，所以不影响使用

在这里插入图片描述



第二次使用的时候组件已经注册上了，所以就不报错了


错误原因，先调用函数，再去注册组件，如果顺序反过来就没有问题了

tick 记号，打钩

nextTick

这个匿名函数的内容会在渲染完成之后再调，把渲染时机后移

在这里插入图片描述



公共变量

加了括号就不会有 默认的传参了

在这里插入图片描述



从页面取数据 是那种半年都不会变得数据



但是如果是有别人一起来改的业务数据 老老实实的用axios 去取（id去查）



批量替换，把addxxx 换成 editxxx



输入框 id 属性加只读



修改框，数据还没有发送到后台，页面数据就已经改了

在这里插入图片描述



因为直接赋值 传递的是引用

在这里插入图片描述



对象上面加了_ob_ 表示是由vue控制起来的对象



对象身上会有id

在这里插入图片描述



深克隆 浅拷贝

前言

clone是Object类的一个本地方法，Object类默认使用的是浅拷贝，如果想要实现深拷贝，需要去实现Cloneable接口，并重写clone方法。

浅拷贝是指：当对象的属性是基本数据类型时，会复制属性及值，当对象的属性有引用类型的时候，会把当前属性引用复制。

深拷贝是指：当对象的属性是基本数据类型时，会复制属性及值，当对象的属性有引用类型的时候，会把当前属性引用的对象再复制一份。

区别就是：当需要clone的对象的属性都是基本数据类型，深拷贝浅拷贝一样，当需要clone的对象的属性有引用类型的时候，浅拷贝直接把引用地址复制过去，深拷贝会把引用的对象再复制一份。



vue深克隆 笑死我了 就是赋值json对象 变成字符串再变回了，有啥引用都没了

在这里插入图片描述

在这里插入图片描述



修改接口

在这里插入图片描述



合并方法



删除



删除接口

在这里插入图片描述



如果只有一个参数的话，就自己拼接字符串把，就不用qs了吧



不选东西，直接点修改和删除摁钮

选了数据之后，这两个摁钮菜就会亮



删除了东西之后 摁钮还亮着



删除了东西，调整分页，摁钮还亮着



当有数据刷新，就刷新摁钮状态



问题，1,3，5 摁钮不亮 2,4，6页，摁钮会亮

代码执行顺序我们控制不了



用那个nextTike 不好使 也就是说这个功能不是为万能的


用那个nextTike 不好使 也就是说这个功能不是为万能的



如果有些时机通过 nextTike 没有达到指定的效果，还有最后一个办法、



监控机制

在这里插入图片描述

再捋一遍该怎么学习

1、先整体看一遍，就是一个章节先过一遍

在捋的时候把一定要停下来记得东西记下来

2、捋过了一遍之后，开始按照顺序记录，视情况看需不需要详细记录

3、记录完之后，把结构图画下来

4、开始编写



！！条件查询



封装函数

因为发送链接和获取参数都是重复的，这是与代码冗余，单独根据get和post封装出来两个方法

在这里插入图片描述

在这里插入图片描述



最好根据get 和 post 封装两个函数出来



填坑！！！ post的方法怎么传送参数



养成所有方法都有输出语句 描述功能



后台服务接口



参数 模糊查询 菜单名称 精确查询 上级编号



痛苦啊，尼玛的，要去看一样老师的后台Dao怎么写的



菜单名称 可以为空 id 也可以为空


要用 mybatis的 if 要做 null判断


因为加了条件，所以要把之前的查询改了，


老师是传了个对象进去


查询页码总数的时候也要把 关键字条件加进去
Menu queryMenu = new Menu(qmname,qpid);

//根据 页码 页码总数 一个菜单 查询出菜单列表
        List<Menu> lm = ms.getMenuByPage(page,pagesize,queryMenu);
        
//查询页码总数
        Integer total = ms.getMenuNum(queryMenu);



下拉列表



根据父id去查询的时候，做个输入框，用户肯定不乐意用，所以要用下拉框

让他自己填1，2，3 笑死我了



要个这种下拉表单

在这里插入图片描述



代码复制进去

在这里插入图片描述



把代码改改

在这里插入图片描述



查询参数

在这里插入图片描述



这种效果

在这里插入图片描述



数据不能写死了，要从数据库里面查


下拉列表里面记得放一个0


有的数据在页面里面已经存在，比如这个0 有的数据就要从数据库里面查出来


有一个定值表示没有上级菜单



下拉列表服务接口

在这里插入图片描述



语句就是根据pid=0 查东西



登出功能就是从session中移除 用户和权限 信息

在这里插入图片描述



postman


Postman使用详解


在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述



比较方便

在这里插入图片描述



编辑下拉列表函数 并放到钩子函数里面



修改前端代码

在这里插入图片描述



！！！前面 加不加 ：的区别

在这里插入图片描述



如果不加参数绑定 就是v-bind 写的类型就是字符串



如果加上参数绑定 这里面的 0 显示就是数字



如果加上参数绑定 想显示字符串就是这

在这里插入图片描述



如果加上参数绑定 后面引号里的内容就是 javaScript 代码（我超）



里面可以做字符串拼接



这两个值，尽量保持一致，方便后面接口 获取参数，不然两个参数类型不一样，我也很难办

在这里插入图片描述



先把数据建立了

在这里插入图片描述



卧槽原来原来可以直接赋值，不写里面的变量名，直接写个[]就行

在这里插入图片描述



完成效果

在这里插入图片描述



当点击查询的时候，我要拿到 查询列表里面的条件

在这里插入图片描述



后台做空值判断

在这里插入图片描述



向后台发送查询



page 和 pagesize就不传了，后台有默认的值， 这里我可以传一下



myQuery 少写个this


因为方法是定义在methiod里面的，实际上是属于vue对象的


啊，我懂了，说白了就跟 vue.属性一样

在这里插入图片描述



分页的时候把查询条件也要传过去，否则就相当于还原了

在这里插入图片描述



应该是要加+‘？’+等会自己试试


原来是加 &

在这里插入图片描述



把分页都变了

在这里插入图片描述



一般来说，给客户做功能的时候



如果可以给用户做成下拉列表 选项 或者 switch 开关 就不要做成输入框



一般来说只有在用户名称 允许模糊 或者非常多的数据的时候



清空选项



首先在el-form-item 里面加上prop



prop根绑定的值保持一致



把组件注册给vue

在这里插入图片描述



然后用$refs.resetFields 把属性清空



方法

在这里插入图片描述



来写了，看我能犯什么傻逼错误



设置菜单默认页数和容量 1,5



先把数据返到前端



下拉菜单 业务逻辑

1、我要返回副菜单给前端

2、前端拿到数据把父菜单的id发给后端

3、后端拿到数据 再把子菜单传回去



不能用json传两个参数过去，会叠加在一起，vue解析不了

在这里插入图片描述

在这里插入图片描述



我试试在ReturnEntity 里添加了个新返回属性



我也没看到那个 需要改的index 啊



我忘了加一个单独的无



{}和[] 都能接收数组



qs没有定义



少打个r

在这里插入图片描述



prop应该加到哪里



：prop这样写对吗



：ref 这样写对吗


啊，调用那个函数来着

在这里插入图片描述



resetFields 方法不是 vue 方法？？


prop 可能写错了？ 要写在item里面

在这里插入图片描述



！！！！ 传参要加 == ’ ’ ==



where 怎么办

在这里插入图片描述



怎么拼接 %% 这个来着

and Method like CONCAT(‘%’, #{method ,jdbcType=VARCHAR}, ‘%’)



mounted 忘记拼接查询字段了



参数null转换出错，但是我做了非空判断了

在这里插入图片描述

原来字符串传回来个

” ”


NB嗷



menuname 参数写错了



精确 参数写错了



发送分页的时候要把 查询参数也带上



查询总页数的时候 要把 查询参数带上



mybatis 返回类型怎么写

在这里插入图片描述



参数忘记删了

在这里插入图片描述



上级菜单为无的时候，参数返回不对



抽象了家人们

在这里插入图片描述



mysql 语句判断不全

在这里插入图片描述



又抽象了



又判断错了


版权声明：本文为qq_42765493原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
Tags: