frontend专题

echarts vue 动画效果的水球图、波浪图教程

1、安装插件 前提是已经安装了echarts(我的版本是4.2.1) npm install echarts-liquidfill --save 我安装了3.1.0版本的,结果运行时报错"TypeError: wave.ensureState is not a function" 原因:echarts版本和echarts-liquidfill的版本对应不上,根据下面的搭配版本安装就不会报错了

Vue3中的Hooks详解

vue3带来了Composition API,其中Hooks是其重要组成部分,本文将深入探讨Vue3中Hooks,帮助你在Vue3开发中更加得心应手。 一、Vue3 Hooks实现原理 在Vue3中,Hooks是基于Composition API实现的,它允许我们在组件的逻辑代码中更好地组织和复用代码。Hooks本质上是一组可复用的函数,它们可以“钩入”Vue组件的生命周期,让我们能够在组件的

前端link调试神器:从yalc到yald

最近在使用yalc时发现一个问题,执行yalc publish时,如果包中有publishConfig不能生效。 而yalc已经很久没有更新了。 因此自已动手fork了yalc,发布一个yald,支持处理publishConfig. 使用方法与yalc完全一样,只需要将所有yalc改为yald可。 Github 以下是一大波开源项目推荐: 全流程一健化React/Vue/Nodejs国际化方

vue 之 Quill编辑器封装

安装 npm install vue-quill-editor --save <template><div><el-upload:action="uploadUrl":before-upload="handleBeforeUpload":on-success="handleUploadSuccess":on-error="handleUploadError"name="file":s

Vue3快速上手(十五)Vue3路由器使用和简单路由切换

一、路由的概念 1.1 路由及路由器 路由器:通常指的是我们家里上网用的路由器,通过网络接口,一根网线,链接至电脑,一般我们的电脑就可以上网了,多个网络接口,链接多个电脑,形成一组路由。而路由器就是管理这些路由线路的。 Vue里的路由器也是这个意思,通过点击,输入的方式使得浏览器得知发生变化的时候,路由器可以通过当前页面的地址,定位对应的组件,从而显示到指定页面。这里路径和页面组件就是一组

前端学习第七天-css常用样式设置

达标要求 掌握元素的显示与隐藏 熟练应用溢出的文字隐藏 熟练掌握版心和布局流程 1. 元素的显示与隐藏 在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow。 他们的主要目的是让一个元素在页面中消失,但是不在文档源码中删除。 最常见的是网站广告。 1.1 display 显示 display 设置或检索对

Vue.js+SpringBoot开发开放实验室管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容2.1 实验室类型模块2.2 实验室模块2.3 实验管理模块2.4 实验设备模块2.5 实验订单模块 三、系统设计3.1 用例设计3.2 数据库设计 四、系统展示五、样例代码5.1 查询实验室设备5.2 实验放号5.3 实验预定 六、免责说明 一、摘要 1.1 项目介绍 开放实验室管理系统包含实验室类型模块、实

Vue开发实例(五)修改项目入口页面布局

修改项目入口 一、创建新入口二、分析代码,修改入口三、搭建项目主页面布局1、Container 布局容器介绍2、创建布局3、布局器铺满屏幕4、创建Header页面5、加入Aside、Main和Footer模块 一、创建新入口 创建新的入口,取消原来的HelloWorld入口 参考代码如下: <template><div><h1>{{ msg }}</h1></div></

移动端的React项目中如何配置自适应和px转rem

创建项目 create-react-app project-name 启动项目 npm start 下载自适应和px转rem的插件 自适应的:    npm install lib-flexible --save px转rem的:npm install postcss-pxtorem@5.1.1 --save-dev 创建craco.config.js配置文件 在package.j

【前端素材】推荐优质后台管理系统网页Star admin平台模板(附源码)

一、需求分析 1、系统定义 后台管理系统是一种用于管理和控制网站、应用程序或系统的管理界面。它通常被设计用来让网站或应用程序的管理员或运营人员管理内容、用户、数据以及其他相关功能。后台管理系统是一种用于管理网站、应用程序或系统的工具,通常由管理员使用。 2、功能需求 后台管理系统是一种用于管理网站、应用程序或系统的工具,通常由管理员使用。它提供了对系统后端功能的访问权限,允许管理员执行各种

全栈入门,前后端入门--springboot3+vue3制作一个后台管理项目

