前端
关注
分享
扫一扫
文章平均质量分 64
普通网友
这个作者很懒，什么都没留下…
展开
-
vue3+ts+vite+pinia 项目搭建
1. 起始，项目搭建yarn 创建项目yarn create vitepnpm 安装依赖（如果没有可以用npm）// mac安装pnpmsudo npm i -g yarn// 安装依赖pnpm i//启动项目yarn dev//安装一下pretter和eslintpnpm i prettier eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue vue-eslint-parser @types原创 2022-03-11 20:52:32 · 606 阅读 · 0 评论 -
Vite + Vue3 + Ts 解决打包生成的index.html页面显示空白、报资源跨域、找不到资源、404-Page Not Found等错误
问题描述：在用Vue3 + Ts进行项目开发，通过Vite进行构建打包后，直接在本地以文件系统的方式，用浏览器直接打开打包生成后的dist目录下的index.html文件访问时，浏览器页面显示空白、打开控制台后有报错、该路径找不到对应的文件。原因1：由于index.html文件中，引用的相关资源文件的路径不正确导致在加载文件资源时失败，因为在大多数开发过程中，这个静态资源引用加载的前缀 默认是 “/”。解决方法：在项目根目录中打开vite.config.ts文件，如果没有应该文件就手动创建一个(原创 2022-03-11 19:28:54 · 5346 阅读 · 6 评论 -
js如何将时间的标准格式和时间戳格式和2022-01-27 000000（年月日时分秒）格式相互转换
目录前言一、new Date()？1. new Date() 是什么？2. 怎么用？二、格式化工具函数1.如何调用函数：2.代码如下（示例）：总结前言这里主要讲的是如何将我们的在项目中遇到的时间格式，进行处理，做的一个总结。首先我们，一般在new Date（）的时候，可以获得一个时间对象，这个对象表示的就是我们当前的时间。然后是为标准格式。但是现在我们需要在前端展示出一个方便用户查看的格式，这里我们讲解的是：2022-01-27 00:00:00（年月日时分秒）原创 2022-03-11 14:05:45 · 3627 阅读 · 0 评论 -
html+css+js之20个练手小项目（一）
html+css+js之20个练手小项目（一）——Hangman前言一、HTML二、CSS三、JS前言前端新手练习，记录不迷失。主要练习html和CSS布局以及JS。来源github，参考链接：使用html+css和纯js实现小项目Hangman是一个单词拼写的小游戏，主要功能包括：（1）利用svg画小人图（2）生成随机单词并展示（3）单词正确与错误提醒一、HTMLHTML结构比较简单，主要使用了SVG构造小人。学习一下标签svg中的line,circle。<!原创 2022-03-11 12:43:57 · 4603 阅读 · 0 评论 -
Cannot read properties of undefined (reading ‘push‘) 问题
现象描述当点击列表页面中的修改按钮，进入表单页面，到对应页签中，点新增按钮，输完内容点击确定保存后，发现页签中对应的列表中没有增加刚刚新增的数据而若一开始便在列表页面，点击新增按钮，进入表单页面后，再到对应的页签中，新增记录在列表中是正常显示的若给表单中table绑定的数据加了 filter() ，点击列表中的修改按钮，发现无法进入表单页，一直卡住<el-table class="table" border :data="inputForm.tbBDevList.filter(funct原创 2022-03-11 11:22:33 · 4855 阅读 · 0 评论 -
血轮眼轮回眼特效 html+css
效果（完整代码在底部）：实现并不难，都是重复的代码比较多。实现（可跟着一步一步写）：1. 先定义基本标签：<!-- 血轮眼 --> <div class="zuo"> <!-- 眼睛最中间那个黑点 --> <div class="zuoZong"> <!-- 三勾玉所在的圈 --> <div class="zuoYu">转载 2022-03-10 12:18:50 · 454 阅读 · 0 评论 -
我优化了进度条，页面性能竟提高了70%
前言大家好，我是零一。最近我准备在组里进行代码串讲，所以我梳理了下项目之前的业务代码。在梳理的过程中，我看到了有个进度条组件写的非常好，这又想起我刚开始学前端时写的进度条的代码，跟这个比起来真的差距太大了（大部分的初学者应该都想不到，而且我第一次家实习公司带我的mentor亦是如此）。因此，我想给大家分享一下这个思路极好的进度条组件，同时它也存在非常严重的性能问题，本文末尾也会讲解一下问题所在以及优化方式进度条的应用场景一般进度条组件都出现在类似抖音播放视频的这样场景中，如图中底部的箭头所示：进原创 2022-03-10 10:54:12 · 124 阅读 · 0 评论 -
一文带你使用Vue完成移动端(apk)项目
我们项目使用的是Vue和Vant组件，详情都可以看官网哦VantVue完整项目视频链接目录结构：基本配置入口文件main.js首先做一个引入我们的Vant UI组件是按需引入，而Element UI是全部引入所以引用方式也不同main.js完整代码// 引入Vueimport Vue from 'vue'// 引入根组件App.vueimport App from './App.vue'// 引入router路由import router from './router原创 2022-03-09 13:14:48 · 1365 阅读 · 1 评论 -
Web前端-Vue控制台报错：Uncaught (in promise) TypeError
开发前段时经常遇到如下报错：Uncaught (in promise) TypeError:大致错误有如下三种：1、使用的参数可能为null 或者 undefined2、返回的参数有重复3、未捕获异常如，我在后台Java（前端Vue，后端Java都是本人开发）中，判断了用户名是否为空，抛出了一个异常错误：if(user.getUserName() == null) { throw new RuntimeException("请填写用户名!");}js中在 promise 实例最后原创 2022-03-09 11:54:27 · 9893 阅读 · 0 评论 -
vue3获取vuex中的对象时为proxy对象，如何获取值
在使用vuex的时候发现获取state的string number类型的变量时，是可以直接通过store.state.value 取到值的，但是在取对象的时候，控制台打印出来的是Proxy 对象，Proxy对象里边的[[Target]]才是真实的对象。//第一种获取target值的方式，通过vue中的响应式对象可使用toRaw()方法获取原始对象import { toRaw } from '@vue/reactivity'var list = toRaw(store.state.menuList)原创 2022-03-09 10:30:32 · 3107 阅读 · 1 评论 -
vue-cli中按需引入element-plus(使用unplugin-vue-components unplugin-auto-import)
目录一、文档二、使用步骤1.安装插件2.配置vue.config.js3.测试总结一、文档戳这里，跳文档二、使用步骤1.安装插件npm install -D unplugin-vue-components unplugin-auto-import2.配置vue.config.jsvue-cli内部用的就是webpack，configureWebpack配置的会被合并const AutoImport = require('unplugin-auto-import/w原创 2022-03-09 08:55:45 · 1708 阅读 · 0 评论 -
Uncaught Invalid geoJson format TypeError Cannot read properties of undefined (reading ‘length‘)
乡镇、街道使用echart时报错解决，在echart.js中找到函数parseGeoJSON，用下边的将其替换即可function parseGeoJSON(geoJson, nameProperty) { geoJson = decode(geoJson); return map(filter(geoJson.features, function (featureObj) { // Output of mapshaper may have geometry nul原创 2022-03-08 14:15:28 · 813 阅读 · 1 评论 -
nuxt安装报错eslint Error [ERR_REQUIRE_ESM] Must use import to load ES Module
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module:require() of ES modeuls is not supported时间2021-12-16想搭建一个nuxt项目，刚开始直接用npx创建了项目npx create-nuxt-app <项目名>直接报错了百度了一大圈没有找到关于这个问题的答案，发现用npx创建nuxt项目，create-nuxt-app的版本是v4.0.0，我就想不用这么新的版本试一下原创 2022-03-08 12:55:04 · 1607 阅读 · 0 评论 -
JWT详解
本文从本人博客搬运，原文格式更加美观，可以移步原文阅读：JWT详解JWT简介1.什么是JWT在介绍JWT之前，我们先来回顾一下利用token进行用户身份验证的流程：客户端使用用户名和密码请求登录服务端收到请求，验证用户名和密码验证成功后，服务端会签发一个token，再把这个token返回给客户端客户端收到token后可以把它存储起来，比如放到cookie中客户端每次向服务端请求资源时需要携带服务端签发的token，可以在cookie或者header中携带服务端收到请求，然后去验证客户端请原创 2022-03-08 11:34:54 · 498 阅读 · 0 评论 -
HTML期末学生大作业-电影网站html+css+javascript
HTML网页制作期末大作业-电影网站html+css+javascript 9个页面适用学生作业课程设计在线电影影网、期末作业电影网、毕业设计在线电影网10个JS效果部分电影网页页面部分电影网页页面源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width转载 2022-03-08 10:14:30 · 4883 阅读 · 0 评论 -
灵活的Vue组件——原来这么简单
本篇学习目标能够理解vue组件概念和作用能够掌握封装组件能力能够使用组件之间通信能够完成todo案例1. vue组件1.0_为什么用组件以前做过一个折叠面板需求: 现在想要多个收起展开的部分方案1: 复制代码代码重复 冗余不利于维护案例用less写的样式, 所以下载yarn add less less-loader@5.0.0 -D模板标签 - 在这个基础上, 把要复用的多复制几份(讲解不好的地方引出解决方案) 案例：折叠面板原创 2022-03-07 08:56:52 · 697 阅读 · 0 评论 -
导航栏滚动渐变效果 html+css+js
先看效果：实现：1.定义导航栏的文字标签：<div class="tou"> <sapn class="logo"> 北极光。</sapn> <ul class="biao"> <li><a href="#"><a href="#">主页</a></li> <li><a href="#">个人简介</转载 2022-03-06 05:25:43 · 1465 阅读 · 0 评论 -
关于js：Uncaught TypeError Cannot read properties of undefined (reading ‘style‘) 全局与局部变量 for循环
问题：想实现点击一个li，就会展示对应的div：代码为：var tab_list = document.querySelector('.tab_list'); var lis = tab_list.querySelectorAll('li'); var items = document.querySelectorAll('.item'); for(var i = 0; i < lis.length; i++){ // 设置每个li的index值原创 2022-03-06 04:04:56 · 1724 阅读 · 0 评论 -
【hiprint】hiprint的使用方法（附使用案例）hiprint 表格数据传输问题解决办法
hiprint打印table数据无法绑定解决办法事件起因：问题描述：hiprint使用教学：hiprint案例(附下载地址)：hiprint的依赖导入案例代码解释：事件起因：因为前两天要弄一个a4纸的打印功能（嵌入在网页里面），结果前两天因为弄这个搞得挺恼火的，到笔者终于解决了这个问题后，特此来说明一下这个问题，以便后来者能够吸取经验教训问题描述：我所创建的一个空的vue项目，后面在这个里面加入hiprint进行数据的打印整个项目的结构：我因为写的一个简单的数据原创 2022-03-06 02:43:02 · 3000 阅读 · 1 评论 -
Vue安装及环境配置
一、安装node.js官网：Download | Node.js历史版本：Previous Releases | Node.js或者下载完毕后，可以安装node，建议不要安装在系统盘（如C：）。二、设置nodejs prefix（全局）和cache（缓存）路径1、建议安装的路径不要有中文2、新建node_global和node_cache两个文件夹可以在nodejs安装路径下，新建3、设置缓存文件夹npm config set cache "E:odeode_cache"原创 2022-03-06 01:21:46 · 757 阅读 · 0 评论 -
vue2与vue3的区别
1. vue2和vue3双向数据绑定原理发生了改变vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。vue3 中使用了 es6 的 ProxyAPI 对数据代理。相比于vue2.x，使用proxy的优势如下defineProperty只能监听某个属性，不能对全对象监听可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以原创 2022-03-06 00:00:44 · 80 阅读 · 0 评论 -
postman自动化测试
postman自动化测试文章目录postman自动化测试导入测试用例文件，测试web接口1、变量设置2、pre-request script请求前执行的脚本3、Tests请求返回结果执行的脚本4、使用Runner进行自动化测试参考Postman 快速入门之脚本语法Postman接口测试自动化介绍自动化接口测试之Postman（一篇搞定） - （很全）postman官方脚本语法 pre-request Script / Tests /javascript原创 2022-03-03 16:39:20 · 357 阅读 · 0 评论 -
Linux文本处理神器awk实战案例
文章目录1. 什么是awk2. 打印不同列的内容2.1 初探数据文件2.2 awk处理的三种模式2.3 打印全部内容2.4 打印第N列内容2.5 打印多列内容2.6 打印多列内容并对齐显示2.7 第0列的物理意义3. 打印行号和列号3.1 列与列中间的分隔符3.2 打印行号3.3 打印列号3.4 利用列号打印倒数第N列3.5 打印最后一行4. 修改输入和输出分隔符5. 输入多个文件6. 修改某一列的值7. 条件筛选后打印8. 运算8.1 数学运原创 2022-03-03 15:34:53 · 804 阅读 · 0 评论 -
HTML+CSS实现小米官网首页
一、HTML+CSS实现小米官网首页仿写小米官网的页面，熬了两个晚上终于把这个页面做好了，原创不易，欢迎大家点赞和评论，二、主要内容：三、学习目标：四、项目准备：仿写小米官网下载图片下载iconfont初始化css文件五、页面结构如下：六、效果图如下：七、部分源代码如下（如需要全部的源代码评论区留言，原创不易，记得点赞和收藏哦）。HTML部分源代码如下：<!DOCTYPE html><html lang="en"><hea原创 2022-03-03 14:30:17 · 2855 阅读 · 18 评论 -
DeprecationWarning find_element_by_ commands are deprecated. Please use find_element()解决
老版本，已经被弃用，很快就失效了 driver.find_element_by_xpath("//input[@id='keyword']")需要改成下面的这样格式driver.find_element(By.XPATH, "//input[@id='keyword']")from selenium import webdriverfrom selenium.webdriver.chrome.service import Service老版本，已经被弃用，很快就失效了driver = web原创 2022-03-03 13:25:59 · 627 阅读 · 0 评论 -
记某次CTF中Let me in
“人都有各自的月亮”??出题思路??解题技巧?? 涉及的工具?? 总结??出题思路本题考核的是WEB前端加密绕过，该场景在平常的工作中经常遇到，如果不完成解密操作无法进行下一步的测试。解题需要选手使用工具或者脚本实现加密进行爆破和越权，test账户的密码使用AES对称加密，密钥在混淆过的javascript代码中生成固定的密钥，可以实现该加密过程对登录进行爆破，也可以使用Burpsuite的插件进行加密爆破，如AESKiller、Crypto Messages Handler等，为原创 2022-03-02 13:13:01 · 4491 阅读 · 0 评论 -
情人节表白神器（成功率100%）
一、前言2022年2月14号就是情人节了，情人节是一个关于爱、浪漫以及花、巧克力、贺卡的节日，男女在这一天互送礼物用以表达爱意或友好。在情人节的当天不知道有没有想要向心仪的对象表白的人，如果有的话，下面这一款神器可千万不要错过了。二、效果展示1.首页首页就是上面写着###人的名字，后面可以换成自己想要的人名。上面是一行提问，中间部分有两个按钮，左侧是同意按钮，右侧是不同意按钮。2.按钮选择鼠标是一个会移动的爱心，当你选择不同意的按钮时，按钮就会按照代码中编写的轨迹，进行原创 2022-03-02 03:12:52 · 220 阅读 · 0 评论 -
删库遭 GitHub 封号，开发者欲夺回发行权：“我只是犯了个编程错误”
删库一时爽，后悔没商量！2022 年伊始，开源届炸开了锅，这边还在费尽心思尝试各种检测与修复方法减少 Log4j 2 漏洞带来的辐射；另一边却陡然发现，数千个开源库满屏乱码，无数程序员一觉睡醒后陷入沉思。在寻找根源时发现，这些错乱的开源库有一个共同特点，就是使用了开源的 NPM 包 faker.js 和 colors.js，继续深挖后，让人十分诧异的是，导致重大 Bug 的背后是这两个流行的开源库被其作者 Marak Squires 删掉了源代码。所谓“冲动是魔鬼”，就在Marak对faker..原创 2022-03-02 02:09:17 · 395 阅读 · 0 评论 -
【python实战】怎么用python自动登录CSDN
目录页面分析引入selenium模块及驱动1、并将安装好的Chromedriver.exe引入到代码中2、浏览器驱动引入爬虫模拟登录1、设置网址链接2、切换到账号密码登录3、找到用户名密码的控件ID4、注入用户名和密码5、模拟登录点击成功登录CSDN先上效果页面分析CSDN登录页面如下图引入selenium模块及驱动1、并将安装好的Chromedriver.exe引入到代码中# -*- coding:utf-8 -*-from selenium import webd原创 2022-03-02 01:05:45 · 251 阅读 · 1 评论 -
Vue3.0项目实战+ElementUI从入门到实战
课程地址:Vue3.0项目实战2021｜Vue差异化对比+实操公司后台管理系统｜零基础入门前端开发教程(C#/.Net/Vue基础/Vue3技术入门讲解/Vue实战)_哔哩哔哩_bilibili https://www.bilibili.com/video/BV17V411j76p?p=1ElementUI从入门到实战【升职加薪，只争朝夕】-学习视频教程-腾讯课堂 https://ke.qq.com/course/3547529零.开篇介绍Vue3 vs Vue2Vue-cli构建Vue3项目.原创 2022-03-02 00:02:14 · 1212 阅读 · 0 评论 -
Uncaught TypeError Cannot read properties of undefined (reading ‘style
求解大佬为什么报错原创 2022-03-01 20:20:17 · 3049 阅读 · 0 评论