guiplan官网

页面结构


  1. 左菜单:最左边有切换模块有页面管理模块、组件标签模块、模版模块、数据库配置模块、接口配置模块
  2. 页面管理:左边页面管理可对页面进行创建以及增删该查,当模块进行切换时这边区域也会做对应的切换
  3. 大纲数:大纲数会显示当前所选页面的html结构,可以进行拖拽,调整元素位置,也可以进行删除元素。配合组件标签或快捷键可快速插入元素
  4. 预览区域:中间为预览区域将本地页面的预览地址输入进去既可预览,其实预览区域也相当于一个浏览器,最顶部的有个虫子一样的图标点击即可打开调试工具。然后与普通浏览器不同的是我们可以直接点击就能修改节点样式,vue交互以及代码。
  5. 右边模块:最右边分为三大模块分别是样式、交互、以及属性
    样式:可直接可视化调整css样式,通过拖拽,点击等方式即可自动完成布局
    交互:进行vue的一些指令或数据与方法等,我们可以直接可视化快速绑定指令,事件等。也可以快速创建变量与函数方法。
    属性:一些组件或标签元素的一些属性配置,如文本框标签input含有提示属性placehold,onchange监听变化属性、blur离焦属性等等。可快速添加、快速绑定、快速修改属性。特别是第三方框架如uniapp组件里的属性,我们不需要去查询文档就能快速找到属性并一键插入。
  6. 最顶部:结构有返回功能,页面保存配置、保存功能、打开调试工具、打开项目文件夹、打开当前文件源代码、全屏模式、历史版本、快捷键大全、清空历史版本
    打开当前文件:打开当前文件则是guiplan会直接打开文件源代码,我们在系统注释以外的区域还可以编写自己的代码,达到混合开发的目的。如我们需要写过滤器filter,监听器watch,计算属性computed、或者引用其他组件与插件import都可以进行手写代码开发。后续我们也会将这些功能慢慢开放出来。注意:项目路径中不能含有中文否则无法打开文件夹

注册与登录


guiplan下载软件

然后扫码二维码即可登录,首次登录需要输入电话号码进行绑定并自动注册

项目管理


项目列表

登录成功之后会显示当前所有项目列表

创建项目

  1. 点击上图新建项目按钮会弹出如下对话框
  2. 输入项目名称:可以用中文命名
  3. 选择项目框架,目前支持uni-app,element-ui框架,iview、bootstrap框架
  4. vue版本选择,如果选择vue3版本生成之后的代码自动是<script setup>结构,里面创建的变量会自动添加响应式如
    <template>
    </template>
    <script lang='ts' setup>
    import { reactive, toRefs, ref } from 'vue'
    // interfaceCode

    // insertData
    const str = ref('我是响应式变量')
    // insertMethod

    // defaultLoad


    </script>
    <style>

    </style>
  5. 选择本地电脑里的文件夹用于存储项目文件。注意 这里的项目文件夹为当前项目的根目录。
    如uni-app根目录:

    没有项目的可以先用hbuidx去创建项目,移动端安装部署请移步文档 uniapp安装与启动

  6. 如果没有项目也可以直接在软件中点击下载,自动下载我们配置好的项目如下图

    如果是uniapp项目,下载好之后请用hbuild进行启动,如果是element项目则直接点击启动图标即可。
    注意:我们的element后台管理系统是一个全栈框架,后端用的koa + mongodb所以需要安装后端相关插件,并启动后端服务。
    项目启动文档与框架如下https://gitee.com/zhoushuigui/koajs-admin
  7. 没有后台管理项目的可以去element-ui官网按教程去安装项目,或直接去guiplan官网下载我们的全栈开源框架。我们不强制限制用户必须使用我们的框架,因为每个项目每个人的写法与习惯都不同,我们只是辅助开发,可视化布局也完全可以按照自己的要求进行布局,vue交互绑定也可以按自己的要求去配置,生成之后的代码基本与手写无差异。
  8. 最后点击提交即可创建项目

