guiplan
文章平均质量分 78
web前端神器
这个作者很懒,什么都没留下…
展开
-
从零搭建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 · 689 阅读 · 0 评论 -
随便找个后台管理系统(若依)转可视化二次开发,不用写一个布局代码,到底有多爽
这里以若依后台管理系统为例,本节课内容有:1.下载并安装若依后台管理系统2.将登录页面转可视化3.不写一个代码的情况下修改标题与背景以及布局4.将首页转可视化,删除多余的内容并插入echart图表插件进行统计5.将用户管理界面转可视化并且直观的可视化查看vue变量,函数,element组件属性,样式,dom结构6.模拟登录接口对接自己的接口7.模拟用户信息接口,验证码接口,动态路由接口并完成后台登录随便找个后台管理系统(若依)转可视化二次开发,不用写一个布局代码,到底有多爽...原创 2022-05-07 09:51:04 · 2446 阅读 · 2 评论 -
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 · 10073 阅读 · 0 评论 -
web前端代码还需要手写吗?
前端html标签还需要手写吗?说两句与时俱进,不断更新,不断学习自动化省去的代码量学习教程课程说两句随着社会的发展新技术层出不穷,从最原生的js,html,css到后续的框架jquery,bootsrap。再到后来的vue,angular,react.。前端的学习成本也越来越高,基于这些新技术又得学习node,webpack。深感前端真的是学不动了。我记得我在很早之前用appcan做app的时候,才没几年时间就被uniapp直接碾压。都是跨终端,却有人比你做的更好。所以我也不敢保证未来guiplan是否原创 2021-07-14 16:39:48 · 2014 阅读 · 0 评论 -
如何不用ps来吸取颜色并将颜色一键插入到网页,自动生成代码?
文章目录前言一、使用步骤1.打开guiplan软件2.点击吸色器三、再点击“开启吸色器”按钮四、选择效果图五、点击“开始吸色”六、一键插入颜色前言我们在制作网页的过程当中,设计师给的效果图如果没有显示颜色值的情况下,我们要获取效果图的颜色那就必须得用到吸色器,会ps的朋友会打开ps导入效果图来吸取颜色,然后再将颜色复制过来,粘贴到自己的代码中。这样的操作非常繁琐,首先ps软件本身就很占用内存,再加上导入图片,吸取颜色,复制颜色值,使用过程中再去写代码,如字体颜色color:#ccc,背景颜色bac原创 2021-04-17 11:36:46 · 2752 阅读 · 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 · 1051 阅读 · 0 评论 -
guiplan0.2.0全新改版
guiplan0.2.0全新改版界面风格改版交互视图做了改版改变界面界面风格改版根据广大用户的反馈,guiplan操作要记快捷键,对小白以及新手前端都不友好,本次做全新的改版与升级,不仅优化了界面风格,更是添加了强大的功能按键,用户无需一个个去快捷键里查找功能在哪,每个功能按键都有显示快捷符,可用快捷操作也可手动点击操作。还有强大的预览窗口,可左右对照编辑效果与真实效果,大大提高开发效率。增加了丰富的功能按键,排版风格统一化,让视觉效果达到更好的体验。更有多样化的视图切换,使体验更加方便快捷。增加原创 2020-07-06 16:58:28 · 465 阅读 · 0 评论 -
盒模型布局
###简介由于技术的更新升级,之前的左对齐的布局方式已被淘汰,bootsrap4之后的布局方式也改为了弹性盒子布局。通过以下方式可快速的布局想要的效果###步骤添加弹性合作,可按快捷键g垂直布局,按快捷v水平布局方式可按p+数字,如p 水平居中,p+2右端对齐,p + 3均匀分布,p +4均匀分布两端紧贴。如下图垂直布局方式可按a+数字,如a 垂直居中对齐,a+1 顶...原创 2020-03-26 17:01:25 · 268 阅读 · 0 评论 -
guiplan通过iview框架动态交互3-增删该查模板引用与内容一键替换
添加组件并修改组件属性配置好数据库与接口之后点击"模板"按钮点击"增删改查"按钮 自动插入模板到页面,该模板自带增删改成以及分页功能点击"更多属性"选择数据库点击"替换模板数据",即可自动生成增删改查的所有功能。如下图更多详情见视频...原创 2020-03-23 11:13:12 · 177 阅读 · 0 评论 -
guiplan-数据库与接口的配置
下载地址 http://www.guiplan.com数据库配置输入表名称输入备注信息输入字段修改字段属性新增表生成代码并插入到配置文件 如下图:接口配置一键配置一键配置可生成常用的增删改查与分页接口选择数据表选择接口类型 增删改查或分页生成代码插入到接口文件插入到前端api 如下图手动配置手动配置 可根据项目需求的特殊性来手动配置接口,如关联表之间...原创 2019-08-29 14:56:33 · 433 阅读 · 0 评论 -
iview-admin目录结构
目录结构|-- |-- .babelrc |-- .editorconfig |-- .eslintignore |-- .eslintrc.js |-- .gitignore |-- .postcssrc.js |-- .travis.yml |-- cypress.json |-- LICENSE |-- pa...原创 2019-08-28 16:30:40 · 1393 阅读 · 0 评论 -
guiplan通过iview框架动态交互2-事件与数据绑定
点击事件绑定事件创建方法保存 如下图双向绑定创建数据绑定数据保存 如下图循环创建数组绑定数组保存 如下图:显示与隐藏相当于v-if属性 ,点击进行切换显示与隐藏如下图元素属性在当前元素属性右边点击"编辑"点击"手动插入"属性 即可插入或修改属性点击"删除"即可 删除相关属性 如下图...原创 2019-08-28 16:27:51 · 253 阅读 · 0 评论 -
guiplan通过iview框架动态交互
下载安装与启动下载 iview-admin进入目录:cd iview-admin2.0.0安装: npm install启动前端页面:npm run dev启动后端接口:node server.js local 或nodemon server.js local (注意:nodemon 要全局安装一下 npm install nodemon -g),用nodemon 启动每次修改接口会自...原创 2019-08-28 14:40:31 · 354 阅读 · 0 评论 -
guiplan安装与使用
安装与使用下载安装打开官网http://www.zhoushuigui.top/或直接点击下载下载完之后双击即可运行软件注册登录与项目创建注册输入手机号与验证码即可直接注册与登录创建项目与页面点击新建项目点击查看页面出现弹框弹框里面最下方文本框里输入页面名称点击创建即可出现页面列表点击页面名称即可进入页面可视化编辑如下图0.0.1...原创 2019-08-21 13:19:52 · 4226 阅读 · 0 评论 -
guiplan基本操作
基本操作div操作添加div:按快捷键d添加选中div的子级。alt+d添加div到选中div的下一个位置。shif+d添加到选中div的上一个位置删除div:按快捷键delete可删除div选中div:可点击页面中任何一处来选择div,也可使用快捷键上下左右来选择。上:选中父级div。 下:选中子级div。 左:选中统计左边div。 右:选择同级右边的div。按w开启与关闭 拖拽排序...原创 2019-08-22 15:48:23 · 1507 阅读 · 0 评论 -
guiplan介绍
1.引言编写目的随着社会的发展,互联网与我们的生活密切相关,而用户在手机与电脑上使用最多的莫过于浏览网页、企业网站、后台管理等等。然而网站的制作成本极高,难度极大,对技术的要求苛刻。企业急需产出,投入大量的成本。程序员也在每日每夜的奋战中,熬夜加班。客户迟迟等待不见结果,很容易错过好的市场机会。为了更好的解决这些问题,guiPlan由此诞生。此软件旨在解决:1,企业产出效率问题。2,程序员日常...原创 2019-08-25 16:24:02 · 4565 阅读 · 0 评论