前段(vue)

目录

跨域是什么?

SprinBoot跨域的三种解决方法

JavaScript 有 8 种数据类型,

金额的用什么类型。

前段 = ==  ===区别

JQuery使用$.ajax()实现异步请求

Vue 父子组件间的三种通信方式

Vue2 和 Vue3 存在多方面的区别。


跨域是什么?

跨域是指不同域名之间的相互访问,这是由浏览器的同源策略决定的,

是浏览器对JavaScript施加的安全措施,防止恶意文件破坏。

同源策略:同源策略是一种约定,它是浏览器最核心的也是最基本的安全策略,

如果缺少了同源策略,则浏览器的正常功能可能会受到影响。

所谓同源就是说协议 ,域名端口号完全一致,有一个不一致就会造成跨域问题

跨域原理:

跨域请求能正常发出去,服务端能接受到请求并正常返回结果,只是结果被拦截了。

跨域只存在于浏览器,不存在于其他平台,比如安卓/java/ios等平台。

之所以会发生跨域是因为受到了同源策略的限制,同源策略要求源相同才能进行正常通信,
即协议,域名,端口号都完全一致。

 

URL :统一资源定位符,它是www的统一资源定位标志,也就是我们说的网络地址。

它的一般格式为:协议类型://服务器地址:端口号/路径。

这也就是我们说的跨域中的域

SprinBoot跨域的三种解决方法

跨域技术CORS

 CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。

它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。

SpringBoot 就对Cross 做了很好的支持。目前有三种跨域方式。

使用 Spring Boot 框架时,最简单的是通过@CrossOrigin注解

在控制器类或单个方法上添加此注解,如果在类上添加,该类中的所有方法都适用此跨域规则。

例如,可以指定允许的源,像@CrossOrigin(origins = "http://example.com")

还能设置允许的请求方法和请求头。

如果需要全局配置跨域可以创建一个配置类,实现WebMvcConfigurer接口,

addCorsMappings方法中通过CorsConfiguration来设置跨域规则,

包括允许的源、请求方法、请求头、允许跨域的最大时长等,这种全局配置方式适用于整个应用程序的跨域管理

SpringBoot解决跨域的三种方式:

  1. @CrossOrgin注解 ; 一个类
  2. 全局配置Mvc,然后就是利用过滤器配置
  3. 有一种是利用servlet的过滤器实现

public class MyWebMvcConfig implements WebMvcConfigurer {

