前后端调用

已于 2022-06-10 12:20:19 修改
阅读量538 收藏 1
点赞数
文章标签： 前端
于 2022-01-19 19:19:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63659749/article/details/122587792
版权

目录

 

编辑前端页面

编辑后端页面

1.   AXIOS-GET

1.1 参数拼接写法

1.2   AXIOS--Post请求

 1.3  put请求测试

1.4 传递对象的写法

1.5  restFul结构实现数据传参

 1.6   简化Axios调用

 1.7   关于跨域

1.7.1   同源策略

1.7.2  什么是跨域

1.7.3  例题

编辑前端页面

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56eD5aS06ZSF6ZSF,size_18,color_FFFFFF,t_70,g_se,x_16

编辑后端页面

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56eD5aS06ZSF6ZSF,size_14,color_FFFFFF,t_70,g_se,x_16

1.   AXIOS-GET

1.1 参数拼接写法

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56eD5aS06ZSF6ZSF,size_20,color_FFFFFF,t_70,g_se,x_16

1.2   AXIOS--Post请求

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56eD5aS06ZSF6ZSF,size_20,color_FFFFFF,t_70,g_se,x_16

 watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56eD5aS06ZSF6ZSF,size_20,color_FFFFFF,t_70,g_se,x_16

 1.3  put请求测试

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56eD5aS06ZSF6ZSF,size_20,color_FFFFFF,t_70,g_se,x_16

 watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56eD5aS06ZSF6ZSF,size_20,color_FFFFFF,t_70,g_se,x_16

 

1.4 传递对象的写法

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56eD5aS06ZSF6ZSF,size_20,color_FFFFFF,t_70,g_se,x_16

1.5  restFul结构实现数据传参

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56eD5aS06ZSF6ZSF,size_20,color_FFFFFF,t_70,g_se,x_16

 watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56eD5aS06ZSF6ZSF,size_19,color_FFFFFF,t_70,g_se,x_16

 1.6   简化Axios调用

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56eD5aS06ZSF6ZSF,size_20,color_FFFFFF,t_70,g_se,x_16

 1.7   关于跨域

1.7.1   同源策略

要素1: 浏览器的访问地址
要素2: Ajax的请求的网址
策略说明: 如果上述的要素同时满足 协议://域名:端口号都相同的情况,则称之为满足同源策略.可以进行正确的调用. 也称之为 “同域访问”.

1.7.2  什么是跨域

违反了同源策略就叫跨域访问

1.7.3  例题

案例1:

浏览器地址: http://www.jd.com/xx/xx
ajax地址: https://www.jd.com/yy/yy 跨域: 协议不同
案例2:

浏览器地址: http://www.jd.com/xx/xx
ajax地址: http://www.jd.com/yy/yy 同域请求
案例3:

浏览器地址: http://www.jd.com:80/xx/xx
ajax地址: http://www.jd.com/yy/yy 同域请求!!!
案例4:
前提: 域名与IP对应

浏览器地址: http://www.jd.com/xx/xx
ajax地址: http://8.8.8.8/yy/yy 跨域请求! 域名不一致
案例5:

浏览器地址: https://www.jd.com/xx/xx
ajax地址: https://www.jd.com:443/yy/yy 同域请求 https的默认端口号 443
案例6:

浏览器地址: http://www.jd.com/xx/yy/xx
ajax地址: http://miaoshi.jd.com/yy/yy 跨域请求 域名不同

 

