微服务平台改造落地解决方案设计

后端返回值格式如下：

｛ 
 “code“: “10001“, 
 “message“: “code重复，不能保存！“, 
 “data“:null 
｝ 

其中：code代码返回码，message代码提示信息，data代表返回数据。以上是一个校验异常的示例。返回码定义列表如下：

二、前端框架设计

1、背景

在过去的几年，前端技术飞速发展，涌现了很多优秀的框架，新兴的前端技术主要有以下特点：

• 用户体验

从html5产生以来，随着富客户端技术的多种多样，用户体验变得越来越重要。页面的美观性、响应速度、内存消耗性能优劣等成为客户选择产品非常重要的因素。

• 组件化

利润最大化的两个主要途径是减少部署成本、提高开发效率;而提高开发效率的两个主要途径就是加快开发速度，减少变更代价。JavaScript组件化的目标是清晰的职责，松耦合，便于单元测试和重复利用，提高开发效率。

• MV*框架

类似于后端的分层，前端也大致分为三层，从发展上经历了由MVC --> MVP --> MVVM的转换，MV*代表这三者及类似框架。MV*框架的理念是把前端按照职责分层，每一层都相对比较独立，有自己的价值，也有各自发挥的余地。

• 工程化

一个符合工程化要求的软件系统(前端)需要包含的要素：

开发规范;模块化开发;组件化开发;组件仓库;性能优化;项目部署;开发流程;开发工具。

2、目标

• 搭建前端框架，制定开发规范及开发流程

选用目前应用最广，有着良好的开源社区及技术支持的MV*框架，结合公司后台管理类系统的特点，进行技术选型及框架设计。在编程模型确定以后，制定前端开发流程及开发规范。

• 搭建符合前端框架的开发环境及开发、打包、发布工具

根据前端开发、部署及测试等需求，建立前端的开发工具、开发环境、打包及部署等工具。

• 基于界面交互风格，开发通用组件库

为了提高应用开发效率，需要建立一套页面组件库，满足应用开发的各个场景。

• 建立一套优秀用户体验的界面交互风格及视觉效果

建立优秀的前端框架可以支持更加丰富的页面交互效果，提高响应速度，提升用户体验。但是没有良好的交互及视觉效果设计，这一切用户是很难感受到的，所以前端的交互风格及视觉效果是不可或缺的一部分。

3、技术选型

基于目标通过技术调研并结合公司实际情况选取如下前端技术栈：

前端新的框架层出不穷，为什么最终会选择Angular，主要有以下几方面的原因：

• 整合性(ALL-IN-ONE)。它涵盖了M、V、C/VM等各个层面，不需要组合、评估其它技术就能完成大部分前端开发任务，可以有效降低决策成本，提高决策速度。
• 组件化。Angular原生支持组件化开发，便于代码解耦和复用，提高开发效率。
• 全生命周期支持。一个优秀的框架需要对分工提供良好的支持，每个人都可以先从一些简单任务开始，逐步的从修改一个文件扩大到修改一个目录再到独立实现一个特性。Angular是一个大型开源项目，并得到了Google的鼎力支持，学习成本相对较低，可以让新人快速融入项目组，贡献生产力。
• 支持单元测试和e2e测试。Angular对单元测试和e2e测试更加友好，可以更快速地编写测试代码，完成自动化测试。

4、界面设计

设计原则

对应用系统的功能能够一目了然、不需要多少培训就可以方便使用该应用系统，一直是做好用户界面的最终目标!

本系统坚持图形用户界面(GUI)设计原则：

• 设计时首先关注用户及其业务，而不是技术如何实现
• UI设计简洁美观，视觉元素清晰

采用苹果灰的配色方案以及亲和力比较强的“桔色#ff9900”为主体色。

可理解性操作思维

行为、反馈、可视化展现和信息等一系列活动，应该有合理的顺序，很容易记得，容易放置在内容中。

可配置性

允许简单的个性化配置、设置或新配置。

• 界面以及操作一致性
• 引导性术语描述，引导用户行为

一方面为：帮助信息，辅助用户完成操作的提示信息;另一方面为：用户操作结果的反馈信息(多为弹出提示框形式出现)。

5、设计规范

6、框架结构

（编辑：好传媒网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!