前端备忘录
旗袍不开、怎么得胜?
这个作者很懒,什么都没留下…
展开
-
JS,jQuery常用语法记录
【代码】JS,jQuery常用语法记录。原创 2023-11-21 14:10:00 · 790 阅读 · 0 评论 -
关于跨域资源共享(CORS)的前后端异常分析.[has been blocked by CORS policy: Request header field access-control-allow-]
关于跨域资源共享(CORS)的前后端异常分析.CORS拦截请求头中的token,authority等字段解决办法[has been blocked by CORS policy: Request header field access-control-allow-]原创 2022-12-07 17:56:36 · 2534 阅读 · 0 评论 -
Vue的事件修饰符
Vue事件修饰符原创 2022-11-10 11:27:41 · 148 阅读 · 0 评论 -
ES6部分特性 | let关键字 | 模板字符串 | 对象简化赋值 | 箭头函数 | this
ES6 | let关键字var有变量提升,不报错。 /** * var有变量提升,不报错。 * 等同于: var school -> console.log(school) -> school='xxx' */ console.log('school', school) // undefined,不报错 var school =XXOO大学'原创 2020-10-13 16:00:10 · 165 阅读 · 0 评论 -
通过Chocolatey安装yarn
通过Chocolatey安装yarn官网提供了三种安装方式,本想下载.msi,用Node装,但是点进去链接失效了= =Chocolatey没用过,官网给的安装方式是打开powershell,执行: Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol原创 2020-07-17 15:52:58 · 290 阅读 · 0 评论 -
Ant Design(antd)4.X引入阿里iconfont.cn图标(Icon)
Ant Design(antd)4.X引入阿里iconfont.cn图标(Icon)官方的Demo是这么给的:import { createFromIconfontCN } from '@ant-design/icons';const IconFont = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',});ReactDOM.render( <div className原创 2020-07-16 11:03:42 · 3251 阅读 · 0 评论 -
babel编译时出现:Error: Cannot find module ‘@babel/core‘
babel编译时出现:Error: Cannot find module ‘@babel/core’ERROR in ./src/index.jsModule build failed (from ./node_modules/_babel-loader@8.1.0@babel-loader/lib/index.js):Error: Cannot find module '@babel/core'Require stack:- D:\work\HBuilderXWorkspace\react\01原创 2020-07-07 11:09:22 · 8845 阅读 · 0 评论 -
cnpm:在此系统上禁止运行脚本。
cnpm:在此系统上禁止运行脚本。cmd执行cnpm -install/cnpm -v都没问题。然后转到HBuilderX的控制台时,就凉了。PS D:\work\HBuilderXWorkspace> cnpm -v cnpm : 无法加载文件 D:\work\java\nodejs\node_global\cnpm.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execu原创 2020-07-03 17:50:23 · 1496 阅读 · 0 评论 -
React:diff算法(简介)
React:diff算法(简介)即:比较两棵新旧DOM树差别的算法(different算法),比较得出两棵DOM树的差异后,对有差异的部分进行页面更新,这样则可以不必更新大块的DOM元素,大大减少性能开销。tree diff: 新旧两棵DOM树,逐层对比的过程;当整棵DOM树逐层对比完毕,则所有需要被按需更新的元素,必然能够找到;component diff: 在进行Tree diff的时候,每一层中,组件级别的对比,叫做component Diff;如果对比前后,组件的类型相同,则暂时认为此组原创 2020-07-03 16:12:23 · 135 阅读 · 0 评论 -
React:DOM树与虚拟DOM树(概念与区别)
React:DOM树与虚拟DOM树(概念与区别)**DOM的本质:**浏览器中的概念,用JS对象来表示页面上的元素,并提供了操作DOM对象的API;**React中的虚拟DOM:**是框架中的概念,是程序员 用JS对象来模拟页面上的DOM和DOM嵌套;**虚拟DOM的目的:**为了实现页面中,DOM元素的高效更新DOM和虚拟DOM的区别:**DOM:**浏览器中提供的概念,用JS对象表示页面上的元素,并提供了操作元素的API;**虚拟DOM:**是框架中的概念;是开发框架的程序员,手动用JS对原创 2020-07-03 15:53:27 · 1039 阅读 · 0 评论 -
JS三种确认弹框
JS三种确认弹框1.alert()简单的弹框提示信息。//提示信息测试alertTest:function(){ alert("这个是弹框啊")},2.confirm()//确认信息测试confirmTest:function () { let flag = confirm("确认删除吗?"); console.log("confirm" + flag);},单击确认flag为true单击取消flag为false3.prompt()//填写信息测试原创 2020-07-02 14:54:29 · 2430 阅读 · 0 评论 -
Vue+axios实现下拉框联动刷新
Vue+axios实现下拉框联动刷新用v-model绑定、获取下拉框选中value通过v-for,遍历部门列表/角色列表,动态展现option里的数据通过’v-on’设置option的value通过{{message}}设置option的text即将迭代出的item中数据分别设置给option的value和text通过select的@change调用方法,根据v-model获取选中值,调用接口,查询并刷新下一个下拉框的数据。//本来想把这些列表参数都塞到一个对象里,中间调试的时候出bug了,先原创 2020-07-02 11:10:45 · 1202 阅读 · 0 评论 -
VueDemo3:音乐播放器[黑马Vue基础网课跟写](vue,axios)
VueDemo3:音乐播放器一.歌曲搜索1。按下回车(v-on,enter)2.查询数据(axios 接口 v-model)3.渲染数据(v-for 数组 that)服务器返回的数据比较复杂时,获取的时候需要注意层级结构通过审查元素快速定位到需要操纵的元素二.歌曲播放根据服务器检索结果,找到歌曲播放的url。通过v-bind,刷新标签中的src属性,以实现播放不同音乐的效果。歌曲id依赖歌曲搜索的结果,对于不用的数据也需要关注。三.播放动画audio标签的play事件会在音频播放的时原创 2020-07-01 14:24:26 · 1432 阅读 · 3 评论 -
Vue+axios向后端post JSON数据(报错:400),不使用qs.stringify()格式化实现方式
Vue+axios向后端post JSON数据,不使用QS格式化实现方式(后端使用@RequestBody接收参数)axios向后端post请求时出现400,debug发现jquery的ajax请求和axios的post请求默认的请求头不一样(Content-Type)。jquery的post请求:axios的post请求:按照度娘所说,可以设置axios的请求头。...原创 2020-07-01 11:27:25 · 3536 阅读 · 2 评论 -
VueDemo2:天气预报
VueDemo2:天气预报一、输入查询1.按下回车(v-on,enter)2.查询数据(axios 接口 v-model)3.渲染数据(v-for 数组 that)应用的逻辑代码建议和页面分离,使用单独的js文件编写axios回调函数中this指向改变了,需要额外的保存一份服务器返回的数据比较复杂时,获取的时候需要注意层级结构二、点击查询1.点击城市(v-on 自定义参数)2.查询数据3.渲染数据自定义参数可以让代码的复用性更高methods中定义的方法内部,可以通过this关键字原创 2020-07-01 09:44:05 · 503 阅读 · 0 评论 -
VueDemo1:记事簿(v-for、v-on、v-model)
VueDemo1:记事簿列表结构可以通过v-for指令结合数据生成v-on结合事件修饰符可以对事件进行限制,比如enterv-on在绑定事件时可以传递自定义参数通过v-model可以快速的设置和获取表单元素的值基于数据的开发方式(以往为基于dom开发)代码: <!-- 主体区域 --><section id="todoapp"> <!-- 输入框 --> <header> <h1>小白记事簿</h1>原创 2020-07-01 09:41:19 · 136 阅读 · 0 评论 -
Vue基础-7(axios+vue,实现数据获取+数据刷新)
Vue基础-7axios:功能强大的网络请求库axios必须先导入才可以使用<script src="https://unpkg.com/axios/dist/axios.min.js"></script>$ npm install axios$ bower install axios使用get或post方法即可发送对应的请求then方法中的回调函数会在请求成功或失败时触发(第一个函数为请求成功触发。第二个函数为请求失败触发)通过回调函数的形参可以获取响应内容,或原创 2020-07-01 09:36:28 · 855 阅读 · 0 评论 -
Vue基础-6(v-for:根据数据生成列表结构、v-model:获取和设置表单元素的值)
Vue基础-6v-for根据数据生成列表结构数组经常和v-for结合使用语法是(item,index) in数据item 和 index 可以结合其他指令一起使用数组长度的更新会同步到页面上,是响应式的例:<div id="app"> <ul> <li v-for="(item,index) in arr" :title="index"> {{item}}||{{index}} </li> </ul原创 2020-07-01 09:28:40 · 639 阅读 · 0 评论 -
Vue基础-5(v-bind:设置元素的属性,如:src,title,class)+轮播图实现
Vue基础-5v-bind:设置元素的属性(如:src,title,class)v-bind:属性名=表达式(v-bind:src=“imgSrc”)v-bind可以省略,只保留’:属性名’(:title=“imgTitle”)动态增删class建议使用对象的方式例:<div id="app-3"> <img v-bind:src="imgSrc" :title="imgTitle+'哟'" :class="isActive?'active':''"/><原创 2020-07-01 09:19:04 · 408 阅读 · 0 评论 -
Vue基础-4(v-show、v-if控制元素显示/隐藏)
Vue基础-4v-show指令:根据真假切换元素的显示状态原理:修改元素的display,实现显示隐藏指令后面的内容最终会解析为布尔值,true显示,false隐藏数据改变之后,对应的显示状态会同步更新例:<div id="app"> <h1 v-show="true">Test A</h1> <h1 v-show="isShow">Test B</h1> <h1 v-show="age >= 18">Te原创 2020-06-28 15:31:14 · 1408 阅读 · 0 评论 -
Vue基础-3(v-on:元素事件)
v-on为元素绑定事件事件名不需要写on指令可以简写为@绑定的方法定义在methods属性中方法内部通过this关键字可以访问定义在data中数据例1:<div id="app-3"> <input type="button" value="v-on 单击指令" v-on:click="doIt" /> <input type="button" value="v-on 介入指令" v-on:mouseenter="doIt" /> <inpu原创 2020-06-28 15:20:12 · 656 阅读 · 0 评论 -
Vue基础-2(v-text、v-html)
Vue基础-2(v-text、v-html)v-text:设置标签的文本值设置标签的文本值(textContent)v-text指令的作用是:设置标签的内容(textContent)默认写法会替换全部内容,使用差值表达式 {{}}可以替换指定内容内部支持写表达式例:<div id="app"> <h2 v-text="message+'!'">看不见我</h2> <h2>喔嚯{{message + "!"}}看得见</h2>原创 2020-06-28 15:10:22 · 483 阅读 · 0 评论 -
Vue基础-1(el:挂载点,data:数据对象)
Vue基础-1el:挂载点把’{{xxx}}'双大括号中的内容替换Vue实例的作用范围:Vue会管理el选项命中的元素及其内部的后代元素。Vue可以使用其他选择器,但是建议使用ID选择器。Vue可以使用其他双标签,不能使用HTML和BODY。例:<div id="app"> {{message}} {{name}}</div><script type="text/javascript"> new Vue({ el:'#app',原创 2020-06-28 15:04:56 · 228 阅读 · 0 评论 -
input-radio(单选框)值的获取/默认选中等操作
input-radio(单选框)值的获取/默认选中等操作由于每一个单选框均为一个单独的input,无法用id直接获取。可通过将一组radio配置为同一个class下,统一管理。通过class获取input框的选中值:$("input[name='addusersex']:checked").val()radio的常用方法:1.获取选中值,三种方法都可以:$('input:radio:checked').val();$("input[type='radio']:checked").val();原创 2020-06-11 17:57:55 · 7102 阅读 · 0 评论 -
SpringBoot+Thymeleaf,实现Ajax即时刷新select下拉框内容(下拉框联动刷新)
SpringBoot+Thymeleaf,实现Ajax即时刷新select下拉框内容复选框内容联动刷新。当第一个复选框状态发生改变时,触发ajax请求,根据复选框所选中的值,传给后台,查询该值所对应的下一个复选框中的内容参数,并返回给前台,前台对下一个复选框中的内容进行清空重写。从而实现复选框联动刷新的效果。前台页面(下拉框部分): <button onclick="selectGroup()">获取部门</button> <select id="selec原创 2020-06-09 09:37:20 · 2634 阅读 · 4 评论 -
$.ajax()的return值获取不到
= =!!$.ajax()的return值获取不到方式1,2均无法获取到到返回值,方式3可以(即同步,利用参数return,两次return)方式1:(1)同步调用 (2)在ajax函数体里面return值结果:返回 1。未成功获取返回值失败原因:ajax内部是一个或多个定义的函数,ajax中return返回值,返回到ajax定义函数,而不是返回到ajax外层的函数checkAccount1()function checkAccount1(){ var result = 1;转载 2020-06-05 15:34:04 · 322 阅读 · 0 评论 -
CSS关系选择符和元素选择器
CSS 元素选择器选择符名称版本描述*通配选择符CSS2所有元素对象E类型选择符CSS1以文档语言对象类型作为选择符。E#myidmyid选择符CSS1以唯一标识符id属性等于myid的E对象作为选择符E.myclassmyclass选择符CSS1以class属性包含myclass的E对象作为选择符CSS关系选择符1包含选择:E F,包含选择符将会命中所有符合条件的后代,包括儿子,孙子,孙子的孙子。2子选择符E>F,选择原创 2020-06-04 16:56:02 · 199 阅读 · 0 评论 -
$.ajax()无法识别,目前发现的两种情况
$.ajax()无法识别,目前发现的两种情况**首先肯定与JQuery引入有关。可能因为JQuery包引入有关,引入路径错误导致未能成功引入JQuery包,进而无法识别’$’符。 找到HTML文件读取的默认文件夹,重置路径可能与模版自带的JQuery包引入冲突,包覆盖,读包时出问题。 保留一个JQuery包。**...原创 2020-06-04 16:47:53 · 3208 阅读 · 2 评论 -
$.ajax请求做登陆校验,执行完beforeSend,原地刷新页面。后台controller正常执行,但无法接收到后台响应
$.ajax请求做登陆校验,执行完beforeSend,原地刷新页面。后台controller正常执行,但无法接收到后台响应$.ajax,仅执行beforeSend,未执行complete,未进入success/error的function。登陆的ajax请求。<script> function register() { var user = new Object(); user.Uname=$.trim($("#rusern原创 2020-06-04 10:27:29 · 365 阅读 · 0 评论 -
前端页面,input框禁用编辑的三种方法
1.disabled被禁用的 input 元素,*不可编辑,不可复制,不可选择,不能接收焦点,后台也不会接收到传值。*设置后文字的颜色会变成灰色。<input type="text" disabled="disabled" />*disabled 属性无法与 一起使用。2、readonly unselectable=‘on’。该属性跟disable类似,input 元素,*不可编辑,不可复制,不可选择,不能接收焦点,*设置后文字的颜色也会变成灰色,但是后台可以接收到传值。<转载 2020-05-27 14:31:38 · 1891 阅读 · 0 评论