姑娘我姓楊 發表於 2023-8-22 19:22:00

03.前后端分离中台框架 zhontai 项目代码生成器的使用

<h2 id="zhontai-项目">zhontai 项目</h2>
<blockquote>
<p>基于 .Net7.x + Vue 等技术的前后端分离后台权限管理系统，想你所想的开发理念，希望减少工作量，帮助大家实现快速开发</p>
</blockquote>
<p>后端地址：https://github.com/zhontai/Admin.Core<br>
前端地址：https://github.com/zhontai/admin.ui.plus</p>
<ul>
<li>
<p>代码生成器：</p>
<ul>
<li>后端：https://github.com/yimogit/Admin.Core.Dev Fork 自 https://github.com/share36/Admin.Core.Dev</li>
<li>前端：https://github.com/yimogit/admin.ui.plus.dev Fork 自https://github.com/share36/admin.ui.plus.dev</li>
</ul>
</li>
<li>
<p>官方默认项目模板生成：</p>
<ul>
<li><code>dotnet new install ZhonTai.Template</code></li>
<li><code>dotnet new MyApp -n MyCompanyName.MyProjectName</code></li>
</ul>
</li>
</ul>
<p>本文主要介绍使用第三方的可视化代码生成器生成前后台代码</p>
<h2 id="后端生成">后端生成</h2>
<ul>
<li>代码仓库 https://github.com/yimogit/Admin.Core.Dev</li>
<li>在 ZhonTai.Host 添加对 ZhonTai.Admin.Dev 的项目引用</li>
<li>修改 ZhonTai.Host 项目 Config\appconfig.json 配置
<ul>
<li>assemblyNames：<code>[... "ZhonTai.Admin.Dev" ]</code></li>
<li>swagger节点projects增加项 <code>[...{"name":"代码生成","code":"dev","version":"v0.0.1","description":""}]</code></li>
</ul>
</li>
<li>已经在开发环境对CodeGenService忽略权限,前端直接显示代码生成不需要加到数据库中<pre><code class="language-cs">#if DEBUG

