基于SqlSugar的开发框架循序渐进介绍（29）-- 快速构建系统参数管理界面-Vue3+ElementPlus
<p>在随笔《基于SqlSugar的开发框架循序渐进介绍（28）-- 快速构建系统参数管理界面》中介绍了基于SqlSugar开发框架，构建系统参数管理的后端API部分，以及WInform界面部分内容，本篇随笔介绍基于Vue3+ElementPlus的前端界面开发过程。</p><h3>1、Winform端界面的回顾</h3>
<p>系统参数的信息，设计为包含一个大类参数目录和一个具体的参数项目，如下基于SQLServer的数据库表设计所示（基于PoweDesigner设计，便于生成Sql执行）。</p>
<p><img src="https://img2023.cnblogs.com/blog/8867/202304/8867-20230423120210628-618268665.png" alt="" width="270" height="407" class="medium-zoom-image" loading="lazy"></p>
<p>利用现有表结构信息，基于代码生成工具快是生成相关的业务类文件，合并到系统框架中就可以了。</p>
<p><img src="https://img2023.cnblogs.com/blog/8867/202304/8867-20230423122039333-386536552.png" alt="" width="805" height="633" class="medium-zoom-image" loading="lazy"></p>
<p>一般的业务代码都需要有CRUD等常规操作的代码，不过基于框架的基础上，我们只需要生成一个简单的类，继承自基类就默认具有了这些操作，不需要重复编写代码，简化了代码的处理并提高开发效率。</p>
<p>我们利用现有表结构信息，基于代码生成工具快是生成相关的业务类文件， 直接复制Core目录到解决方案项目上就可以了，如下所示。</p>
<p><img src="https://img2023.cnblogs.com/blog/8867/202304/8867-20230423122633916-1045574251.png" alt="" class="medium-zoom-image" loading="lazy"></p>
<p> </p>
<p>Winform部分的界面，选择对应的界面生成【<strong>SqlSugar框架Winform界面生成</strong>】生成。</p>
<p><img src="https://img2023.cnblogs.com/blog/8867/202304/8867-20230423121421200-1248609662.png" alt="" width="866" height="335" class="medium-zoom-image" loading="lazy"></p>
<p> 在弹出的【常规Winform界面生成】面板中，勾选相关的设置信息，定制UI界面，如下界面效果所示。</p>
<p><img src="https://img2023.cnblogs.com/blog/8867/202304/8867-20230423121650181-2099285715.png" alt="" width="817" height="678" class="medium-zoom-image" loading="lazy"></p>
<p>生成基础界面后，进行一定的微调处理，增加左侧树列表展示，最终编辑明细部分的界面效果如下所示。</p>
<p><img src="https://img2023.cnblogs.com/blog/8867/202304/8867-20230423124413453-1510998255.png" alt="" width="805" height="427" class="medium-zoom-image" loading="lazy"></p>
<p> </p>
<h3>2、Vue3+ElementPlus的前端界面开发</h3>
<p>参考以上Winform界面的设计思路，我们也可以在Vue3+ElementPlus的前端界面上做类似的布局处理即可。</p>
<p>通用为了提高开发效率，Vue3+ElementPlus前端界面和前端的API访问类，我们同样通过配套的代码生成工具进行生成。</p>
<p><img src="https://img2023.cnblogs.com/blog/8867/202305/8867-20230505105011631-1313424750.png" alt="" width="796" height="232" loading="lazy"></p>
<p>为了更好的进行相关界面的开发，我们设计了两套布局方式，一个是查询条件+列表展示，一个是树+查询条件+列表展示的布局，方便实际使用。</p>
<p><img src="https://img2023.cnblogs.com/blog/8867/202305/8867-20230505105248264-2138831174.png" alt="" width="508" height="502" loading="lazy"></p>
<p> 最终生成api访问得Typescript类和Vue3的视图文件，如下界面所示。</p>
<p><img src="https://img2023.cnblogs.com/blog/8867/202305/8867-20230505105511832-1796751016.png" alt="" width="523" height="280" loading="lazy"></p>
<p>把视图文件和Api访问类文件，合并到项目目录中去，然后对视图文件适当进行一定的查询条件调整处理。</p>
<p>API类由于继承了基础BaseApi类，因此不需要额外的处理常规的CRUD操作方法，类似下面的关系处理。</p>
<p><img src="https://img2020.cnblogs.com/blog/8867/202007/8867-20200713152737929-890201160.png" alt="" class="medium-zoom-image" loading="lazy"></p>
<p>BaseApi的ES6类里面定义了对应Web API基类里面的操作方法，如下所示。</p>
<p><img src="https://img2022.cnblogs.com/blog/8867/202207/8867-20220707112405599-7103386.png" alt="" width="966" height="595" class="medium-zoom-image" loading="lazy"></p>
<p>因此生成的API类直接复制过去就可以了，如下代码所示。</p>
<p><img src="https://img2023.cnblogs.com/blog/8867/202305/8867-20230505111320783-1701058637.png" alt="" width="763" height="306" loading="lazy"></p>
<p>而对于视图代码的处理，我们已经生成了相关的视图文件代码，因此进行一定的微调，把多余的条件放到折叠栏目里面即可，如下代码所示。</p>
<p><img src="https://img2023.cnblogs.com/blog/8867/202305/8867-20230505111508815-562925926.png" alt="" width="1172" height="591" loading="lazy"></p>
<p>同时我们在树列表中，增加一些操作参数目录的处理操作。</p>
<p><img src="https://img2023.cnblogs.com/blog/8867/202305/8867-20230505111607430-702191140.png" alt="" width="1177" height="622" loading="lazy"></p>
<p> 基本上界面部分就差不多了。</p>
<p>另外，和其他常规开发一样，我们需要在路由器中增加新增的视图路由信息，以便前端能够进行访问，如下所示。</p>
<p>默认的入口为目录的index.vue的文件</p>
<p><img src="https://img2023.cnblogs.com/blog/8867/202305/8867-20230505105846080-727466138.png" alt="" width="777" height="223" loading="lazy"></p>
<p>最终界面效果如下所示。</p>
<p><img src="https://img2023.cnblogs.com/blog/8867/202305/8867-20230505110354589-603223891.png" alt="" width="1384" height="750" loading="lazy"></p>
<p>编辑系统参数的界面效果如下所示</p>
<p><img src="https://img2023.cnblogs.com/blog/8867/202305/8867-20230505110508264-553230738.png" alt="" loading="lazy"></p>
<p> 查看详细的界面效果类似</p>
<p><img src="https://img2023.cnblogs.com/blog/8867/202305/8867-20230505110601196-1537987210.png" alt="" loading="lazy"></p>
<p> 因此两种（Winform CS前端和BS的Vue3+Element前端）不同前端界面的效果类似，达到了多端统一效果，快速开发的目的。</p>
<p>结合框架的开发，可以让我们事半功倍，大多数的时间，可以专注在自定义UI的改进，以及业务逻辑的处理上，常规的界面开发，会变得容易简单化。</p>
<p> </p>
</div>
<div id="MySignature" role="contentinfo">
<div style="border-right-color: #cccccc; border-right-width: 1px; border-right-style: solid; padding-right: 5px; border-top-color: #cccccc; border-top-width: 1px; border-top-style: solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left-color: #cccccc; border-left-width: 1px; border-left-style: solid; width: 98%; padding-top: 4px; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: solid; background-color: #eeeeee;">
<img src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top" alt>
<span style="color: #000000"><span class="Apple-tab-span" style="white-space: pre"></span>
专注于代码生成工具、.Net/Python 框架架构及软件开发，以及各种Vue.js的前端技术应用。著有Winform开发框架/混合式开发框架、微信开发框架、Bootstrap开发框架、ABP开发框架、SqlSugar开发框架、Python开发框架等框架产品。
<br> 转载请注明出处：撰写人：伍华聪 http://www.iqidi.com <br> </span></div><br><br>
来源：https://www.cnblogs.com/wuhuacong/p/17373602.html
頁:
[1]