友家智慧养老云平台设计

摘 要：本文介绍了一款移动端养老医疗app系统的开发流程和设计与实现的过程。本文采用了前端Vue框架和Muse移动端组件库实现页面搭建及其业务逻辑处理，实现前后端分离开发。本系统主要的功能模块有：登录与注册、搜索功能、购物车管理、消息管理、收货地址管理、订单管理等。本文实现了此类型购物app基本的功能，也具有很好的衍生性，适用于其他同类型的网上商铺app的开发。

关键词：HTML；CSS；JavaScript

一、模块功能设计

（一）用户系统功能

系统功能设计是指根据系统的需求分析，确定系统的功能模块，以及模块之间的关系和接口，从而实现系统的逻辑设计和结构。系统功能设计的目的是为了让系统更加清晰、合理、易于开发和维护。

本系统功能设计遵循以下的步骤：

确定系统的功能需求和非功能需求，例如性能、安全性、可用性等。

确定系统的整体架构，即系统在整个上下文中的位置，与其他系统的关联，以及系统自身的职责。

确定系统的模块划分，即将系统分解为若干子模块，确定每个模块的职责以及模块间的关联。

确定每个模块的具体功能，即根据业务场景和规则，梳理每个模块的业务流程和状态转换。

确定每个模块的数据结构，即根据实体模型，设计每个模块需要存储和訪问的数据表或文档等。

确定每个模块的接口设计，即根据模块间的交互，设计每个模块需要提供或调用的API或消息等。

确定每个模块的技术选型，即根据非功能需求和技术趋势，选择合适的技术框架或组件等。

（二）系统架构

使用vuecli脚手架搭建项目，利用webpack搭建搭建了vue自动化开发环境，启动该项目有以下几个选项可以进行可视化选择：选择vue版本、es6转es5、TypeScript编程语言、渐进式应用、安装vue路由、css预处理器、eslint格式化代码标准，通过这些选项的选择可以搭建一套基本的vue项目结构。因为是基于前端框架vue进行开发的，通过前后端分离管理系统，基于MVVM原理实现数据双向绑定。应用node.js包管理工具下载依赖包，gulp工具打包项目，git用于控制版本。生产环境下的代码都放在src目录下，经过gulp工具编译后的代码放在dist目录下。

（三）系统ER图

整个系统设计时可以建立的关系是用户和商品之间的关系，用户通过用户名和密码的输入，经过校验后进入系统选购商品。如图1-1所示一个用户可以选购多样商品，又有多个用户所以是多对多的关系。

二、用户界面

npm run dev启动项目后自动打开浏览器打开localhost：9090/，当点击底部tabbar导航“我的”再点击“设置”时，点击退出登录，就能进入登录页。用户输入账号和密码后就进行简单的表单验证就可进入首页了（此设计，因为采用前后端分离设计，无法调用接口去进行用户名与密码一致性校验）。如图2-2所示系统直接确认两次密码输入一致的情况下会将数据发送到后端数据库进行保存，再登录页输入注册的账号和密码后再跳转到首页（此处因为无后端接口，不能进行用户名和密码的校验以及手机号和密码的校验）。

用户注册登录后直接会进入云健康页，如图2-3所示，首页顶栏有商品搜索框便于用户搜索所需商品，搜索框下面是康复理疗和预约体验区域，用于展示主要推出的活动信息，再下面是根据商品类别设置的宫格导航方便用户直接对某类别商品进行挑选。如图2-3所示宫格导航下面是商店主推商品信息的展示，最下面固定在底部的四大导航，利于用户直接进入消息、商城、我的页面。

作者简介：王科，宿州学院信息工程学院教师。