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()
})