修改项目

修改项目点击项目列表中的编辑图标即可弹出对话框进行修改项目。
当我们所选框架或存储路径不正确时可以直接通过修改项目来进行修改

vue版本、项目框架、项目名称都支持修改

删除项目

在项目列表中点击"删除"图标即可删除整个项目

注意:这里项目删除之后会删除里面创建好的所有页面,接口,数据库,缓存以及提交的各种图片等,删除之后不会恢复请谨慎操作。


下载项目

在项目列表中点击"下载"按钮,软件会自动压缩当前项目中的所有文件,包括生成好的html,css,图片,缓存等。
如果想本地运行二次开发,可直接用此方法下载整个项目。(目前暂未开放)

页面管理


查看页面列表

在项目列表中点击任意项目可进入到页面制作页,左边创建新页面按钮下方会显示当前项目下所有的页面

创建页面

  1. 点击创建新页面会弹出如下弹框
  2. 页面名称:可以输入页面名称,这里支持中文。且会自动生成页面id,
  3. 页面id:其实也就是页面name值,自动创建路由的时候此id则为对应的name值
  4. 页面类型:页面类型分为页面与组件,不同的是文件的存储位置会不同,如uniapp框架当页面类型为页面,则vue文件会存储到pages文件夹中,而页面类型为组件会存储到component文件夹中。
  5. 文件夹名称:一般用于文件的分类,如登录页面可以将页面存入到user文件夹中,首页可以存储到home文件夹中。支持多层嵌套如home\head
  6. 文件名称:文件名称则为vue文件的名称。与文件夹名称组合会生成完整的文件存储路径。比如文件夹名称为test,文件名称为index,uniapp框架项目则完整路径为/pages/test/index.vue。如果是element项目则完整路径为/src/views/test/index.vue
  7. 自动注册页面:默认是选中状态,也就是创建页面之后会自动去注册页面,element与iview框架则对应的是router路由的自动配置,而uniapp则对应的是pages.json的自动配置。如果没有勾选则需要手动去配置路由或pages.json。
  8. 打开本地html文件:如果选的是无框架或bootstrap框架,上图的打开本地vue文件则会被替换为打开本地html文件。此功能会将手写代码转换可视化大纲树结构。选择本地文件注意最好打开当前项目下的静态html文件。如果是其他目录自动生成的js与css可能位置不对。
    步骤如下:
    1.首先备份一下要转可视化的文件,因为转可视化不一定能够成功
    2.转可视化之前处理好文件内容。找到body里的结构,将里面所有的script脚本移动到body外面去
    3.最后再选择要转换的文件,点击创建即可自动将网页源代码转可视化。




  9. 打开本地vue文件:打开本地vue也是将本地vue文件转可视化,注意选择文件目录也是在当前项目的根目录下找vue文件,操作步骤与上面一样。
    1.备份要转换的vue文件,由于代码编写的不一样,复杂程度也不一样,所以不一定能转换成功
    2.打开vue文件,vue2文件则处理一下格式,data与method里的内容可以正常转json,不能含有外部的变量。比如如下图getToken是一个外部创建的一个函数,这种结构就无法将data变量转可视化。

    我们可以把这个无法转换的代码片段先删除掉,然后等转换为可视化成功之后再添加上去。

    3.(2.10.5版之后)vue3文件也可转可视化,支持部分格式转可视化。
    变量支持ref与reactive响应变量转可视化格式如下:
    const str = ref('我是变量')
    const str = reactive({name:'名称'})
    函数支持异步函数与同步函数转可视化格式如下:
    async function getData(params){}
    function getList(id){}
    目前暂时只支持以上格式,如果是其他格式请自行处理,后续也会开放更多格式,比如以下格式都不支持转可视化
    const getData = (params)=>{}
    var a = '字符串'
    4.最后选择处理好的vue文件点击创建即可自动将vue转可视化。

    注意:手写代码转可视化,如果是纯文字内容,则转换为大纲树节点之后会有guiplanspan标签进行标记,
    而生成之后的代码会自动去掉这个标记,所以guiplanspan元素上不要配置样式,因为生成的代码标签被删除配置的样式也就不会起效。
    如下图guiplanspan标签就不需要配置样式了。但里面可以放嵌入脚本比如<?php  echo 'myphp'></php>



  10. 再到最底部点击“创建”按钮即可创建页面,这里会根据页面类型、文件夹名称、页面名称来拼接一个vue的绝对路径用于存储vue文件。
    比如所选类型为页面,文件夹为user,文件名称为register。最后拼接的绝对路径为
    F:\gitWork\uniapp\uniapptest\uniapptest\pages\user\register.vue
    同时也会自动生成预览地址默认端口为8080如下:
    http://localhost:8081/#/pages/user/register