#endif
public partial class CodeGenService{}
</code></pre>
</li>
<li>后端生成器配置图片说明<br>
<img src="https://img2023.cnblogs.com/blog/662652/202308/662652-20230822001230742-1003492320.png" alt="后端生成器配置一图说明" loading="lazy"></li>
</ul>
<h2 id="前端生成">前端生成</h2>
<ul>
<li>
<p>代码仓库 https://github.com/yimogit/admin.ui.plus.dev</p>
</li>
<li>
<p>复制 gen/gen-dev-api.js 到项目</p>
</li>
<li>
<p>修改 gen/gen-api.js，添加 dev 模块</p>
<pre><code>const apis = [
{
    output: path.resolve(__dirname, '../src/api/admin'),
    url: 'http://localhost:8000/admin/swagger/admin/swagger.json',
},
{
    output: path.resolve(__dirname, '../src/api/dev'),
    url: 'http://localhost:8000/admin/swagger/dev/swagger.json',
}
]
</code></pre>
</li>
<li>
<p>添加package.json命令：<code>"gen:dev:api": "node ./gen/gen-dev-api"</code></p>
</li>
<li>
<p>执行<code>npm run gen:dev:api</code>生成接口定义</p>
</li>
<li>
<p>将src/views/dev添加到项目src/views文件夹</p>
</li>
<li>
<p>修改/src/router/route.ts,将生成器节点添加到 '/example' 即可</p>
<pre><code class="language-js">[
      {
      path: '/dev',
      name: 'dev',
      redirect: '/dev/codegen',
      meta: {
          title: '生成器',
          isLink: '',
          isHide: false,
          isKeepAlive: true,
          isAffix: false,
          isIframe: false,
          roles: ['admin'],
          icon: 'iconfont icon-zujian',
      },
      children: [
          {
            path: '/dev/codegen',
            name: '/dev/codegen',
            component: () =&gt; import('/@/views/dev/codegen/index.vue'),
            meta: {
            title: '代码生成',
            isLink: '',
            isHide: false,
            isKeepAlive: true,
            isAffix: false,
            isIframe: false,
            roles: ['admin'],
            icon: 'iconfont icon-zujian',
            },
          }]
      },
      //...{path: '/example',...}
]
</code></pre>
</li>
<li>
<p>配置api+模型生成<br>
<img src="https://img2023.cnblogs.com/blog/662652/202308/662652-20230822001257917-348867608.png" alt="生成器配置" loading="lazy"></p>
</li>
<li>
<p>配置路由<br>
<img src="https://img2023.cnblogs.com/blog/662652/202308/662652-20230822001311653-1820259891.png" alt="配置路由" loading="lazy"></p>
</li>
</ul>
<p>因为框架有些更新改动，未做适配会存在一些报错，解决即可，已经提PR了，可以根据需要查看pr或我的主页获取代码</p>
<h2 id="生成器使用">生成器使用</h2>
<p>配置就绪，项目就可以丝滑的运行起来了</p>
<ul>
<li>
<p>可以直接创建数据表，再生成代码，亦可以根据已有的数据库表来生成<br>
<img src="https://img2023.cnblogs.com/blog/662652/202308/662652-20230822001327594-681517048.png" alt="" loading="lazy"></p>
</li>
<li>
<p>创建完成后，在列表右侧下拉按钮 生成代码 即可<br>
<img src="https://img2023.cnblogs.com/blog/662652/202308/662652-20230822001336867-1587192244.png" alt="" loading="lazy"></p>
</li>
<li>
<p>生成菜单数据的前置操作，正常需要手动添加视图及权限分组，再生成菜单</p>
<ul>
<li>新建视图
<ul>
<li>视图名称：代码测试</li>
<li>上级视图：平台管理</li>
</ul>
</li>
<li>新建权限分组
<ul>
<li>上级分组：平台管理</li>
<li>名称：代码测试</li>
<li>路由地址：/platform/test</li>
<li>重定向：/platform/test/index</li>
</ul>
</li>
</ul>
</li>
<li>
<p>生成菜单</p>
<ul>
<li>点击生成菜单数据</li>
<li>将会在[视图管理]页面下生成
<ul>
<li>测试管理 视图命名：admin/test 视图地址：admin/test/index</li>
<li>这里生成的是会加载到vue-router，地址如果有下划线，横杠等特殊符号需要自己修改</li>
</ul>
</li>
<li>将会在[权限管理]页生成<br>
测试管理 菜单 路由地址：/admin/test 视图地址：admin/test/index&nbsp; 路由命名：admin/test<br>
这个测试页因为是生成到平台管理模块所以才需要修改，因为平台模块的key是platform，<br>
打开后左侧导航会无法正确定位，所以需要修改下生成的权限菜单项<br>
将路由地址修改为：/platform/test/index<br>
将路由名称修改为：platform/test/index</li>
</ul>
</li>
<li>
<p>生成结果示例<br>
<img src="https://img2023.cnblogs.com/blog/662652/202308/662652-20230822001355998-1777253824.png" alt="生成结果示例" loading="lazy"></p>
</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/662652/202308/662652-20230822001403468-974186219.png" alt="生成结果示例" loading="lazy"></p>
<h2 id="结语">结语</h2>
<p>至此，对于zhontai的框架使用产出了三篇文章，框架上手还是比较简单，有了代码生成器也可以快速开发；目前得知作者也在弄微服务的框架，表示期待，默默点赞，觉得有用的也可以去zhontai/Admin.Core点个Star，希望后来者可以少踩一些坑吧。<br>
目前准备使用框架来整个管理系统，等我边踩坑边记录吧，后面有空再分享。</p>


</div>
<div id="MySignature" role="contentinfo">
    <p style="background: rgb(230, 250, 230); padding: 10px 10px 10px 10px; border: 1px dashed rgb(224, 224, 224); font-family: 微软雅黑; font-size: 13px; text-indent: 0em">
<b>未经许可，禁止转载!!!</b>
<br>
作者：易墨
<br>
Github：yimogit
<br>
纯静态工具站点：metools
</p><br><br>
来源：https://www.cnblogs.com/morang/p/zhontai_admin_core_book_03.html
頁: [1]
查看完整版本: 03.前后端分离中台框架 zhontai 项目代码生成器的使用