| 摘 要: 传统的Web开发模式中前后端代码高度耦合，导致系统分工不明确，开发效率低，因此前后端分离的开发模式在当前Web应用中显得尤为重要。本文面向智慧就医问题，引入前后端分离的渐近式框架Vue.js(一套轻量级的构建用户的渐进式框架)、ElementUI组件库(饿了么团队开发的一款的Vue框架)、webpack构建技术(一个模块打包器)，后端基于Dubbo分布式架构进行开发，前后端利用Ajax(创建交互式的网页开发技术)进行数据交互。设计实现了基于GIS技术(一种空间信息分析技术)的就医无忧服务系统，系统具备空间查询、属性查询、缓冲区分析、周边设施查询等基础功能。实验表明，前后端分离的开发模式使开发人员分工明确，提高了系统性能和开发效率。 |
| 关键词: 前后端分离；Vue.js；ElementUI；Dubbo |
|
中图分类号: TP311
文献标识码: A
|
| 基金项目: 国家自然科学基金(41701537)；湖北省教育厅科学研究计划(Q20161207)；长江大学2020年大学生创新创业训练计划项目基金支持(Yz2020015). |
|
| Design and Implementation of a Worry-free Medical Service System based on Front-end and Back-end Interaction |
|
HUANG Shengqi, XU Linrui, WANG Yujia, ZENG Ai, LI Gongquan
|
( School of Geosciences, Yangtze University, Wuhan 430100, China)
2696175145@qq.com; 835566891@qq.com; 1139729237@qq.com; 1666203035@qq.com; 195648169@qq.com
|
| 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 |
