前端到底怎么调用后端服务的？什么是Vue？怎么调用C#写的后端！

最新推荐文章于 2024-07-30 19:04:24 发布
最新推荐文章于 2024-07-30 19:04:24 发布
阅读量7.1k 收藏 67
点赞数 8
分类专栏： WebGIS 文章标签： 前端 后端 前后端交互 Vue axios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42545675/article/details/107993828
版权
本文介绍了前端如何使用Vue.js和axios调用C#编写的后端服务。通过示例代码展示了如何配置和发起POST请求，以及如何处理返回的JSON数据。读者将了解到Vue.js的基本应用和前后端交互的原理。
摘要由CSDN通过智能技术生成

扫码_搜索联合传播样式-白色版.png

前言

    前端的概念很广，可以直观上理解为直接呈现给用户的网页部分，前端的实现涉及多种编程技术或语言，如HTML、CSS、JavaScript、Vue.js、ajax等，它们只需要一个浏览器即可运行。但是有时候前端网页需要的某些功能不好直接在前台（浏览器）中实现，这时候需要借助某种后端编程语言如Java、Python、PHP、C#等，可以在本地服务器上编写代码实现该功能，然后作为一种服务提交给前端进行调用。那么问题来了，前端究竟是怎么调用后端服务的呢？和我一起来一探究竟吧！

正文

1. 工具准备

   你至少需要一个Chrome浏览器（用于页面调试），一个集成开发环境（IDE），对于IDE可以用如Visual Studio Code（用于文本编辑）。此外我们需要一个前端框架（如Vue）和一个后端服务地址。下面简要说明一下Vue与本文用到的后端服务地址：

   Vue是目前最流行的前端框架之一，axios是Vue中用来与后端交互的工具（类似于ajax，一种前后端交互工具）。简单来说，通过axios可以向服务器发送索要数据的请求，服务器接收到请求后即会将数据返回给前台（浏览器）。这也是本文采用的前端工具。不用太担心，本文不会涉及太多Vue知识，调用Vue.js和axios也十分简单，仅需要两行代码的引用。

    本文使用的后端服务是用C#编写的，我们暂时不用管具体的C#代码以及它是如何发布服务的（后面我会再写一篇文章详细阐述如何利用将C#编写的代码发布成一个服务供前端调用）。现在你只需要知道我们发布的服务在哪里，叫什么名字即可。

    不论是用什么语言发布的后端服务，最后都是返回一个网址，前端程序员拿着这个网址，然后输入一些参数即可调用后端服务。现在我写的这个Web服

