您当前的位置:首页 > 电脑百科 > 程序开发 > 框架

前端开发框架之Vue开发流程与使用

时间:2021-11-03 13:47:58  来源:  作者:AT小白在线中

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

 

当我们从github上下载一个前端模板框架到本地后,框架中经常会自带有一些跳转显示类的功能,我们可以通过查看这些功能是如何实现的,进而一步步改造为我们需要的样子。在这一开发过程中,主要有4个重要的具体操作,下面依次介绍这4个具体的步骤:

步骤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_API与url共同构成了项目页面的访问路径。
  • 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基础

前端开发技术之vueUI 组件库



Tags:Vue   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  Tags: Vue  点击:(1)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Tags: Vue  点击:(14)  评论:(0)  加入收藏
开头最近要研究有什么新奇的产品和项目,发现一个网站很有意思,可以纯前端一键随机生成头像,刚好他们的代码是开源,并且基于vue3,我想开源拿出来给大家分享。效果: 开始项目本身基...【详细内容】
2021-12-03  Tags: Vue  点击:(15)  评论:(0)  加入收藏
问题后端已经配置好了跨域,前端本地搭建vue-cli测试环境的时候如何解决跨域?(前提进行了基本的axios封装)分析这个时候后端API是一个明确的外网环境(使用外网IP或固定域名访问),...【详细内容】
2021-11-03  Tags: Vue  点击:(55)  评论:(0)  加入收藏
一、Vue框架的开发流程介绍 当我们从github上下载一个前端模板框架到本地后,框架中经常会自带有一些跳转显示类的功能,我们可以通过查看这些功能是如何实现的,进而一步步改造为...【详细内容】
2021-11-03  Tags: Vue  点击:(34)  评论:(0)  加入收藏
一、Vue介绍1、什么是Vue 可以独立完成前后端分离式web项目的JavaScript框架2、学习Vue的原因三大主流框架之一:Angular React Vue先进的前端设计模式:MVVM可以完全脱离服务器...【详细内容】
2021-10-22  Tags: Vue  点击:(51)  评论:(0)  加入收藏
什么是vuevue是尤雨溪在2014年发布的一个渐进式的js框架,它有着双向绑定的特性,同时它的虚拟dom技术让性能得到大大提升。最重要的就是它是渐进式的应用,你可以在你的项目中逐...【详细内容】
2021-09-22  Tags: Vue  点击:(77)  评论:(0)  加入收藏
前端框架:vue.js效果图: 图书管理显示,查询,删除 页面css样式:<style>* {margin: 0;padding: 0;}#app {width: 900px;padding: 20px;margin: 50px auto;box-shadow: 0 0 10px #82...【详细内容】
2021-09-17  Tags: Vue  点击:(91)  评论:(0)  加入收藏
本文分享自华为云社区《【云驻共创】vue3相比 vue2 的十项优点》,作者: 海拥 。Vue3新版本的理念成型于 2018 年末,当时的 Vue 2 已经有两岁半了。比起通用软件的生命周期来这...【详细内容】
2021-09-16  Tags: Vue  点击:(72)  评论:(0)  加入收藏
1.vue create demo2.vue ui3.搜索 vue-cli-plugin-electron-builder,勾选,安装4.npm run electron:serve5.npm run electron:build6.build complete!构建完成!构建完成后,看一...【详细内容】
2021-09-09  Tags: Vue  点击:(63)  评论:(0)  加入收藏
▌简易百科推荐
近日只是为了想尽办法为 Flask 实现 Swagger UI 文档功能,基本上要让 Flask 配合 Flasgger, 所以写了篇 Flask 应用集成 Swagger UI 。然而不断的 Google 过程中偶然间发现了...【详细内容】
2021-12-23  Python阿杰    Tags:FastAPI   点击:(6)  评论:(0)  加入收藏
文章目录1、Quartz1.1 引入依赖<dependency> <groupId>org.quartz-scheduler</groupId> <artifactId>quartz</artifactId> <version>2.3.2</version></dependency>...【详细内容】
2021-12-22  java老人头    Tags:框架   点击:(11)  评论:(0)  加入收藏
今天来梳理下 Spring 的整体脉络啦,为后面的文章做个铺垫~后面几篇文章应该会讲讲这些内容啦 Spring AOP 插件 (了好久都忘了 ) 分享下 4ye 在项目中利用 AOP + MybatisPlus 对...【详细内容】
2021-12-07  Java4ye    Tags:Spring   点击:(14)  评论:(0)  加入收藏
&emsp;前面通过入门案例介绍,我们发现在SpringSecurity中如果我们没有使用自定义的登录界面,那么SpringSecurity会给我们提供一个系统登录界面。但真实项目中我们一般都会使用...【详细内容】
2021-12-06  波哥带你学Java    Tags:SpringSecurity   点击:(18)  评论:(0)  加入收藏
React 简介 React 基本使用<div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js...【详细内容】
2021-11-30  清闲的帆船先生    Tags:框架   点击:(19)  评论:(0)  加入收藏
流水线(Pipeline)是把一个重复的过程分解为若干个子过程,使每个子过程与其他子过程并行进行的技术。本文主要介绍了诞生于云原生时代的流水线框架 Argo。 什么是流水线?在计算机...【详细内容】
2021-11-30  叼着猫的鱼    Tags:框架   点击:(21)  评论:(0)  加入收藏
TKinterThinter 是标准的python包,你可以在linx,macos,windows上使用它,你不需要安装它,因为它是python自带的扩展包。 它采用TCL的控制接口,你可以非常方便地写出图形界面,如...【详细内容】
2021-11-30    梦回故里归来  Tags:框架   点击:(26)  评论:(0)  加入收藏
前言项目中的配置文件会有密码的存在,例如数据库的密码、邮箱的密码、FTP的密码等。配置的密码以明文的方式暴露,并不是一种安全的方式,特别是大型项目的生产环境中,因为配置文...【详细内容】
2021-11-17  充满元气的java爱好者  博客园  Tags:SpringBoot   点击:(25)  评论:(0)  加入收藏
一、搭建环境1、创建数据库表和表结构create table account(id INT identity(1,1) primary key,name varchar(20),[money] DECIMAL2、创建maven的工程SSM,在pom.xml文件引入...【详细内容】
2021-11-11  AT小白在线中  搜狐号  Tags:开发框架   点击:(29)  评论:(0)  加入收藏
SpringBoot开发的物联网通信平台系统项目功能模块 功能 说明 MQTT 1.SSL支持 2.集群化部署时暂不支持retain&will类型消 UDP ...【详细内容】
2021-11-05  小程序建站    Tags:SpringBoot   点击:(55)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条