注意 系统生成的默认地址不一定是当前项目运行之后的实际地址,需要根据实际情况去修改地址。其次预览页面如果刷新没有显示需要自行检测地址是否正确,项目是否启动。(温馨提示:预览地址就是浏览器能正常打开的实际运行地址。)

修改页面

如果需要修改页面信息,可将光标停靠在省略号中会自动出现下拉框如下图

点击之后同样会弹出类似创建页面的弹框,但要注意的是这里不会再重新注册页面,也不会自动生成预览地址。 如果修改了页面存储位置,需要用户手动去修改预览地址以及路由或pages.json的配置。

删除页面

在上图中点击删除页面即可删除当前页面,也就是页面列表中不会再有这个页面,但为了代码的安全性,这里也要注意删除页面的同时我们并不会删除vue文件与路由信息。用户如想要删除干净需要手动删除对应的文件与路由信息。后续会添加一个对话框提示是否需要删除文件,让用户选择是否真删除

大纲树



大纲树介绍

元素结构


(图1)
如上图所示大纲树其实也就是html结构,可以很清楚的看到内部的元素标签。包括注释代码也能自动生成。
点击查看自动生成的源代码如下:

元素属性


(图2)
在最右边样式编辑里可以很清楚的看到大纲树当前所选元素的所有样式,比如上图弹性布局垂直居中。


其次还可以在交互编辑中可以很清楚的看到该元素绑定了那些事件,创建了那些方法与变量等,如上图3



最后在属性面板中可以看到所选元素的属性,比如上图4选中的轮播图可以很清楚的看到有哪些属性,比如自动切换,默认选中第二张轮播图等

大纲树操作


移动元素

大纲树里的元素都是可以自由移动的,拖拽元素即可移动,可任意移动任意嵌套


选中元素

选中元素有三种方式:

  1. 点击大纲树里的元素节点即可选中。
  2. 预览页面直接去点击元素也可以选中元素
  3. 通过快捷键上下左右可以分别选中元素的父元素,子元素,前一个元素,后一个元素

删除元素

  1. 删除元素 按快捷键delete可删除所选元素
  2. 也可以右击节点点击删除

搜索节点

可以通过关键字搜索id、样式名称、变量、函数。

变量与函数除了支持搜索名称以外,还可以通过自己写的注释进行搜索。比如搜索“提交”两个字即可找到提交表单的函数。


插入代码

右击大纲树出现右击菜单如下:



插入html代码:可以直接将html代码转可视化并插入到所选的元素里。

插入css样式代码:可以手动输入或复制其他样式插入到当前所选原理

插入data数据代码:也就是插入vue文件中的data里的变量

插入method函数代码:也就是插入vue文件中method里的函数

插入vue代码:则是可以直接将vue代码转可视化并插入到所选元素中

插入vue文件:则是可以选择本地的vue文件进行转换为可视化之后插入所选元素中。

注意:vue代码转可视化也是需要提前处理好格式,详情可看上面的页面创建中打开本地vue文件这一章节

注意:这里的data、method、vue都只支持vue2原有的结构,不支持vue3中的<script setup>里的代码转可视化


只复制元素

