VUE进行前后端交互

已于 2023-03-22 15:07:48 修改
阅读量7.6k 收藏 54
点赞数 1
文章标签： vue.js javascript 前端
于 2023-03-22 15:04:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/young_man2/article/details/129667039
版权

目录

一、 跨域

1. 什么是跨域？

2. 什么是本域？

3. 浏览器请求的三种报错

二、SpringBoot解决跨域问题+其他前后端跨域请求解决方案

1. SpringBoot上直接添加@CrossOrigin

2. 处理跨域请求的Configuration

3. 采用过滤器的方式

3.1 方式一

 3.2 方式二

4. 其他解决方案---NGINX反向代理

三、VUE的前后端交互

1. 前后端交互模式

1.1 传统的交互方式

1.2 传统的URL

1.3RESTFUL风格的URL

2. Promise相关概念与使用

2.1 promise使用的优势

2.2 promise的基本用法

2.3 then参数的函数返回值

2.4 Promise常用API

2.5 Fetch接口调用

2.5.1 fetch的基本语法

2.5.2 fetch请求参数

2.6 Axios进行接口调用

2.6.1 axios基本用法

2.6.2 axios常用API

2.7 asyns/await接口调用

2.7.1 async/await的基本用法

参考文章：(8条消息) 三、vue前后端交互（轻松入门vue）_vue如何和后端交互_莫逸风的博客-CSDN博客

一、 跨域

1. 什么是跨域？

在了解什么是跨域的时候，我们首先要了解一个概念，叫同源策略，什么是同源策略呢，就是我们的浏览器出于安全考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。

2. 什么是本域？

本域指的是同协议、同端口、同域名

3. 浏览器请求的三种报错

① 请求未发送

② 请求发送后，服务器发现不一样，服务器未反应。

③ 请求发送，服务器有反应，数据返回的时候，浏览器发现不对，被拦截。

二、SpringBoot解决跨域问题+其他前后端跨域请求解决方案

1. SpringBoot上直接添加@CrossOrigin

在Controller层直接添加@CrossOrigin注解就可以解决

2. 处理跨域请求的Configuration

CrossOriginConfig.java
继承WebMvcConfigurerAdapter或者实现WebMvcConfigurer接口

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

/**
 * AJAX请求跨域
 * @author Mr.W
 * @time 2018-08-13
 */
@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {
    static final String ORIGINS[] = new String[] { "GET", "POST", "PUT", "DELETE" };
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMethods(ORIGINS)
                .maxAge(3600);
    }
}

3. 采用过滤器的方式

3.1 方式一

 @Component
public class CORSFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse) response;
        res.addHeader("Access-Control-Allow-Credentials", "true");
        res.addHeader("Access-Control-Allow-Origin", "*");
        res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");
        res.addHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN");
        if (((HttpServletRequest) request).getMethod().equals("OPTIONS")) {
            response.getWriter().println("ok");
            return;
        }
        chain.doFilter(request, response);
    }
    @Override
    public void destroy() {
    }
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }
}

 3.2 方式二

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpMethod;
import org.springframework.http.HttpStatus;
import org.springframework.http.server.reactive.ServerHttpRequest;
import org.springframework.http.server.reactive.ServerHttpResponse;
import org.springframework.web.cors.reactive.CorsUtils;
import org.springframework.web.server.ServerWebExchange;
import org.springframework.web.server.WebFilter;
import org.springframework.web.server.WebFilterChain;
import reactor.core.publisher.Mono;


/**
 * @author JiaweiWu
 * @create 2018/3/22.
 */
@Configuration
public class RouteConfiguration {
    //这里为支持的请求头，如果有自定义的header字段请自己添加（不知道为什么不能使用*）
    private static final String ALLOWED_HEADERS = "x-requested-with, authorization, Content-Type, Authorization, credential, X-XSRF-TOKEN,token,username,client";
    private static final String ALLOWED_METHODS = "*";
    private static final String ALLOWED_ORIGIN = "*";
    private static final String ALLOWED_Expose = "*";
    private static final String MAX_AGE = "18000L";

