vue antd admin怎么切换到basic分支_vue菜鸟从业记:前端如何与后端哥们进行接口联调...

最近我的朋友王小闰进入一家新的公司,正好公司项目采用的是前后端分离架构,技术栈是王小闰非常熟悉的vue全家桶,后端用的是Java语言。在前后端开发人员碰面之后,协商确定好了前端需要的数据接口(扯那么多,其实也就是关于json数据的字段的定义),然后前后端程序猿就嗨皮地并线开发去了。前后端联调前夕我的朋友王小闰他们这家公司做本地旅游项目的,安排到他手上的活儿是该旅游项目的webapp工程。项目动工伊始,一切都得从头来做。在公司没日没夜的开发了一天之后,王小闰在没有借助vue-cli官方提供的脚手架工具下,徒手从零开始,搭建了一套基于公司特定要求的vue项目的工程架构目录。(关于如何从零开始搭建vue项目的脚手架工程,后面我会单独写一个系列)。前端项目环境搭建好之后,就正式进入了项目首页的业务编码工作。王小闰又没日没夜的敲了一天代码之后,首页header区域、轮播图以及导航图标的页面布局和逻辑开发都实现了,此时他想调用后端数据测试下流程,但是后端程序猿还没有将该数据的接口开发出来,没办法,我的朋友王小闰此时只能在本地模拟点假数据,逼格高点的说法叫mock数据。捣鼓半天,首页的mock数据终于弄好了,如下图所示:0e8220347d0155d058730c9fcc2e8ebe.png但是现在有一个问题让王小闰很困惑,他的axios写的url路径是与后端程序猿商量好的绝对路径(域名+请求路径+请求参数),因为这是以后真正的请求路径,所以我朋友王小闰又不想先写本地相对路径,后期再来修改,万一后端程序猿开发的慢了,鬼知道到时候有多少接口需要修改,所以他就迷茫不知所措了。其实,仔细看看,这就是前后端分离中的mock数据和接口联调的问题。要想弄懂其中缘由,下面让我们分几点来聊聊。什么是前后端接口联调之前开发写代码的时候,所有的ajax数据都不是后端返回的真实数据,而是我们自己通过接口mock模拟的假数据,当前端的代码编写完毕,后端的接口也已经写好之后,我们就需要把mock数据干掉,尝试使用后端提供的数据,进行前后端的一个调试,这个过程我们就把它称之为前后端的接口联调。为什么要联调本地的mock数据是王小闰自己写的,肯定符合前端需求,但是后端接口首先需要测试通不通,还需要测试数据格式对不对,还有后端有没有填写足够的数据,比如写列表页,前端想分页,如果后端就写了两条测试数据,你咋整?所以,王小闰需要根据后端对接口的调整,不断地来回切换url,这样岂不是还在受后端的影响,还谈什么毛线的前后端分离,名存实亡嘛!如何实现前后端接口联调首先,我们已经知道,目前的前后端分离的架构应用分为两种情况:1.前后端完全分离,前后端分别拥有自己的域名和服务器。2.前后端开发分离,但是部署时是一个域名和一台服务器。虽然架构可以采用前后端分离,但是部署有可能就不一样了,这和项目的大小,公司的情况等等都有关系了,一个百八十人用的小系统,还得两台服务器两个域名,你不觉着浪费吗?两种不同的部署情况直接导致了前期在设计联调方案的时候就不同了。如果你们公司的项目在部署时是两台服务器对应两个域名,恭喜你,这是最nice的方案,也是联调最舒服的方式。但是,我朋友王小闰呆的这家公司是一家刚起步的小公司,肯定是怎么节省成本怎么来,问过后端,才知道他们公司是属于第二种情况,也就是开发时前后端分离,部署时是一个域名和一台服务器。知道这个之后,他就明白接下来该怎么操作了。王小闰之前在项目根目录static文件夹下新建了一个mock文件夹,里面写了一些json文件,当我们做联调的时候,这些mock数据就没用了,我们要把mock数据切换成后端提供给我们的真实的数据。当我的朋友王小闰把static文件夹下的mock数据删除之后,在运行项目,发现报错了,浏览器告诉他,你访问的mock下面的index.json文件找不到404。我们平时本地前端开发环境dev地址大多是 localhost:8080,而后台服务器的访问地址就有很多种情况了,比如 后端程序猿本地IP(127.0.0.1:8889),或者外网域名,当前端与后台进行数据交互时,自然就出现跨域问题(后台服务没做处理情况下)。axios不支持jsonp, 所以我们就要使用http-proxy-middleware中间件做代理。现在通过在前端修改 vue-cli 的配置可解决:vue-cli中的 config/index.js 下配置 dev选项的 {proxyTable}:
proxyTable: {    '/api': {        target: '127.0.0.1:8889',  // 真实请求的地址        changeOrigin: true,  // 是否跨域        pathRewrite: {            '^/api': '/static/mock'        }    }}
如果你想在公司的vue项目中实现前后端联调,不需要再使用类似于fiddler charles的抓包代理工具了,你只需要使用proxyTable这个配置项,把你需要请求的后端的服务器地址写在target值里就OK了。解决完跨域问题后,接下来王小闰该想想怎么在一台服务器一个域名下进行联调的问题了。比较常见的做法是前端在本地修改,本地查看,测试好了以后上传到服务器,看看线上环境可不可以,OK的话一切都好;不行就本地接着改,然后在上传。联调完之后,如何将前端打包的项目文件发给后端,这里也需要注意两点:1. css、js和图片等静态文件这时候的静态文件在开发阶段不需要任何考虑,按照你喜欢的相对路径或者相对于项目的根路径的形式写就行了,因为早晚还得交给后端。但是,需要注意:如果你采用 相对项目根路径的书写方式来写你的静态文件路径 时,一定要先和后端商量好,将来项目部署的时候他会把你的前端整个项目放在哪里?如果不是根目录下,你就挂了。比如:你的reset.css的路径是 /exports/styles/common/reset.css ,后端把你前端项目放在了根目录下的 frontEnd 文件夹下, reset.css 文件就报404了。如果后端采用的java,你需要特别注意的是, tomcat的根目录 并不是 webapps 文件,而后端项目默认是部署在 webapps/ROOT 文件下的,所以你如果使用了相对项目根路径的书写方式来写你的静态文件路径时,对不起又是404了。2. ajax后端数据因为现在唯一的一台服务器还是在后端程序猿那里,所以此时你还是可以写绝对路径(域名+请求路径),利用hosts文件来改变域名映射实现联调。土哥有话说看这篇文章的童鞋,不管你是在大公司还是在小公司,都需要知道,并不是说你将dist文件打包发给后端就完事了,就不需要了解leader后面操作的点击部署、合并分支的事儿了。基础命令、拉取分支、构建编译包、copy生产包到服务器、备份资料、启动脚本、灰度发布、等等流程其实都是很有必要了解的。要不然最开始没有这些基础设施、基础组件,谁来搭建+运行呢,毕竟还是需要第一批吃螃蟹的人.即使大公司,也有小团队的,有的小团队不一定遵循大公司那一套自动化部署教程,也有自己玩自己的轮子+工具。就算是大公司, 如果基础架构组的工具做好了,但是没有总监以上的大佬面向公司推广, 这些基础设施不一定能面向公司内部使用。基础设施、基础组件能够面向公司内部大量使用,离不开公司高层领导的支撑、当然也有基础设施团队的辛苦开发、还需要有使用基础组件的机遇和业务场景。总结:就像我之前文章里讲过的,当你处在前后端分离的大浪潮下,做前端的要将眼光放在整个项目上,统筹全局,不要偏安一隅,待在前端的小角落里独自玩耍。一句话,格局要放大,步子要迈开,然后才是低头前行。- END -本号没有留言功能动动手指转发、在看是对我最大的鼓励9bf63670886fb1c5b051335f42995538.png

记得把公号加星标,会第一时间收到通知。

原创不易,如果觉得有点用,希望可以随手转发或者”在看“,拜谢各位老铁。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/397019.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ASP.NET AntiXSS的作用

XSS跨站脚本攻击是指用户输入HTML编码对网站进行跨站攻击。通过使用FCKeditor、FreeTextBox、Rich TextBox、Cute Editor、TinyMCE等等Html编辑器,用户可以输入一些危险字符,注入到网站中,形式XSS。(一般的解决办法是使用BBCode的…

p1358

这是一道二维树状数组模板题。 需要注意的可能只有这些xy有可能为零。那每次输入之后全部,相当于全部向右下角移了一位。 那就直接给代码了呦。 using namespace std; int c[1050][1050],n,m; int i,f; int a1,b1,a2,b2,tx,ty,tk; int ans; int lowbit(int x) {retu…

java中对象的生存期_深入理解Java虚拟机-判断对象是否存活算法与对象引用

我们知道Java中的对象一般存放在堆中,但是总不能让这些对象一直占着内存空间,这些对象最终都会被回收并释放内存,那么我们如何判断对象已经成为垃圾呢?这篇文章会提出两种算法解决这个问题。另外,本文还要谈一谈对象引…

大数据高效复制的处理案例分析总结

一个老客户提出这样的需求,希望将SQLServer中的某个表的数据快速复制到SQLite数据库里面以便进行定期的备份处理,数据表的记录大概有50多万条记录,表有100个字段左右,除了希望能够快速做好外,效率是第一位的&#xff0…

@autowired注解注入为null_Intellij IDEA中Mybatis Mapper自动注入警告的6种解决方案

相信使用Mybaits的小伙伴们一定会经常编写类似如下的代码:可以看到 userMapper 下有个红色警告。虽然代码本身并没有问题,能正常运行,但有个警告总归有点恶心。本文分析原因,并列出解决该警告的几种方案。原因众所周知&#xff0c…

五 Python之socket网络编程

<1>socket概念 socket通常也称作"套接字"&#xff0c;用于描述IP地址和端口&#xff0c;是一个通信链的句柄&#xff0c;应用程序通常通过"套接字"向网络发出请求或者应答网络请求。ocket本质上就是在2台网络互通的电脑之间&#xff0c;架设一个通道…

致敬2016,拥抱2017

2016年5月10号加入现在的团队&#xff0c;到今天2016年12月31号&#xff0c;已经过去了接近8个月。这整个期间&#xff0c;我们团队都只有我一个前端工程师&#xff0c;我从刚开始的忐忑不安、压力极大&#xff0c;到现在基本上手&#xff0c;我们团队做的项目虽然不大&#xf…

你如何在java中获取线程堆_如何在Windows上获取未在控制台中运行的Java进程的线程和堆转储...

问题我有一个Java应用程序&#xff0c;我从控制台运行&#xff0c;然后控制台执行另一个Java进程。我想获得该子进程的线程/堆转储。在Unix上&#xff0c;我可以做akill -3 但是在Windows AFAIK上获取线程转储的唯一方法是在控制台中使用Ctrl-Break。但这只会让我转移父进程&am…

html ie乱码_Java 0基础入门(初识Html)

在学习Java之前&#xff0c;我们需要了解一定的前端知识。毕竟页面才是用户真正看到的&#xff0c;而且也是体现Java后端逻辑结果的地方。学习HTML后&#xff0c;能够制作界面美观大方的静态网站(更复杂的功能需要JavaScript脚本一起来实现)。HTML制作的网页。所需要的Html开发…

常用自动化框架简单的分析与介绍

目前常用的可用于APP自动化测试的框架有以下几个&#xff1a; 1、Monkey是Android SDK自带的测试工具&#xff0c;在测试过程中会向系统发送伪随机的用户事件流&#xff0c;如按键输入、触摸屏输入、手势输入等)&#xff0c;实现对正在开发的应用程序进行压力测试&#xff0c;也…

linux一步一脚印---more、less、head、tail

一、more 文件内容或输出查看命令more 是我们最常用的工具之一&#xff0c;最常用的就是显示输出的内容&#xff0c;然后根据窗口的大小进行分页显示&#xff0c;然后还能提示文件的百分比&#xff1b; [rootlocalhost ~]# more /etc/profile 1、more 的语法、参数和命令&#…

单片机检测stc没反应_我为什么不用STC单片机

写在2019.10.27这属于自己打自己脸&#xff0c;不过&#xff0c;我突然想试试 STC15W108.理由可能有点操蛋&#xff0c;因为STM8S没有 DFN8这样 3x3的封装&#xff0c;而PIC的仿真器太贵。我最后感兴趣的一个STC型号是 STC15F的8脚系列&#xff0c;那是在2010年&#xff0c;然而…

commons-pool

commons-pool组件是使用对象池时都要用到的。他的作用主要是管理对象池&#xff0c; 当我们要用这个组件时&#xff08;比如redis要用到时&#xff09;&#xff0c;只需要实现它的部分接口&#xff0c;比如PooledObjectFactory接口&#xff0c;实现它的创建对象&#xff0c;销毁…

JAVA中CyclLink怎么用_Java多线程基本使用一

1 多线程--初步【1进程比如&#xff1a;QQ、迅雷、360、飞秋...2线程的概念3线程的意义&#xff1a;4.Java程序的运行原理代码是运行在线程中的&#xff0c;如果一个进程没有线程&#xff0c;那么进程就结束了&#xff0c;也就是说一个进程至少要有一个线程当开启一个Java…

指针分析

int *a; int b 4; a &b; //a:b的地址 //*a 取b地址的值&#xff0c;为4 //&a为指针变量的地址 //*(&a)为指针变量储存的地址 即为a int **b &a; //b为指针变量a的地址 //*b为指针变量a所储存的地址 //改变*b(指针变量所储存的地址)即改变了*b的值转载于:http…

live server插件怎么用_分享几个我日常使用的VS Code插件

在这篇文章中&#xff0c;我想介绍一下自己日常使用中最喜欢的Visual Studio Code扩展。大多数时候&#xff0c;我用VS Code编写的是JavaScript应用程序(标准JavaScript、React、Angular、NodeJS……各式各样)。Bracket Pair Colorizer 2这个扩展很不错&#xff0c;可以帮助我搞…

Xtrabackup数据全备份与快速搭建从服务器

Percona Xtrabackup可以说是一个完美的数据备份工具。特别是当数据库的容量达到了一定数量级的时候且存在单表达到几十G的数据量&#xff0c; 很难容忍一些逻辑备份的漫长时间。如单个数据库约200G&#xff0c;单表最大为120G&#xff0c;mysqldump逻辑备份的时间长达20多小时。…

简单的java方法_Java简单实用方法一

整理以前的笔记&#xff0c;在学习Java时候,经常会用到一些方法。虽然简单但是经常使用。因此做成笔记&#xff0c;方便以后查阅这篇博文先说明构造和使用这些方法。1&#xff0c;判断String类型数据是否为空String类型的数据为空&#xff0c;主要为等于null或”“那么只要判断…

Android应用程序开发

第一章 Android应用初体验 1.1应用基础 activity是Android SDK中Activity类的一个具体实例&#xff0c;负责管理用户与信息屏的交互。 应用的功能是通过编写一个个Activity子类来实现的。 布局定义了一系列用户界面对象以及它们显示在屏幕上的位置。组成布局的定义保存在XML文件…