目前前后端交互，一般通过http协议、websocket协议来实现。
  
HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写，是用于从万维网(WWW.Word Wide Web)服务器传输超文本到本地浏览器的传送协议。
  
HTTP协议包括客户端和服务端两个实体，客户端发送请求给服务端，服务端返回响应给客户端，在HTTP协议中数据称为资源，可以是html文档，图片，也可以是普通文本
  

  
资源是通过URL定位的，当客户端需要访问服务器资源时，首先需要知道资源的URL，比如打开一个网站，URL的组成部分如下图：
  

  
一、请求：
  
GET /comments?postId=1 HTTP/1.1Host: 11.12.108.32:8090Connection: keep-aliveAccept: application/json, text/javascript, */*; q=0.01dataType: jsonUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36Referer: http://11.12.108.32:8090/views/index.htmlAccept-Encoding: gzip, deflate, brAccept-Language: zh-CN,zh;q=0.9,de;q=0.8id=1603348193982
  
请求行：
  
GET /comments?postId=1 HTTP/1.1
  
请求头：
  
Host: 11.12.108.32:8090Connection: keep-aliveAccept: application/json, text/javascript, */*; q=0.01dataType: jsonUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36Referer: http://11.12.108.32:8090/views/index.htmlAccept-Encoding: gzip, deflate, brAccept-Language: zh-CN,zh;q=0.9,de;q=0.8
  
请求数据：
  
postId=1
  

  
二、响应
  
HTTP/1.1 200Server: nginx/1.10.3Date: Mon, 30 Nov 2020 10:55:29 GMTContent-Type: application/json;charset=UTF-8Transfer-Encoding: chunkedConnection: keep-alivevary: accept-encodingContent-Encoding: gzip{  "code": 1,  "message": "请求成功",  "data": {"name":"张三","age":"26"},}
  
状态行：
  
HTTP/1.1 200
  
消息报头
  
Server: nginx/1.10.3Date: Mon, 30 Nov 2020 10:55:29 GMTContent-Type: application/json;charset=UTF-8Transfer-Encoding: chunkedConnection: keep-alivevary: accept-encodingContent-Encoding: gzip
  
响应消息
  
{  "code": 1,  "message": "请求成功",  "data": {"postId":1,"name":"id labore","email":"Elise@gaid.com"},}
  

  
三、状态码：
  
状态码
说明
1xx
信息
2xx
成功
3xx
重定向
4xx
客户端错误
5xx
服务端错误
  

  
常见的状态码
  
状态码
提示文案
说明
100
Continue
服务器仅接收到部分请求，但是一旦服务器并没有拒绝该请求，客户端应该继续发送其余的请求
200
OK
请求成功
302
Found
所请求的页面已经临时转移至新的 url
304
Not Modified
服务器告诉客户，原来缓冲的文档还可以继续使用
400
Bad Request
服务器未能理解请求，一般来说就是发的请求有问题
401
Unauthorized
请求未经授权
403
Forbidden
服务器收到请求，但是拒绝提供服务
404
Not Found
请求资源不存在
500
Internal Server Error
服务器发生不可预期的错误
502
Bad Gateway
网关错误
503
Server Unavailable
服务器临时过载或宕机
504
Gateway Timeout
网关超时
  
四、请求方法：
  
HTTP1.0及之前定义了三种请求方式：GET、POST和HEAD方法
  
HTTP1.1新增了五种请求方法：OPTIONS、PUT、DELETE、TRACE和CONNECT方法
  
get一般用于获取资源，请求的参数会被拼接到url上
post 一般用于表单提交，上传，保存等
put向指定资源位置上传其最新内容
delete请求服务器删除Request-URL所标识的资源
options用来查询针对请求URI指定的资源支持
head与GET方法一样，只是不返回报文主体部分。用于确认URL的有效性以及资源更新的日期时间等
connect要求在与代理服务器通信时建立隧道，实现用隧道协议进行TCP通信
trace回显服务器收到的请求，主要用于测试或诊断
  

  
五、Content-Type请求的字符编码
  