    @Bean
    public WebFilter corsFilter() {
        return (ServerWebExchange ctx, WebFilterChain chain) -> {
            ServerHttpRequest request = ctx.getRequest();
            if (CorsUtils.isCorsRequest(request)) {
                ServerHttpResponse response = ctx.getResponse();
                HttpHeaders headers = response.getHeaders();
                headers.add("Access-Control-Allow-Origin", ALLOWED_ORIGIN);
                headers.add("Access-Control-Allow-Methods", ALLOWED_METHODS);
                headers.add("Access-Control-Max-Age", MAX_AGE);
                headers.add("Access-Control-Allow-Headers", ALLOWED_HEADERS);
                headers.add("Access-Control-Expose-Headers", ALLOWED_Expose);
                headers.add("Access-Control-Allow-Credentials", "true");
                if (request.getMethod() == HttpMethod.OPTIONS) {
                    response.setStatusCode(HttpStatus.OK);
                    return Mono.empty();
                }
            }
            return chain.filter(ctx);
        };
    }
}

1. ServerWebExchange的注释： ServerWebExchange是一个HTTP请求-响应交互的契约。提供对HTTP请求和响应的访问，并公开额外的服务器端处理相关属性和特性，如请求属性。

2. 

4. 其他解决方案---NGINX反向代理

server {
        listen       80;
        server_name  abc.com;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;

        location /client { #访问客户端路径
            proxy_pass http://localhost:81;
            proxy_redirect default;
        }
        location /apis { #访问服务器路径
            rewrite  ^/apis/(.*)$ /$1 break;
            proxy_pass   http://localhost:82;
       }
}

三、VUE的前后端交互

1. 前后端交互模式

1.1 传统的交互方式

原生AJAX、基于jQuery的ajax、fetch、axios

1.2 传统的URL

格式：schema://host:port/path?query#fragment

schema：协议，例如http、https、ftp等。
host：域名或者IP地址。
port：端口，http默认端口80，可以省略。
path：路径，例如/abc/a/b/c
query：查询参数，例如uname=lisi&age=12
fragment：锚点（哈希Hash），用于定位页面的某个位置

1.3RESTFUL风格的URL

HTTP请求方式

  1. GET 查询
  2. POST 添加
  3. PUT 修改
  4. DELETE 删除

2. Promise相关概念与使用

2.1 promise使用的优势

Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息。

  • 可以避免多层异步调用嵌套问题（回调地域）
  • Promise对象提供了简介的API，使得控制异步操作更加容易

2.2 promise的基本用法

  • 实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务。

  • resolve和reject两个（方法）参数用于处理成功和失败两种情况，并通过p.then获取处理结果。

var p = new Promise(function(resolve,reject){
	//成功时调用resolve()
	//失败时调用reject()
});
p.then(function(ret){
	//从resolve得到正常结果
},function(ret){
	//从reject得到错误信息
});

2.3 then参数的函数返回值

2.3.1 返回实例对象

p.then(function(ret){
    //返回一个实例对象，这个实例对象用于调用下一个then
    return new Promise();
}).then(...)

？？？在上面也就是如果目前获取了对象就相当于传到了ret中，下一步then中ret则可以调用其中的数据或者其他方法？？？

2.3.2 返回普通值

返回的普通值会直接传递给下一个then，通过then函数中函数的参数接收该值（底层会对返回的普通值封装为一个Promise使得能够继续调用then）

p.then(function(ret){
    
    return "hahah";
}).then(function(ret){
    alter(ret); //这里的输出值就是 hahah
}

2.3.3 基于promise请求ajax的demo

<script>
    //Promise基本使用，原生ajax
    function getText(url) {
        var p = new Promise(function (resolve, reject) {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                //readyState表示文档状态
                if (xhr.readyState != 4) return;
                if (xhr.readyState == 4 && xhr.status == 200){
                    //处理正常情况
                    resolve(xhr.responseText);
                }else {
                    reject('服务器错误');
                }
            };
            xhr.open('get',url);
            xhr.send(null);
        });
        return p;
    }
    //链式调用解决回调地狱,return一个新的调用就可以继续调用新的then()了。
    getText('http://localhost:8088/saymo').then(
        function (data) {
            alert(data);
            return  getText('http://localhost:8088/sayyi');
        },function (info) {
            alert(info);
        }
    ).then(
        function (data) {
            alert(data);
            return getText('http://localhost:8088/sayfeng')
        }
    ).then(
        function (data) {
            alert(data);
        }
    );
</script>

2.4 Promise常用API

2.4.1 实例方法

1. p.then()  #输出执行结果

2. p.catch()  #捕获异常

3. p.finally() #无论正常还是异常都会执行

