web前端
文章平均质量分 65
web前端神器
这个作者很懒,什么都没留下…
展开
-
js中调用函数与用new调用相同函数的区别
最后还一个要注意的区别,函数里面有返回值,如果是对象的话,这里new完之后的结果则是你返回的值,如果不是对象则自动按以上两点返回对象。如下案例,返回值则{name:'名称'},结果与直接调用函数的结果是一样,并且其中添加的this.x与this.y属性也都不存在了。如果是普通的直接调用函数的话,这里要注意:这里的this则指的是window,调用函数之后就相当于创建了一个公共的变量x与公共的变量y。用new调用函数的话,这里的会返回一个对象。而这里的this所指的x与y则为new完之后的对象属性。原创 2024-03-22 11:10:46 · 176 阅读 · 0 评论 -
x6.js 从流程图组件库中拖拽组件到画布dnd使用
上一篇已经了解到了x6.js常用功能以及使用方法。但我们使用流程图的时候还少不了一个非常重要的功能那就是拖拽组件库里的组件进来。如下图:首先是布局这块,拖拽组件库的视图中布局无需我们去写,我们只需把界面搭建好。原创 2024-03-14 16:32:41 · 850 阅读 · 0 评论 -
vue中如何查看组件有哪些函数与变量
在开发的过程中,经常用到他人的框架,特别是开源框架比如element,uniapp等。其中就涉及到框架里对应的组件。而组件里又有哪些内置的函数,我们通常是去查官方文档。然后很多的时候需求的多样性,要改的地方也是不一样的,我们通过文档查到的组件函数并不能满足我们的需求。这时我们来教大家一个技巧如何快速的查看组件内置的函数与变量。原创 2024-03-13 17:31:33 · 798 阅读 · 0 评论 -
移动端点击任意下拉框或复选框文本框都会出现绿色背景?
css自带的样式实在太恶心了,下图任意点击下拉框,复选框都会出现绿色背景。原创 2023-10-23 11:29:15 · 162 阅读 · 0 评论 -
从零搭建vue + element-plus 项目
控制台输入 process.env.HOSTURL 能打印出http://localhost:3000 则表示配置成功。if(process.env.NODE_ENV == 'production'){ // 生产环境用另一个配置。这样默认env文件为开发环境下的变量,.env.production为生产环境中的变量。使用的话也很简单,process.env.HOSTURL充当全局变量使用即可。.env.production 文件即可配置 生存环境中的变量。如果页面能正常显示按钮,则表示框架安装成功。原创 2023-08-15 10:22:59 · 686 阅读 · 0 评论 -
d3.js绘制饼状图,悬浮出现字以及点击事件
g.on('mouseenter', (event,d) => { // 这里的d.data才是数组里的每条数据。const g = svg.selectAll(".arc") // 选择或创建类名为arc的元素。.enter().append("g") // 筛入到元素中并添加g标签。原创 2023-03-09 15:22:51 · 1125 阅读 · 0 评论 -
d3绘图笔记
比如d.name为a 则会寻找上面的 d3.scaleBand() .domain([‘a’,’b’,’c’]) 这块a对应的位置。}) 矩形的高度,这边的属性其实都支持动态函数变化。let g = svg.append("g").attr("transform", "translate(" + 30 + "," +30 + ")") // 绘图区域。原创 2023-03-09 12:03:18 · 571 阅读 · 0 评论 -
uView教程-抽屉菜单 #低代码 #小程序 #uView
这种抽屉效果是如何制作的呢?在guiplan低代码开发工具中,点击"uView框架",输入关键字"弹出层"进行搜索,找到"带用户菜单"点击"一键插入",这我们一个抽屉菜单就插入进来了,底部有一个测试按钮,当我们点击的时候这个菜单则会自动展开,我们可以直接看到按钮的点击事件,将该点击事件的代码进行复制,找到顶部菜单图标,将这段代码粘贴到该点击事件中,这样我们点击菜单图标即可显示抽屉菜单了,最后将底部的测试按钮删除即可。你学会了吗?最后附上生成之后的源代码原创 2022-12-07 15:58:54 · 1132 阅读 · 0 评论 -
uView教程-骨架屏搭建 #低代码 #小程序 #uView
当小程序没有加载完时会出现一个基础的骨架效果,页面加载完之后骨架会消失掉,这个效果怎么做的呢?今天由我来带领大家学习如何使用骨架屏,在guiplan低代码开发工具中,选中要添加骨架的元素,比如这里选择文章列表,添加一个变量isArticleLoading用来判断文章是否获取到数据了,然后我们将它的显示条件设置为!isArticleLoading,也就是数据没有获取到不显示列表,不显示列表的化这里就是空的什么都没有,这个时候我们就可以添加一个骨架进来了,在uView框架中搜索关键字’原创 2022-12-06 17:38:48 · 1935 阅读 · 0 评论 -
vue中v-show指令与v-if指令到底有那些区别?又如何使用?
我们来看如下场景,在记单词游戏中可以看到里面有图片,中文,英文单词 三种显示模式,而这三种模式我们只需显示一种即可,并且并不需要频繁切换,这样我们就可以使用v-if指令。首先v-show指令会提前渲染dom,所以做显示与隐藏切换时缓存的dom开箱即用并不会加大性能的损耗,而v-if指令如果频繁的切换,会不断的销毁dom与重新创建dom会造成一定的性能损耗,特别是要渲染的场景过于复杂时。比如tab切换,下拉框显示等。而我们继续用v-if指令,可以看出整个的副标题h3直接去掉了,也就是根本就不会给你进行渲染。原创 2022-11-16 19:44:05 · 319 阅读 · 0 评论 -
node后端(koa)如何打包加密,以及node_modules如何优化?
在我们用node做后端开发遇到的三个问题。一安全问题,代码并没有编译就直接传递了,只要进去服务器代码可以看得一清二楚。二是文件体积问题,随便一个项目node_modules件包就是一百兆左右。第三个是部署问题,每次部署新项目都要下载安装插件导致部署非常缓慢。转载 2022-11-15 09:39:33 · 2041 阅读 · 2 评论 -
【html基础】原生表格一键搭建,一键生成代码
其中表格标签里还含有tr标签,th标签,td标签。tr标签则表示一行,td标签则表示行里的每一列,而th标签则表示表格的头部标题,th标签除了表示与现实头部标题以外,还有一个很重要的作用就是它可以控制对应列里宽度,这样如果发现内容显示不全的情况下,我们就可以在guiplan里拖拽th标签的宽度即可。我们可以继续通过guiplan一键插入属性即可,比如给表格添加边框,只需要选中边框然后插入进来即可。当然边框也有很多属性,以上是内侧边框与外侧边框一起显示的效果,下一章讲解表格的其他属性。原创 2022-08-22 14:33:02 · 1239 阅读 · 0 评论 -
【vue循环】如何显示商家与商家里的商品数据?
如v-for="item2 in item.list",如下图。注意:这里的商品名称都用item2来进行表示,将item改为item2用来区分商家与商品,其中item.list则表示为商品数据,它只会通过v-for循环显示商家数据,所以我们只需要继续通过v-for指令,而这个item则是每个商家的数据,这样item2就表示为商品数据了,最后在将商品数据进行双向绑定,与数据里的数据正好一一对应。即可正常的显示商品数据了。可以看出渲染之后的效果,而商品数据却没有思路,遍历循环商品数据即可,最后我们来对照一下,原创 2022-08-21 10:33:21 · 798 阅读 · 0 评论 -
随便找个后台管理系统(若依)转可视化二次开发,不用写一个布局代码,到底有多爽
这里以若依后台管理系统为例,本节课内容有:1.下载并安装若依后台管理系统2.将登录页面转可视化3.不写一个代码的情况下修改标题与背景以及布局4.将首页转可视化,删除多余的内容并插入echart图表插件进行统计5.将用户管理界面转可视化并且直观的可视化查看vue变量,函数,element组件属性,样式,dom结构6.模拟登录接口对接自己的接口7.模拟用户信息接口,验证码接口,动态路由接口并完成后台登录随便找个后台管理系统(若依)转可视化二次开发,不用写一个布局代码,到底有多爽...原创 2022-05-07 09:51:04 · 2445 阅读 · 2 评论 -
vite 构建工具 如何热更新静态页面?自动刷新页面
介绍:最近有一些粉丝用guiplan只做静态页面,但每次修改文件都要手动刷新页面,而且页面内容越来越多的时候,每次刷新页面还需要拖动滚动条才能看到效果。而用element-ui框架与uniapp框架都有对应的构建工具能实现热更新,比如webpack,uniapp。这一章将教大家如何通过vite实现静态页面的热更新。也就是修改代码自动刷新页面。步骤1. 先输入命令来安装vite项目:npm init vite安装过程直接按enter键继续即可,不用选框架如下图:2. 双击打开..原创 2022-01-15 10:13:29 · 2177 阅读 · 0 评论 -
koajsAdmin已经开源了,element-ui + koa + mongodb 全栈搭建后台管理系统
koajsAdmin介绍 koajsAdmin是一款后台管理框架,全栈用node进行开发。前端用的element-ui + vite进行构建,后端用的koa + mongodb进行构建。运行guiplan低代码开发工具即可快速建站,可视化配置数据库,可视化配置接口,可视化搭建后台界面。提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录koajsAdmin介绍前言一、前端使用步骤1.下载框架2. 安装前端插件3. 启动前端服务4. 停止服务二、后端步骤1. 安装后端插件2.启原创 2022-01-01 13:40:26 · 10070 阅读 · 0 评论 -
vite构建项目步骤以及所遇到的坑,要注意的事项
文章目录安装与启动步骤安装yarn安装vite项目并启动vite配置创建路由安装路由:创建路由文件并配置路由引用路由接口代理配置常见的报错问题开源demo下载总结安装与启动步骤安装yarn首先用yarn命令进行安装,没有这个命令的同学可以先安装一下npm install yarn -g安装vite项目并启动yarn create vite-app <project name>cd 项目名称 进入目录即可 yarn install yarn devvite配置配置文件为原创 2021-08-27 11:36:28 · 7294 阅读 · 0 评论 -
web前端代码还需要手写吗?
前端html标签还需要手写吗?说两句与时俱进,不断更新,不断学习自动化省去的代码量学习教程课程说两句随着社会的发展新技术层出不穷,从最原生的js,html,css到后续的框架jquery,bootsrap。再到后来的vue,angular,react.。前端的学习成本也越来越高,基于这些新技术又得学习node,webpack。深感前端真的是学不动了。我记得我在很早之前用appcan做app的时候,才没几年时间就被uniapp直接碾压。都是跨终端,却有人比你做的更好。所以我也不敢保证未来guiplan是否原创 2021-07-14 16:39:48 · 2012 阅读 · 0 评论 -
如何不用ps来吸取颜色并将颜色一键插入到网页,自动生成代码?
文章目录前言一、使用步骤1.打开guiplan软件2.点击吸色器三、再点击“开启吸色器”按钮四、选择效果图五、点击“开始吸色”六、一键插入颜色前言我们在制作网页的过程当中,设计师给的效果图如果没有显示颜色值的情况下,我们要获取效果图的颜色那就必须得用到吸色器,会ps的朋友会打开ps导入效果图来吸取颜色,然后再将颜色复制过来,粘贴到自己的代码中。这样的操作非常繁琐,首先ps软件本身就很占用内存,再加上导入图片,吸取颜色,复制颜色值,使用过程中再去写代码,如字体颜色color:#ccc,背景颜色bac原创 2021-04-17 11:36:46 · 2742 阅读 · 0 评论 -
【零基础实战】免费建站,不需要域名,不需要服务器,不需要敲代码
【零基础实战】免费建站,不需要域名,不需要服务器,不需要敲代码静态展示型的网站可以直接选择模板来制作静态网页。点击生成网页会有一个地址。生成之后的网页也可以下载下来进行二次开发,代码符合w3c规范。html,css,图片都有,二次开发也非常方便。还可以直接下载guiplan软件来进行二次开发,软件里可直接可视化动态交互,调用接口,添加绑定事件等都能一键搞定。 【零基础学习】免费建站,不需要域名,不需要服务器,不需要敲代码原创 2021-03-23 08:39:17 · 548 阅读 · 0 评论 -
如何在编译好的页面下还能可视化布局,可视化交互。可视化双向绑定,可视化点击事件,可视化弹框制作
如何在编译好的页面下还能可视化布局,可视化交互。可视化双向绑定,可视化点击事件,可视化弹框制作技术介绍项目演示众所周知我们在制作前端页面的时候,一边要手写代码,另一边要打开浏览器查看效果,当涉及到交互的时候,比如要测试一下自己写的按钮点击事件,我们还得切换到浏览器去手动点一下,才能看到自己写的代码逻辑代码是否有误。而目前guiplan已支持在编译好的页面下可视化布局,直接看到的就是编译好的真实效果,可视化交互直接在看到的效果上写数据代码,添加点击事件等等。写完立刻生效。直接点击即可测试。真正的将可视原创 2021-01-07 19:20:38 · 574 阅读 · 0 评论 -
如何用iview框架制作一个商家的评分功能
用iview框架制作一个商家的评分功能点击评分,下面的星星内容会自动变化评分组件详解Rate组件结构在官网中我们可以看到iview有一个Rate组件,调用组件代码即可使用评分功能结构也非常简单使用Rate 组件,然后用v-model来绑定组件选中之后的值。Rate组件属性除了使用Rate以外,我们可以看到上图中有show-text这么一个属性,也就是添加了这个属性之后图左边评分的时候会自动显示文字结果,如上图左边的3星。当然还有其他的属性如下:如属性count则表示总分数,比如这里的c原创 2021-01-02 17:02:26 · 444 阅读 · 9 评论 -
只需这样做就能解决绝大部分web前端性能优化问题
前言随着社会的发展,技术的更新,前端技术也越来越复杂,大项目当中所需插件也越来越多,迭代起来的功能也越来越多,从而导致项目越来越卡,打开越来越慢,所占的内存也越来越大。从而出现一大堆性能上的问题。为了更好的给用户体验,我们不得不花费大把时间去做性能优化。下面我们来一起看看web前端有那些性能可以优化的吧。使用CDNCDN的全称是Content Delivery Network,即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发原创 2020-11-30 22:06:05 · 165 阅读 · 0 评论 -
拖拽高宽,拖拽绝对定位,推拽边距-guiplan免费html可视化编辑器
拖拽高宽,拖拽绝对定位,推拽边距-guiplan免费html可视化编辑器绝对定位下拉框选择“绝对定位”推拽内容块红色边框如下图如拖拽左边红色边框,自动变化left的值拖拽上红色边框自动变化top的值高宽下拉框选择宽高拖拽红色边框宽高则自动变化边距下拉框选择边距拖拽红色边框边距自动变化更多的操作见 guiplan官网....原创 2020-11-11 17:00:44 · 1049 阅读 · 0 评论 -
bootsrap4前端自适应
自适应处理方式有以下几种宽度随着屏幕的变化而变化 bootsrap中根据不同的屏幕设置不同col值即可。如:小屏宽度50%则col-sm-6 中屏宽度为33%则col-md-4 随着屏幕的变化显示与隐藏内容 设置d-block属性即可 如d-sm-block表示只要不是移动屏就显示,则设置默认d-none表示默认为隐藏 随着屏幕的变化放大或缩小内容 同理font-sm-3 设置不同字体大小 随着屏幕的变化调整布局方式,如原先的水平布局调整为垂直布局 默认移动端为垂直排列,则盒子布局d-fl原创 2020-07-28 13:16:58 · 370 阅读 · 0 评论 -
bootsrap封装后的弹性盒子布局
在bootsrap4之前都是左对齐布局,由于技术的更新,盒子布局基本能满足巨大部分的布局要求。所以bootsrap4也进行的较大的改版。这里我们主要来演示盒子布局。首先添加一个row类名,我们可以看到布局默认变为了水平布局。 我们再添加一个flex-colmn属性即可改为垂直布局如下图 以水平布局为列,添加justify-content-center即可水平居中排列如下图 添加justify-content-center即可右对齐排列如下图 添加 justify-content-between.原创 2020-07-27 16:21:09 · 194 阅读 · 0 评论 -
如何解决网站源码(加密混淆)没有信息也能正确的抓取信息?如何利用electron抓取网站信息?爬虫
如何解决网站源码(加密混淆)没有信息也能正确的抓取信息?如何利用electron抓取网站信息?爬虫首先我们来安装electron,本节课暂不演示electron的安装了,有兴趣的同学可以自己试一试。下载electron-quick-start启动项目修改index.html页面6.创建test.js并修改修改main.js附带几张效果截图传统的爬虫技术大部分都是通过源代码来获取页面内容,但现在随着社会的发展很多html代码都是动态渲染,渲染逻辑都是在js里处理了。前端的打包编译混淆之后,源码基本连自己都看原创 2020-07-08 16:07:47 · 1192 阅读 · 0 评论 -
guiplan0.2.0全新改版
guiplan0.2.0全新改版界面风格改版交互视图做了改版改变界面界面风格改版根据广大用户的反馈,guiplan操作要记快捷键,对小白以及新手前端都不友好,本次做全新的改版与升级,不仅优化了界面风格,更是添加了强大的功能按键,用户无需一个个去快捷键里查找功能在哪,每个功能按键都有显示快捷符,可用快捷操作也可手动点击操作。还有强大的预览窗口,可左右对照编辑效果与真实效果,大大提高开发效率。增加了丰富的功能按键,排版风格统一化,让视觉效果达到更好的体验。更有多样化的视图切换,使体验更加方便快捷。增加原创 2020-07-06 16:58:28 · 464 阅读 · 0 评论 -
盒模型布局
###简介由于技术的更新升级,之前的左对齐的布局方式已被淘汰,bootsrap4之后的布局方式也改为了弹性盒子布局。通过以下方式可快速的布局想要的效果###步骤添加弹性合作,可按快捷键g垂直布局,按快捷v水平布局方式可按p+数字,如p 水平居中,p+2右端对齐,p + 3均匀分布,p +4均匀分布两端紧贴。如下图垂直布局方式可按a+数字,如a 垂直居中对齐,a+1 顶...原创 2020-03-26 17:01:25 · 267 阅读 · 0 评论 -
推荐大家一块开发神器guiplan,自动写代码,一键保存
推荐大家一块开发神器guiplan,网站前端后端数据库等等 再也无需手敲代码。一键生成,一键保存效率是传统手写代码8倍以上,开发成本最少能降低5倍以上,产出速度能加快四倍以上,是程序员的春天,也是外包核心竞争黑科技,你还在等什么呢?赶快下载使用吧http://www.zhoushuigui.top/#/http://www.guiplan.top/#/...原创 2018-09-18 13:02:52 · 3430 阅读 · 0 评论