前言

  1. 前端的概念很广，可以直观上理解为直接呈现给用户的网页部分，前端的实现涉及多种编程技术或语言，如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服务的地址是：

  1. http://192.168.0.142:8012/MapService.svc

image.gif
原本是用于实现地图相关功能的一个服务，现在这个服务里面我给添加了一个函数名为DoWork。给输入参数value赋值一个整数，要求返回一个JSON格式（一种数据交换格式，用于前后端传输数据，一般用{}括起来一个对象，用””括）的对象，里面需要包含属性Value，其值为前端赋予的整数值。
为了阐述的更明白，我将这部分C#的源码贴出来，大家只需要看看它的输入参数和返回的值即可：

  1. public TestData DoWork(int value)
  2.    {
  3.         TestData myData = new TestData();
  4.         myData.Value = value;
  5.         return myData;
  6.     }
  8.     public class TestData
  9.     {
  10.         public int Value { get; set; }
  11.     }

image.gif

  1. 返回的值是一个对象，该对象包含一个int类型的属性Value，在DoWork函数中，我将其值设置为1。通过Web的某种协议可以将返回的myData对象字符序列化为一个JSON格式的字符串，即是这个样子的：
  1. {    "Value": 1}

2. 代码编写与服务调用

  1. 首先去Vue官网下载一个Vue.js文件，然后将其放到项目的根目录下：<br />下载网址：
  1. https://cn.vuejs.org/v2/guide/installation.html

image.gif
前端到底怎么调用后端服务的？什么是Vue？怎么调用C#写的后端！ - 图4image.gif
前端到底怎么调用后端服务的？什么是Vue？怎么调用C#写的后端！ - 图6image.gif
懒的话，用我的网盘链接下载吧：

  1. 链接：https://pan.baidu.com/s/1zbHxCyp7q7GFQoCO2z3MSQ 提取码：hjke
  1. 创建一个html后缀的文件，将下面的代码赋值粘贴进去：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script src="vue.js"></script>
  9.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  10. </head>
  11. <body>
  12.     <div id="app"></div>
  13.     <script>
  14.         new Vue({
  15.             el: '#app',
  16.             mounted() {
  17.                 axios
  18.                     .post('http://192.168.0.142:8012/MapService.svc/DoWork')
  19.                     .then(res => {
  20.                         console.log(res)
  21.                     })
  22.             }
  23.         })
  24. </script>
  25. </body>
  26. </html>

image.gif

下面这行代码引入的是Vue.js库文件：

  1. <script src="vue.js"></script>

image.gif
这行代码引入的是axios：

  1. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

image.gif
head部分其余的代码都是自动生成的标准代码（在VSCode中按!然后回车即可生成）。
现在来看body部分的代码，下面的div标签只是用来与Vue实例进行绑定，与本文要讲解的内容关系不大，了解即可。

  1. <div id="app"></div>

image.gif
在script标签中，新建了一个vue实例，el表示与id为app的div标签绑定

  1. <script>
  2.         new Vue({
  3.             el: '#app',
  4.             mounted() {
  5.                 axios
  6.                     .post('http://192.168.0.142:8012/MapService.svc/DoWork', {
  7.                         value: 1
  8.                     })
  9.                     .then(res => {
  10.                         console.log(res)
  11.                     })
  12.             }
  13.         })
  14. </script>

image.gif

mounted()函数式一个生命周期函数钩子，表示实例在被挂载后调用，详情见Vue.js官方说明，这里不是重点：

  1. https://cn.vuejs.org/v2/api/index.html

image.gif
来看axios库的调用，首先我们调用了一个post请求（post主要用于请求数据，其数据不会显示在URL里，即你在浏览器的网址栏上是看不见的），关于Get和Post的区别见W3C网站说明：

  1. https://www.w3school.com.cn/tags/html_ref_httpmethods.asp

image.gif
post请求里面第一个数据是我们的服务地址，后面跟函数名DoWork，然后传输一个对象，写法与JSON格式类似，属性名后面跟属性值：

  1. .post('http://192.168.0.142:8012/MapService.svc/DoWork', {
  2.         value: 1
  3. })

image.gif

  1. 该对象中的值对应了我们前面写后端服务时候的函数形参。之后then语句内的内容表示将返回的结果对象（res）在浏览器的输出栏中输出。保存好代码双击写好的html页面，在Chrome浏览中打开，按F12键，出现调试窗口，单击Console栏：<br />![](https://cdn.nlark.com/yuque/0/2020/jpeg/739899/1597333043699-aca39e21-4c99-4da3-baa6-9ae5b4945a07.jpeg#align=left&display=inline&height=56&margin=%5Bobject%20Object%5D&originHeight=56&originWidth=593&size=0&status=done&style=none&width=593)![image.gif](https://cdn.nlark.com/yuque/0/2020/gif/739899/1597333043374-43e65015-a193-4a21-83ed-54ef273c0394.gif#align=left&display=inline&height=1&margin=%5Bobject%20Object%5D&name=image.gif&originHeight=1&originWidth=1&size=43&status=done&style=none&width=1)<br />    可以看到，现在浏览器的输出端口已经将返回的对象打印出来，在此处关注第二行的data，可以看到返回对象中有{Value:1}则说明我们调用成功了。

前端到底怎么调用后端服务的？什么是Vue？怎么调用C#写的后端！ - 图16image.gif
今天的分享到此结束了，欢迎关注我的微信公众号获取更多好玩、有趣实用的编程知识：

扫码关注我，和我一起进步吧~

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