<script>
    function foo() {
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                //resolve(123)//正常情况
                reject("出错了");//错误情况
            },1000)
        })
    }
    foo().then(function (data) {
        alert(data);
    }).catch(function (data) {
        alert(data);
    }).finally(function () {
        alert("结束了")
    })
    //与上面效果相同
    foo().then(function (data) {
        alert(data);
    },function (data) {
        alert(data);
    }).finally(function () {
        alert("结束了")
    })
</script>

2.4.2 对象方法

Promise.all()  #并发处理多个异步任务，只有所有任务都执行完成才可以得到结果

Promise.race() #并发处理多个异步任务，只要有一个执行完成就可以得到结果

<script>
    function getText(url) {
        var p = new Promise(function (resolve, reject) {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                //readyState表示文档状态
                if (xhr.readyState != 4) return;
                if (xhr.readyState == 4 && xhr.status == 200){
                    //处理正常情况
                    resolve(xhr.responseText);
                }else {
                    reject('服务器错误');
                }
            };
            xhr.open('get',url);
            xhr.send(null);
        });
        return p;
    }

    var p1 = getText("http://localhost:8088/saymo");
    var p2 = getText("http://localhost:8088/sayyi");
    var p3 = getText("http://localhost:8088/sayfeng");

    //result是一个数组形式的三个数据，顺序和p1,p2,p3顺序相同
    Promise.all([p1,p2,p3]).then(function (result) {
        alert(result);
    })
    //result返回一个数据，最快返回的一个
    Promise.race([p1,p2,p3]).then(function (result) {
        alert(result);
    })
</script>

2.5 Fetch接口调用

还有一种更加简便的方法，就是使用fetch接口进行调用，这个是基于Promise实现的

2.5.1 fetch的基本语法

1. 语法结构

fetch(url).then(fn2)
		  .then(fn3)
		  ...
		  .cach(fn)

2. 基本用法

fetch('/abc').then(data=>{
	return data.text();
}).then(ret=>{
	//这里得到的才是最终的数据
	console.log(ret);
})

2.5.2 fetch请求参数

1. 常用配置选项

method（String）：HTTP请求方法，默认为GET（GET、POST、PUT、DELETE）

body（String）：HTTP的请求参数

headers（Object）：HTTP的请求头，默认为{}

2. get请求参数传递

<script>
    fetch('http://localhost:8088/sayHi?name="莫逸风',{
        method:'get'
    }).then(function (data) {
        return data.text();
    }).then(function (data) {
        alert(data);
    });
</script>

3. post请求参数传递

参数form表单形式

fetch('http://localhost:8088/login',{
        method:'post',
        body:,
        headers:{
            'Content-Type':'application/x-www-form-urlencoded',

        // Content-Type还有下面三种形式
        //1.  multipart/form-data
        //2.  application/json
        //3.  text/xml 
        }
    }).then(function (data) {
        return data.text();
    }).then(function (data) {
        alert(data);
    })

参数json表单形式

fetch('http://localhost:8088/login',{
        method:'post',
        body:JSON.stringify({
            name:'莫逸风',
            pass:'1234',
        }),
        headers:{
            'Content-Type':'application/json',
        }
    }).then(function (data) {
        return data.text();
    }).then(function (data) {
        alert(data);
    });

4. 返回响应类型

text()：将返回体处理成字符串类型

json()：返回结果和JSON.parse(responseText)一样

2.6 Axios进行接口调用

axios（官网：https://github.com/axios/axios）是一个基于Promise用于浏览器和node.js的HTTP客户端

它具有以下特征：

  • 支持浏览器和node.js
  • 支持promise
  • 能拦截请求和相应
  • 自动转换JSON数据

2.6.1 axios基本用法

//去github下载文件，此js位于axios-master\dist
<script src="axios.js"></script>
<script>
    axios.get('http://localhost:8088/saymo').then(function (ret) {
        //data属性是固定的用法,用于获取后台的实际数据
        alert(ret.data)
    })
</script>

2.6.2 axios常用API

  • get：查询数据
  • post：添加数据
  • put：修改数据
  • delete：删除数据

1. get传递参数

通过URL传递参数

axios.get('http://localhost:8088/sayhi?name=莫逸风').then(function (ret) {
        alert(ret.data)
    })

通过params传递参数

