开源项目学习
文章平均质量分 68
修炼室
这个作者很懒,什么都没留下…
展开
-
增加新的页面【Soybean-admin】
因为soybean-admin在。中处理了所有的ts文件,作为路由。原创 2023-03-26 11:07:56 · 1021 阅读 · 1 评论 -
上传文件前后端处理【vue3 + springboot】
前端1.处理modal框 2.导入上传文件组件H2 3.请求接口后端1.定义接数据的类2.修改后端最大请求空间大小3.创建Dao层4.处理service5.添加controller方法原创 2023-01-06 14:46:26 · 1186 阅读 · 0 评论 -
前端框架搭建(九)搭建页面布局框架【vite】
1.创建目录2.处理GlobalHeaderH3创建HeaderMenu-头部菜单头部菜单创建GlobalHeader3.全局布局组件测试原创 2023-01-02 14:24:12 · 2023 阅读 · 2 评论 -
前端框架搭建(八)封装数据存储相关【vite】
1.安装pinia2.配置pinia3.创建utils目录4.安装crypto-js5.加密代码6.封装缓存测试代码原创 2023-01-02 01:11:25 · 516 阅读 · 0 评论 -
前端框架搭建(七)添加路由切换效果【vite】
重点是:transition,通过name切换路由效果。/** 显示padding */原创 2023-01-01 20:56:32 · 174 阅读 · 0 评论 -
前端框架搭建(六)搭建页面框架【vite】
/ 挂载naive组件的方法至window, 以便在路由钩子函数和请求函数里面调用。)和hello,world页面都出来了。配置全局页面路由 + naive配置。中添加Windows的配置。现在,我们看一下我们的。——专门处理路由相关。原创 2023-01-01 20:33:37 · 1278 阅读 · 0 评论 -
前端框架搭建(五)封装请求接口【vite】
1.创建service目录——存放接口相关文件2.安装axios依赖3.封装axios请求类4.设置请求拦截器Ha ①拦截请求Ha②拦截响应5.添加创建请求接口6.创建请求接口7.测试登录接口原创 2022-12-26 18:08:17 · 1948 阅读 · 0 评论 -
前端框架搭建(四)改造导入项目插件流程【vite】
我们在上一节也提到过,这样将使得vite的一些配置十分杂乱,无法统一进行管理,因此我们可以将其。目录下创建unplugin.ts文件,用于插件的解析。在根目录创建env文件,设置vite环境变量。根据报错安装对应的依赖即可。每个小模块都由对应的。原创 2022-12-14 14:07:13 · 802 阅读 · 0 评论 -
前端框架搭建(三)导入项目插件【vite】
这里开始,我们需要开始对进行改造,以uncoss——css框架导入为例。原创 2022-12-14 13:26:46 · 767 阅读 · 0 评论 -
前端框架搭建(二)导入静态资源【vite】
原生创建的显然无法进行自定义的修改,我们需要将其函数化,方便对各个插件进行个性化操作。因为后续我们还需要引入css框架,因此在项目中创建目录存放外部样式导入。我们需要将其改造为一个方法,统一由一个方法导入插件或者挂载节点。这里可根据你项目中的样式文件类型创建,因为这里我只有一个。这样子改造main方法就会使得我们整个项目更加清晰。这里将导入静态资源封装为一个方法,方便统一导入。原创 2022-12-14 13:00:36 · 733 阅读 · 0 评论 -
前端框架搭建(一)创建vite项目【vite】
版本 14.18+,16+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。若是个人项目,则配置完成第一个即可。这里我选择的是pnpm。原创 2022-12-14 12:43:21 · 810 阅读 · 0 评论 -
学委必备小工具——筛选未提交人数【python小工具】
是它的硬伤之一,因为他设计之初就不是为了文本处理,而且你要想,如果js能随意获取你计算机上的文件,那会不会有些惊悚了(当然可以通过node中的fs模块实现,但终究有点小问题)之前我已经尝试通过用JS实现了,本质上差别其实也不是很大,只是对于JS来说,作为一个学委,通常的任务就是收取班级作业,然后向老师报告当前未交人员的名单。因此,为针对文件处理这一类的问题,我就尝试使用python去解决了。为方便多次复用,这里特地将文件目录进行输入,并进行适当提示。因为通常情况下,我们的班级名单中的列通常会是这样的。原创 2022-12-10 23:52:25 · 433 阅读 · 0 评论 -
实现以一个表格数据查询另一个表格【JS】
当前我们进行自行分组,有一份已分组的名单,还有一份完整的名单,现在需要查出所有还没分组的人员信息将两个表内容设置需要查询的列为自定义设置单元格格式格式为JS中的字符串实现效果将该列数据复制到浏览器的3.处理逻辑完整代码原创 2022-12-07 23:37:07 · 566 阅读 · 0 评论 -
JS 判断类型函数(含TS版本)
【代码】JS 判断类型函数(含TS版本)原创 2022-12-01 00:18:39 · 443 阅读 · 0 评论 -
vue3 + ts自定义指令-节流【模块化,工程化】
因为这里我们需要创建的指令是节流指令,因此文件名称为内部指令框架大概如下import {/** 默认延迟触发时间 */ const delay = 200;首先,函数整体使用函数包括,类似于闭包的思想自定义节流指令完整代码import {/** 定时器 */ let timer : number = null function throttleELfun(el : HTMLElement , throttleTime = 200) {if(!...原创 2022-08-05 22:28:50 · 2274 阅读 · 0 评论 -
使用vueuse实现点击复制功能【Vue3,vueuse】
当前我需要对某一个区域的文字进行点击复制,点击后,将自动复制对应的内容。原创 2022-07-17 21:21:33 · 2133 阅读 · 0 评论 -
利用策略模式优化if代码【策略模式】
当前我们代码中存在很多的if,else去控制程序的流程,但是这样就会导致一个问题——代码的可扩展性不高。这里以策略模式进行对if-else代码的优化原创 2022-07-04 11:31:09 · 290 阅读 · 0 评论 -
C++ 使用ofstream 存文件【工程化】
当前我需要对当前输出的结果,进行持久化的存储,所以就需要用到了存文件的库,并且希望是工程化的,也就是先定义定义函数名字和类型,在通过同名的文件进行函数的实现首先定义文件定义文件实现这里给出测试代码结果截图...原创 2022-06-08 11:17:56 · 981 阅读 · 0 评论 -
JS 模拟鼠标自动点击【浏览器内】
问题描述作为一个有思想的前端人员,往往对于需要在网页填写信息的时候,总是喜欢用JS对页面进行瞎操作。在用JS代码实现自动填写问卷之后,我现在想尝试自动提交。但是奈何提交按钮对应的click事件不是一个函数,而是一段内嵌的script代码所以,现在我想实现使用JS实现模拟点击解决代码$('#tj').trigger('click')使用上述代码即可实现对于特定ID或者特定class的点击事件......原创 2022-05-25 14:48:40 · 8491 阅读 · 4 评论 -
自动导入并解析Icon【插件使用、Vue3、Vue-cli】
问题描述当前项目中,需要用到很多Icon,每次都需要导入和解析Icon会显得很麻烦。而且当前使用的naiveUI使用Icon显得比较呆板,需要n-icon嵌套后,再放入组件或者svg格式图片但是,现在我想直接想这样使用。解决方法1.安装对应的两个插件可能出现的问题npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.unplugin-i原创 2022-05-15 00:43:11 · 3558 阅读 · 6 评论 -
JS实现自动填写问卷【JS小工具】
问题描述现在我需要填写一个网页问卷,里面全部都是单选框。作为一个有想法的前端的人员,我想通过JS代码去帮我填写此文章仅供学习,请勿用于其他用途插入图片【问卷一.png】实现过程获取单选框结点通过观察页面,我发现所有的单选框都在包裹在无序列表ul的li下的,class名称为item[插入图片——观察页面]直接开始尝试获取DOM结点document.getElementsByClassName('item')[插入图片——控制台打印]总共170道题目,打印出来的数组为340长度原创 2022-03-31 20:48:42 · 4796 阅读 · 0 评论 -
JS实现页面的自动滚动【自动阅读、JS小工具】
## 关键知识点* 计时器* window.scroll* onclick## 解决方法```jslet currentTop = document.documentElement.scrollTop;var time = setInterval(()=>{ window.scroll(0 ,++currentTop)},200)document.onclick = function(){ clearInterval(time)}```## 实现效果原创 2022-01-16 22:38:08 · 4812 阅读 · 0 评论 -
开源项目学习方法——(经验之谈)
我发现了一个很好的开源项目,有很多东西值得我借鉴,但是好像有点茫然,不知道如何学习。这里我学习的开源项目链接:honghuangdc/soybean-admin: soybean admin - a beautiful vue admin template, based on Vue3、Vite、Naive UI、TypeScript. 基于Vite + Vue3 + NaiveUI + TypeScript的漂亮清新的中后台管理模版 (github.com)找不到对应代码——寻找相关文档首先遇原创 2022-03-17 19:19:11 · 2014 阅读 · 3 评论 -
前端代码规范【结合实际和官方】
一、命名规范1.文件命名①项目文件命名项目文件命名全部采用小写方式,以短横线分割例如:online-judge② 目录名以一个单词命名,有复数结构时,采用复数命名法例如:utils、assets以下是vue3的推荐的目录结构public:静态文件目录,存放不会改动的静态文件存放默认的静态资源存放应急显示资源(包括图片、文字)src:源码目录assets:同样是静态资源存放可能变动的文件,会经过webpack处理图片、公共js、icon、全原创 2022-03-11 13:41:37 · 577 阅读 · 0 评论 -
Vue3 设置文件别名【vue-cli、tsconfig.json】
问题描述当前项目,我们采用vue-cli脚手架搭建的vue3+ts项目,组织完模块之后,发现模块太多了,如果需要默认使用@去代表src目录就会显得比较臃肿和复杂,所以我需要对一些常用的模块进行别名设置解决方法1.设置vue.config.js首先对路径进行组装,之后通过alias设置别名这里我配置的@components代表组件const { defineConfig,} = require("@vue/cli-service");const path = require("pat原创 2022-03-15 21:56:25 · 3817 阅读 · 2 评论 -
Vue 图片验证码实现【blob、base64】
实现效果实现代码1.给img添加属性<div class="in_code"> <img :src="verificationImg" @click="acquireVerification" /></div>src将src与js中定义的属性双向绑定,图片属性的来源:src="verificationImg"@click实现点击图片换一张验证码@click="acquireVerification"2原创 2022-02-28 14:05:45 · 7320 阅读 · 1 评论 -
HTML+JS 实现监控切屏
项目描述该项目是我在网上看其他博客的时候无意中看到的,看见别人居然能实现这种操作很好奇项目要求做到监控网页状态记录离开次数离开时间记录离开页面实现这个切换页面功能需要用到一个web的APIvisiblitychangevisibilitychange - Web API 接口参考 | MDN (mozilla.org)Document.visibilityState - Web API 接口参考 | MDN (mozilla.org)document.addEventListen原创 2022-02-25 14:37:16 · 2941 阅读 · 0 评论 -
TypeScript 项目实战学习【开源学习】
> 本项目地址>> [Leo/ts学习 (gitee.com)](https://gitee.com/Leo_la/ts-crawler)## 项目背景今天我想尝试从项目中学习`ts`,目的主要是获取电影名称和评论。> 其实开始我是想尝试获取网易云音乐的热评的,但是它的整体都是在一个iframe中的, 可是`superagent`貌似获取不到`iframe`,于是就暂时放弃了```tshttps://movie.douban.com/top250```![在这里插入图片描述](h原创 2022-02-20 21:30:38 · 2172 阅读 · 0 评论 -
vue 3 + mo.js 实现点赞粒子特效【实战】
最终效果为方便大家下载,开源gitee地址如下点赞粒子效果 (gitee.com)文章较长,建议一步一步跟着走创建一个项目首先我们创建一个vue3.2项目详情请见Vue3+TypeScript 项目创建_qq_22841387的博客-CSDN博客,这里就不赘述了这里选择默认即可一、显示页面1.新建页面在components文件夹下新建页面ThumbsUp.vue单文件组件遵循 大驼峰原则2.写部分显示代码<template> <h1>.原创 2022-02-14 19:24:40 · 3190 阅读 · 0 评论