Django+Vue全栈开发项目入门(四)
前端和服务端进行接口交互是Web开发中的核心环节，它涉及数据的传输、处理和展示。
接口交互的基本概念
前端，即用户界面层，负责展示数据和接收用户输入；服务端（或称为后端），即服务器层，负责处理业务逻辑、数据库交互等任务。两者之间的有效交互，是确保应用顺畅运行的关键。
接口交互的关键技术
HTTP协议：前后端接口交互的基础是HTTP协议。HTTP是一种应用层协议，用于在Web上传输超文本和其他内容。它定义了客户端和服务器之间的请求和响应格式。
RESTful API：RESTful是一种网络应用程序的设计风格和开发方式，它基于HTTP协议，使用标准的HTTP方法和状态码，以及易于理解的URL结构来实现前后端之间的数据交互。RESTful API具有简洁、易用、可扩展性等优点。
JSON数据格式：JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它易于人阅读和编写，同时也易于机器解析和生成。在前后端接口交互中，JSON格式的数据因其简洁和清晰的层次结构而成为理想的选择。
身份验证与授权：为了保证接口交互的安全性，通常需要使用身份验证和授权机制。身份验证用于验证用户的身份，确保用户是合法的；授权用于控制用户对资源的访问权限。常见的身份验证方式包括JWT（JSON Web Token）、OAuth等。
跨域问题的产生原因
跨域问题产生的主要原因是浏览器的同源策略。同源策略是一种安全机制，它限制了一个网页中的脚本只能访问与其来源相同的资源。这里的“来源”指的是协议、域名和端口三者都相同。如果前端页面尝试访问与其来源不同的资源（即跨域请求），浏览器就会阻止这个请求，从而引发跨域问题。
前后端如何进行接口联调？
1、阅读接口文档
2、配置接口地址
3、使用axios获取数据
4、将数据设置到型层
在前端的apis.js文件中创建用于访问服务端接口的变量
// 系统相关的接口
const SystemApis = {
sliderListUrl:apiHost + "/system/slider/list/"
}
// 景点相关的接口
const SightApis = {
sightListUrl:apiHost + "/sight/sight/list/"
}
// 对外暴露
export{
SystemApis,
SightApis
}并在vite,config.js文件中进行一些调整
const getBannerList = () =>{
ajax.get(SystemApis.sliderListUrl).then(res => {
// 将获取的轮播图数据给到响应对象bannerList中来
bannerList.value = res.data.objects
// 控制台输出响应对象中的数据，测试是否获取到接口返回的数据
// console.log(bannerList.value)
})
}
在vue文件中导入所需工具
import {ajax} from '@/utils/ajax' //获得axios对象 异步请求对象
import { onMounted,ref } from 'vue'
import { SystemApis } from '@/utils/apis' // 获得访问目标()创建列表用于存放接口返回的数据
const bannerList = ref([])访问接口获取数据
const getBannerList = () =>{
ajax.get(SystemApis.sliderListUrl).then(res => {
// 将获取的轮播图数据给到响应对象bannerList中来
bannerList.value = res.data.objects
// 控制台输出响应对象中的数据，测试是否获取到接口返回的数据
// console.log(bannerList.value)
})
}页面元素加载前调用getBannerList函数
onMounted(()=>{
getBannerList()
})