只复制元素与复制元素功能差不多,但只复制元素则不会复制元素中所带的变量与函数,以及样式。

会自动将配置好的样式名称设置为公共样式类名来使用,也就是被复制的元素可以充当公共样式。



分离源码

如果当前自己的页面过于复杂不太好转可视化,但需要添加一些组件或者一些复杂的效果,可右击选择"分离源码",即可将所选的元素所有的代码分离出来,后续复制粘贴到自己的页面中即可。



复制json

做好的效果如果想后续反复复用,达到一键插入的效果。可去自定义组件库里配置自己的组件,复制json然后粘贴进去即可。

点击"自定义组件" -> 点击"编辑" -> "粘贴json代码" 如下图


这样我们即可在自定义组件库里一键插入自己配置好的组件了。





手写代码转可视化


        有很多用户在使用的时候还是不知道如何将自己的项目通过guiplan转可视化,我们单独将此模块提取出来写一篇文档。根据项目的不同,一共分为三种情况。第一种是静态页面,第二种是uniapp小程序页面,第三种是vue后台管理页面或者其他vue项目。前面的项目创建步骤都是一样的,也是特别要注意的,很多小伙伴第一步就搞错了导致后面流程无法进行。

步骤如下

  1. 寻找项目的根目录。
    静态页面的根目录则html页面所在的目录则为根目录如下图,根目录为:D:\gitwork\big-data-view\web\001 服务大数据可视化监管平台

    uniapp根目录 则只需找到pages.json文件所在的目录即可如下图根目录为D:\hbuilderwork\test2

    其他vue项目的根目录则为package.json所在的目录如下图根目录为D:\gitwork\public-element-admin。无论你当前的vue项目用的什么框架,ant,iview,element等等都可通过此方法找到根目录。
  2. 选择框架创建项目
    静态页面创建项目可以选择无框架或者bootstrap框架,根据你自己的网页所用到的框架而定。如果你的静态页面用的其他框架则用选无框架即可。
    名称可以随便填写。
    本地存储路径则选择我们找到的项目根目录即可。

    uniapp项目与上面的”静态页面“操作一样,这里选择uniapp框架或者uView框架。注意:如果你的项目没有安装uView框架,需要自己手动安装好uView框架才能使用其中的组件。
    其他vue项目与上面”静态页面“操作一样,这里选择element框架。当然如果你的vue项目用的其他框架也没关系,先选element框架进入到页面中,然后再自己手动录入框架数据即可。vue版本的选择根据自己的项目而定。如果不知道自己的项目vue那个版本可以查看package.json文件,寻找vue的版本号即可。3.×.× 则表示vue3版本。
  3. 启动项目
    点击项目即可进入到页面制作中,很多小伙伴看不到效果,不知道是什么原因。这里有一个很重要的步骤,就是项目必须得启动起来。只有启动了服务才能有预览地址,才能看到预览效果。
    静态页面则不需要启动任何服务,直接就可以使用。
    uniapp项目需要通过hbuilderx来启动服务,hbuilderx导入根目录,然后选择内置浏览器来启动项目。具体可参考文档https://hx.dcloud.net.cn/Tutorial/project?id=import

    vue项目根据自己的项目启动服务,一般的启动命令为npm run dev。具体可去package.json文件查找自己项目的启动命令即可。注意:这些含有package.json的项目都是需要打包编译才能运行,所以大家需要提前安装好node环境,如果用我们自带后台含有后端模块的还需要安装mongodb数据库。详情请移步文档  环境部署
  4. 创建页面
    这里创建页面的过程就是手写代码转可视化的过程。创建页面之前我们要先备份一下,可以长按文件进行拖拽复制一份。需要转换那个文件就复制一份备份一下,因为手写转可视化是操作你的源文件,如果转换不成功很可能会让源文件变的混乱无法恢复。
    静态页面创建页面之前,需要将html页面里body结构里的script脚本都移动到body外面。如下图将方框里的script脚本移动到body外面。

    点击创建页面,选择”打开html文件“,再点击”选择文件“,选择要转换的html文件即可。

    最后点击”创建“即可将手写代码转可视化了。静态页面会自动生成预览地址。
    uniapp项目也有一定的格式要求,vue2页面中vue页面中必须含有data与method。没有的话需手动加上。如下图

    vue3代码中<script setup结构对变量与函数有以下几个要求

    与静态页面操作一样,只需选中vue文件点击创建即可。

    自动注册页面一般不用勾选,因为你本地做好的项目预览地址应该是自动注册好了的,无需重复再注册一个,如果勾选了很可能pages.json里会再注册一个新的预览地址。
    其他vue项目的操作与uniapp一样,也是对vue有一定格式要求。不同的是这里的”自动注册页面“只针对软件自带的element项目有效,其他的项目需要手动配置自己页面的预览地址。当然已经有了预览地址则无需再勾选。
  5. 添加预览地址
    完成了以上步骤,如果大纲树能看到网页结构,则说明转换成功了,但是看不到效果,这里我们则需要添加预览地址来进行查看效果。guiplan内置的预览器其实就是一个浏览器,所以预览地址则就是用浏览器能正常访问的地址即可。但guiplan内置的浏览器是可以进行直接操作的,哪怕你的网页被编译过,我们的预览器不是模拟的网页结构,所以没有那么多限制。所见即所得。
    静态页面会自动生成预览地址,如果不小心删掉了,你只需将html页面直接往浏览器里拖进去即可。

    然后将地址复制到guiplan预览器中,最后点击”刷新“即可看到实际效果。

    uniapp项目需要hbuilderx里启动服务,然后找到该页面的预览地址,比如你转换的是购物车页面则点击跳转到购物车之后即可看到购物车的预览地址。然后将预览地址复制到guiplan预览器中即可。这里一定要注意hbuilderx启动了多个项目之后端口会自动加1,比如项目A端口为8080,项目B端口则为8081,所以大家需要根据实际情况来更换自己的预览地址。

    其他vue项目则用浏览器打开你的项目即可,找到你转换的vue页面的预览地址,然后复制到guiplan预览器中。这里要注意:有的页面是需要登录才能进去了,直接输入账号密码登录进去即可。guiplan预览器就看作一个全能浏览器即可。浏览器该怎么操作预览器就怎么操作即可。不影响开发与测试。

