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><p><br/><img src=\"https://www.guiplan.com/upload/website/article/ctTX2nqRcwvd9jjDiwaFih2lcfHm8LxU.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/></p><p><strong>v-show指令与v-if指令到底有那些区别?</strong></p><p>最主要的区别其实在于渲染,用v-show无论绑定的值为true或者false都会渲染dom。如下图在guiplan开发工具中将副标题的显示条件(v-show指令)设置为false,副标题虽然被隐藏了,但dom元素依然存在。只是强制给副标题添加了一个display:none样式进行了一个隐藏操作。<br/></p><figure><p><img src=\"https://www.guiplan.com/upload/website/article/ea51NPuVp5ICvRoBWLqfTrHTBRuzLtWi.png\" style=\"max-width:100%;\" contenteditable=\"false\"/></p><p><br/></p></figure><p>而我们继续用v-if指令,可以看出整个的副标题h3直接去掉了,也就是根本就不会给你进行渲染。<br/></p><figure><p><img src=\"https://www.guiplan.com/upload/website/article/P7JGnj4WV3GxvvUQc3vNIKTgNAnv2wlB.png\" style=\"max-width:100%;\" contenteditable=\"false\"/></p></figure><p><strong>什么时候用v-show,什么时候用v-if呢?</strong></p><p>了解到了他们的区别之后,我们才能更好的去理解,去使用。首先v-show指令会提前渲染dom,所以做显示与隐藏切换时缓存的dom开箱即用并不会加大性能的损耗,而v-if指令如果频繁的切换,会不断的销毁dom与重新创建dom会造成一定的性能损耗,特别是要渲染的场景过于复杂时。所以v-show指令适合频繁的切换。比如tab切换,下拉框显示等。以下是记单词一个项目截图,当点击tab切换时所有的图片与字母都进行了隐藏,点击查看单词按钮即可显示完整的图片与单词。这里就比较适合v-show指令做频繁的切换。<br/></p><figure><p><img src=\"https://www.guiplan.com/upload/website/article/nm6WKvvXovRU1is2B29vxkoC2webUA9k.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/></p></figure><figure><p><img src=\"https://www.guiplan.com/upload/website/article/mHQvRbiNhHCvK2QZgqmdvhu81z9efT8j.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/></p></figure><p>这么看来好像用v-show指令就够了?事实并非如此,但什么时候用v-if指令呢?其实有很多场景不需要频繁切换的,我们都可以用v-if指令。并且v-if还支持多条件判断。我们来看如下场景,在记单词游戏中可以看到里面有图片,中文,英文单词 三种显示模式,而这三种模式我们只需显示一种即可,并且并不需要频繁切换,这样我们就可以使用v-if指令。如果类型为图片类型则显示图片,中文类型则显示中文,英文类型则显示英文。如果含有更多的类型,则可以接续用else if指令,实现多条件判断。并且显示一种之后其他不满足条件的都不会被渲染,这样极大降低了不必要的渲染过程,提高性能。<br/></p><figure><p><img src=\"https://www.guiplan.com/upload/website/article/VVPoHNnBvFrzoiRxnB6UTIM8ddxoETpH.png\" style=\"max-width:100%;\" contenteditable=\"false\"/></p></figure></figure>","img":"https://www.guiplan.com/upload/website/article/BR9M9VjNVMnLV4PbKFAcMMVlalnjdz3T.jpg","imgList":[],"typeId":"-5tVjUb6z","repertoryNum":0,"liks":0,"hits":732,"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><strong>用node开发后端会存在那些问题呢?</strong></h1><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在我们用node做后端开发遇到的三个问题。一安全问题,代码并没有编译就直接传递了,只要进去服务器代码可以看得一清二楚。二是文件体积问题,随便一个项目node_modules件包就是一百兆左右。第三个是部署问题,每次部署新项目都要下载安装插件导致部署非常缓慢。</p><p><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%\"/></p><p><br/></p><h1><strong>我们又有哪些解决方案呢?</strong></h1><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;首先我们来看一下最重要的安全问题,node没有像java做好之后可以打包编译为一个很小的jar包。但前端我们也有了编译混淆工具,如webpack或vite等。做个vue、angular、react项目的同学,我想应该对这个工具不陌生吧!webpack在前端领域用的确实比较多,特别是之前的vue2项目。其实它还可以用于node环境下的后端项目,比如express框架,koa框架等。只是配置信息需要研究。我本着将所有代码(包含node_modules)全部打包为一个文件。结果启动时发现存在不少问题。这时我换了另一套方案,只打包自己写的代码。而node_modules插件包里的代码不再进行打包。结果也确实很满意,我们可以看到整个文件大小不到两百kb。</p><p><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%\"/></p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;而混淆之后的代码虽然能看到源码,但就算破解了,也得自己手写一遍才能还原。因为里面的变量命名都变为了abcd,代码阅读难度极大。也不可能会百分百还原源代码。<br/></p><p><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%;\"/></p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;附上webpack的配置代码如下<br/>&nbsp;</p><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><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;虽然我们解决了安全问题,但node_modules这个插件包体积实在太大。同样给我们的服务器资源照成了不必要的浪费。而且安装起来也很慢。我们之前的第一个方案是提取node_modules用到的核心文件然后打包到一个文件里,这显然是不行,问题也特别多。我们的项目用到的框架一样,技术一样,为什么不能多个项目用同一个插件包呢?于是经过反复尝试,发现当前项目package.json如果不存在,它们不断的去往上级文件夹找。也就是你只需要把多个项目放到一个文件夹里,然后再添加package.json&nbsp;然后安装一下。所有的子文件夹里的项目都能使用这个公共的插件包了。这样我们就很完美的解决了以上几个问题。<br/></p><p><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%\"/></p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;最后打包的速度也提升了不少,两秒左右就打包好了,服务器的部署也简单很多,只需上传200kb左右的打包文件然后启动文件即可。(安装都省去了)<br/></p><p><img src=\"https://www.guiplan.com/upload/website/article/ur6IvHKfoBr9vJztIeQFNKQqH3eIfgSL.png\" style=\"max-width:100%;\" contenteditable=\"false\" width=\"100%\"/></p><p><img alt=\"\" src=\"file:///D:/WEMedia/LocalImg/%7BF2966444-E098-4546-8793-D924BD7397C2%7D.png\"/></p><h1><strong>node服务端打包编译之后又会出现那些新的问题?</strong></h1><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当然这还远远没有结束,因为我们发现打包之后静态文件无法访问,移动文件夹位置之后反复测试,结果发现数据库备份的位置也有所偏差。总之对文件的读写这块存在诸多问题。反复阅读代码发现我们在开发过程中用到了一个__dirname这么一个变量,而这个变量就是根据当前的文件来获取绝对位置。比如文章控制器这块用到了这个变量,则它的绝对路径为D:\\gitwork\\guiplan-study-game-admin\\servers\\app\\controller\\articleController.js</p><p><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%\"/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如果不是在控制器里用这个变量,而是更目录如app.js,这时的绝对路径则为D:\\gitwork\\guiplan-study-game-admin\\servers\\app\\app.js。所以这个变量的值它是变化的。</p><p><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%\"/></p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;而我们打包之后的文件只有一个index.js文件,所有的文件都打包成了一个文件,所以这个时候你再去用__dirname这个变量,它所指的位置则是根目录。并且不会改变。所以就导致静态目录存储的位置与数据库存储的位置都不同的原因。</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好!我们找到的问题的原因,那我们如何去解决这个问题呢?其实用过webpack的同学应该对环境判断不陌生吧?是的,同样的后端打包编译我们一样的可以添加一个环境判断。我们只需将所有用到__dirname这个变量的地方都添加一个判断,然后重新拼接一个绝对路径。比如app.js里的渲染器代码</p><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><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这样哪怕编译打包之后也不会再存在静态文件目录不正确的问题了<br/></p><h1><strong>全名记单词游戏案例展示。</strong></h1><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;最后我们来看看我这边用guiplan低代码开发工具做好的全名记单词游戏项目。小程序端与后台以及后端接口配置都是可视化开发。</p><p><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%;\"/></p><p style=\"text-align:center;\">(uniapp小程序)<br/></p><p><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%;\"/></p><p style=\"text-align:center;\">(游戏后台管理)<br/></p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;最后数据库进行备份,静态文件备份。静态文件包括这些单词的图片,音频以及后台管理系统源代码,后端的源代码以及前台页面等。所有的文件加起来也就12兆。后续静态文件放其他流媒体服务器,数据库备份文件不算的话。一个前后端项目总大小约6兆左右。原本一个项目需要一百多兆,优化完之后只需6兆左右。空间节省20倍左右。</p><p><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%\"/></p>","img":"https://www.guiplan.com/upload/website/article/qxSs6vrVOSkHwlkAh6VMrHAPhMu13gJU.jpg","imgList":[],"typeId":"-5tVjUb6z","repertoryNum":0,"liks":0,"hits":1177,"intro":"","isTop":false,"auth":"","isAdvantage":false,"typeIds":["LCshWORHR"],"__v":0}]}0000000000LCshWORHR

帮助中心

NEWS CENTER

guiplan,让设计更流畅,开发更高效

上海尚进网络科技有限公司
扫码领取会员