最低0.47元/天 解锁文章
爱吃柚子的梨
关注
  • 8
    点赞
  • 踩
  • 67
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
前端调用后端的写法
wyqwilliam的博客
11-08 3211
前端代码： <div v-if="vmCheckItem.installType === '自动安装'"> <!--<FormItem :label="$t('用户名：')" prop="email" >--> <!--<Input
一文理解前端如何调用后端(java)方法
wangyang857的博客
05-02 1241
这里针对的是 java 后端项目中在 controller 文件夹中的类文件，这类文件的后缀一般都会带有 controller，很容易辨认，前端调用的方法也都是这类文件中的方法，如图：初学者不必纠结代码语法，大致能看懂就行，主要是理解调用的模版格式，文章仓促而为，或许存在问题，望大家多多海涵指教~~~~
Web开发：用C#的逻辑理解VUE语法（VUE + Webapi小白开发笔记）
m0_67412019的博客
07-30 1008
this.loadData = res[0].result//获取到result1（0）返回的结果。Promise.all([request1])//等待接口响应。
C#+Vue实现文件的前后端传输完整版（附完整版代码）
monkey_wei的博客
08-06 1万+
最近笔者也遇到了这样的一个需求，页面上传一张图片给后台，后台存储在一个文件夹中，以便后续在调用该图片。 我也看了很多很多的博客，大都是一半都在说前端的事情 ，一半都在说后端的事情，没有很好的衔接在一起，经过一下午的研究，笔者终于实现了该功能。下面就有笔者慢慢的说吧。 第一步：在Vue中创建一个页面用于图片上传。 <template> <div class="Thisform"> <el-form ref="form" :model="form" label-wid
前端页面自定义调用后端函数
lmp5023的博客
07-26 1633
前端页面自定义调用后端函数 个人认为在当前页面对应的控制器对应的方法里定义函数也是可以这样调用的
前台调用后台函数
weixin_34306593的博客
07-31 149
调用 var b = $ajax("WebApplication1._Default.GetDataSet", ["23"]); js：/*方法全名，参数，类所在的程序集名称（当方法类所在的命名空间不是程序集名称时请传参数来）*/function $ajax(paramMethod, paramValue, paramAssemblyName) { if (!paramMethod) {...
后端返回Html页面前端vue,【Vue】vue获取到了后端数据，如何给其换行？
weixin_29246195的博客
06-04 1920
已获取到数据并在页面上显示，但是是一段文字效果，想问下，如何才能给文字换行？HTML 代码获取后端数据代码回答让后端返回给你带标签的形式：1.xxx2.xxx要是前端处理的话我认为不合理。虽然前端也能处理。首先后端给你的内容应该是动态的，也就是这段文本是动态生成的。那么这段文本的来源开始哪里？？我猜测应该是类似从富文本编辑器中“用户”去编写完了传给后端的。传的时候应该是自带标签的。不然要是写死的文...
后端基于SpringBoot、前端vue搭建的博客系统myblog-vue.zip
05-19
【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、...
vue前端接收后端文件流进行下载
weixin_47148261的博客
11-24 2355
vue前端接收后端文件流进行下载
后端基于Java，前端基于vue的机房排课管理系统
最新发布
08-14
【项目资源】：包含前端、后端、移动开发、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源，毕业设计等各种技术项目的源码。包括C++、Java、python、web、C#、EDA等项目的源码。 【适用人群】：...
C#-Vue调用face++进行人脸对比
09-04
稍微修改下可直接应用在项目中。
前端如何调用后端接口？有哪几种方式？
热门推荐
xiaoxijing的博客
01-09 5万+
一般来讲，前端不会给后端接口，而是后端给前端接口的情况比较普遍。一些人可能不理解接口和前端开发的关系，其实不合适的接口设计会极大地影响用户的页面体验。那么今天就跟着我一起来看看，前端如何调用后端接口？有哪几种方式？ 首先，要弄清楚前端提供一个接口或者调用后台接口，那么这个接口具体指什么？网上用户上传图片作为头像这个需求需要后台人员处理，当用户登录 修改自己个人信息的时候，上传了头像。此时，后台处...
前端js调用后端API获取数据的三种方法（2022.7.25）
I have a dream, here my dreams come true!
07-25 4万+
js调用后台API进行http请求的三种方法（get-post)
vue 2.0-.net-c# 如何实现前端调用webapi后端方法
qq_34417247的博客
06-25 430
使用软件.net core vue2.0前端, 后端.net core webapi 6.0版本。注意事项如果调用接口发现200 的话就表示有可能后端给的数据类型和你前端要的数据类型不对。安装有关于axios的包 引用好import axios from "axios";方法有很多种我现在列举的是一种本人实现了并且可用的方法。这时候注意调整就可以了。
终于找到了，开源的Vue3+.NET6通用管理后台！
dotNET跨平台
06-22 2380
据说80%的.NET项目都是管理后台，然而能用上Vue3+.NET6的管理后台并不多见。这里分享一套Vue3+ Axios+ TS+ Vite +ElementUI Plus+ .NET 6 WebAPI+ JWT+ SqlSugar的前后端分离架构的通用管理后台源码+数据库脚本，还有与之配套录制的一组视频教程，全部打包免费分享！下图扫码(或加微信zhaoxi005)进...
前端请求后端的几种方式
m0_61820867的博客
07-24 7922
最近参考了几篇博客，做一个个人总结前端如何调用后端的服务（前端如何请求后端）
vue脚手架基础demo_vue 脚手架 demo
2401_84446919的博客
04-29 191
{{Msg}}{{Msg}}{{Msg}}个人工资计算器基本工资：岗位工资：月度奖金：综合补贴：扣款金额：应发工资：{{parseInt(a1)+parseInt(a2)+parseInt(a3)+parseInt(a4)-parseInt(a5)}}元文字颜色背景颜色文字大小边框边框圆角居中风云·雄霸天下登录/注册账号:密码:二次密码:注册账号:密码:登录```
VUE进行前后端交互
young_man2的博客
03-22 8620
vue前后端访问
vue3+vite项目使用WebSocket，WebSocket地址怎么填写？C# asp.net core后端怎么调用？
05-26
在Vue3 + Vite项目中使用WebSocket可以通过`WebSocket`对象来实现，WebSocket的地址需要填写后端的WebSocket服务地址。你可以在Vue的组件中使用WebSocket对象，示例代码如下： ```javascript // 创建WebSocket对象，使用后端WebSocket服务地址 const socket = new WebSocket('ws://localhost:5000/ws'); // 监听WebSocket的打开事件 socket.addEventListener('open', (event) => { console.log('WebSocket已连接'); }); // 监听WebSocket的消息事件 socket.addEventListener('message', (event) => { console.log('接收到消息：', event.data); }); // 监听WebSocket的关闭事件 socket.addEventListener('close', (event) => { console.log('WebSocket已关闭'); }); // 发送消息 socket.send('Hello WebSocket!'); ``` 在C# asp.net core后端中，可以使用`Microsoft.AspNetCore.WebSockets`包来实现WebSocket服务。示例代码如下： ```csharp // 添加WebSocket中间件 app.UseWebSockets(); // 注册WebSocket处理器 app.Use(async (context, next) => { if (context.WebSockets.IsWebSocketRequest) { WebSocket webSocket = await context.WebSockets.AcceptWebSocketAsync(); // 处理WebSocket消息 await HandleWebSocketAsync(webSocket); } else { await next(); } }); // 处理WebSocket消息的方法 async Task HandleWebSocketAsync(WebSocket webSocket) { byte[] buffer = new byte[1024 * 4]; WebSocketReceiveResult result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None); while (!result.CloseStatus.HasValue) { // 处理WebSocket消息 string message = Encoding.UTF8.GetString(buffer, 0, result.Count); Console.WriteLine($"接收到消息：{message}"); // 发送WebSocket消息 byte[] messageBytes = Encoding.UTF8.GetBytes($"Echo: {message}"); await webSocket.SendAsync(new ArraySegment<byte>(messageBytes), WebSocketMessageType.Text, true, CancellationToken.None); // 继续接收WebSocket消息 result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None); } // 关闭WebSocket连接 await webSocket.CloseAsync(result.CloseStatus.Value, result.CloseStatusDescription, CancellationToken.None); } ``` 注意：在使用WebSocket时，需要确保后端WebSocket服务地址正确，且前后端的WebSocket协议一致。例如，如果前端使用的是`ws`协议，则后端也需要使用`ws`协议；如果前端使用的是`wss`协议，则后端也需要使用`wss`协议。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值