guiplan低代码开发工具

guiplan是一款可视化低代码开发工具，支持自适应定制,支持传统主流框架如bootstrap,uniapp,element-ui,uView

qq学习群：

搜索微信号guiplan添加好友，即可拉入学习群哟

{"total":2,"list":[{"_id":"XE5CVnjVI","userId":"V0wZDCcBC","createTime":"2022-11-16T02:30:16.385Z","updateTime":"2022-11-16T03:06:58.974Z","updateBy":"","title":"vue中v-show指令与v-if指令到底有那些区别？又如何使用？","orderIndex":0,"content":"<figure><figure></figure> <img src=\"https://www.guiplan.com/upload/website/article/ctTX2nqRcwvd9jjDiwaFih2lcfHm8LxU.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/>v-show指令与v-if指令到底有那些区别？最主要的区别其实在于渲染，用v-show无论绑定的值为true或者false都会渲染dom。如下图在guiplan开发工具中将副标题的显示条件（v-show指令)设置为false,副标题虽然被隐藏了，但dom元素依然存在。只是强制给副标题添加了一个display:none样式进行了一个隐藏操作。 <figure><img src=\"https://www.guiplan.com/upload/website/article/ea51NPuVp5ICvRoBWLqfTrHTBRuzLtWi.png\" style=\"max-width:100%;\" contenteditable=\"false\"/> </figure>而我们继续用v-if指令，可以看出整个的副标题h3直接去掉了，也就是根本就不会给你进行渲染。 <figure><img src=\"https://www.guiplan.com/upload/website/article/P7JGnj4WV3GxvvUQc3vNIKTgNAnv2wlB.png\" style=\"max-width:100%;\" contenteditable=\"false\"/></figure>什么时候用v-show，什么时候用v-if呢？了解到了他们的区别之后，我们才能更好的去理解，去使用。首先v-show指令会提前渲染dom,所以做显示与隐藏切换时缓存的dom开箱即用并不会加大性能的损耗，而v-if指令如果频繁的切换，会不断的销毁dom与重新创建dom会造成一定的性能损耗，特别是要渲染的场景过于复杂时。所以v-show指令适合频繁的切换。比如tab切换，下拉框显示等。以下是记单词一个项目截图，当点击tab切换时所有的图片与字母都进行了隐藏，点击查看单词按钮即可显示完整的图片与单词。这里就比较适合v-show指令做频繁的切换。 <figure><img src=\"https://www.guiplan.com/upload/website/article/nm6WKvvXovRU1is2B29vxkoC2webUA9k.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/></figure><figure><img src=\"https://www.guiplan.com/upload/website/article/mHQvRbiNhHCvK2QZgqmdvhu81z9efT8j.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/></figure>这么看来好像用v-show指令就够了？事实并非如此，但什么时候用v-if指令呢？其实有很多场景不需要频繁切换的，我们都可以用v-if指令。并且v-if还支持多条件判断。我们来看如下场景，在记单词游戏中可以看到里面有图片，中文，英文单词三种显示模式，而这三种模式我们只需显示一种即可，并且并不需要频繁切换，这样我们就可以使用v-if指令。如果类型为图片类型则显示图片，中文类型则显示中文，英文类型则显示英文。如果含有更多的类型，则可以接续用else if指令，实现多条件判断。并且显示一种之后其他不满足条件的都不会被渲染，这样极大降低了不必要的渲染过程，提高性能。 <figure><img src=\"https://www.guiplan.com/upload/website/article/VVPoHNnBvFrzoiRxnB6UTIM8ddxoETpH.png\" style=\"max-width:100%;\" contenteditable=\"false\"/></figure></figure>","img":"https://www.guiplan.com/upload/website/article/BR9M9VjNVMnLV4PbKFAcMMVlalnjdz3T.jpg","imgList":[],"typeId":"-5tVjUb6z","repertoryNum":0,"liks":0,"hits":1239,"intro":"","isTop":false,"auth":"","isAdvantage":false,"typeIds":["LCshWORHR"],"__v":0},{"_id":"O0Yn-hHxj","userId":"V0wZDCcBC","createTime":"2022-11-15T00:39:36.057Z","updateTime":"2022-11-15T00:39:36.057Z","updateBy":"","title":"node后端（koa）如何打包加密，以及node_modules如何优化？","orderIndex":0,"content":"<h1>用node开发后端会存在那些问题呢？</h1>       在我们用node做后端开发遇到的三个问题。一安全问题，代码并没有编译就直接传递了，只要进去服务器代码可以看得一清二楚。二是文件体积问题，随便一个项目node_modules件包就是一百兆左右。第三个是部署问题，每次部署新项目都要下载安装插件导致部署非常缓慢。<img alt=\"\" src=\"file:///D:/WEMedia/SearchNetImg/b96446e5a1579f698c2982198372603e.png\"/><img alt=\"\" src=\"file:///D:/WEMedia/SearchNetImg/b96446e5a1579f698c2982198372603e.png\" style=\"font-size: var(--font-size); color: var(--el-text-color-regular);\"/><img src=\"https://www.guiplan.com/upload/website/article/ZdsqUfRfvQnL6vuDXqFUuahW68pjSftC.png\" contenteditable=\"false\" style=\"font-size: var(--font-size); color: var(--el-text-color-regular); max-width: 100%;\" width=\"100%\"/> <h1>我们又有哪些解决方案呢？</h1>       首先我们来看一下最重要的安全问题，node没有像java做好之后可以打包编译为一个很小的jar包。但前端我们也有了编译混淆工具，如webpack或vite等。做个vue、angular、react项目的同学，我想应该对这个工具不陌生吧！webpack在前端领域用的确实比较多，特别是之前的vue2项目。其实它还可以用于node环境下的后端项目，比如express框架，koa框架等。只是配置信息需要研究。我本着将所有代码(包含node_modules)全部打包为一个文件。结果启动时发现存在不少问题。这时我换了另一套方案，只打包自己写的代码。而node_modules插件包里的代码不再进行打包。结果也确实很满意，我们可以看到整个文件大小不到两百kb。<img alt=\"\" src=\"file:///D:/WEMedia/LocalImg/%7B2E49D767-B738-4741-97BF-16058CE264A6%7D.png\"/><img alt=\"\" src=\"file:///D:/WEMedia/LocalImg/%7B2E49D767-B738-4741-97BF-16058CE264A6%7D.png\" style=\"font-size: var(--font-size); color: var(--el-text-color-regular);\"/><img src=\"https://www.guiplan.com/upload/website/article/rVWZ1mNaMV3NFvjDKLHRSkuH1tstIzHj.png\" contenteditable=\"false\" style=\"font-size: var(--font-size); color: var(--el-text-color-regular); max-width: 100%;\" width=\"100%\"/>        而混淆之后的代码虽然能看到源码，但就算破解了，也得自己手写一遍才能还原。因为里面的变量命名都变为了abcd，代码阅读难度极大。也不可能会百分百还原源代码。 <img alt=\"\" src=\"file:///D:/WEMedia/LocalImg/%7BA8E7AAEB-527E-4599-A233-3091C234312C%7D.png\"/><img src=\"https://www.guiplan.com/upload/website/article/IhtrVV8g8eP6MPFlQZ6SRMmf6wkhDuCR.png\" contenteditable=\"false\" style=\"font-size: var(--font-size); color: var(--el-text-color-regular); max-width: 100%;\"/>        附上webpack的配置代码如下  <pre><code class=\"Bash\"><xmp>\nconst path = require('path');\n\nconst nodeExternals = require('webpack-node-externals');\n\nconsole.log(path.resolve(__dirname, \"dist\"))\n\nmodule.exports = {\n\n entry:'./index.js',\n\n mode: 'production',\n\n target:\"node\",\n\n output:{\n\n path: path.resolve(__dirname, \"dist_server\"),\n\n filename:'index.js',\n\n publicPath: path.resolve(__dirname, \"statics\")\n\n },\n\n node: {\n\n \n\n },\n\n externals: [\n\n nodeExternals()\n\n ],\n\n module: {\n\n },\n\n plugins:[\n\n \n\n ],\n\n resolve:{\n\n \n\n }\n\n}\n\n</xmp></code></pre>      虽然我们解决了安全问题，但node_modules这个插件包体积实在太大。同样给我们的服务器资源照成了不必要的浪费。而且安装起来也很慢。我们之前的第一个方案是提取node_modules用到的核心文件然后打包到一个文件里，这显然是不行，问题也特别多。我们的项目用到的框架一样，技术一样，为什么不能多个项目用同一个插件包呢？于是经过反复尝试，发现当前项目package.json如果不存在，它们不断的去往上级文件夹找。也就是你只需要把多个项目放到一个文件夹里，然后再添加package.json 然后安装一下。所有的子文件夹里的项目都能使用这个公共的插件包了。这样我们就很完美的解决了以上几个问题。 <img alt=\"\" src=\"file:///D:/WEMedia/LocalImg/%7B8C6C10D1-BBF5-44E9-B892-63DE42A05464%7D.png\"/><img src=\"https://www.guiplan.com/upload/website/article/vWp1VnLorqoaAJn328eZUh8DmoLEIZhj.png\" contenteditable=\"false\" style=\"font-size: var(--font-size); color: var(--el-text-color-regular); max-width: 100%;\" width=\"100%\"/>        最后打包的速度也提升了不少，两秒左右就打包好了，服务器的部署也简单很多，只需上传200kb左右的打包文件然后启动文件即可。（安装都省去了） <img src=\"https://www.guiplan.com/upload/website/article/ur6IvHKfoBr9vJztIeQFNKQqH3eIfgSL.png\" style=\"max-width:100%;\" contenteditable=\"false\" width=\"100%\"/><img alt=\"\" src=\"file:///D:/WEMedia/LocalImg/%7BF2966444-E098-4546-8793-D924BD7397C2%7D.png\"/><h1>node服务端打包编译之后又会出现那些新的问题？</h1>        当然这还远远没有结束，因为我们发现打包之后静态文件无法访问，移动文件夹位置之后反复测试，结果发现数据库备份的位置也有所偏差。总之对文件的读写这块存在诸多问题。反复阅读代码发现我们在开发过程中用到了一个__dirname这么一个变量，而这个变量就是根据当前的文件来获取绝对位置。比如文章控制器这块用到了这个变量，则它的绝对路径为D:\\gitwork\\guiplan-study-game-admin\\servers\\app\\controller\\articleController.js<img alt=\"\" src=\"file:///D:/WEMedia/LocalImg/%7B03E295EC-9BDB-4B08-AABE-6E05CFD08D65%7D.png\"/><img src=\"https://www.guiplan.com/upload/website/article/UmKvSzjItRNR9NCxtVZnDf8IxM7I9K6v.png\" style=\"max-width:100%;\" contenteditable=\"false\" width=\"100%\"/>         如果不是在控制器里用这个变量，而是更目录如app.js,这时的绝对路径则为D:\\gitwork\\guiplan-study-game-admin\\servers\\app\\app.js。所以这个变量的值它是变化的。<img alt=\"\" src=\"file:///D:/WEMedia/LocalImg/%7B14243172-F64C-4DA0-8B41-3DEE28233F84%7D.png\"/><img src=\"https://www.guiplan.com/upload/website/article/PRWxDoxXzAtTzEawpBcMc75BvMg7vtA9.png\" contenteditable=\"false\" style=\"font-size: var(--font-size); color: var(--el-text-color-regular); max-width: 100%;\" width=\"100%\"/>        而我们打包之后的文件只有一个index.js文件，所有的文件都打包成了一个文件，所以这个时候你再去用__dirname这个变量，它所指的位置则是根目录。并且不会改变。所以就导致静态目录存储的位置与数据库存储的位置都不同的原因。        好！我们找到的问题的原因，那我们如何去解决这个问题呢？其实用过webpack的同学应该对环境判断不陌生吧？是的，同样的后端打包编译我们一样的可以添加一个环境判断。我们只需将所有用到__dirname这个变量的地方都添加一个判断，然后重新拼接一个绝对路径。比如app.js里的渲染器代码<pre><code class=\"Bash\"><xmp>render(app, {\n\n root: path.join(__dirname,'../', config.static.path,'view'),\n\n extname: '.html',\n\n debug: process.env.NODE_ENV !== 'production',\n\n dateFormat:dateFormat=(value)=>{\n\n return moment(value).format('YYYY-MM-DD HH:mm');\n\n }\n\n});\n\n可以修改为\n\n let rootPaht = ''\n\n if(process.env.NODE_ENV == 'production'){\n\n rootPaht = path.join(__dirname,'/', config.static.path,'view')\n\n }else{\n\n rootPaht = path.join(__dirname,'../', config.static.path,'view')\n\n }\n\nrender(app, {\n\n root: rootPaht,\n\n extname: '.html',\n\n debug: process.env.NODE_ENV !== 'production',\n\n dateFormat:dateFormat=(value)=>{\n\n return moment(value).format('YYYY-MM-DD HH:mm');\n\n }\n\n});</xmp></code></pre>        这样哪怕编译打包之后也不会再存在静态文件目录不正确的问题了 <h1>全名记单词游戏案例展示。</h1>      最后我们来看看我这边用guiplan低代码开发工具做好的全名记单词游戏项目。小程序端与后台以及后端接口配置都是可视化开发。<img alt=\"\" src=\"file:///D:/WEMedia/LocalImg/%7B48364BEC-6349-4362-8102-CC7451668E36%7D.png\"/><img src=\"https://www.guiplan.com/upload/website/article/jbxA1MwbUFxlPK1xbavPwBxVTVBSJ5jt.png\" contenteditable=\"false\" style=\"font-size: var(--font-size); color: var(--el-text-color-regular); max-width: 100%;\"/>（uniapp小程序） <img alt=\"\" src=\"file:///D:/WEMedia/LocalImg/%7B26544BF1-6E20-489E-AC09-D88BBC9AA8D7%7D.png\"/><img src=\"https://www.guiplan.com/upload/website/article/1nurVDrCAWPgJQZCFc7183UlXWs3JOjf.png\" contenteditable=\"false\" style=\"font-size: var(--font-size); color: var(--el-text-color-regular); max-width: 100%;\"/>（游戏后台管理）         最后数据库进行备份，静态文件备份。静态文件包括这些单词的图片，音频以及后台管理系统源代码，后端的源代码以及前台页面等。所有的文件加起来也就12兆。后续静态文件放其他流媒体服务器，数据库备份文件不算的话。一个前后端项目总大小约6兆左右。原本一个项目需要一百多兆，优化完之后只需6兆左右。空间节省20倍左右。<img alt=\"\" src=\"file:///D:/WEMedia/LocalImg/%7B84B0A6E8-7DC5-4B2C-9AD0-B30CDBDD56A4%7D.png\"/><img src=\"https://www.guiplan.com/upload/website/article/lR6o97Acgvaav4ZCgZKDIkZAAnRhOak5.png\" contenteditable=\"false\" style=\"font-size: var(--font-size); color: var(--el-text-color-regular); max-width: 100%;\" width=\"100%\"/>","img":"https://www.guiplan.com/upload/website/article/qxSs6vrVOSkHwlkAh6VMrHAPhMu13gJU.jpg","imgList":[],"typeId":"-5tVjUb6z","repertoryNum":0,"liks":0,"hits":1827,"intro":"","isTop":false,"auth":"","isAdvantage":false,"typeIds":["LCshWORHR"],"__v":0}]}0000000000LCshWORHR