1. 首页
  2. 科技部落

一种快速高效开发站点的技术方案

Part 1  简介

随着互联网软硬件技术的快速发展,前后端框架越来越成熟易用,服务器性能越来越高,使得站点开发能够变得更加高效。本文结合工作中的项目案例,介绍一种快速高效开发站点的解决方案,并希望在公司内部能够得到推广。

Part 2  站点架构和技术选型

大家都知道,站点就是一个网站为特定的用户提供某类服务,站点架构从逻辑上可以分为UI组件层、前端框架层、服务接口层、数据库层和web服务器层五个部分,如下图所示:一种快速高效开发站点的技术方案站点架构图

UI组件层: 提供站点页面交互时使用的组件库,本文主要选用由饿了么出品的element-UI前端组件库和阿里的Ant-design前端组件库,理由——高端大气上档次,大厂出品,必出精品。

一种快速高效开发站点的技术方案

Ant-Design开箱即用的中台前端

前端框架层:调用服务接口,实现页面组件交互。本文采用近几年比较流行且有后来者居上趋势的Vue前端开发框架,目前Vue在github上的星数已经超越了react,angular,并且Vue的代码更简洁,开发效率要高于后两者。

一种快速高效开发站点的技术方案

Ant-design + Vue双剑合璧

服务接口层:为站点提供服务接口。本文采用前后端分离的架构设计,服务端仅提供数据接口,页面渲染全部由前端完成,职责分明,减轻了服务端压力。Flask框架是Python开发的一个基于Werkzeug和Jinja 2的web开发微框架,它的优势就是极其简洁,但又非常灵活,而且容易学习和应用,此外,使用Flask框架的另一个好处在于你可以非常轻松地将基于Python的机器学习算法或数据分析算法集成到web应用中。

一种快速高效开发站点的技术方案

Python Flask框架

数据库:数据存储区,供服务接口层调用。本文采用Redis + MySQL的数据库存储方式。Redis基于内存,读写速度快,也可做持久化,但是内存空间有限,当数据量超过内存空间时,需扩充内存,但内存价格贵。MySQL基于磁盘,读写速度没有Redis快,但是不受空间容量限制,性价比高。

大多数的应用场景是MySQL(主)+Redis(辅),MySQL做为主存储,Redis用于缓存,加快访问速度。需要高性能的地方使用Redis,不需要高性能的地方使用MySQL。存储数据在MySQL和Redis之间做同步。Python Flask框架对Redis和MySQL的支持都非常好,可以很方便地进行数据库操作。

web服务器层:站点对外提供服务所使用的web服务器,目前主流的web服务器主要有Apache服务器、Nginx服务器和微软的IIS服务器。本文开发站点的生产环境是部署在Nginx服务器上,在Nginx配置文件中只须修改proxy为前端站点域名。

一种快速高效开发站点的技术方案

Flask在Nginx服务器上的部署

Part 3  案例展示

模型监控平台是提供给模型团队和政策团队的一个内部模型监控的站点,接入了CAS登录功能,用户权限管理,内容可订制化,采用数据可视化,实时展示各个业务线模型监控情况。

站点开发采用了本文所述的技术方案,数据可视化采用了专业的JS数据可视化库——HighCharts库,站点页面详情:

一种快速高效开发站点的技术方案

CAS登录页面

一种快速高效开发站点的技术方案

后台用户权限管理页面

一种快速高效开发站点的技术方案

模型监控页面

Part 4  结束语

本文介绍的解决方案比较适用于公司内部使用的中小型站点开发,使用的都是市场上成熟的技术框架,开箱即用,不用自己重复造轮子,开发效率高,安全性和稳定性也有保障。

如果对这方面技术感兴趣的同学,欢迎大家一起学习探讨。