spring-webmvc练习-日程管理-访问后端展示列表数据
1、util/request.js
import axios from "axios";let request = axios.create({baseURL: "http://localhost:8080",timeout: 50000 });export default request
2、api/schedule.js
import request from "../util/request.js";export let getScheduleList = () => {return request.get('/schedule') };
3、App.vue
<template><el-table :data="scheduleList" style="width: 100%"><el-table-column label="编号" width="180"><template #default="scope"><div style="display: flex; align-items: center"><span style="margin-left: 10px">{{ scope.row.id }}</span></div></template></el-table-column><el-table-column label="学习计划" width="180"><template #default="scope"><div style="display: flex; align-items: center"><span style="margin-left: 10px">{{ scope.row.title }}</span></div></template></el-table-column><el-table-column label="是否完成" width="180"><template #default="scope"><div style="display: flex; align-items: center"><span style="margin-left: 10px">{{ scope.row.completed?'完成':'未完成' }}</span></div></template></el-table-column><el-table-column label="其他操作"><template #default="scope"><el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button><el-buttonsize="small"type="danger"@click="handleDelete(scope.$index, scope.row)">Delete</el-button></template></el-table-column></el-table> </template><script lang="ts" setup> import {getScheduleList} from './api/schedule.js'; import {onMounted, reactive} from 'vue';let scheduleList=reactive([])onMounted(()=>{getScheduleList().then(response=>{Object.assign(scheduleList,response.data.data)}) })interface scheduleList {id: Numbertitle: stringcompleted: boolean }const handleEdit = (index: number, row: scheduleList) => {console.log(index, row) } const handleDelete = (index: number, row: scheduleList) => {console.log(index, row) } </script>
4、ScheduleController.java
package com.atguigu.schedule; import com.atguigu.schedule.controller.Result; import com.atguigu.schedule.service.ScheduleService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; @RestController @RequestMapping("/schedule") public class ScheduleController {@Autowiredprivate ScheduleService scheduleService;@CrossOrigin@GetMappingpublic Result list() {return Result.ok(scheduleService.getScheduleList());} }
5、@CrossOrigin
@CrossOrigin
是一个Java注解,常用于处理跨域请求。在Spring框架中,它常常被用于RESTful Web服务的控制器方法上,以允许来自不同域的客户端进行访问。跨域请求是指在浏览器环境下,从一个域名的网页去请求另一个域名的资源。出于安全考虑,Web浏览器 同源策略 限制了从其他域获取的响应。简单来说,它只允许请求来自同一站点,否则浏览器会阻止此类请求。
@CrossOrigin
注解就是用来解决这个问题的。当你在Spring的控制器方法上添加这个注解时,Spring会在响应头中添加CORS(跨来源资源共享)相关的头部信息,从而告诉浏览器这个响应是可以被其他域共享的。下面是一个简单的例子:
@RestController public class MyController { @CrossOrigin(origins = "http://example.com") @GetMapping("/greeting") public String greeting() { return "Hello, World"; } }
在这个例子中,
@CrossOrigin(origins = "http://example.com")
表示只有来自"http://example.com"的请求才能访问"/greeting"这个API。
@CrossOrigin
注解还可以设置其他属性,如methods
(允许的HTTP方法)、allowedHeaders
(允许的HTTP头)等。例如:@CrossOrigin(origins = "http://example.com", methods = RequestMethod.GET, allowedHeaders = "header1,header2")
这个注解对于构建RESTful Web服务和处理跨域请求非常有用。
6、CORS
CORS,全称是"Cross-Origin Resource Sharing",即 跨源资源共享 。它是一种机制,允许许多安全性限制在当前域以外的web应用中访问一些资源。这是为了防止恶意网站在未经用户许可的情况下进行数据读取和操作。
在CORS中,浏览器会先检查这个请求是否是跨源的。如果是,浏览器会向服务器发送一个"预检"请求,询问服务器是否允许这个跨域请求,服务器如果同意则返回一个特殊的头部信息。之后,浏览器再发送实际的请求。这种机制允许web应用在不受用户察觉的情况下进行跨域操作。
CORS头部信息包括:
Access-Control-Allow-Origin
: 指定哪些网站可以访问资源。可以是具体的URL或者"*"(代表所有网站)。Access-Control-Allow-Methods
: 指定实际请求中允许使用哪些HTTP方法。多个方法之间用逗号分隔。Access-Control-Allow-Headers
: 指定实际请求中允许携带哪些头部信息。多个头部之间用逗号分隔。Access-Control-Allow-Credentials
: 指定请求是否允许携带认证信息(如Cookies)。Access-Control-Max-Age
: 指定预检请求的有效期,单位是秒。如果预检请求在有效期内,那么实际请求就不需要再次发送预检请求。服务器需要对这些头部信息进行正确的响应,才能让跨域请求成功。同时,浏览器也会对这些头部进行检查,确保它们符合规范和用户的安全设置。
相关文章:

spring-webmvc练习-日程管理-访问后端展示列表数据
1、util/request.js import axios from "axios";let request axios.create({baseURL: "http://localhost:8080",timeout: 50000 });export default request 2、api/schedule.js import request from "../util/request.js";export let getSchedu…...

【Linux系统编程】操作系统详解(什么是操作系统?为什么会存在操作系统?设计操作系统的目的是什么?)
目录 一、前言 二、 什么是操作系统 💦操作系统的引入 💦操作系统的概念理解 💦操作系统设计的目的与定位 💦总结 二、操作系统之上之下分别有什么 三、深度理解操作系统的“管理” 💦场景理解 💦操…...

肖sir __数据库练习__001
建表语句: create table student ( id int(4),age int(8),sex int(4),name varchar(20), class int(4), math int(4)) DEFAULT charsetutf8; INSERT into student VALUES(1,25,1,‘zhansan’,1833,90); INSERT into student VALUES(2,25,1,‘lisi’,1833,67); INSER…...

【数据结构初阶】树,二叉树
树,二叉树 1.树概念及结构1.1树的概念1.2 树的相关概念1.3 树的表示1.4 树在实际中的运用(表示文件系统的目录树结构) 2.二叉树概念及结构2.1概念2.2现实中的二叉树2.3 特殊的二叉树2.4 二叉树的性质2.5 二叉树的存储结构 1.树概念及结构 1.…...
HTML新手入门笔记整理:HTML常用标签总结表
HTML常用标签 标签 英文全称 语义 div division 区块(块元素) span span 区块(行内元素) p paragraph 段落 ol ordered list 有序列表 ul unordered list 无序列表 li list item 列表项 dl definition list 定义列表 dt definition term 定义术语 d…...

Linux7安装mysql数据库以及navicat远程连接mysql
1.下载地址:MySQL :: Download MySQL Community Server 2.创建mysql目录将压缩包上传到该目录 mkdir /opt/mysql cd /opt/mysql3.解压压缩包 gzip mysql-8.1.0-1.el7.x86_64.rpm-bundle.tar tar -zxvf mysql-8.1.0-1.el7.x86_64.rpm-bundle.tar.gz 4.前置检查 ch…...

FFmpeg命令分隔视频
有一个视频如a.mp4,此视频采用帧率为30生成,共有299帧,这里通过FFmpeg命令分隔成1秒一个个的小视频,即每个小视频帧数为30帧。 用到的FFmpeg参数如下所示: (1).-i:指定输入视频文件的名称; (2).-c:指…...

开源与闭源
我的观点: 开源与闭源软件都有各自的优势和劣势,没有绝对的对错之分。.. 一、开源和闭源的优劣势比较 开源的好处与劣处 优势: 创新与合作:开源软件能够吸引更多的开发者参与到项目中来,促进创新和合作。开放的源代码…...

详解Python对Excel处理
Excel是一种常见的电子表格文件格式,广泛用于数据记录和处理。Python提供了多个第三方库,可以方便地对Excel文件进行读写、数据操作和处理。本文将介绍如何使用Python对Excel文件进行处理,并提供相应的代码示例和详细说明。 一、安装第三方库…...

docker compose搭建渗透测试vulstudy靶场示例
前言 渗透测试(Penetration test)即网络安全工程师/安全测试工程师/渗透测试工程师通过模拟黑客,在合法授权范围内,通过信息搜集、漏洞挖掘、权限提升等行为,对目标对象进行安全测试(或攻击)&am…...

