首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

input回车后页面提交导致出现HTTP 错误 405.0 - Method Not Allowed

前些时间在做一个搜索功能时发现一个比较有意思的现象,场景是这样的:一个模态窗口中是一个订单列表,页面的顶部有若干个状态筛选框和一个搜索关键字输入框,当焦点在关键字输入框时按回车,本来是对input的keyup...事件做了监听,当发现是按了回车键时便自动提交搜索请求的,但输入关键字后按回车时页面竟然跳转了,并且出现“HTTP 错误 405.0 - Method Not Allowed无法显示您正在查找的页面,因为使用了无效方法...(HTTP 谓词)”的错误,非常纳闷。...按照错误信息及现象(页面跳转了)来看,应该是因为触发了页面提交了,但事实上,当在keyup事件里面alert时,根本还没有执行到keyup事件里面去就已经跳转了。...自动提交的动作本身浏览器默认事件绑定的,按键盘的操作就是keyup和keydown,我原本的按键监听是keyup事件里写的,所以把keydown事件重写,然后终止默认事件执行就OK了。

1.9K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【译】如何使用webpack减少vuejs打包的大小

    由于捆绑了如此众多的应用程序,我们的vue生产构建时,导致多个大小过度的警告。...导致大型构建包的原因是什么? 首先,我需要了解导致大型构建包大小的原因。为此,我安装了webpack-bundle-analyzer。这将提供每个包项目大小的可视指南。...因此,权衡之后,webpack创建一个快捷方式的别名。该快捷方式将用moment/src/moment替换所有导入moment的调用。...image.png 通过删除moment.js的语言环境,每当我启动服务器运行我的代码时都会发生错误,该错误代码说它无法找到./locale。...⚠️注意:最终vuetify v2将内置此功能。 该版本可用之前,你必须使用vuetify-loader仅导入你正在使用的组件。

    4.2K20

    如何使用webpack减少vuejs打包的大小

    由于捆绑了如此众多的应用程序,我们的vue生产构建时,导致多个大小过度的警告。 我们最初的构建规模 当我们进行构建时,我们收到以下2条错误消息: Vue建议捆版bundles不超过244KiB。...导致大型构建包的原因是什么? 首先,我需要了解导致大型构建包大小的原因。为此,我安装了webpack-bundle-analyzer。这将提供每个包项目大小的可视指南。...因此,权衡之后,webpack创建一个快捷方式的别名。该快捷方式将用moment/src/moment替换所有导入moment的调用。...通过删除moment.js的语言环境,每当我启动服务器运行我的代码时都会发生错误,该错误代码说它无法找到./locale。...⚠️注意:最终vuetify v2将内置此功能。 该版本可用之前,你必须使用vuetify-loader仅导入你正在使用的组件。

    1.7K10

    Vue打包优化之code spliting

    而如果我们对所有的代码进行合理的拆分,将首屏和非首屏的代码进行剥离,将业务代码和基础库代码进行拆分,需要某段代码的时候再加载它,下次若再需要用则从缓存读取,一来可以更好地使用浏览器缓存,再者就是可以提高首屏加载速度...但是这里细心的你可能发现codemirror组件不也是nodemodule的么,但为啥没被打包进去反而重复打包到其他单页面了呢,其实这里是因为commonChunk中使用name属性其实也就意味着只会沿着...并且codemirror特别大,同时加载到两个单页面也造成很大的性能问题,简单说就是,我们访问第一个单页面加载了codemirror之后,第二个页面其实就不应该再加载了。...可是,这里我们发现vuetify.js和vuetify.css实在太庞大了,导致我们的打包的代码很大,这里,我们考虑把它提取出来,这里为了避免重复打包,需要使用external,并将vue以及vuetify...总结 可能会有朋友问,单独分拆vue和vuetify导致请求数增加,这里我想补充下,我们的业务现在已经切换成http2了,由于多路复用,并且加上浏览器缓存,我们分拆出的请求数其实也算是控制合理的范畴内

    4.2K100

    Vue打包优化之code spliting

    而如果我们对所有的代码进行合理的拆分,将首屏和非首屏的代码进行剥离,将业务代码和基础库代码进行拆分,需要某段代码的时候再加载它,下次若再需要用则从缓存读取,一来可以更好地使用浏览器缓存,再者就是可以提高首屏加载速度...但是这里细心的你可能发现codemirror组件不也是nodemodule的么,但为啥没被打包进去反而重复打包到其他单页面了呢,其实这里是因为commonChunk中使用name属性其实也就意味着只会沿着...并且codemirror特别大,同时加载到两个单页面也造成很大的性能问题,简单说就是,我们访问第一个单页面加载了codemirror之后,第二个页面其实就不应该再加载了。...和vuetify.css实在太庞大了,导致我们的打包的代码很大,这里,我们考虑把它提取出来,这里为了避免重复打包,需要使用external,并将vue以及vuetify的代码采用cdn读取的方式,首先修改...//去掉main.js之前对vuetifycss的引入//import

    2.1K20

    论如何用七天的时间打造一款(并不)爆款的匿名树洞网站

    前端方面,其实直到现在,Vuetify 的 Vue 3 适配版本 Vuetify Titan 仍处于 Beta Live 状态,RC 版本可能仍需要几个月的时间才会产生,但是因为 Vuetify 提供的组件和其他...,但是不知道是不是我的配置问题,这导致 IDE 导入 ts 文件声明的函数时,导入的文件雷静总是错误的变为 js 而不是 ts) 我想得到的一个成品是: 一个主页,可以以卡片流的方式显示最新的树洞(...开发前端期间,还遇到了许多疑难问题,比如组件中使用 this 作用域开发环境可以工作,但是在生产环境无法工作的问题,又比如 Vue 3 新的组合式 API 和 setup 函数与先前使用方式不同导致差异的问题...,交谈,他建议我现在最好使用 VueUse 提供的 computedAsync 功能,不过因为我懒得调整了所以最后没用)。...HuTool 真是太好用了,我已经无法想象没有 HuTool 的 Java 开发了) 成果展示 生产站点: XAUFEHole – 西财树洞 (minecraft.kim) 其实可能用手机看起来效果更好些

    1.9K30

    面试题5:jdk1.8,HashMap的put方法,如何实现的?Map什么情况扩容?什么情况转成红黑树?

    其次:如果数组下标位置没有元素,则将key和value封装为Entry对象(JDK 1.7是Entry对象,JDK 1.8是Node对象),并放入该位置。...如果是红黑树Node,则将key和value封装为一个红黑树节点并添加到红黑树中去,在这个过程中会判断红黑树是否存在当前key,如果存在则更新value值。...这个插入尾部的过程,需要遍历链表,如果发现存在相同的key,则更新value,否则执行插入操作,当链表节点个数超过了8个,且数组大于等于64,则会将该链表转化为红黑树。...将key和value封装为Node插入到链表或红黑树后,再判断是否需要进行扩容——如果需要就扩容,不需要就结束put操作。 jdk1.8HashMap扩容源码解析

    25320

    基于云开发开发 Web 应用(一):项目介绍 & 初始化

    cd tldr yarn serve 随即,可以系统浏览器的 localhost:8080 查看项目 [预览] 记得引入 git 做版本控制,文章里就不介绍了。没意思。...Vue Router 的配置引入了 Vue 3 以后,显得非常的简单,直接执行如下命令即可 vue add router 执行过程问你是否需要启用 History Mode,根据需要选取,我使用的是...vue add vuetify 问你选择那种预设,直接使用 Default 即可。 [c5vjy.png] 保存并重启开发服务器,你会看到这样的界面,则说明配置完成。...yarn add tcb-js-sdk 安装完成后, main.js 引入 tcb,并通过修改 Vue 的原型来实现挂载 Vue import Vue from 'vue' import App from...$mount('#app') 这样就可以应用运行的整个周期中使用 this.$tcb 来调用云开发的相关逻辑。 总结 完成了项目的初始化以后,回过头来看一看这在初始化项目过程,都做了哪些事情。

    1.7K31

    快速上手最新的 Vue CLI 3

    要创建新项目,请单击create按钮,然后同一界面查看打开的文件管理器。浏览(项目)文件时,你注意到先前创建的 Vue 项目上有 Vue 符号(表示它们是Vue项目)。...此命令导致一系列提示,这些提示将要求与 GUI 完全相同,不同的是它们会在终端中进行提示。当你回答所有提示并按照自己希望的方式配置应用程序时,CLI 会为你构建它。...某些插件附带了导致其安装的后续提示。在我看来,我认为新 CLI 实现的插件概念受到了 Angular CLI 的启发。...你可以看到界面显示的以下任务: ? Serve:这会在 localhost 上的本地开发服务器运行你的程序。它有一个非常直观的 dashboard,显示错误日志和消息、资源,模块和使用的依赖项。...现在可以用名为instant prototyping的新 Vue CLI 功能来实现了,它抽象了已保存的.vue文件上创建单个组件所需的所有配置。

    86930

    值得推荐的7个vue3 UI组件库

    **TypeScript支持:**为开发者提供了丰富的类型定义,有助于在编码阶段捕获潜在错误,提升开发效率和代码质量。...响应式设计:Vuetify 的每个组件都经过精心设计,具有本质上的响应性。这可确保使用 Vuetify 构建的 App 在从 PC 端到移动端的各种设备上保持视觉完整性。...国际化:凭借对国际化的内置支持,Vuetify 简化了创建迎合全球受众的 App 的过程。开发者可以无缝实现多语言支持和本地化功能,确保它们的 App 全球范围内均可访问且用户友好。...易于使用:Varlet的使用方式简单,减少了开发者的思维负担,使他们能够更专注于业务逻辑的实现。...总的来说,Buefy大型复杂应用的表现取决于具体的应用需求和开发者的使用技巧。对于小型到中型项目,Buefy可能是一个理想的轻量级选择。

    6.4K10

    值得推荐的7个vue3 UI组件库

    **TypeScript支持:**为开发者提供了丰富的类型定义,有助于在编码阶段捕获潜在错误,提升开发效率和代码质量。...响应式设计:Vuetify 的每个组件都经过精心设计,具有本质上的响应性。这可确保使用 Vuetify 构建的 App 在从 PC 端到移动端的各种设备上保持视觉完整性。...国际化:凭借对国际化的内置支持,Vuetify 简化了创建迎合全球受众的 App 的过程。开发者可以无缝实现多语言支持和本地化功能,确保它们的 App 全球范围内均可访问且用户友好。...易于使用:Varlet的使用方式简单,减少了开发者的思维负担,使他们能够更专注于业务逻辑的实现。...总的来说,Buefy大型复杂应用的表现取决于具体的应用需求和开发者的使用技巧。对于小型到中型项目,Buefy可能是一个理想的轻量级选择。

    2.5K10

    技术分享 | 测试平台开发-前端开发之Vue.js 框架(一)

    Vue.js 是一套用于构建用户界面的渐进式框架,目前的前端开放中比较流行的前端框架。 Vue 被设计成自底向上的逐层应用。...Vue的组件化开发 介绍 目前的前端开发组件化开发成为了潮流,而所谓的组件化开发就是把页面拆分成多个组件,最后将每一个组件进行罗列,形成我们看到的网页。...vscode 插件的选择: JavaScript (ES6) code snippets:包含 VSCode 的 ES6 语法的 JavaScript 代码段。...Vetur:VSCode 支持 VUE 的工具,有语法高亮、格式化、错误检查、自动完成等功能。 (推荐)Auto Close Tag:自动添加 HTML/XML 结束标签。...:Vuetify — A Material Design Framework for Vue.js 这里主要使用的组件库是 vuetify

    1.6K30

    vue双向绑定数组和对象有什么区别_后端接收前端json数据

    众所周知,vuev-model 忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。...大部分情况,v-model是绑定一个对象的属性,但是如果数据库的数据是一个数组,这种情况下,如果把数组转换成对象再绑定,然后再转换回去提交到数据库显然是一件工程量很大的事情,本着程序员偷懒的原则,我发现了一个便捷的方法...-- 引入vuetify --> new Vue({ el: '#app', vuetify: new Vuetify(), data () { return{ arr:[12123,134123,12] } }, })... 这里我用最简单的方法,给大家演示了一下,利用item遍历数组,然后利用index索引找到数组的下标,v-model绑定数组的下标即可实现上图的效果。

    1.2K20

    如何选择一个 vue ui 框架?

    Bootstrap Vue 为 Vue.js 提供了 Bootstrap 4 组件和网格系统的实现。...2,vuetify 是什么,为什么选择它? Vuetify 是 Vue.js 的一个UI组件库,自2016年以来一直积极开发。...Tree Shaking,用于描述移除 JS 文件的“引而未用”代码,就像秋风撼树一样,将残枝败叶一摇而下。它依赖于 ES2015 模块语法的“静态结构”特性,例如 import 和 export。...2.2 vuetify 支持移动应用吗? vuetify 为移动设备而生。所有的 vuetify 组件都是专为移动设备设计。应用程序可以轻松不同的方向和屏幕尺寸间转换。...以下是 vuetify 应用程序桌面视图中的外观: 当调整浏览器大小时,应用程序应该会切换至移动视图: 2.3 基于 vuetify 后台 web 应用如何开发?

    5.1K30

    16 个优秀的 Vue 开源项目

    VuePress 你用Markdown 写内容,然后转换成预渲染的静态HTML文件。 该项目有一个组织良好的捐款指南,工作流程透明。它还有很好的问题管理功能。...社区管理和支持方面,这款产品有社区聊天、众多教程、提示、更新和博客。它也有一个广泛的文件和贡献指南。 我们推荐这个项目的贡献,因为它是一个真正伟大的工具,使开发人员的生活真的很容易。...仪表板,你可以设置指标——一种测量某些东西的方法,无论是正常运行时间、错误率还是完全随机的东西。 Slack里有一个相当大的社区,贡献者非常活跃。...错误将自动生成的40+地区支持。很多规则都是开箱即用的。...特点: ·熟悉且易于设置的基于模板的验证; ·i18n支持和错误消息40+地区; ·异步和自定义规则支持; ·用TypeScript编写; ·没有依赖。

    4.3K20

    基于云开发开发 Web 应用(四):引入统计及 Crash 收集

    [w2wmu.png] 配置完成后,你获得具体的统计的代码,接下来就可以进行接入。 一个比较简单的方法是直接将代码复制,并粘贴到 public/index.html ,从而实现统计。...不过,这样嵌入会导致如果需要自定义统计时,无法通过 ESLint 的规则,因此我选择了第二种方式,使用 Vue 插件的方式接入。...先使用 npm 安装依赖,然后 main.js 中加入相应的统计代码,就可以实现自动的统计。 import Vue from 'vue' import App from '....开启了 Crash 收集以后,这些 ERROR 也会被收集到 Fundebug 上,这样浪费每个月 3000 条的免费额度,因此,需要一个方法开发环境不启用这些拓展。...可以实现在渲染的时候,只有生产环境才会渲染出相应的统计代码,从而实现开发环境不调用 fundebug 和 mta 统计,避免了开发环境的数据干扰。

    1.3K20
    领券