![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 52
青灯古佛初照
竹杖芒鞋轻胜马
展开
-
简单的Vue登录验证、权限管理功能实现
在router.js中,通过全局导航守卫可以根据获取到的sessionStorage中的登录状态信息进行拦截。通过后端传来的用户表中的权限数据来向sessionStorage中存储用户权限和登录与否状态。在login.vue中,登录时已经将登陆状态存储到了sessionStorage中。欠缺点:后端token的验证。原创 2024-08-06 18:39:27 · 347 阅读 · 0 评论 -
Vue路由
当用户点击router-link标签时,就会去寻找它的to属性,to属性的路径与routes配置的path去相对应,从而找到匹配的组件,将组件渲染到。如果不用重定向而直接pah:/ component:login,将会导致两个路径指向同一个组件,vue报错-存疑,一个路径不指向两个组件就行了呗?Vue的所有内容都是组件化的,把路径和组件对应起来之后利用router配对路径,渲染相应组件。router-link的本质为a标签,to属性对应a标签的href属性。多个路由组成一组路由routes。原创 2024-08-06 18:29:23 · 258 阅读 · 0 评论 -
Console.log方法常见问题
如果将对象不经处理的存入此类只能存储字符串的结构,则打印时就会出现[object,object]。错误信息:Console.log()输出数组或对象时,数据变化前后写的Console.log打印出的都是数据变化后的数据。:对于非基本类型数据,Console.log不再是直接输出,而是打印的引用地址的快照。错误原因:通俗来说就是对于对象有多层展开的,他只会默认显示第一层,当你去展开对象数据时,他会读取对象。原因:sessionStorage中只能存取字符串,在存储时不能直接存储,应先转化再存/取。原创 2024-08-05 17:06:48 · 419 阅读 · 0 评论 -
前端地址传参和Param传参
如果是多个参数则“test/delete?2.对于params,常用于get请求的添加查询参数,而对于data参数,常用于post请求的数据传递。另外如果xml的动态sql里参数作为判断条件,后端接收也要用@param。1.前端传的参数到后端,如果参数名称一致则自动匹配,如果不一致则需要用。+row.id 后端名字不一致按上述匹配。后端要取到aid的值 用delete((“前端传过来的参数名”)2024.6.4笔记。原创 2024-07-31 10:21:50 · 214 阅读 · 0 评论 -
Promise.all()
Promise.all():用以聚合多个Promise的结果。在这里,由于map中使用了async await,表面上返回的是item,实际返回的是async的返回值即每一个promise对象包裹的每一个item对象的集合。promise.all会等待所有的promise完成后,将所有的promise对象集合,返回其内部的数据。promise.all 是对其内的所以异步promise并发执行,其中一个promise失败(返回为空不是失败)则会直接失败。可以用.catch来处理异常。原创 2024-08-01 14:36:03 · 124 阅读 · 0 评论 -
this.$router.push方法 携带参数跳转路由
如this.$router.push({path:'/performance/scoring/projectEntry'},query:{ type: 'add', month:this.queryParams.yf, role: this.role })data=tableDate tableDate 就是一个数组,其中的每一行都是数组的一项,所以对于此表格数组可以应用.push(),.splice()等方法 如要删除某一行,可以this.tableData.splice(传过来的index,1)。原创 2024-08-01 14:19:20 · 364 阅读 · 0 评论 -
前端小数保留和rules规则校验
vue rules表单数据合法检验:中添加属性:rules=rules 在el-form-item中添加prop属性,对应rules的规则属性检验,其原理为二进制表示某些小数表示不了 表示小数只能用2的-n次幂即1二分之一,四分之一,八分之一....的组合 有些小数永远表示不了。前端对于处理完的数据,注意往往加入到reset重置中,不然很容易出现新页面而值未初始化的问题。前端计算浮点型数据时出现不准确,采用数据.toFixed(2):保留两位小数。状态码304:请求的数据未发生变化。原创 2024-07-31 10:39:34 · 112 阅读 · 0 评论 -
前端.sort排序
将各部门销售额按从大到小的顺序排名,并以该顺序作为分子,排名之和作为分母与某一项扣减的金额相乘,使业绩越好的部门该款项扣的越少 如9个部门,第1则扣1/1+2...+9 *款项。原创 2024-08-01 14:33:21 · 189 阅读 · 0 评论 -
Vue生命周期与watch监听器
v-if 和v-show 基本一样 区别在于v-if是完全隐藏,v-show会把资源加载过来,切换频繁的时候用v-show速度更快。在每次输入的时候关闭计时器,然后再开启,这样的话每次输入计时器都会一直关闭,直到输入结束才开始计时调用。成功翻译,但是实时监视导致输入一个字符翻译一个字符 ,期望:停止输入一段时间后再开始翻译。此即防抖机制,简单的实现就是加一个计时器,setTimeout,隔一段时间再执行。vue的八个钩子函数即此四个阶段以及此四个阶段前的before 阶段。销毁阶段 destoroy。原创 2024-07-31 11:01:17 · 219 阅读 · 0 评论 -
vue常见遍历函数
在forEach中跳出循环需要try catch方法实现 在try中 将错误抛出 不推荐使用 这种情况用for就可以,或者也可以在循环中需要跳出了,将循环的数组长度设值为0。(item=>{}) 遍历数组,无返回值 适用于不需要处理数组下标,不使用break的情况改变item的值,不会改变原数组的元素值。原因:forEach方法不熟练,forEach中不能使用break,continue,使用return和continue效果一样,筛选数组中满足条件的元素,返回筛选后的新数组。另外遇到的一个bug。原创 2024-07-31 10:57:06 · 269 阅读 · 0 评论 -
前端分页方法
另外,分页后table页的index会每一页都是1-10排序,若要第二页按 10-20,则需自定义index方法,方法中对传入的index也是return currentpage-1*pagesize+index即可。@current-change=“handleCurrentChange” 监听空间当前被点击到哪一页,使currentpage=传入的页码,重新获取页面数据。截取方式为:for(let i=**(this.currentpage-1)*this.pagesize;原创 2024-08-01 19:48:41 · 399 阅读 · 0 评论 -
Vue基础项目结构
Vue为单页应用,整个网站实际上只有一个页面,我们看到的页面的“跳转”其实只是一个页面上的局部组件的更替,路由指的是浏览器地址栏的路径和组件有着一一对应的关系,当输入指定地址,页面的某个区域的组件会替换成该地址对应的组件。App.vue:项目根组件,其他所有组件都包含在这个组件里,作为其子组件,在其页面中以<router-view>来控制不同页面的显示,即所有跳转的路由页面都插在此处渲染。index.html:页面总入口,这个页面定义一个id为app的空的根节点,此即main.js里面定义的实例挂载点。原创 2024-08-01 17:30:12 · 234 阅读 · 0 评论