Python基础教程:强大的Pandas数据分析库
Pandas是一个基于 NumPy 的非常强大的开源数据处理库,它提供了高效、灵活和丰富的数据结构和数据分析工具,当涉及到数据分析和处理时,使得数据清洗、转换、分析和可视化变得更加简单和高效。本文中,我们将学习如何使用Pandas来处理…...

【深入剖析K8s】容器技术基础(一):从进程开始说起
容器其实是一种特殊的进程而已。 可执行镜像 为了能够让这些代码正常运行’我们往往还要给它提供数据’比如我们这个加法程序所需要的输人文件这些数据加上代码本身的二进制文件放在磁盘上’就是我们平常所说的一个程序,也叫代码的可执行镜像(executablejmage&…...

Mysql使用周期性计划任务定时备份,发现备份的文件都是空的?为什么?如何解决?
👨🎓博主简介 🏅云计算领域优质创作者 🏅华为云开发者社区专家博主 🏅阿里云开发者社区专家博主 💊交流社区:运维交流社区 欢迎大家的加入! 🐋 希望大家多多支…...
算法leetcode|90. 子集 II(rust重拳出击)
文章目录 90. 子集 II:样例 1:样例 2:提示: 分析:题解:rust:go:c:python:java: 90. 子集 II: 给你一个整数数组 nums ,其…...
git 泄露
得到flag有两种方法: 1、版本比对:git diff 用法:git diff <分支名1> <分支名2> 2、版本回退:git reset 用法:git reset --hard <分支名> python2 GitHack.py http://www.example.com/.git/ g…...

Elasticsearch知识
目录 Elasticsearch逻辑设计和物理设计 逻辑设计物理设计Elasticsearch原理 倒排索引文档的分析过程保存文档搜索文档写数据的底层原理 数据刷新(fresh)事务日志的写入ES在大数据量下的性能优化 文件系统缓存优化数据预热文档(Document&…...
极智芯 | 解读国产AI算力天数智芯产品矩阵
欢迎关注我的公众号 [极智视界],获取我的更多经验分享 大家好,我是极智视界,本文分享一下 解读国产AI算力天数智芯产品矩阵。 邀您加入我的知识星球「极智视界」,星球内有超多好玩的项目实战源码和资源下载,链接:https://t.zsxq.com/0aiNxERDq 天数智芯属于国产 GPGPU 阵…...

使用 OpenCV 发现圆角矩形的轮廓
OpenCV - 如何找到圆角矩形的矩形轮廓? 问题: 在图像中,我试图找到矩形对象的圆角轮廓。然而,我对两者的尝试 HoughLinesP 并 findContours 没有产生预期的结果。 我的目标是找到一个类似于以下形状的矩形: 。 代码: import cv2 import matplotlib.pyplot as plt…...

vscode项目推送到git
1、打开项目文件 打开文件后点击vs code左侧工具栏中第三个源代码管理图标,点击初始化仓库,此时会创建一个本地仓库会检查该项目中的文件变更 2、创建远程仓库 点击克隆/下载,复制HTTPS地址 3、添加远程地址 1)图形化操作 2…...

COMP2121 Discrete Mathematics
COMP2121 Discrete Mathematics 需要可WeChat: zh6-86...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...

【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接:3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...
macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台(Launchpad)多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显,都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

(二)原型模式
原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

华硕a豆14 Air香氛版,美学与科技的馨香融合
在快节奏的现代生活中,我们渴望一个能激发创想、愉悦感官的工作与生活伙伴,它不仅是冰冷的科技工具,更能触动我们内心深处的细腻情感。正是在这样的期许下,华硕a豆14 Air香氛版翩然而至,它以一种前所未有的方式&#x…...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值,用于设置元素的宽度根据其内容自动调整,确保宽度刚好容纳内容而不会超出。 效果对比 默认情况(width: auto): 块级元素(如 <div>)会占满父容器…...
django blank 与 null的区别
1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是,要注意以下几点: Django的表单验证与null无关:null参数控制的是数据库层面字段是否可以为NULL,而blank参数控制的是Django表单验证时字…...
tomcat指定使用的jdk版本
说明 有时候需要对tomcat配置指定的jdk版本号,此时,我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...