中后端管理系统前后分离、前端框架的实现拙见

时间：2022-10-23 12:21:02

一、实现思路

在实践中后台管理系统的前后端分离时，往往会因为业务量的增加使其前端项目难以维护，以及打包时间不理想，还有业务系统与框架之间区分不在明显。本文是本人从另一个角度提出的一种解决方案，希望各位提出宝贵的建议。

  1. 一个通用的框架项目
    此项目为框架项目，只负责提供基础方法，以及第三方依赖包的管理（因为一套系统第三方依赖包的版本应该统一的）、提供业务子系统的注册、布局的管理、导航管理等功能。
  2. 框架项目的cli，用于快速搭建业务子系统的开发平台
    首先以框架项目的生产版本为基础，制作一个模板项目；然后再创建一个cli项目，业务系统开发者安装cli项目，通过cli快速部署、更新框架内容。
  3. 一个全平台的css预处理解决方案
    此项目主要包含布局、各常用模块内容（如：登录、弹窗、文字处理等），现版本在业务系统中不允许修改css，只能引用css内容。
    注意：本基础框架是基于vue + iview + requirejs实现的

二、创建步骤

2.1、github上新建组织

此部分的操作可以参考github的相关操作手册完成。

2.2、基础框架与模板库

由于模板库是基于基础框架的，放在一起能更为有效的说明：

中后端管理系统前后分离、前端框架的实现拙见

说明：

  1. .babelrc与.gitignore文件是没有做任务改变的复制
  2. gulpfile.js和package.json去掉了对sass编译部分的支持和方法
  3. 模板的skin文件夹是框架项目的skin和assets文件的合并，assets存放的sass内容，而skin存放的是第三方依赖的css内容。
  4. core文件夹由dest文件夹和app文件夹部分内容一起组成，dest存放的是通过rollup编译后的app.js和layout.js（框架系统），app存放的是index.html（入口html）、requirejs的main.js文件（js的入口和配置）
  5. lib和build是直接复制的 lib是第三方依赖库（此处是为了做到依赖库的统一管理）,build中是存放的rollup编译配置文件，但有些许改动。

重点说明

  1. 框架项目中的examples文件夹，他是用于存放静态页面。我们在布局模块时应该先在此按钮设计图进行静态页面的实现。然后才是转换到正式项目，因为每个模块的样式都有被重用机会。
  2. 框架项目中的dest文件夹中app.js和layout.js的源码在src/master文件夹中。

2.3、制作cli代码库

此项目的目的其为简单，就是提供init和update方法，用于从模板项目生成业务子系统，并在模板项目更新后，提供更新命令将新的内容更新到业务子系统。

依赖的npm包：

chalk: 命令窗口文字有颜色的输出
commander：解析命令的输入
download-github-repo：下载github上面的模板项目
fs-extra：file和folder的处理，如删除
metalsmith：生成静态站点，选择他，是由于他的插件模式，用于后期对文件内容进行加工和处理

注意

  1. 发布的bin命令如何可用
    首先，需要在命令入口文件最上面添加如下代码(第一行)：
#!/usr/bin/env node

然后，在package.json中的bin中添加命令与执行文件的关联

"bin": {
"vn-init": "srcCli/bin/init.js"
  },

按照上述配置，npm全局安装成后，运行vn-init命令即可触发相关命令文件的代码。

三、项目地址

vueManager(框架项目)：https://github.com/cqhaibin/vueManager.git
vueManager-cli(脚手架项目)：https://github.com/cqhaibin/vueManager-cli.git
simple(模板项目)：https://github.com/vueManager-template/simple.git
脚手架npm地址：https://www.npmjs.com/package/vuemanager-cli

欢迎下载测试和提出建议！！！

标签：

相关文章