    @Override

    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/testCross/**")

                .allowedHeaders("*")

                .allowedMethods("*")

                .allowCredentials(true)

                .allowedOrigins("http://localhost:8093")

                .maxAge(2000);

    }

}

SpringBoot系列(八)分分钟学会Springboot多种解决跨域方式 - 全栈学习笔记 - 博客园

在 Java 的 Servlet 规范中,可以编写跨域过滤器。在过滤器的doFilter方法中,

手动修改响应头来实现跨域。

例如,设置Access - Control -Allow -Origin为允许的源地址,

Access - Control -Allow -Methods为允许的请求类型,

Access - Control -Allow -Headers为允许的请求头,

这种方式灵活性高,可根据具体的业务逻辑和请求特征来定制跨域策略

JavaScript 有 8 种数据类型,

分为基本数据类型和引用数据类型。

基本数据类型

  • 数值型(Number),用于表示数字,包含整数和浮点数
  • 字符串型(String),由字符组成,用于文本表示,需用引号包裹;
  • 布尔型(Boolean),只有 true 和 false 两个值,用于逻辑判断;
  • 未定义型(Undefined),当变量声明但未赋值时就是此类型;
  • 空值型(Null),表示空值;
  • 符号型(Symbol),是 ES6 引入的,用于创建唯一的标识符。

引用数据类型

  • 对象型(Object),是属性和方法的集合,

比如通过对象可以表示一个用户,包含姓名、年龄等属性和相关操作的方法;

  • 数组型(Array),是特殊的对象,用于存储多个元素,可以是不同的数据类型,元素通过索引访问。

金额的用什么类型

最常见的是 Number 类型,它可以存储整数和浮点数,适合表示金额数值,

不过要注意浮点数运算可能存在精度问题。

例如,0.1 + 0.2 在 JavaScript 中可能不会精确等于 0.3。为解决精度问题,

可以使用专门的第三方库,如 BigNumber.js

前段 = ==  ===区别

 = 赋值

 == 在判断的时候对数值做了 "隐式转换", 比如 0 ==false

 ===叫做严格相等,是指:左右两边不仅值要相等,类型也要相等

Vue版本2和3

JQuery使用$.ajax()实现异步请求

在这里,async默认的设置值为true,这种情况为异步方式

  $.ajax({

        type: "POST",

        url: "/user/getLoginUser",

        async: true,

        dataType: "json",

        contentType: "application/json; charset=UTF-8",

        data: JSON.stringify(params),

        success: function (result) {

            //绑定数据

            $("#td_userId").html(result.userId);

        }

    });

Vue打包

Vue CLI 是一个基于 Webpack 构建的官方脚手架工具。

在开发好 Vue 项目后,通过在命令行中运行npm run build

(如果是基于 Vue CLI 构建的项目,此命令在 package.json 中有配置),

它会将项目中的代码按照 Webpack 的配置规则进行处理,包括压缩代码、处理样式、拆分代码块等操作,

最后生成适合生产环境部署的静态文件,存放在dist目录下

Vite 是一个新兴的前端构建工具,用于替代传统的 Webpack。

在 Vue 项目中使用 Vite 打包时,同样在命令行中执行相应的打包命令

(例如在 Vite 构建的项目中,一般使用npm run build),

Vite 会快速地将项目代码进行转换、优化和打包,它的优势在于开发阶段的快速启动和热更新,

打包时也能够高效地处理模块,生成部署文件。

Vue 父子组件间的三种通信方式

原文链接:[Vue框架学习笔记]父子组件间的三种通信方式(有实例,速来!)_我有一种父子组建是如何通信的-CSDN博客

Vue2 和 Vue3 存在多方面的区别。

从性能上看,Vue3 在虚拟 DOM 的更新性能上有优化,渲染速度更快

其采用了静态标记和基于块的编译,在更新时能更精准地识别出需要重新渲染的组件,

减少不必要的更新操作,而 Vue2 在大型项目中渲染效率相对较低。

在 API 方面,Vue3 有组合式 API,像 setup 函数,可以将逻辑相关的代码放在一起,

使代码组织更清晰,更易于复用和维护。

Vue2 主要使用选项式 API,数据、方法等按固定选项分类,在复杂组件中代码可读性会变差。

在响应式原理上,Vue3 使用 Proxy 替代了 Vue2 的 Object.defineProperty。

Proxy 在处理复杂对象和数组时更灵活,能直接监听整个对象,

而 Object.defineProperty 在某些场景下有局限性,比如无法监听对象属性的新增和删除。

在组件方面,Vue3 支持多个根元素,在模板语法上更加灵活,

Vue2 的模板中要求必须有一个根元素。Vue3 对 TypeScript 的支持也更好,

提供了更方便的类型定义和推导,有助于提高代码质量,

这在大型项目和团队协作中很重要,而 Vue2 对 TypeScript 的支持相对较弱。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/8226.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

mysql-B+Treel(一)

介绍 MySQL是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,属于 Oracle 旗下产品。MySQL是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最好的RDBMS (Relational Database Management System,关系…

HarmonyOS NEXT 应用开发实战(十、从零设计一款个人中心页面详细示例)

随着HarmonyOS的不断发展,越来越多的开发者开始关注这个平台上的应用开发。本篇文章将详细讲解如何从零开始设计一款个人中心页,并在代码中实现其相关功能。 1. 项目结构设计 首先,我们需要设计一个合理的项目结构。我们将个人中心页面分为几…

网购选择困难症怎么破?别忘了你的这位“帮手”

每年双十一对不少人来说,既是购物剁手狂欢节,也是货比三家纠结得不行的选择困难症复发期。而现在,Pura 70 能够帮助我们解决不够了解商品、选择困难症等问题啦。 小艺圈选,圈出你感兴趣的商品,快速货比三家 利用指关…

bug日常记录responded with a status of 413 (Request Entity Too Large)

在本地开发没有出现这个问题,后面部署到服务器上时,开始报错,在网上查找资料发现是nginx的配置大小不够,在nginx的配置条件加上了: client_max_body_size 10m 然后重启nginx,发现这个还是不行&#xff0c…

SAP Business One:中小企业数字化转型的加速器

在竞争日益激烈的市场环境中,中小企业要实现稳健发展,就必须注重提升自身的管理效能与运营效率。SAP Business One(简称SAP B1)作为一款专为中小企业量身定制的企业资源规划(ERP)解决方案,凭借其…

从 PyQt5 窗口闪退问题看 Python 垃圾回收与消息机制

前言 此篇文章源于知乎上的一个问题,使用 PyQt5 编写 GUI 程序时,新创建的界面会闪退,本篇文章仅作记录以防以后忘记。 问题代码 import sysfrom PyQt5.QtWidgets import QApplication, QMainWindow, QPushButtonclass Main(QMainWindow):d…

java两个线程的通信/指令重排

目录 1.线程通信 2.指令重排 1.线程通信 前段时间面试笔试题,手写两个线程之间的通信。 问题回顾: 一个生产者,一个消费者,一个桌子媒介。两个线程分别是消费者和生产者。流程是生产者生产一个件商品,通知消费者消…

建立用邻接矩阵表示的无向图

建立用邻接矩阵表示的无向图 #include<stdio.h> #define NUM 100 typedef struct {char vexs[NUM];int edges[NUM][NUM];int n,e; }MGraph; void CreateMGraph(MGraph *G) {int i,j,k;printf("请输入顶点数和边数:");scanf("%d,%d",&G->n,&a…

大模型微调技术 --> LoRA 系列之 AdaLoRA

AdaLoRA 1.摘要 之前的微调方法(如低秩更新)通常将增量更新的预算均匀地分布在所有预训练的权重矩阵上&#xff0c;并且忽略了不同权重参数的不同重要性。结果&#xff0c;微调结果不是最优的。 为了弥补这一差距&#xff0c;我们提出了AdaLoRA&#xff0c;它根据权重矩阵的…

革新网络管理:拉线网套技术引领行业新趋势

根据QYResearch调研团队的最新力作《全球拉线网套市场报告2023-2029》预测&#xff0c;到2029年&#xff0c;全球拉线网套市场的规模有望达到11.7亿美元&#xff0c;且在未来几年内&#xff0c;将以3.5%的复合年增长率&#xff08;CAGR&#xff09;持续扩张。 在全球范围内&…

HTB:Devel[WriteUP]

目录 连接至HTB服务器并启动靶机 1.What is the name of the service is running on TCP port 21 on the target machine? 使用nmap对靶机TCP端口进行开放扫描 2.Which basic FTP command can be used to upload a single file onto the server? 尝试匿名连接至靶机FTP服…

Hadoop集群的高可用(HA)-(2、搭建resourcemanager的高可用)

第一步&#xff1a;检查mapred-site.xml &#xff0c;里面只有yarn配置和historyServer的配置&#xff0c;不需要修改 第二步&#xff1a;修改yarn-site.xml <?xml version"1.0"?> <!-- Licensed under the Apache License, Version 2.0 (the "Lic…

golang笔记

golang笔记 一、内存逃逸 本应在栈中内存,被分配到了堆中 1 返回指针对象 在外部被使用 2 reutrn 函数 使用了上面方法的敞亮 3 入参是interface{} 动态参数 4 make超过栈大小 -gcflags"-m"查看分配内存信息 返回变量vs返回指针 返回变量, 会多一步复制变量, 返回…

纹理分析——统计分析方法

一. 灰度共生矩阵法(Gray Level Co-occurrence Matrix, GLCM ) 灰度共生矩阵又称为灰度空间相关矩阵&#xff0c;是通过研究灰度的空间相关特性来描述纹理的常用方法。&#xff08;也称为联合概率矩阵&#xff09;它作为传统的图像纹理分析方法已广泛应用于数字图像处理的许多…

IT维修记录表导入接口的思路

上篇文章讲了IT设备信息表的导入接口的思路&#xff0c;这篇文章趁热打铁&#xff0c;把IT维修记录表的导入接口的思路给说一下。 首先我们要知道IT维修记录表的数据是什么来的&#xff1f;这个问题必须要搞懂&#xff0c;不搞懂的话对接下来的思路其实是不利的。IT维修记录表…

场景解决方案丨迎战电商大促,企业管理跟踪驾驶舱助力中小企业打赢决胜之战

该方案已沉淀为➡️订单物流信息跟踪模板&#xff0c;点击&#x1f517;即可体验 随着互联网技术的发展和市场经济的变化&#xff0c;各行业的线上竞争愈发激烈。一方面&#xff0c;互联网平台凭借便捷的服务和丰富的产品吸引了大量客户&#xff1b;另一方面&#xff0c;复杂多…

WebRTC 环境搭建

主题 本文主要描述webrtc开发过程中所需的环境搭建 环境&#xff1a; 运行环境&#xff1a;ubuntu 20.04 Node.js环境搭建 安装编译 Node.js 所需的依赖包: sudo apt-get update sudo apt-get install -y build-essential libssl-dev 下载 Node.js 源码: curl -sL htt…

Python从入门到高手7.5节-实现冒泡排序算法

目录 7.5.1 排序算法简介 7.5.2 冒泡排序算法原理 7.5.3 冒泡排序算法实现 7.5.4 永不放弃 7.5.1 排序算法简介 所谓排序&#xff0c;是指将数据集合中的元素按从小到大的顺序进行排列&#xff0c;或按从大到小的顺序进行排列。 前者称为升序排序&#xff0c;后者称为降序…

vue-quill-editor富文本编辑器

效果图&#xff1a; 1、下载安装vue-quill-editor npm install vue-quill-editor --save图片缩放、拖拽 npm install quill-image-drop-module -S //允许粘贴图像并将其拖放到编辑器中。 npm install quill-image-resize-module -S //允许调整图像大小<template>&…

TCP是怎样工作的网络拥塞控制理论和算法部分记录

参考资料 https://github.com/ituring/tcp-book 流量控制、窗口控制和拥塞控制的关系 流量控制、窗口控制和拥塞控制的关系如图所示 窗口控制是上层的概念&#xff0c;核心思路是基于滑动窗口技术传输数据。而确定发送窗口大小的方法有流量控制和拥塞控制两种 流量控制&…