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

一、实现思路

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

  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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏云计算教程系列

如何在Ubuntu 14.04上更改PHP设置

PHP是一种服务器端脚本语言,被许多流行的CMS和博客平台使用,如WordPress和Drupal。它也是流行的LAMP和LEMP堆栈的一部分。在设置基于PHP...

3270
来自专栏Python

github设置添加SSH

很多朋友在用github管理项目的时候,都是直接使用https url克隆到本地,当然也有有些人使用 SSH url 克隆到本地。然而,为什么绝大多数人会使用h...

1400
来自专栏地方网络工作室的专栏

打造前端 Deepin Linux 工作环境——安装 koala css 预编译工具(安装deb包的方法

打造前端 Deepin Linux 工作环境——安装 koala css 预编译工具(安装deb包的方法) koala 是国人开发的一个 css 预编译工具,可...

2456
来自专栏草根专栏

Git基本命令 -- 创建Git项目

在这里下载git: https://git-scm.com/ 安装的时候, 如果是windows系统的话, 可以勾选unix的命令行工具, 这样在windows...

2907
来自专栏古时的风筝

Django集成百度富文本编辑器uEditor

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。 首先...

4819
来自专栏小怪聊职场

爬虫|利用Anyproxy爬取微信公众号文章及临时链接转永久链接

1.3K8
来自专栏前端那些事

nvm管理不同版本的node和npm

写在前面 nvm(nodejs version manager)是nodejs的管理工具,如果你需要快速更新node版本,并且不覆盖之前的版本;或者想要在不同的...

2808
来自专栏王磊的博客

ubuntu搭建nodejs生产环境——快速部署手册

1905
来自专栏张泽旭的专栏

Applet小应用程序之间的通讯

1、 首先解压:如何运行applet.zip文件,解压后如图

783
来自专栏破晓之歌

前端页面可视化开发-livestyle,livereload,browser-sync

本质是监控文件修改,实时刷新浏览器,需要安装livereload插件和node.js插件,全局刷新

1102

扫码关注云+社区

领取腾讯云代金券