文本：text/plain、text/html、text/css、text/javascript
图片：image/jpeg、image/png、image/gif、image/svg+xml
音视频：audio/mp4、video/mp4
application/json
application/x-www-form-urlencoded
multipart/form-data
application/xml
  
六、Accept：接收的报文类型
  
类型候选和Content-Type一样，可以有多个值。多个值代表支持这些类型，并指定了得到类型的优先级。*/*表示任意类型
  
jquery的dataType其实设置的就是这个属性
  
Accept: application/json, text/plain, */*Accept-Encoding: gzip, deflate, brAccept-Language: zh-CN,zh;q=0.9,de;q=0.8
 
 

 
 
先在vue项目中配置好路由组件路由 然后写相应组件
 
 
 
 
2 后端 写接口赔路由
 
 
 
 
 
 
第三  解决跨域问题 处理数据交互
 
 
 
 
这样前端就拿到了数据
 
 
转载于:https://www.cnblogs.com/tangda/p/10987082.html

 
 
 
 
Vue界面在前后端交互的过程中使用的是AJAX的方式来进行的数据交互，我们一般来说使用较多的是Vue-resource 以及 axios 这俩个组件来实现Vue的前后端的交互。
 
 
 
 
 
  
vue-resource 和 axios 的共性及区别
 
 
 
 
 
 
 
  
共性：
 1.都是对于AJAX的封装，便于Vue项目来直接的调用完成项目的前后台连接；
 
 
 
 
 
 
 
  
区别：
 1.在Vue1.0中官方推荐使用vue-resource，在Vue2.0的时候，官方推荐使用axios。并且在之后对Vue-resource不再进行维护更新
 
 
 
 
关于Vue-resource和axios在项目中的引入及使用
 
 
 
Vue-resource在项目中的使用
 
 
1，首先是安装组件
	npm  install vue-reource --save   

2.然后是在main.js文件中引入

	import Vue from 'vue';
	import VueResource from 'vue-resource';
	Vue.use(VueResource);

3.最后是在组件中的使用：

	 this.$http.get(url).then((response) => {
            // success
          this.myData = response.body.data;
        },(error) => {
            // error
            console.log(error)
        });
 
 
 
axios在项目中的使用
 
 
1.安装组件
		npm install axios --save
	
	2.然后在main.js文件中引入，axios不能使用use

		import Vue from 'vue';
		import axios from 'axios';
		Vue.prototype.$axios = axios;

	3.在组件中使用

	 this.$axios.get(url).then((response) => {
    	// success
    	this.myData = response.data.data;
  	}, (error) => {
    	// error
   		 console.log(error)
  	});
 
**关于这俩个工具在组件中的使用方式，以上不是唯一写法，还有其他的写法，具体的选择，看个人的习惯吧
 
// 传统写法(vue-resource为例)
		this.$http.get('/someUrl', [options]).then(function(response){
			// 响应成功回调
		}, function(response){
			// 响应错误回调
		});


	// Lambda写法(vue-resource为例)
		this.$http.get('/someUrl', [options]).then((response) => {
			// 响应成功回调
		}, (response) => {
			// 响应错误回调
		});

	//Api的形式(axios为例)
	this.$axios({
		method: 'post',
		url: '/user/12345',
		data: {
			firstName: 'Fred',
			lastName: 'Flintstone'
		}
	});
 
关于这俩个组件的具体参数使用方式
 
Vue-resource的参数
 
 
##axios的参数
 
