VUE开发分布式医疗挂号系统后台管理页面步骤

 更新时间:2022年04月24日 16:43:20   作者:Hudie.  
本文从整体上介绍Vue框架的开发流程,结合具体的案例,使用Vue框架调用具体的后端接口,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

前言

前后端分离开发是目前流行的大趋势,所谓前后端分离,仅从技术层面讲主要是指前端通过调用后端提供的接口实现页面的交互逻辑。

具体可以使用nodeJS、axios、ajax等进行交互,使用前后端分离开发主要有解耦和提高性能两点考虑:

  • 解耦:实现了前后端的解耦、静态资源与动态资源的分离。
  • 提高性能:减少了后端服务器压力,不再是全局刷新,而是异步加载局部刷新。

一、Vue框架的开发流程介绍

当我们从github上下载一个前端模板框架到本地后,框架中经常会自带有一些跳转显示类的功能,我们可以通过查看这些功能是如何实现的,进而一步步改造为我们需要的样子。

在这一开发过程中,主要有4个重要的具体操作,下面依次介绍这4个具体的步骤:

Vue框架开发的大致流程

步骤1:添加路由规则

在页面的左边菜单栏,我们点击不同的选项卡,在浏览器的输入框就会自带跳转出不同的url,这一过程就称作"路由"(你当然可以简单的将"路由"理解为是"选路")。

路由

这些路由规则需要在router/index.js 中编写。

在入口文件main.js中,导入了router文件,当我们需要为项目编写路由规则时,就需要在router/index.js 中编写。

在这里插入图片描述

步骤2:添加要跳转的路径

在添加路由规则时,通过component属性可以设置要跳转的路径,并且需要在对应的路径上创建对应的文件。

设置要跳转的路径

步骤3:定义接口路径

在页面中引入了api下的js文件,该文件中定义了接口路径的一部分。

页面中引入了api下的js文件

接口路径的另一部分是 config/dev.env.js 中的BASE_API属性,BASE_APIurl共同构成了项目页面的访问路径。

BASE_API与url一起构成页面的访问路径

步骤4:使用axios进行接口调用

设置好路由规则、要跳转的路径、接口路径之后,我们就需要使用axios进行接口调用,具体是在页面引入JS文件,使用axios进行接口调用,把接口返回数据在页面显示。

二、通过Vue框架调用后端接口实践

继续以《分布式医疗挂号系统》为例,之前的文章中已经完成了医院设置接口的开发,目前已经有了具体的后端接口,下面根据上文配置好前端环境,尝试使用Vue框架调用后端医院设置表的查询接口,进而显示接口中的数据:

1.添加医院设置路由

router/index.js中设置路由规则:

路由医院记录列表:/hospSet/list

路由医院记录添加:/hospSet/add

添加医院设置路由规则

2.添加跳转的路径

继续在router/index.js的component属性中添加跳转的路径:

跳转到医院记录列表:@/views/hospset/list

跳转到医院记录添加:@/views/hospset/add

添加要跳转的路径

3.定义接口路径

在api文件夹下创建名为hspset.js的文件,定义后端接口路径。

定义接口路径

config/dev.env.js 中修改接口ip地址和端口号:

注意不要改为https,因为https为加密传输,需要授权后才能操作。

修改为本机8201端口

4.使用axios进行接口调用

医院设置的接口调用代码写在下图的list.vue中,下图显示了前端调用后端的整体过程:

前端调用接口的过程

二、测试

1.测试后端接口

首先在一样设置数据库表中准备好4条记录。

医院设置数据库表

然后将医院设置微服务模块启动,使用swagger进行 条件查询带分页接口 的测试:

条件查询带分页接口测试

2.跨域访问问题

在前后端整合时,当以下三个部分中存在一个及以上不相同时,会出现跨域问题:

  • 访问协议
  • 访问地址
  • 访问端口号

解决跨域问题最简单的方式:使用 @CrossOrigin 注解,将其加在发出请求的Controller类上即可。

3.状态码问题

编写后端代码时,我们定义了成功状态码为200,而在前端模板中,使用的是20000作为成功状态码。为了前后端统一,可以将前端 utils/request.js 中的成功状态码改为200和后端匹配。

4.最终测试

前端整合后端测试

可以看到点击医院设置列表后,成功到达后端进而调用了医院设置表的数据库,获得了医院设置表的JSON数据,后续可以通过此JSON数据将其显示在页面上!

以上就是VUE开发分布式医疗挂号系统后台管理页面步骤的详细内容,更多关于分布式医疗挂号系统VUE开发后台管理页面的资料请关注脚本之家其它相关文章!

相关文章

  • Vue便签的简单实现

    Vue便签的简单实现

    本文主要介绍了Vue便签的简单实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • Vue中$router和$route的区别详解

    Vue中$router和$route的区别详解

    在 Vue.js 中,$router 和 $route 是两个常用的对象,用于处理路由相关的操作,下面小编就来和大家介绍一下$router 和 $route 的区别以及如何使用它们吧
    2023-06-06
  • vue3 Composition API使用示例教程

    vue3 Composition API使用示例教程

    Vue3新增了Composition API,我们只需将实现某一功能的相关代码全部放进一个函数中,然后return需要对外暴露的对象,这篇文章主要介绍了vue3 Composition API使用,需要的朋友可以参考下
    2022-12-12
  • vue.js 添加 fastclick的支持方法

    vue.js 添加 fastclick的支持方法

    今天小编就为大家分享一篇vue.js 添加 fastclick的支持方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 关于在vue-cli中使用微信自动登录和分享的实例

    关于在vue-cli中使用微信自动登录和分享的实例

    本篇文章主要介绍了关于在vue-cli中使用微信自动登录和分享的实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • vue2.0实现分页组件的实例代码

    vue2.0实现分页组件的实例代码

    这篇文章主要介绍了vue2.0实现分页组件的实例代码,需要的朋友可以参考下
    2017-06-06
  • Vue自定义指令实现点击右键弹出菜单示例详解

    Vue自定义指令实现点击右键弹出菜单示例详解

    这篇文章主要为大家介绍了Vue自定义指令实现点击右键弹出菜单示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • vue项目netWork地址无法访问的问题及解决

    vue项目netWork地址无法访问的问题及解决

    这篇文章主要介绍了vue项目netWork地址无法访问的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-09-09
  • Vue3中导航守卫的使用教程

    Vue3中导航守卫的使用教程

    在Vue3中,导航守卫(Navigation Guards)用于在路由切换前后执行一些操作,例如验证用户权限、取消路由导航等,本文主要为大家介绍了vue3中导航守卫的使用方法,需要的可以参考下
    2023-08-08
  • Vue瀑布流插件的使用示例

    Vue瀑布流插件的使用示例

    这篇文章主要介绍了Vue瀑布流插件的使用示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09

最新评论