黄晟祺 许林瑞 汪玉笳 曾嫒 李功权

摘  要：传统的Web开发模式中前后端代码高度耦合，导致系统分工不明确，开发效率低，因此前后端分离的开发模式在当前Web应用中显得尤为重要。本文面向智慧就医问题，引入前后端分离的渐近式框架Vue.js（一套轻量级的构建用户的渐进式框架）、ElementUI组件库（饿了么团队开发的一款的Vue框架）、webpack构建技术（一个模块打包器），后端基于Dubbo分布式架构进行开发，前后端利用Ajax（创建交互式的网页开发技术）进行数据交互。设计实现了基于GIS技术（一种空间信息分析技术）的就医无忧服务系统，系统具备空间查询、属性查询、缓冲区分析、周边设施查询等基础功能。实验表明，前后端分离的开发模式使开发人员分工明确，提高了系统性能和开发效率。

关键词：前后端分离;Vue.js;ElementUI;Dubbo

中图分类号：TP311     文献标识码：A

Abstract： High coupling of front-end and back-end codes in traditional Web development model leads to unclear system division of labor and low development efficiency. Therefore， development model of front-end and back-end separation is of particular importance in current Web applications. This paper aims to solve the problem of smart medical service by using the progressive framework Vue.js （a lightweight progressive framework for building users）， Elementui component library （a Vue framework developed by the Ele.me team）， and webpack construction technology （a module packer）. Back-end is developed based on the Dubbo distributed architecture， and Ajax （creating interactive Web development technology） is used for data interaction between front-end and back-end. The worry-free medical service system based on GIS technology （a kind of spatial information analysis technology） is implemented， which has basic functions such as spatial query， attribute query， buffer analysis， and surrounding facility query. Experiments show that the development model of front-end and back-end separation defines a clear division of labor and improves system performance and development efficiency.

Keywords： front-end and back-end separation; Vue.js; Elementui; Dubbo

1   引言（Introduction）

传统的开发方式将前端代码和后端代码混合在一起，如ASP、JSP技術等，这种开发模式存在代码可读性差、开发效率低等问题[1]。针对以上问题，产生并发展了前后端分离的开发架构。前端组件化、工程化，后端数据化;前端实现人机交互逻辑，提供业务数据展示，后端为前端提供业务数据支撑;前后端通过RESTful接口进行数据交互[2]。前后端分离的开发模式分工明确，提升了系统的性能，让效率最大化，同时使系统的开发也更加专业，降低了开发成本。

本文设计了一款基于前后端分离的就医无忧服务系统，系统采用前后端分离的开发模式，采用了Dubbo、Spring MVC、Spring Security分……