- 博客(39)
- 收藏
- 关注
RSS订阅原创 Angular的组件监听三种方式，解决组件间数据变化而监听不到的问题
使用自定义的refresh（）方式进行数据的监听和修改，也是一定可以成功的方式父组件.html.tsxData: [],yData: []click(){xData='2',yData='3'//数据改变进行刷新子组件//数据改变，进行监听配置/*** 根据配置刷新视图*/refresh(){this.chart?.dispose()/*** 设置配置*/
2023-08-30 12:20:11
3023
原创 css实现页面的缩小，展示对应内容
效果如下，上面的搜索直接使用固定定位即可，点击叉号把对应class去掉恢复即可，然后隐藏搜索框。在转换的对应div上添加过渡动画效果。
2023-07-04 16:25:36
332
原创 angular学习笔记
这里写目录标题1、认识Angular2、路由2.1、路由懒加载2.2、路由守卫3、模版指令4、生命周期4.1、父子生命周期5、依赖注入6、RXJS7、自定义事件，自定义指令8、自定义管道9、获取dom元素，和列表实现demo10、最终demo，实现CRUD1、认识Angular2、路由2.1、路由懒加载2.2、路由守卫3、模版指令4、
2023-06-21 17:02:39
372
原创 setInterval循环定时请求接口工具类，添加到对应组件中接口处
在一个数据可视化页面中，请求接口的数据随着时间的增长是一直变化的，页面不可能只请求一次接口，所以需要大量的接口进行每隔一段时间自动请求更新数据，这样就需要一个工具类直接实现
2022-11-16 20:11:54
1160
1
原创 js封装实现输入日期，得到其中包含所有季度和对应季度年月
封装第一个函数：功能，传入月份，输出季度第二个函数：功能：传入两个参数一个开始时间，一个增加时间，返回增加时间过后的结束日期第三个函数：功能 计算日期之间的月数，返回相差几个月最终代码实现：结果如下：............
2022-06-24 13:34:20
1431
原创 python3入门
由于比较羡慕python的爬虫技术，所有写一篇python3的笔记供查阅print(‘helloworld’)fp = open(‘D:/hello.txt’,‘a+’) #a+是说如果print(‘hello’,file=fp) #文件当中有hello文字fp.close()print(‘asd’,‘asd’,‘asda’) # asd asd asdaprint(‘hel\nlo’) # 换行 \r覆盖 \b退一格#原字符 可以让\不起作用 注意...
2022-06-03 17:50:09
502
原创 影刀RPA自动化学习和部分问题解决方式
1.安装和基本概念官网地址https://www.winrobot360.com/chrom插件问题和入门文档https://www.winrobot360.com/yddoc/language/zh-cn/%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98/%E7%BD%91%E9%A1%B5%E8%87%AA%E5%8A%A8%E5%8C%96%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98/chrome%E5%AE%89%E8%A3%85%E6%8F%
2022-05-25 13:53:07
7315
1
原创 vue+Echars移动端可视化页面
实现代码：<template> <div class="wrapper"> <span style="color:#fff;float:left;" @click="$router.back(-1)"><i class="iconfont icon-jiantou" style="margin-top: 10px;margin-left:10px;" ></i></s.
2022-05-20 20:05:02
22764
原创 优惠卷到期时间设置：输入一个日期，计算这个日期加上若干天后是什么日期？
题目范例：输入 2008 2 3 ，然后输入需要添加的天数 100 ，输出 2008 5 13思路：将日期参数放到一个数组当中，然后利用得到的添加天数100，进行循环遍历，一天一天的加，每循环一次，添加天数 -1 ，直到添加天数为0，输出即可。（其中需要判断每个月的天数，是否为闰年，到月底月数+1，到年底年数+1）代码如下：// 利用数组存储日期参数var arr = [2022, 1, 10] //初始日期var addday = 11 //增加天数function MyDate(year,
2022-05-14 11:11:02
610
原创 js数据结构与算法（栈-队列-单/双向链表-集合-字典-哈希表-二叉树-红黑树-图-常见排序算法）
栈描述：栈先进后出，相当于数组的倒序输出，栈顶就是最后一个元素，栈尾就是第一个元素栈的封装// 栈类function Stack() { // 栈中的属性 this.items = [] // 栈相关的方法 // 压栈操作 Stack.prototype.push = function (element) { this.items.push(element) } // 出栈操作 Stack.prototype.pop
2022-04-08 17:02:38
2543
原创 面试题：输入一条URL到页面展示中间发生什么（DNS解析，3握4挥，http/https，渲染）
DNS解析TCP连接发送HTTP请求服务器处理请求并返回HTTP报文浏览器解析渲染页面连接结束1.DNS解析输入url后，首先需要找到这个url域名的服务器ip，为了找到这个ip，会有一个递归查找的过程，从浏览器缓存中查找->本地的hosts文件查找->找本地DNS解析器缓存查找->本地DNS服务器查找，这个过程中任何一步找到了都会结束查找流程。如果本地DNS服务器无法查询到，然后在去向本地DNS服务器发请求查找，这个过程是迭代查找，直到找到ip地址如下图所示，先横着查找缓
2022-04-02 21:53:19
3786
原创 正则表达式 千分位分隔符（金额每3位添加逗号）
1.金额每3位添加逗号//这里使用两种方式，使用一种删除第二种即可function thousand(num) { // 思想1. 找见第一个数字后面成3倍数的数字，然后把这些匹配的数字转换成 “数字,”的形式，就可以完成千分位表示 // 思想2. 找见数字中间的空位，比如123，找见1和2中间，2和3中间，把符合条件的转换为","即可 return (num+"").replace(/\d(?=(\d{3})+$)/g, "$&,")+" "+ num.toStr
2022-03-30 21:59:31
3772
原创 LRU (最近最少使用) 缓存实现的两种方式
题目如下LRU最近最少使用，是一种常用的页面置换算法，在容量一定的情况下，删除内存中最近最久未使用的数据。首先第一种方式：Map利用在Map当中键值的方式进行存储数据，它的特性就是我们新加入set进去的键值对在其内部是有顺序排列的，及我们set一个键值对它就会去放在后面，这时如果我们容量已满，那么只需要删除掉第一个键值即可（因为常使用（把他移到后方）的和新进入的都会在后方添加进去），然后就实现了一个LRU算法具体解释都已在代码详细注释// 第一种方式Map方式// Map中set加入的键值对是
2022-03-29 21:23:44
1516
原创 No overload matches this call. Overload 1 of 2, ‘(type: “*“, handler: WildcardHandler＜Record＜EventTy
在Vue3.x中没有了on和off，所以在vue3中下载mitt来进行实现全局事件的发布和订阅与取消订阅（也就是跨组件通讯）。有以下几个属性使用： all（Map对象）：包含了所有订阅的事件名称，及对应的处理方法数组。 emit（方法）：触发事件，参数为（事件名（方法名），携带的参数），当- 前携带的参数只能为一个，不能为多个。 on（方法）：创建事件订阅，参数为（事件名，处理方法）。 off（方法）：取消事件订阅，参数为（事件名，处理方法）。报错信息如下：ERRO
2022-03-04 21:36:40
13287
20
原创 vue实现全屏只显示内容不显示导航条和退出全屏调用事件
先说一下需求：要求在第一个页面点击全屏按钮进入全屏或者第二个新的页面全屏，并且按F11或esc退出全屏回退到第一个小屏页面失败的尝试：显示尝试利用原生来实现，但是发现退出全屏时，我们想在F11上面添加一些事件（比如退回上一页面；添加弹窗等操作）无法实现，原因是浏览器不允许我们自定义F11退出全屏按键，因为如果可以自定义的话，那么有恶意的方式让用户点击全屏进去，然后我们去禁用这个全屏按钮那么岂不是用户没有办法退出了正确如下：利用screenfull插件直接去监听页面的大小改变，不用去监听按键事件首.
2022-02-10 13:09:39
2289
原创 vue-seamless-scroll +element表格获取后台数据无法滚动或弹回顶部
今天出现一个bug，当在vue-seamless-scroll中把数据放入wholeflowtableData: [],没有问题，可以正常轮播。但是当动态获取后端数据时缺会出现弹回顶部的问题问题原因：由于拿到后端数据后我们用push方法一个个push进wholeflowtableData，导致它高度的获取出现问题，从而div发生溢出，无法进行滚动解决方案：1.定义一个新的数组arr去接收，然后再利用拷贝，将arr这个数组的内容一次性的去拷贝到wholeflowtableData当中，就不会出现如上
2022-01-08 16:39:56
2540
原创 json-server模拟mock数据
第一步安装npm i json-server -g在view内新建api文件夹 view/api/getapi，写入接口export const rightscroll = （） => get('http://localhost:3000/rightscroll')export const leftscroll = （） => get('http://localhost:3000/leftscroll')export const ce = （） => get('ht..
2022-01-08 16:20:43
516
原创 echars实现全流程图
流程图效果图如下可自己添加节点，更改数据流等，数据流是动画的方式进行节点间流动步骤如下：1.vue引入echars终端下载echartsnpm install echarts@4.8.0 --save2.在main.js中引入import echarts from "echarts"Vue.prototype.$echarts = echarts;3.在组件中代码如下(已标注)<template> <div class="server"> <
2022-01-08 16:10:14
4794
原创 Multipart: Boundary not found multer上传文件报错解决(node.js)/前端vue上传formData中file为{}空对象解决
今天在前端使用vue用formdata进行文件的传输时后台node报错Multipart: Boundary not found multer前端控制台当中发现接口传输的file文件为空值{}，因为在axios请求时设置请求头Content-Type为multipart/form-data时发现在后面没有Boundary 这个参数，正常来说除了multipart/form-datamultipart/form-data；boundary :****************后面应该还有一串b
2021-12-14 13:01:42
5849
原创 node跨域问题Access to XMLHttpRequest at ‘http://localhost:3000/socket.io/
这里客户端一定要下载client的npm install socket.io-client然后就是服务端的原因，只需要将const { Server } = require("socket.io");const io = new Server(server);改为var io = require('socket.io')(server, { cors: true });即可连接成功...
2021-11-23 22:10:43
965
1
原创 mras3d的基本使用
Mars3D官网网址Vue2版本的mars3D模板项目 vue2Vue3版本的mars3D vue3第一步．vue项目中引入mars3D1.从 npm 获取使用Node环境下的现代web前端技术栈时，可以使用npm或cnpm或yarn等方式来安装mars3d包安装 //安装mars3d主库npm install mars3d --save 安装成功后node_modules中会有一下两个目录,cesium是mars3D的一个依赖库2.从 CDN 获取在public下ind
2021-10-31 09:57:29
1144
原创 vue自定义移动端底部导航栏
完成主要由三部分组成1.在components中内写好第一部分代码2.新建四个文件用于底部的切换跳转即可，我的是3.在router配置路径的跳转第一部分：在components中tabbar组件代码如下，图片路径换成自己的，可以自己添加底部数量<template> <div> <div id="tab-bar"> <div class="tab-bar-item" @click="homeClick()">
2021-07-29 16:19:59
1419
原创 vue实现同一个页面某一位置进行不同组件切换展示效果
目录结构如图，在主页面home点击旁边导航切换不同组件在同一页面效果2、动态路由<component:is="componentnext"></component>用于切换组件，改变componentnext的组件名字即可，利用了动态绑定:class来指定此组件时此导航选中颜色的变化2.代码即注释如下<template> <div> <!-- <Top-head></Top-head> --> .
2021-07-27 15:13:08
6950
原创 vue直接根据遍历v-for实现导航栏的下拉导航
<template> <div class="head"> <div class="firstHead"> <div class="ul"> <div class="li List" v-for="item of pageData.page.List" :key="item.id" > <a>{{ it
2021-07-26 11:15:32
1541
1
原创 echarts实现中国地图，山西地图，图表面积图配置项
这里使用旧版本，因为新版本会报init初始化实例的错误，导致图标无法显示Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined。终端下载echartsnpm install echarts@4.8.0 --save3.在main.js中引入import echarts from "echarts"Vue.prototype.$echarts = echarts;4.就是在自己的页面引入官网ec.
2021-07-21 11:34:40
1890
原创 vue实现答题功能一页一题并最后得出分数
实现效果如图每点下一题会切换题目，知道最后一题变为完成答题，然后进入答题完成页面显示分数2.template代码<template> <div class="second"> <div class="back" style="padding-top:10px" @click="$router.back(-1)"> <i class="iconfont icon-jiantou" style="margin-left: 10p.
2021-05-22 20:06:19
4778
4
原创 前端根据token控制路由跳转（配置路由拦截全局前置守卫）
在配置路由中需要拦截的加上 meta:{ requiresAuth : true}import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [ { path:"/", name:"Home", component : ()=>import("../views/Home/Home.vue") meta:{ requiresAuth.
2021-05-22 19:15:44
995
2
原创 保存用户登录状态token，以及退出清除登录状态（node/后端设置token返回实现完整流程）
利用vuex中store进行进行保存代码如下import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: {//状态从本地获取 token: localStorage.getItem("token") || '' }, //同步修改state里面的值 mutations: { //包含更新多个state函数的对象 SET_TOKE.
2021-05-22 18:56:51
13808
原创 vue中router-link携带点击参数进去到对应页面
在页面需要点击的div设置router-link属性跳转页面，其中query负责传参数，我这里传的是咨询的id <router-link :key="item.id" :to="{ path: '/detail', query: {info_id: item.id } }" v-for="item in List" > <div> <img :src="item.img" /&g.
2021-05-22 16:33:57
665
原创 vue项目创建后配置请求头request
在src下新建文件夹request.js文件来设置统一的请求头代码如下import axios from 'axios'// axios.defaults.withCredentials=trueconst service=axios.create({ baseURL : "http://192.168.123.44:8089", //配置请求超时时间 timeout: 5000})//使别的地方可以调用export default service.
2021-05-22 16:00:03
1073
原创 vue实现头像更改并刷新功能
1.整体代码 <div><cube-upload ref="upload" v-model="files" :action="action" @files-added="addedHandler" @file-error="errHandler"> <div class="clear-fix"> <cube-upload-file v-for="(file, i) in files" :file="file" :key="i"&
2021-04-23 17:11:34
2905
原创 vue前端遍历后端传过来数据步骤
首先需要在api中配置与后端一样的接口如我遍历的列表接口如下//赛事列表接口export const getVideoList = (token)=> axios.get("/api/v1/pri/item/result",{ params:{//因为后端需要传过去一个token才可以不被拦截所以加上了，看各自情况，可以不加 "token":token }})params是我设置的请求头，token是放入请求头的数据，如果后端不需要可以不加2.在我们的页.
2021-04-17 14:19:49
6634
1
原创 利用cube-tab-bar 搭配cube-ui的组件(cube-slide ，cube-scroll)来做出App屏幕切换，Tab跟随页面变化效果
擦
2021-04-11 17:10:50
715
原创 vue实现点击某个div出现和隐藏内容功能
1.首先在所需要隐藏或显示的内容div加v-show，代表判断是否显示或隐藏<div v-show="shopShow">内容</div>3.我这里是在打开内容中有一个 × 号来关闭显示效果，在iconfont图标的div加入一个点击事件<div @click="toggleShopShow"> <span class="iconfont icon-close"></span></div>3
2021-03-27 18:48:46
17413
3
原创 父传子值使用---前后端交互实现首页中轮播图效果实现
子传父值在父亲里先用import HomeBanner from "./Component/Banner";引入，在template中声明<!-- 视频列表组件 --> <video-list :videoList="videoList"></video-list> <!-- 底部导航栏组件 --> <common-footer></common-footer> 3.需要在script中`e.
2021-03-13 16:19:19
256
原创 vue引用cube-ui步骤
在终端输入vue add cube-ui依照下图输入即可3.可以在package.json中dependencies查看下载是否成功
2021-03-11 21:52:14
1153
1
原创 vue引入组件库Vant步骤
打开Vant组件库，组件库点击进入Vue 2 项目，安装 Vant 2：npm i vant -S3.在main.js中引入import Vue from 'vue';import Vant from 'vant';import 'vant/lib/index.css';Vue.use(Vant);4.打开对应组件库例如tabbar，在components新建文件夹Tabbar/Tabbar<template> <van-tabbar v-model..
2021-03-09 20:14:16
833
原创 利用swiper实现轮播图
vscode中实现轮播图首先在终端下载组件npm install --save swiper2.然后在script中引入<script> import Swiper from 'swiper' import 'swiper/dist/css/swiper.min.css' 3.在html中按需求使用<div class="swiper-container"> <div class="swiper-wrapper"> &
2021-03-07 19:21:36
993
原创 在vscode创建vue框架以及目录结构完整性创建(css,vue.config.js)
node安装完成如何在vscode创建vue快速步骤首先vue -V查看版本号依此输入以下指令npm i -g @vue/cli-init 用来下载脚手架，以便可以创建项目 vue init webpack my-vue //意思为创建一个名字叫my-vue的项目 然后第一个Name代表创建项目的名字 Project description代表介绍的意思，直接跳过 Author 表示作者的名字，回车跳过 以下一直到install vue-router 输入y 其他输入n
2021-03-04 20:51:51
1100
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人