{
  // `url` 是用于请求的服务器 URL
  url: '/user',

  // `method` 是创建请求时使用的方法
  method: 'get', // 默认是 get

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',

  // `transformRequest` 允许在向服务器发送前，修改请求数据
  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data) {
    // 对 data 进行任意转换处理

    return data;
  }],

  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    // 对 data 进行任意转换处理

    return data;
  }],

  // `headers` 是即将被发送的自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` 是即将与请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  params: {
    ID: 12345
  },

  // `paramsSerializer` 是一个负责 `params` 序列化的函数
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

  // `data` 是作为请求主体被发送的数据
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  // 在没有设置 `transformRequest` 时，必须是以下类型之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属：FormData, File, Blob
  // - Node 专属： Stream
  data: {
    firstName: 'Fred'
  },

  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求话费了超过 `timeout` 的时间，请求将被中断
  timeout: 1000,

  // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false, // 默认的

  // `adapter` 允许自定义处理请求，以使测试更轻松
  // 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
  adapter: function (config) {
    /* ... */
  },

  // `auth` 表示应该使用 HTTP 基础验证，并提供凭据
  // 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

  // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // 默认的

  // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
  xsrfCookieName: 'XSRF-TOKEN', // default

  // `xsrfHeaderName` 是承载 xsrf token 的值的 HTTP 头的名称
  xsrfHeaderName: 'X-XSRF-TOKEN', // 默认的

  // `onUploadProgress` 允许为上传处理进度事件
  onUploadProgress: function (progressEvent) {
    // 对原生进度事件的处理
  },

  // `onDownloadProgress` 允许为下载处理进度事件
  onDownloadProgress: function (progressEvent) {
    // 对原生进度事件的处理
  },

  // `maxContentLength` 定义允许的响应内容的最大尺寸
  maxContentLength: 2000,

  // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
  validateStatus: function (status) {
    return status >= 200 && status < 300; // 默认的
  },

  // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
  // 如果设置为0，将不会 follow 任何重定向
  maxRedirects: 5, // 默认的

  // `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项：
  // `keepAlive` 默认没有启用
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // 'proxy' 定义代理服务器的主机名称和端口
  // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
  // 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: : {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },

  // `cancelToken` 指定用于取消请求的 cancel token
  // （查看后面的 Cancellation 这节了解更多）
  cancelToken: new CancelToken(function (cancel) {
  })
}
 
关于vue-resource和axios更多详情：
 
http://www.cnblogs.com/axl234/p/5899137.html
 
http://www.kancloud.cn/yunye/axios/234845
 
关于是否跨域的问题及服务器端的操作
 
说在前面的： Vue项目在开发的时候，是处于本地环境，访问服务器数据，由于域名的不一样，所以会出现跨域问题，而AJAX在跨域访问的时候是有限制的，所以会出现跨域问题。但是，生产时候，将Vue项目打包文件和服务器webAPI一起发布的在同一个地方的时候，将不会出现跨域问题。
 
 
 
解决跨域问题;
 
 
针对.NET webAPI
 
可以通过在服务器端进行设置，来实现跨域文集的解决

在web.config文件下载的<system.webServer>标签下，添加

<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
</customHeaders>
</httpProtocol>

然后在APIController添加一个OPTIONS的方法，但无需返回任何东西。

public string Options()
{
return null; // HTTP 200 response with empty body
}

【备注】这个功能也可以进行一些研究，设计成Filter的形式可能就更好了。
 
针对Java程序
 
Java程序处理跨域的时候，需要在返回响应的时候，为响应头加上几个属性：

	 HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    response.setHeader("Access-Control-Max-Age", "3600");//缓存设置
    response.setHeader(
            "Access-Control-Allow-Headers",
            "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires,                                  Content-Type, X-E4M-With");//设置自定义参数
 
 
 
最后
 
 
Vue访问数据的时候，通过ajax来访问，需要一个url，至于服务器端的通过什么语言来进行编写的，对于Vue来说是没有影响的，只要前后端的协议规范一致就是OK的。
 
关于Java端与Vue连接 和 .net与Vue连接。
 
Vue前端项目的代码是不需要做专门处理的，url地址对应就OK。跨域处理是在后台服务器进行的。

Vue前后端交互
 


 
文章目录
 
Vue前后端交互
引入：Vue前后端交互
一、基于jQuery的ajax前后端交互模式
前端
后端
   
二、使用fetch前后端交互
fetch基本用法与请求参数
fetch基本用法
fetch请求参数
    
    
fetch前后端交互
前端
后端
   
   
三、前后端交互之axios
前端
后端
   
参考资料
 

 
引入：Vue前后端交互
 
一般在项目中结合async/await语法使用axios调用接口
 
一、基于jQuery的ajax前后端交互模式
 
前端
 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="./js/vue.js"></script>
</head>

<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3" style="margin-top: 20px">

            <div id="app">
                <button @click="handle_load">点我加载数据</button>
                <hr>
                拿回来的数据是：{{name}}
            </div>
        </div>
    </div>
