前端到底怎么调用后端服务的？什么是Vue？怎么调用C#写的后端！前言正文
前言
前端的概念很广，可以直观上理解为直接呈现给用户的网页部分，前端的实现涉及多种编程技术或语言，如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服务的地址是：
http://192.168.0.142:8012/MapService.svc
原本是用于实现地图相关功能的一个服务，现在这个服务里面我给添加了一个函数名为DoWork。给输入参数value赋值一个整数，要求返回一个JSON格式（一种数据交换格式，用于前后端传输数据，一般用{}括起来一个对象，用""括）的对象，里面需要包含属性Value，其值为前端赋予的整数值。
为了阐述的更明白，我将这部分C#的源码贴出来，大家只需要看看它的输入参数和返回的值即可：
public TestData DoWork(int value)
{
TestData myData = new TestData();
myData.Value = value;
return myData;
}
public class TestData
{
public int Value { get; set; }
}
返回的值是一个对象，该对象包含一个int类型的属性Value，在DoWork函数中，我将其值设置为1。通过Web的某种协议可以将返回的myData对象字符序列化为一个JSON格式的字符串，即是这个样子的：
{ "Value": 1 }
2. 代码编写与服务调用
首先去Vue官网下载一个Vue.js文件，然后将其放到项目的根目录下：
下载网址：
https://cn.vuejs.org/v2/guide/installation.html
懒的话，用我的网盘链接下载吧：
创建一个html后缀的文件，将下面的代码赋值粘贴进去：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app"></div>
<script>
new Vue({
el: '#app',
mounted() {
axios
.post('http://192.168.0.142:8012/MapService.svc/DoWork')
.then(res => {
console.log(res)
})
}
})
</script>
</body>
</html>
下面这行代码引入的是Vue.js库文件：
<script src="vue.js"></script>
这行代码引入的是axios：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
head部分其余的代码都是自动生成的标准代码（在VSCode中按!然后回车即可生成）。
现在来看body部分的代码，下面的div标签只是用来与Vue实例进行绑定，与本文要讲解的内容关系不大，了解即可。
<div id="app"></div>
在script标签中，新建了一个vue实例，el表示与id为app的div标签绑定
<script>
new Vue({
el: '#app',
mounted() {
axios
.post('http://192.168.0.142:8012/MapService.svc/DoWork', {
value: 1
})
.then(res => {
console.log(res)
})
}
})
</script>
mounted()函数式一个生命周期函数钩子，表示实例在被挂载后调用，详情见Vue.js官方说明，这里不是重点：
https://cn.vuejs.org/v2/api/index.html
来看axios库的调用，首先我们调用了一个post请求（post主要用于请求数据，其数据不会显示在URL里，即你在浏览器的网址栏上是看不见的），关于Get和Post的区别见W3C网站说明：
https://www.w3school.com.cn/tags/html_ref_httpmethods.asp
post请求里面第一个数据是我们的服务地址，后面跟函数名DoWork，然后传输一个对象，写法与JSON格式类似，属性名后面跟属性值：
.post('http://192.168.0.142:8012/MapService.svc/DoWork', {
value: 1
})
该对象中的值对应了我们前面写后端服务时候的函数形参。之后then语句内的内容表示将返回的结果对象（res）在浏览器的输出栏中输出。保存好代码双击写好的html页面，在Chrome浏览中打开，按F12键，出现调试窗口，单击Console栏：
可以看到，现在浏览器的输出端口已经将返回的对象打印出来，在此处关注第二行的data，可以看到返回对象中有{Value:1}则说明我们调用成功了。
今天的分享到此结束了，欢迎关注我的微信公众号获取更多好玩、有趣实用的编程知识：
扫码关注我，和我一起进步吧~