axios.get('http://localhost:8088/sayhi',{
        params:{
            name:"莫逸风"
        }
    }).then(function (ret) {
        //data属性是固定的用法,用于获取后台的实际数据
        alert(ret.data)
    })

2. post传递参数

通过对象传递参数，默认为json格式

axios.post('http://localhost:8088/login',{
        name:"莫逸风",
        pass:"1234",
    }).then(function (ret) {
        //data属性是固定的用法,用于获取后台的实际数据
        alert(ret.data)
    })

通过URLSearchParams传递参数

var param = new URLSearchParams();
param.append('name','莫逸风');
param.append('pass','12345');
    axios.post('http://localhost:8088/login',param).then(function (ret) {
        //data属性是固定的用法,用于获取后台的实际数据
        alert(ret.data)
    })

3. axios的响应结果

  • data：实际响应回来的数据
  • headers：响应头信息
  • status：响应状态码
  • statusText：响应状态信息
axios.post('http://localhost:8088/login',param).then(function(ret){
	console.log(ret);//所有数据都包含在此对象中
	//对于json形式的响应数据可以直接获取，不需要转换
	alert(ret.data.name);
})

4. axios的全局配置

axios.defaults.timeout = 3000;  //超时时间
//默认地址，再写请求的时候只需要写后面的路由就行了
axios.defaults.baseURL = 'http://localhost:3000/app';
axios.defaults.headers['mytoken']='aqwerwqwerqwer2ewrwe23eresdff23'//设置请求头

5. axios拦截器

请求拦截器

//在这里就是在请求之前设置了拦截器，用于获取网页http://localhost:8088/
axios.interceptors.request.use(function (config) {
        config.baseURL = "http://localhost:8088/";
        alert(config.url);
        return config;
    },function (err) {
        console.log(err);
    })

    axios.get('sayhi?name=莫逸风').then(function (ret) {
        //data属性是固定的用法,用于获取后台的实际数据
        alert(ret.data)
    })

响应拦截器

axios.interceptors.response.use(function (res) {
        var data = res.data;
        return data;
    },function (err) {
        console.log(err);
    })

    axios.get('sayhi?name=莫逸风').then(function (res) {
        //data属性是固定的用法,用于获取后台的实际数据
        alert(res)
    })

2.7 asyns/await接口调用

2.7.1 async/await的基本用法

  • async/await是ES7引入的语法，可以更加方便的进行异步操作

  • async关键字用于函数上（async函数的返回值是Promise实例对象）

  • await关键字用于async函数中（await可以得到异步的结果）

<script src="axios.js"></script>
<script>
    axios.defaults.baseURL = 'http://localhost:8088/';
    async function queryData(){
        var ret = await axios.get('saymo');
        //alert(ret.data);
        return ret.data;
    }
    queryData().then(function (data) {
        alert(data);
    });
</script>

异步请求

<script>
    axios.defaults.baseURL = 'http://localhost:8088/';
    async function queryData(){
        var ret = await axios.get('saymo');
        alert(ret.data);
        var ret1 = await axios.get('sayyi');
        alert(ret1.data);
        var ret2 = await axios.get('sayfeng');
        return ret2.data;
    }
    queryData().then(function (data) {
        alert(data);
    });