</div>
</body>

<script>

    var vm = new Vue({
        el: '#app',
        data: {
            name:'lqz'
        },
        methods: {
            handle_load(){
                $.ajax({
                    url:'http://127.0.0.1:5000/',
                    type:'get',
                    success:data=> {
                        this.name=data
                    }
                })
            }
        },
        mounted() {
            //跟后端交互，写在这，而不要使用button
            console.log('当前状态：mounted')
            this.handle_load()
        },
    })
</script>
 
后端
 
from flask import Flask, make_response

app = Flask(__name__)


@app.route('/')
def index():
    res = make_response('hello world')
    # 运行所有域向我发请求(解决跨域问题)
    res.headers['Access-Control-Allow-Origin']='*'
    return res
if __name__ == '__main__':
    app.run()
 
二、使用fetch前后端交互
 
更加简单的数据获取方式，功能更强大、更灵活，可以看做是的升级版
 
fetch基本用法与请求参数
 
fetch基本用法
 
语法结构
 
fetch(url).then(fn2)
		  .then(fn3)
		  ...
		  .cach(fn)
 
基本用法
 
fetch('/abc').then(data=>{
	return data.text();
}).then(ret=>{
	//这里得到的才是最终的数据
	console.log(ret);
})
 
fetch请求参数
 
常用配置选项
 
 
 
method（String）：HTTP请求方法，默认为GET（GET、POST、PUT、DELETE）
 
 
body（String）：HTTP的请求参数
 
 
headers（Object）：HTTP的请求头，默认为{}
 
 
fetch前后端交互
 
前端
 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="./js/vue.js"></script>
</head>
<body>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3" style="margin-top: 20px">

            <div id="app">
                <ul>
                    <li v-for="film in films_list">
                        <img :src="film.poster" alt="" width="60px" height="80px">
                        <span>{{film.name}}</span>
                        <hr>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            films_list: []
        },
        methods: {
            handle_load() {
                fetch('http://127.0.0.1:5000/home').then(data => data.json()).then(data => {
                    console.log(data)
                    if (data.status == 0) {
                        this.films_list = data.data.films
                    } else {
                        alert('加载出错')
                    }
                })
            }
        },
        mounted() {
            //跟后端交互，写在这，而不要使用button
            console.log('当前状态：mounted')
            this.handle_load()
        },
    })
</script>
 
后端
 
from flask import Flask, make_response

app = Flask(__name__)


@app.route('/')
def index():
    res = make_response('hello world')
    # 运行所有域向我发请求(解决跨域问题)
    res.headers['Access-Control-Allow-Origin']='*'
    return res
if __name__ == '__main__':
    app.run()
 
三、前后端交互之axios
 
axios的响应结果
 
data：实际响应回来的数据
headers：响应头信息
status：响应状态码
statusText：响应状态信息
 
前端
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/vue.js"></script>

</head>
<body>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3" style="margin-top: 20px">

            <div id="app">
                <ul>
                    <li v-for="film in films_list">
                        <img :src="film.poster" alt="" width="60px" height="80px">
                        <span>{{film.name}}</span>
                        <hr>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

</body>

<script>

    var vm = new Vue({
        el: '#app',
        data: {
            films_list: []
        },
        methods: {
            handle_load() {
                axios.get('http://127.0.0.1:5000/home').then(data => {
                    //data.data才是后端响应的数据
                    console.log(data)
                    if (data.data.status == 0) {
                        this.films_list = data.data.data.films
                    } else {
                        alert('加载出错')
                    }
                })

            }
        },
        mounted() {
            //跟后端交互，写在这，而不要使用button
            console.log('当前状态：mounted')
            this.handle_load()
        },
    })
</script>

</html>
 
后端
 
from flask import Flask, make_response

app = Flask(__name__)


@app.route('/')
def index():
    res = make_response('hello world')
    # 运行所有域向我发请求(解决跨域问题)
    res.headers['Access-Control-Allow-Origin']='*'
    return res
if __name__ == '__main__':
    app.run()
 
参考资料
 
CSDN，点我进入