秃头锅锅
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
前端调用后端的写法
wyqwilliam的博客
11-08 3203
前端代码： <div v-if="vmCheckItem.installType === '自动安装'"> <!--<FormItem :label="$t('用户名：')" prop="email" >--> <!--<Input
前后端调试技巧
Aling_3的博客
12-16 1135
f12 1、network ------- 显示网络请求的数据 2、Preserve log ------ 抓取重定向前该页面请求了哪些接口。保留请求日志。 3、XHR ----- 记录ajax中的请求 （前端发送的Ajax请求包括 后端接口，前端 JS, CSS, Img 等等） get方法解析： 入参：一般在方法后使用 “ ?参数名=参数值&参数名=参数值 ” 该方法支持的是get方式传参，那么该方法中...
postman测试各种请求
m0_53284765的博客
08-15 2284
总结: 1) post请求中,当使用@RequestBody注解时,URL不用参数(Params)拼接的,要选择Body→raw→JSON,然后采用如下图的传参方法; 2) get请求,delete请求,put请求则都是选择Params的方式,参数拼接在URL地址栏中即可; 3) 当controller中采用restful风格时,URL传参方式要与之对应,如http://localhost:8091/user/status/6/1(6代表id,1代表状态修改). 一.post请求 1.新增用户 .
后端接口调式工具
专注Java（全栈）应用开发，求知若渴，虚心若愚，talk is cheap, show me the code.
06-01 1036
后端接口调式工具。
Jmeter接口测试⑤——PUT请求
测试领域技术分享
08-25 2997
本节以更新设备名称为例。 一、PUT接口测试数据准备 本博客的测试案例都是以工作中的项目为例，所以涉及到保密问题，部分信息将被覆盖。 二、PUT请求 线程组右键->添加->取样器->http请求 名称：put请求 协议：https IP：host中的值 方法：PUT 路径：path中的值 消息体数据：data中的值 三、查看结果树 返回更新设备名称信息成功。 ...
CGB2105-Day-04笔记
蜕变
07-29 266
1、手动搭建后端完成项目 2、前后端调用 3、Ajax问题 异步原理 4、什么是跨域
前端如何调用后端接口进行数据交互（极简）
热门推荐
weixin_43005654的博客
03-18 6万+
axios，前后端数据交互，数据渲染，发请求，axjax
前后端分离项目.zip
08-25
在IT行业中，前后端分离是一种常见的开发模式，它将应用程序分为两个主要部分：前端和后端，各自专注于用户交互和业务逻辑处理。本项目“前后端分离项目.zip”是一个基于Maven构建的工程实例，旨在展示如何实现这种...
springboot基本的前后端项目理解
07-07
前后端分离**：前端通过Ajax调用后端API，实现页面的异步更新，提升用户体验。 **5. 错误处理**：SpringBoot提供了统一的异常处理机制，可以自定义错误响应格式，方便前端处理异常情况。 **6. 测试**：SpringBoot...
Vue前后端分离api调用优化版
07-06
Vue前后端分离中对Api调用的优化，支持oauth2认证，支持json、form表单、upload、download等多种调用方式。提供Api动态生成，帮助开发者简化api维护工作。 代码基于vue-admin-template项目，需要与之配合使用。
layui+thinkphp前后端分离.rar
08-24
《基于Layui和ThinkPHP的前后端分离实践详解》 在现代Web开发中，前后端分离已经成为一种主流模式，它能有效提升开发效率，优化项目结构，提高代码的可维护性和可扩展性。本教程将围绕“layui+thinkphp前后端分离....
前后端分离案例源码.zip
10-24
在前后端分离的架构中，前端通过HTTP/HTTPS协议调用后端提供的RESTful API进行数据交互。API接口一般包括增删查改（CRUD）操作，如GET用于获取数据，POST用于创建新记录，PUT用于更新记录，DELETE用于删除记录。 三...
VUE--入门学习
望山。
08-25 334
一.VUE学习 1.VUE入门案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>入门案例</title> </head> <body> <!-- 基本语法 1.导入JS类库. 2.指定VUE渲染区域 标签体 3.实例化VUE对象 4.数据取值 --> <div id="
前端如何调用后端接口？有哪几种方式？
xiaoxijing的博客
01-09 5万+
一般来讲，前端不会给后端接口，而是后端给前端接口的情况比较普遍。一些人可能不理解接口和前端开发的关系，其实不合适的接口设计会极大地影响用户的页面体验。那么今天就跟着我一起来看看，前端如何调用后端接口？有哪几种方式？ 首先，要弄清楚前端提供一个接口或者调用后台接口，那么这个接口具体指什么？网上用户上传图片作为头像这个需求需要后台人员处理，当用户登录 修改自己个人信息的时候，上传了头像。此时，后台处...
前后端API连调，接口开发规范（学习笔记）
m0_51324570的博客
04-17 398
/ 这里 '12345' 是 EmpID 的值，需要根据实际情况替换。会自动将JavaScript对象转换为JSON格式，并设置为请求体。是一个有效的 JavaScript 对象，这样你才能对其进行。// 给 formData 对象添加 EmpID 属性。注解来接收一个对象作为请求体时，前端需要将该对象转换为。作为 URL 的一部分，而不是作为查询参数（，并将其放在HTTP请求的body中。当后端使用@RequestBody。
渗透测试与HTTP中的PUT请求
a1_pha的博客
03-16 597
请求用于向服务器更新指定资源，可以理解为对服务器上的资源进行修改操作。请求方式会覆盖原有的资源内容，因此需要谨慎使用。
前后端交互执行原理
qq_51114151的博客
03-07 1130
Jdbc jdbc：可以理解为是一套行为规范，是面向应用 jdbc主要定义了四个类： DriverManager(驱动管理): 注册jdbc Connection（链接类）: 建立数据库的链接 Statment（SQL编译器）: 向数据库发送并执行sql语句 ResultSet（查询结果类）: 处理返回的结果 jdbc模拟图： 原理：用户通过访问浏览器(url统一资源定位符) 可以理解服务器就是一台电脑，然后里面有tomcat这个软件，然后Tomcat里面有我们自己新建的.
ASP.NET Core Web API 使用Autofac框架
最新发布
鲤籽鲲的博客
08-08 630
ASP.NET Core Web API 使用Autofac框架
写一个ASP.NET Core 6中的Web API示例，要求实现WebAPI特性路由和前后端调用分离技术
07-15
当然！在ASP.NET Core 6中，你可以使用Web API特性路由和前后端调用分离技术来构建灵活的Web API。下面是一个示例，演示如何实现这些功能。 首先，创建一个新的ASP.NET Core 6 Web API项目。在Visual Studio 2022中，选择"创建新项目"，然后选择"ASP.NET Core Web API"模板，并点击"下一步"。 接着，给你的项目命名，并选择合适的位置进行保存。点击"创建"。 默认情况下，ASP.NET Core 6使用控制器类名作为路由的一部分。为了使路由更加灵活，我们可以使用Web API特性路由。 打开`Controllers`文件夹，创建一个新的控制器，命名为`ValuesController.cs`。在控制器中，添加以下代码： ```csharp using Microsoft.AspNetCore.Mvc; namespace YourProject.Controllers { [ApiController] [Route("api/[controller]")] public class ValuesController : ControllerBase { [HttpGet] public IActionResult Get() { return Ok(new string[] { "value1", "value2" }); } [HttpGet("{id}")] public IActionResult Get(int id) { return Ok($"value{id}"); } [HttpPost] public IActionResult Post([FromBody] string value) { // 处理POST请求 return Ok(value); } [HttpPut("{id}")] public IActionResult Put(int id, [FromBody] string value) { // 处理PUT请求 return Ok(value); } [HttpDelete("{id}")] public IActionResult Delete(int id) { // 处理DELETE请求 return Ok($"Deleted value{id}"); } } } ``` 在上述代码中，我们使用`[ApiController]`特性来指示控制器是一个Web API控制器，并使用`[Route("api/[controller]")]`特性来指定路由模板。这里的`[controller]`将被替换为控制器类名的小写形式（即"values"）。 在控制器中，我们定义了五个动作方法：`Get`、`Get(id)`、`Post`、`Put(id)`和`Delete(id)`。这些方法分别对应于HTTP的GET、POST、PUT和DELETE请求，并通过`HttpGet`、`HttpPost`、`HttpPut`和`HttpDelete`特性进行标记。 在这个示例中，我们简单地返回一些字符串作为响应。你可以根据自己的需求在这些方法中添加逻辑。 接下来，我们需要实现前后端调用分离技术。在这里，我们可以使用JavaScript的Axios库来发起HTTP请求。 在wwwroot文件夹下创建一个新的文件夹，命名为"js"。在该文件夹中创建一个新的JavaScript文件，命名为"api.js"，并添加以下代码： ```javascript import axios from 'axios'; const baseUrl = '/api/values'; // Web API的基本URL export const getValues = async () => { const response = await axios.get(baseUrl); return response.data; }; export const getValue = async (id) => { const response = await axios.get(`${baseUrl}/${id}`); return response.data; }; export const postValue = async (value) => { const response = await axios.post(baseUrl, value); return response.data; }; export const putValue = async (id, value) => { const response = await axios.put(`${baseUrl}/${id}`, value); return response.data; }; export const deleteValue = async (id) => { const response = await axios.delete(`${baseUrl}/${id}`); return response.data; }; ``` 在上述代码中，我们定义了几个函数，分别对应于GET、POST、PUT和DELETE请求。这些函数使用Axios库来发送HTTP请求，并返回响应数据。 最后，在HTML文件中引入这个JavaScript文件，并调用相应的函数来实现前后端交互。 这就是一个使用ASP.NET Core 6的Web API特性路由和前后端调用分离技术的示例。希望对你有帮助！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

秃头锅锅

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值