</script>
young_man2
关注
  • 1
    点赞
  • 踩
  • 54
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue最简单的前后端交互示例详解
12-09
一、学习 vue 面临的问题 最近想学一门前端技术防身，看到博客园中写 vue 的多，那就 vue 吧。都说 vue 的官方教程写得好，所以我就从官方教程开始学习。官方教程说“Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。”但是这个概念是个什么鬼？还是让人一头雾水嘛。而且我一开始也没有搞清楚 vue 的定位，只知道它是一个前端库，但是确实不知道它的优势是什么，还以为它是一个学会就能一劳永逸的万能的框架呢。官方教程一开始就讲怎么绑定页面上的元素和 JavaScript 中的数据，而且是双向绑定，
vue前后端分离端口号代理配置
weixin_42981419的博客
03-21 2935
vue cli3.x 使用方式： 在vue.config.js加入 devServer: { proxy: 'http://localhost:8080' } 前端直接axios 调用方式： 官网：https://cli.vuejs.org/zh/config/#devserver ...
基于SpringBoot+Vue实现前后端交互功能（详解Vue框架机制）
最新发布
a910247的博客
03-26 2360
Vue框架知多少？Vue.js（通常简称为Vue）是一种流行的JavaScript前端框架，用于构建交互式的用户界面和单页面应用（SPA）。Vue由尤雨溪（Evan You）于2014年创建，并于同年正式发布。它的设计目标是通过尽可能简单的API提供高效的响应式数据绑定和组件化的视图组织方式。
后端工程师快速使用vue和Element
m0_74212228的博客
03-18 1198
通过我们学习的html+css+js已经能够开发美观的页面了，但是开发的效率还有待提高，那么如何提高呢？我们先来分析下页面的组成。一个完整的html页面包括了视图和数据，数据是通过请求 从后台获取的，那么意味着我们需要将后台获取到的数据呈现到页面上，很明显， 这就需要我们使用DOM操作。正因为这种开发流程，所以我们引入了一种叫做MVVM(Model-View-ViewModel)的前端开发思想，即让我们开发者更加关注数据，而非数据绑定到视图这种机械化的操作。那么具体什么是MVVM思想呢？MVVM:其实是Mo
Vue进行前后端交互
qq_63532615的博客
12-09 17
axios_demo
vue实现前后端项目分离与交互②
坚持！！！学习java小白一枚小公举
11-08 221
实现后端数据传到前端
使用vue实现前后端交互
m0_72713521的博客
01-05 1111
------------------------------------以上配置均为SpringBoot+Vue----------------------------------------------------后端属于是（Tomcat服务器 端口号为：8080），要想实现前后端数据交互，需要配置跨域（注解跨域---只有当前类或当前方法进行跨域）；前端：(注册全局axios)定义axios.js全局变量；后端：因为前后端使用的是两个不同的服务器，前端属于是（Node服务器，端口号为：9999）
Vue前后端交互
淘小欣的博客
04-30 9915
Vue前后端交互 文章目录Vue前后端交互引入：Vue前后端交互一、基于jQuery的ajax前后端交互模式前端后端二、使用fetch前后端交互fetch基本用法与请求参数fetch基本用法fetch请求参数fetch前后端交互前端后端三、前后端交互之axios前端后端参考资料 引入：Vue前后端交互 一般在项目中结合async/await语法使用axios调用接口 一、基于jQuery的ajax前后端交互模式 前端 <head> <meta charset="UTF-8">
VUE前后端分离之数据交互（简单项目作为演示）
weixin_45928161的博客
03-11 2万+
文章目录一、添加后端访问依赖二、建立后端三、配置前端 提示:这里重点演示前端如何访问后端，对于前、后端的建立不作为重点 一、添加后端访问依赖 进入前端vue项目，进入内部或外部终端 输入如下代码并安装 cnpm install axios --save cnpm install qs --save 安装好之后可以在package.json中看到添加的依赖 在main.js中引入添加的依赖（main,js中存储组件的公共依赖，在此文件中添加依赖后无需再在各组件文件里单独添加依赖） 引入
vue前端和后端交互实现（最简单）
qq_63656102的博客
06-25 1532
后端接收的话其实也很简单，后端目前比较热门的是springboot，在springboot里面的接收也比较简单，大家感兴趣可以自行去查看资料，我这里举例的是node后端接收，相信这个能看懂那么springboot也问题不大。以上所举的例子都是最简单的网络请求，但是在实际情况中，一般都是对网络请求进行封装到一个js文件里面的，这里就不举例了，大家先把最基础的学会，后面在加深了解就可以了。知道的前端和后端的基础之后，那么我们就得先知道前端该如何去请求，在前端中，最原始的请求就是去。当然大家也可以用异步的。
Springboot+Vue实现简单的前端后分离数据交互
热门推荐
Young_深情不及里子的博客
09-02 5万+
学习前后端分离的同学看过来，一篇文章带你了解一下当前一个简单前后端分离的后台系统的数据交互实现过程，告别传统JSP，模板引擎式的系统开发。
基于jfinal+vue+ElementUI的前后端分离CRM系统.zip
03-23
基于jfinal+vue+ElementUI的前后端分离CRM系统 主要技术栈 核心框架：jfinal3.8 缓存：redis caffeine 数据库连接池：Druid 工具类：hutool,fastjson,poi-ooxml 定时任务：jfinal-cron 项目构建工具：maven Web容器：tomcat,undertow(默认) 前端MVVM框架：Vue.JS 2.5.x 路由：Vue-Router 3.x 数据交互：Axios UI框架：Element-UI 2.6.3 安装说明 1、配置java运行环境，redis环境，mysql环境。 2、将目录doc下的crm9.sql导入到数据库( 初始化安装只需要导入crm9.sql就好了，更新代码导入对应日期的sql文件)。 3、修改resources/config/crm9-config.txt下的数据库配置文件。 4、修改resources/config/redis.json下的redis连接文件 5、undertow启动端口号在resources/config/undertow.txt下修改。 默认账号 admin 默认密码 123456 部署说明 本项目JDK要求JDK8及以上
springboot+vue前后分离项目
11-27
一个小的springboot项目和vue项目，前后端分离，用户权限用的是shiro框架，可以简单的控制用户角色，并与vue交互
Python+Vue+Django前后端分离项目实战
06-18
本门课程重实战，将基础知识拆解到项目里，让你在项目情境里学知识。 这样的学习方式能让你保持兴趣、充满动力，时刻知道学的东西能用在哪、能怎么用。 平时不明白的知识点，放在项目里去理解就恍然大悟了。 一、融汇贯通 本视频采用了前后端分离的开发模式，前端使用Vue.js+Element UI实现了Web页面的呈现，后端使用Python 的Django框架实现了数据访问的接口，前端通过Axios访问后端接口获得数据。在学习完本章节后，真正理解前后端的各自承担的工作。 二、贴近实战 本系列课程为练手项目实战：学生管理系统v4.0的开发，项目包含了如下几个内容：项目的总体介绍、基本功能的演示、Vuejs的初始化、Element UI的使用、在Django中实现针对数据的增删改查的接口、在Vuejs中实现前端增删改查的调用、实现文件的上传、实现表格的分页、实现导出数据到Excel、实现通过Excel导入数据、实现针对表格的批量化操作等等，所有的功能都通过演示完成、贴近了实战 三、课程亮点 在本案例中，最大的亮点在于前后端做了分离，真正理解前后端的各自承担的工作。前端如何和后端交互
练习SpringBoot烘培坊项目，实现包括数据库的前后端交互系统
06-07
烘培坊（Bakery）是一个虚构的在线烘焙产品销售网站，主要面向烘焙爱好者和美食爱好者。该网站提供各种烘焙产品的食谱介绍、视频教学服务，包括烘焙原料、工具和书籍等，烘培坊网站使用了现代化的Web技术，如HTML5、CSS3和JavaScript、axios等，使用Vue、ElementUI框架，包括后端使用SpringBoot、MyBatis、MySQL。作为学习完整项目的实现流程，可作为教学项目使用，熟悉前后端交互，包括其中有一些模板可直接使用
教师端+学生端+管理员 前后端管理系统,后端是springboot 前端是vue 实现前后端交互
05-25
此项目为一个基于Vue的前后端分离的在线考试系统项目 使用了 Vue 全家桶+ES5ES6ES7+Webpack 等前端新技术 后端基于SpringBoot搭建SSM框架 包括学生端、教师端和管理员端 采用模块化、组件化、工程化的模式开发 教师...
使用django和vue进行数据交互的方法步骤
09-18
主要介绍了使用django和vue进行数据交互的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue.js前后端数据交互之提交数据操作详解
10-18
主要介绍了vue.js前后端数据交互之提交数据操作,结合实例形式较为详细的分析了vue.js前后端数据交互相关的表单结构、约束规则、数据提交等相关操作技巧与注意事项,需要的朋友可以参考下
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
10-16
主要介绍了Vue-CLI项目-axios模块前后端交互的使用详解(类似ajax提交),本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue框架前后端交互
09-19
在vue框架中，前后端交互可以通过以下几种方式实现： 1. 使用axios库进行异步请求：axios是一个基于Promise的HTTP客户端，可以在浏览器和Node.js中发送AJAX请求。它可以与vue框架无缝集成，通过发送HTTP请求与后端进行数据交互。 2. 使用vue-resource库进行前后端交互：vue-resource是Vue.js官方推荐的HTTP库，它可以在Vue.js应用中实现数据的获取、发送和转换。它提供了一些简单的API，使得前后端交互更加方便。 3. 使用fetch API进行数据交互：fetch API是一种现代的浏览器内置的API，用于发送HTTP请求。它支持Promise，并且与原生JavaScript兼容。在Vue.js中可以使用fetch API与后端进行数据交互。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值