- 博客(30)
- 收藏
- 关注
RSS订阅原创 vue3+element-plus 实现带搜索表单的表格
组件库：使用element-plus组件进行二次封装组件名称说明：search-form:搜索表单form-item:单个输入组件components:单个不同得组件的集合search-table:搜索表单加表格。
2024-08-16 11:29:56
1050
原创 element-plus table组件的单选高亮问题
在添加的样式的使用进行的比较是两个对象的比较，你需要传入的参数是table数据中的某一个，而不是另一个变量赋值的那个不得行。使用setCurrentRow来使选中的某一行高亮，但是没生效，后面从源码里面发现了问题所在。
2024-07-09 13:48:33
882
1
原创 关于树结构的操作
使用递归，将拼接的值放入一个数组里面，这个时候的结果是返回一个数组，而我们每一个递归的都是一个数组，将数组拼接起来，最后是是返回一个结果。
2023-11-18 15:29:21
168
原创 电商项目-vue路由跳转的权限的限制
问题：在这个项目当中在进行页面跳转的时候是具有逻辑性的①登录和未登录状态的不同页面的展示②支付页面和支付成功的页面的展示是在用户去结算后才出现的，就是只能从购物车跳转到支付页面，支付成功页面也只能从支付页面进行跳转③我的订单的页面也只能是登录后才能进入的在这里使用了全局的路由前置守卫和路由独享守卫实现的，首先是通过token来判断是否已经登录成功，但是用户的信息使用Vuex进行存储的，不是持久性的存储，在页面跳转的时候用户信息有可能是不存在的，所以需要进行判断然后发送请求，在此期间token也是肯存在过期的
2022-06-03 20:06:47
593
原创 登录组件进行登录的时候出现的bug
在用户登录的时候，发送请求，得到相应的数据并且得到用户的一些信息，然后存入VueX里面，然后登录成功以后就进入主页面，主页面的头部会显示用户的信息，然后发现登录成功后并没有在主页面显示用户的信息①登录组件的登录的点击事件②Vuex里面的state,actions,mutation③还进行一个全局前置路由守卫的一个设置，对登录和没登录的一个不同的操作最后发现，是当登录后是异步发送请求，请求成功后就将登录成功的状态返回给登录按钮中，mutaion还没来得及将得到token存入本地，
2022-05-31 20:33:33
413
原创 Vue电商项目搜索板块面包屑的实现
在不同的板块是会形成不同的面包屑的，在这里我们需要将搜索的参数传递给服务器，从home主页跳转到search页面的时候是带着路由参数的，我们需要将参数在beforeMount()里面整合一下我们需要什么时候带着这个参数去请求服务器，当路由信息发生变化的时候，因为我们将搜索的信息设置为params参数和query参数，所以我们要监听路由的信息，然后整合要发送过去的参数 searchParam:{ "category1Id": "", "categoryName": "",
2022-05-31 19:56:39
5093
1
原创 电商项目实现购物车商品的全部删除
在一般的项目当中，是存在删除某个商品的请求接口的，然后我们需要去通过这个接口去实现将选中食物商品一起删除①设置点击事件，派发Vuex里面的action里面的方法，使用异步的方法 async deleteAll() { try { await this.$store.dispatch('shopcart/deleteAllCart'); this.getData(); } catch (error) { alert(error.message);
2022-05-31 19:28:13
531
原创 Vue-router 导航路由
1.全局路由守卫 1>前置路由守卫 作用：进行权限设置路由，在跳转之前调用 使用：1.在配置路由index.js文件里面进行配置 meta:{ isAuth:true,//是否进行权限的校验 title:'信息' } 使用router里面的方法const router = new VueRouter({ routes, // 默然的情况下，是当...
2022-05-30 20:49:37
427
原创 浏览器存储localStorage和sessionStorage
webStorage1.存储的内容的大小一般是5M左右2.通过localStorage和sessionStorage实现本地存储的机制，以key value的形式存储3.相关的API:1.存储数据：window.***Storage.setItem('msg','hello');2.读取数据***Storage.getItem('msg');3.删除数据***Storage.removeItem('msg');4.清空数据***Storage.clear();
2022-05-30 20:03:09
344
原创 vue项目里面的小问题
1.在vue-router里面，当进行路由跳转的时候，滚动条的位置是不会动的，路由里面是有一个滚动行为的，解决方式官网里面有const router = createRouter({ history: createWebHashHistory(), routes: [...], scrollBehavior (to, from, savedPosition) { // return 期望滚动到哪个的位置 }})一直在顶部scrollBehavior(to, from
2022-05-26 21:00:51
338
原创 vue分页器的封装
1.需要注册为全局组件//main.js// 封装分页器为全局组件Vue.component(Pagination.name,Pagination);2.父组件的使用分页器，需要传递相应的参数和自定义事件 <Pagination :pageNo="searchParam.pageNo" :pageSize="searchParam.pageSize" :total="searchList.total" :continues="5" @getPageNo="getPageNo"/&g
2022-05-25 21:17:19
875
原创 Vue里面使用swiper插件实现轮播图
1.安装插件npm i swiper@52.引入相应的js和css包在相应的组件内引入swiperimport Swiper from 'swiper'引入css文件，如果多个地方用到轮播图，就在入口文件内引入// 引入swiper的样式import 'swiper/css/swiper.css'3.在template加入轮播图的结构,注意每个版本都有点区别的 <div class="swiper-container" id="mySwiper">
2022-05-12 19:31:08
3586
原创 lodash插件实现防抖和节流
1.应用场景：当用户高频率的去触发事件，时间较短，内部有计算等会出现卡顿的现象2.解决方式:防抖和节流防抖使用的原理：前面所有的触发，是最后一次执行后再规定的时间内触发（只执行一次）节流使用原理：少量的触发，在规定的时间内是不会重复触发的，只有超过这个事件才会再次的触发以上都是闭包加上延时器使用方式使用lodash插件，1.下载插件lodash 2.lodash对外暴露的函数是 _import _ from ‘lodash’防抖的函数 _.debounce(
2022-05-11 19:32:34
2776
原创 Vue动态的加入背景
1.设置一个动态的class,什么时候要去加入背景 <li v-for="(c1,index) in categoryList" :key="c1.categoryList01Id" class="menu-item" @mouseenter="enterList(index)" :class="{cur:currentIndex==index}">2.动态展示背景的条件是currentIndex==index 的true和false,所以要去改变currentIndex,绑定鼠标的
2022-05-10 09:27:31
1690
原创 Vuex的使用
Vuex的基本使用1.安装vuex npm i vuex@3 (版本号为3，对应vue2,版本号为4,对应vue3)2.创建文件store文件，然后编写一个js代码 导入Vue和Vuex 准备三个对象 state{} actions{} mutations{}创建store对象并且导出 // 引入Vue import Vue from 'vue'; // 引入vuex import Vuex from 'vuex'; // 使用插件，但是这个use要在import store之前，所以放在exp
2022-05-04 15:13:29
816
原创 vue里面nprogress的使用
一，发送请求并且得到数据的时候使用1.使用方式：下载nprogressnpm install --save nprogress使用nprogress的一些API方法，因为是在发送请求的时候使用，所以要在请求拦截器和响应拦截器里面发送requests.interceptors.request.use(()=>{ // config:配置对象，header请求头 // 在请求拦截器里面开始进度条 nprogress.start(); return c
2022-05-04 14:29:33
1745
1
原创 Vue发送请求
1.对axios进行二次封装，创建api文件，然后创建request.js，设置请求拦截器和响应拦截器// 对axios进行二次封装import axios from 'axios'import { config } from 'vue/types/umd';// 利用axios里面的creat方法对axios进行二次封装const request = axios.create({ // 配置对象 baseURL:"/api", timeout:5000,//超时的
2022-05-04 11:12:53
4448
原创 Vue脚手架代理服务器
服务器代理实现原理为了解决跨域问题，有几种实现的方式1.jsonp script标签有访问外部资源的功能(不常用) 2.cors(设置一些特殊的响应头) 3.vue脚手架，使用服务器的代理，vue脚手架自己创造一个代理服务器，代理服务器的地址和本地地址一样，然后本地向代理服务器访问，代理服务器向目标服务器访问，然而服务器之间是不存在同源策略实现过程一.配置：简单配置，在vue.config.js里面配置，直接写链接，只有写到端口号就可以了，不要写具体的devServer: { pr
2022-04-21 15:17:56
1031
原创 ES6中的let和const关键字
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
2022-03-21 15:53:16
1183
原创 css 水平居中总结
<div class="parent"> <div class="child"></div> <span>我是span</span> </div>1.行内块元素 display：inline-block元素，可以设置父元素 text-align:center .parent{ background-color: aqua; ...
2022-03-09 21:29:58
125
原创 动态规划，股票收益
假设你有一个数组prices，长度为n，其中prices[i]是股票在第i天的价格，请根据这个价格数组，返回买卖股票能获得的最大收益1.你可以买入一次股票和卖出一次股票，并非每天都可以买入或卖出一次，总共只能买入和卖出一次，且买入必须在卖出的前面的某一天2.如果不能获取到任何利润，请返回03.假设买入卖出均无手续费数据范围：0 \le n \le 10000 , 0 \le val \le 100000≤n≤10000,0≤val≤10000要求：空间复杂度O(1)O(1)，时间..
2022-01-19 11:21:04
1031
原创 将给定的单链表\ L L： L_0→L_1→…→L_{n-1}→L_ nL 0 →L 1 →…→L n−1 →L n 重新排序为：L_0→L_n →L_1→L_{n-
/** * Definition for singly-linked list. * class ListNode { * int val; * ListNode next; * ListNode(int x) { * val = x; * next = null; * } * } */public class Solution { public void reorderList(ListNode head) {.
2022-01-17 12:09:41
1059
原创 Android开发基础应用，食谱开发总结
1.ListView和GridView的使用首先这两个组件的使用，是需要适配器的，我们需要去自定义适配器，在自定义的过程中，要继承ArrayAdapter<>(),其中需要重写两个重要的函数，int getPosition()和View getView（），在这个函数当中我们需要对对View进行编写，就是View中加入数据，这个时候我们也需要数据源，这里用的是List集合 适配器的使用：将数据填充到UI组件当中的数据源中 public View getView(int pos..
2022-01-14 11:46:18
349
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人