转换之后的问题

由于代码千变万化,所以难免转换之后会出现各种各样的问题,需要大家自己排查一下。比如少了某些样式,少了变量,某些内容转换错误需修复一下等。修改错误之前我们必须要明白生成代码的原理,否则你改了代码也没用。

生成的代码都有start与end注释标记如下图:

guiplan会根据这些标记将我们生成的代码放进对应的位置。

start则表示开始,end则表示结束。

所以start与end之间我们不能手写代码去修改它,否则再用guiplan时会被自动覆盖掉。也就是改了也没用。
但是我们可以在这个标记的外面手写自己的代码。比如下图手写代码添加一个变量。

这样转可视化时少变量即可手写添加进来。

包括样式也同样有start与end标记。

有时候我们会遇到这种情况,转可视化之后所有的标记都在最下面。

这种情况一般是vue格式没有按要求来,或者vue过于复杂无法识别等导致找不到代码要存放在哪里。

我们已经知道了代码生成都是通过这些标记来存放的,

那么我们只需要将这些标记移动到正确的位置不就可以了吗?

先了解一下注释的含义,如上图GouWuChe则表示这个页面是购物车页面,也就是页面id。而Data其实就表示vue里的data也就是变量,Method则表示vue里的method也就是函数。所以我们只需将这个注释分别移动到data与method里即可。

同理还有MountedStart以及importStart 只需移动mounted里或者onload里即可表示页面加载完要执行的操作。
而importStart 则是import aa from '**' 的一些引用操作,移动到脚本第一个位置即可。


进群学习:
请加微信号guiplan
文字