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

一、实现思路

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

  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

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


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/363659.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

初见mobX

先看如下的代码 const {observable} mobox; const {observer}mobxReact; const {Component}React; const appStateobservable({count:0 }) appState.incrementfunction(){this.count } appState.decrementfunction(){this.count-- } observer class Counter extends Component{…

html输入完账号密码才能跳转,HTML输入字段跳转

我有2个文本字段,用户名和密码。当我输入密码时,它跳到第一个。我不知道为什么会这样。我无法找到它为什么跳。如何更改密码表单不跳转?这里是代码:HTML输入字段跳转session_start();require_once database.php;if (isset($_SESSI…

让使用MSN就像访问网页一样容易!

有时候,你不得不佩服微软的想法! http://webmessenger.msn.com/转载于:https://www.cnblogs.com/Hush/archive/2004/12/10/75430.html

学用状态机模式,写的报销流程,请指教

刚学编程不久,请前辈们指点。需求变化点:不同的金额,和不同的角色走不同的报销流程usingSystem;staticclassFactory { publicstaticEmployee CreateEmployee(stringname) { Employee employee null; switch(name) …

Java 8 Friday:更好的异常

在Data Geekery ,我们喜欢Java。 而且,由于我们真的很喜欢jOOQ的流畅的API和查询DSL ,我们对Java 8将为我们的生态系统带来什么感到非常兴奋。 Java 8星期五 每个星期五,我们都会向您展示一些不错的教程风格的Java 8新功能&#…

【留言板】可编辑输入框操作总结

闲暇之余,用于加深自己对基础的了解,徒手撸了一个留言板:输入框。废话少说,进入正题。简陋的效果如下(下载代码): 一、定义需求 可输入文本,以及插入表情。兼容性:IE与标准浏览器 二、详细设计…

excel poi3.17导出导入

https://blog.csdn.net/phil_jing/article/details/78307819 转载于:https://www.cnblogs.com/lyon91/p/10450668.html

2021年兰州师大附中高考成绩查询,2021年兰州重点高中名单及排名,兰州高中高考成绩排名榜...

”一千个人眼中,就有一千个哈姆雷特“。关于兰州高职学校排名,每个人的观点也是各不相同,今天就给大家分享一下我心中的兰州高中排名及格局分布,主要参考依据是近年中考录取分数线及高考成绩。数据仅供参考!希望对你有…

Android 创建,验证和删除桌面快捷方式 (删除快捷方式测试可用)

测试环境为Adnroid 2.1以上。 第一步&#xff1a;AndroidManifest.xml 权限配置&#xff1a; 添加快捷方式权限&#xff1a; <uses-permission android:name"com.android.launcher.permission.INSTALL_SHORTCUT"/> 验证快捷方式是否存在权限&#xff1a; <u…

ASP.NET存储Session的StateServer

由于公司要对服务器做个负载均衡&#xff0c;所以Web项目在两台前端服务器(web1、web2)各部署了一份。但是在项目中会用到session。当一开始在web1上登陆后&#xff0c;由于web1之后负载可能会变大&#xff0c;就有可能从web1跳转到web2上。从网上找了好多资料&#xff0c;自己…

休眠和UUID标识符

介绍 在我以前的文章中&#xff0c;我谈到了UUID代理密钥以及用例 &#xff0c; 这些用例比更常见的自动增量标识符更合适。 UUID数据库类型 有几种方法可以表示128位UUID&#xff0c;并且每当有疑问时&#xff0c;我都希望向Stack Exchange寻求专家建议。 由于通常对表标识符…

use vue vuex vue-router, not use webpack

vue,vuex,vue-router放在一起能做什么&#xff1f;不用webpack之类的打包工具使用他们是否可行&#xff1f;各位道友在初学vue时是否有这样的困惑。因为现代构建前端项目的一般模式是&#xff1a; 安装webapck&#xff0c;某种是glup,grunt&#xff0c;或者是fis等构建工具然后…

html网页加入一个按钮,在html网页设计中,一个“登录”按钮怎么编写代码?

html网页设计&#xff1a;一个简单的登录界面代码&#xff01;在html网页设计中&#xff0c;一个“登录”按钮怎么编写代码&#xff1f;列如所给图片的“登录”按钮怎么用html代码显示出来&#xff0c;要求能够识别是否输入用户名和密码&#xff01;是这样的效果吗&#xff1f;…

blender的汉化方法!

本人对于此只是初步认知阶段&#xff0c;也许对于电脑高手来说&#xff0c;这只是小儿科。但对于我来说&#xff0c;能够摸索出其中的方法&#xff0c;还是费了一些力气&#xff0c;所以&#xff0c;也蛮有成就感。希望拿来与同是处于初学水平的朋友共同学习。 blender这个软件…

SQL重复记录查询(转载)

1、查找表中多余的重复记录&#xff0c;重复记录是根据单个字段&#xff08;peopleId&#xff09;来判断select * from peoplewhere peopleId in (select peopleId from people group by peopleId having count(peopleId) > 1) 例二&#xff1a;select * from testt…

[Linux] 007 目录处理命令

1. 目录处理命令&#xff1a;mkdir 命令名称&#xff1a;mkdir命令英文原意&#xff1a;make directories命令所在路径&#xff1a;/bin/mkdir执行权限&#xff1a;所有用户语法&#xff1a;mkdir -p [目录名]功能描述&#xff1a; 创建新目录-p 递归创建范例&#xff1a; mkdi…

计算机科学与技术专业《计算机网络原理》课程实验指导书,计算机科学导论,课程实验指导书解读.pdf...

计算机科学导论实验指导书聊城大学计算机学院聊城大学计算机学院聊城大学计算机学院聊城大学计算机学院2010 年年 8 月月年年 月月《计算机科学导论》课程实验指导书目 录《计算机科学导论》课程实验教学大纲 1实验一 计算机基本操作 3基本信息 3实验预习 3实验过程 4实验数据和…

Java Singleton设计模式

它是Java中最简单的设计模式之一。 如果有人问我哪种设计模式好&#xff0c;那么我会很自豪地说Singleton。 但是&#xff0c;当他们深入询问单身人士的概念时&#xff0c;我感到很困惑。 真的单身是那么困难吗&#xff1f; 确实不是&#xff0c;但是它有许多我们需要了解的…

elasticsearch配置文件解析

1.Cluster&#xff08;集群&#xff09;# 集群名称标识了你的集群&#xff0c;自动探查会用到它。默认值为elasticsearch# 如果你在同一个网络中运行多个集群&#xff0c;那就要确保你的集群名称是独一无二的。## cluster.name: my-application 2.Node&#xff08;节点&#xf…

刚刚出炉的Asp.net网站部署视频教程

刚刚出炉的Asp.net网站部署视频教程,希望对新手朋友有所帮助主要包括内容&#xff1a; 1、IIS的安装与配置 2、Asp.net环境的安装与常见问题解决 3、Asp.net网站的配置和使用 51aspx会陆续推出基础教程与大家见面&#xff0c;敬请期待&#xff01; 中间不妥之处还希望大家多多包…