<返回更多

主流开发工具Vue和微软Visual Studio前后端联合调试攻略

2022-03-21    jn人在旅程
加入收藏

引言

应用主流的前端开发工具Vue和后端开发工具微软Visual Studio 2019,进行前后端联合调试,不适为中小型应用的一种常用简便调试方法,现介绍如下。

Vue

主流开发工具Vue和微软Visual Studio前后端联合调试攻略

 

读音/vjuː/,类似view,是一套用于构建用户界面的渐进式JAVAScript框架。Vue自底向上逐层应用,只关注视图层,易于上手,与第三方库或既有项目整合,开发复杂的单页应用SPA。

Vue是目前最流行的前端框架之一,axIOS是Vue中用来与后端交互的工具(类似ajax)。通过axios可以向服务器发送索要数据请求,服务器接收到请求后即会将数据返回给前台。

主流开发工具Vue和微软Visual Studio前后端联合调试攻略

 

使用vue前端项目开发(默认前后端分离),vue-cli脚手架run server,nodejs会启动一个web site,此web site基于node.js实现,如果后端使用java、c#等实现的,此时如何请求后端的数据并进行项目测试?

深入vue-cli脚手架发现,cli脚手架启动的web site默认开启代理功能,可通过设置相关代理信息将请求转发到对应的后端应用程序。

Visual Studio微软集成开发环境

流行的windows平台应用程序集成开发环境,最新版为 Visual Studio 2019基于.NET Framework 4.8 。

调试步骤主要分三步,即先运行vue环境,再进入后端调试环境,第三步是在浏览器中打开网址进行联调。

1、启动vue-cli

按 win+r,输入cmd回车,进入command命令行环境; 进入项目目录,输入npm run dev回车,启动vue-cli

主流开发工具Vue和微软Visual Studio前后端联合调试攻略

 

下图是启动完成之后的内容

主流开发工具Vue和微软Visual Studio前后端联合调试攻略

 

2、 启动Visual Studio,进入调试状态

主流开发工具Vue和微软Visual Studio前后端联合调试攻略

 

3、打开chrome浏览器运行

浏览器地址栏粘贴链接http://localhost:8080进入前端程序主界面,就可以进行调试状态;

主流开发工具Vue和微软Visual Studio前后端联合调试攻略

 

相关调试按钮如下图所示:

主流开发工具Vue和微软Visual Studio前后端联合调试攻略

 

声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>