一:前言         1:因为本人也是全栈初学者,现在主职是公司前端,鉴于当前行业形式,单单只掌握一门语言已经不再吃香,甚至有点危险,35岁危机极大可能提前。作为00后要始终保持危机意识,不至于在25,26岁时被裁去卖煎饼果子,所以现在决定开始自学后端,争取早日成为一名全栈开发,能独自自主完成单个项目,早日回到老家工作,开始养老人生。         2:请注意:本教程只注重功能实现(增删

关于html-x1.1的发布

忙了一晚上,修正了许多bug,最重要的是可以直接根据url解析网页文件,我主要是增加了parseurl这个方法,采用internetreadfile这个api来读取网页内容,然后用string类来存储内容,最后用load方法来解析。并且还增加了对特定节点内的getelementsbytagname。好了,具体看代码: #include<iostream>#include<string

完善自己的html parse

说来惭愧,我发现自己写的那个html parse过于理想化,解析xml还差不多,想解析现今的html,估计是不大可能的,所以我把代码重写了一遍,数据结构改成双向链表,这样解析速度更快,最大程度地对html进行容错处理,试验时发现的确可以解析普通html字符串,不需要再严格符合那个xhtml标准了。而且在链式调用的传递参数上不需要再传入dom类型的参数,这样写起来就更加简便了。

发布自己的html parse

经过几天的努力,把自己的html文件解析程序完善了下,支持解析<script>标签,还有转义的双引号和单引号。在csdn资源上发布了下,暂时就将它命名为html-x吧,欢迎大家试用,有什么不足还望大家多多指正。       下载地址:http://download.csdn.net/source/2035563       PS:该程序只能解析符合XHTML1.0标准的html文件,

c++编写html文件解析器

最近本来是要去那嵌入式课的,但是那课竟然说人数太少,开不了,靠。所以这两天只能自己研究点东西了。记得自己以前就想动手写一个关于dom的解析引擎,只怪自己太懒,一直没动笔。最近在家也没什么事做,就自己动手写一个,花了一天时间写的差不多了,正好锻炼自己的c++水平吧。       这个解析程序有三个类,node,nodecollect,dom。dom这个类是个包装,它就相当与docume

三种图片预览插件viewer、vue-photo-preview、vue-picture-preview

第一种:viewerjs使用介绍 1、先安装依赖 npm install v-viewer --save2、main.js内引用并注册调用 //main.js import Viewer from ‘v-viewer’ import ‘viewerjs/dist/viewer.css’ Vue.use(Viewer); Viewer.setDefaults({ Options: { “inli

用node或者vscode开启一个简单的本地server服务器,加载html网页

使用Live Server 想要加载本地html页面可以快速能让它在你本地浏览器中打开,可以有好多种方式,如果你有使用vscode,可以安装一个插件:Live Server,然后直接在vscode中直接右键就可以开启这个服务: 安装好之后,在vscode中打开html,然后右键:就可以自动打开浏览器并加载你这个html页面 使用node搭建server服务 使用node.js自

CSS特性

小技巧:在调试工具中,css样式上看层叠,下看继承。 1、层叠性         相同的属性会被覆盖,不同的属性会叠加 2、继承性 3、优先级         基于不同种类的选择器的匹配规则。         通配符 < 标签 < 类选择器 < id选择器 < 行内样式 < !important          (选择器详见css选择器) 注意:         链接的颜色不继

前端按钮动画

效果示例 代码示例 <!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"><tit

idea创建vue项目

安装Vue.js 打开file 选择Setting 找到pluging 搜索 vue.js 点击install 安装 创建Vue项目 点击file 选择New 选择Project 点击Vue.js 填写信息,点击Create 项目创建完成 完善vue.config.js 自动创建的vue.config.js是: 新增devServer配置

【六袆 - React】Next.js:React 开发框架;Next.js开发框架的特点

Next.js:React 开发框架 Next.js的特点 1.直观的、基于页面的路由系统(并支持动态路由) Next.js 提供了基于文件系统的路由,意味着你可以通过创建页面文件来定义路由。 伪代码示例: // pages/index.jsexport default function Home() {return <h1>Home Page</h1>;}// pages/us

React富文本编辑器开发(四)

上一节我们做了块级元素的格式操作,这节我们来讲行内元素的相关操作。行内元素的样式一般指 粗体、斜体、代码或 删除线等 。通过前一章的内容得知,元素的渲染是通过渲染器来呈现的,块级元素通过指定 renderElement, 行内元素(即内联元素)在 Slate中也叫 叶子,通过指定 renderLeaf来渲染。即然叶子也是元素,那么就要设计样式。我们来设计一个粗体组件。创建一个新文件,将所有叶子组件

react 生命周期 之getDerivedStateFromProps

参考:https://www.jianshu.com/p/50fe3fb9f7c3 getDerivedStateFromProps React生命周期的命名一直都是非常语义化的,这个生命周期的意思就是从props中获取state,可以说是太简单易懂了。 可以说,这个生命周期的功能实际上就是将传入的props映射到state上面。 由于16.4的修改,这个函数会在每次re-renderin

react生命周期之componentDidUpdate

官方解释是: componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。 当state或者props改变时触发,需要注意的是一定要做判断条件,否则会陷入死循环。

react生命周期之 componentDidMount

在render之后调用,仅在装载组件时调用,之后不再调用,即使state、props变化也不会调用,除非将组件卸载

es6交换数组对象元素的位置

方法一:(此方法有些注意的细节是可以优化的) 1、findIndex查找元素在数组中的位置 2、通过结构赋值交换数组位置,可以多个同时调换 [arr0[mingIndex],arr0[lanIndex],arr0[lvIndex]] = [arr0[lvIndex],arr0[mingIndex],arr0[lanIndex]]; 左边是元素在数组中的原本的排列顺序 右边是自己希望的排列顺序。