前端(Web)
文章平均质量分 50
前端相关技术
小花皮猪
知道的越多,不知道的越多
展开
-
vuex中的四个map方法的使用
用于帮助我们映射state中的数据为计算属性//借助mapState生成计算属性:sum、school、subject(对象写法)//借助mapState生成计算属性:sum、school、subject(数组写法)},用于帮助我们映射getters中的数据为计算属性//借助mapGetters生成计算属性:bigSum(对象写法)//借助mapGetters生成计算属性:bigSum(数组写法)},3用于帮助我们生成与actions对话的方法,即:包含的函数methods:{原创 2023-07-07 18:18:58 · 4188 阅读 · 2 评论 -
Vue键盘事件的使用
在vue中,我们经常会用到键盘事件,不管是我们按下某个键,其实都是一次键盘事件的调用,下面就介绍下Vue中的键盘事件先写一段代码,这里我选择的键盘事件是keyup,当然用keydown也是没问题的问题来了,什么按键都能触发事件,我们期望的是只能按下回车键才能打印输入的值, 那么:如何判断回车呢?如果我们想要绑定的按键不在vue提供的9个按键内,那该怎么办呢?比如我就想要用CapsLock(切换大小写)首先要知道:键盘上任意的一个按键都有自己的按键和编码。原创 2023-03-08 16:03:04 · 4315 阅读 · 13 评论 -
Vue常见的事件修饰符
vue一共给我们准备了6个事件修饰符,前三个比较常用,后三个少见,这里着重讲下前三个1.prevent:阻止默认事件(常用)2. stop:阻止事件冒泡(常用)3. once:事件只触发一次(常用)4.captrue:使用事件的捕捉模式(不常用)5.self:只有event.target是当前操作的元素时才触发事件(不常用)6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕(不常用)个人感觉,了解常见的这些时间修饰符就够用了,不常见的了解即可。用到的时候再搜索相关资料。原创 2023-03-08 15:51:49 · 2329 阅读 · 19 评论 -
Vue使用ElementUI对table的指定列进行合算
最近有一个想法,就是记录自己花销的时候,table中有一项内容是花销的金额。然后想在table的底部有一项内容是该金额的总计。然后我就顺着elementui的table组件寻找相关的demo,还真发现了一个这样的demo。对于这个demo,官方是这么描述的:将show-summary设置为true就会在表格尾部展示合计行。默认情况下,对于合计行,第一列不进行数据求合操作,而是显示「合计」二字(可通过sum-text配置),其余列会将本列所有数值进行求合操作,并显示出来。当然,你也可以定义自己的合计逻辑。原创 2023-03-06 19:35:42 · 8751 阅读 · 31 评论 -
解决vite不是内部或外部命令,也不是可运行的程序 或批处理文件。
今天是要vite创建vue3.0项目的时候,到了最后一步npm run dev的时候出现了以下错误:如下图所示想了半天,调试了很久,本来以为是环境的问题,是不是没有缺少哪些配置但是查了资料发现,如果是使用vite创建vue3.0项目的时候,vite不会自动帮助我们install相关的依赖,需要我们手动去安装,想到这里恍然大悟然后我去项目的node_modules目录里面查看,果然什么都没有所以说出现这个问题的原因是:缺少安装依赖这一步! vite不像node或cli,会自动帮助我们执行npm i (inst原创 2022-12-06 22:02:13 · 85451 阅读 · 17 评论 -
windows下载安装Vue开发者工具(VueDevtools),同时支持vue2.0和vue3.0两个版本
vue开发者工具可以帮助我们提高开发效率,如果不安装控制台老是现在这些东西,对我这种强迫症患者来说痛苦至极,下面我就介绍下我的安装步骤。原创 2022-10-28 18:53:41 · 6507 阅读 · 7 评论 -
查看vue-cli版本的两个命令
有的时候想要查看自己的vue-cli的版本,但是不知道怎么查看,这个时候就可以使用这两个命令了注意:这两个命令都是在装了全局的vue-cli的基础上,并且通过cmd窗口操作的打开命令窗口输入:注意:是大写的V打开命令窗口输入:这两个命令都是可以的原创 2022-12-06 20:28:54 · 8829 阅读 · 2 评论 -
浏览器存储(webStorage)常用API以及简单使用
最近正值世纪杯期间,不知道大家心目中的球队成绩如何,在此期间我学了浏览器存储(webStorage)以及API,下面就分享给大家存储内容不是Vue团队打造的,原本的js中就有,所以可以不适用脚手架编译,可以写在HTML中webStorage又分为localStorage和sessionStorage,浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。存储内容大小一般支持5MB左右(不同浏览器可能还不一样),它的键值对都是字符串原创 2022-12-03 20:13:17 · 1367 阅读 · 2 评论 -
Vue安装并使用axios发送请求
本文主要介绍的是使用在Vue项目中安装并使用axios发送请求axios是一种Web数据交互方式它是一个基于promise的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)本质是对原生XHRXMLHttpRequest)进行封装,只不过它是Promise的实现版本,符合最新的ES规范,相比于JQuery,它体积更小,只有前者的四分之一左右,并且axios支持拦截器和各种请求。原创 2022-11-20 19:30:45 · 4705 阅读 · 1 评论 -
npm安装nanoid生成随机id并简单使用
在一些场景下,如果没有服务器的支持,需要自己随机生成一些信息比如id,虽然可以自己制造生成规则,不过一般可以借助第三方工具生成,比如uuid,但是uuid库比较大,而且生成的id比较长,所以有一个简化版本的叫nanoid,使用起来也比较方便下面就去安装使用它。原创 2022-11-07 14:51:25 · 2646 阅读 · 3 评论 -
解决控制台报错:Property or method “showInfo“ is not defined on the instance but referenced during render
今天写一个vue的单击事件,发现报错了源代码如下 < html > < head > < meta charset = "UTF-8" > < title > 初始vue < / title >原创 2022-10-08 16:38:14 · 1239 阅读 · 0 评论 -
分析初识vue小案例
初识vue小案例接下来我们就分析初识vue小案例1 想让vue工作,就必须创建一个vue实例,并且传入一个配置对象(容器)2 root容器里的代码仍然符合html规范,只不过混入了一些特殊的vue语法3 root容器里的代码被称为vue模板4 vue实例和容器是一一对应的5 真实开发中只有一个vue实例,并且会配合着组件一起使用6 {{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性。原创 2022-09-13 22:41:32 · 452 阅读 · 5 评论 -
初识vue小案例
使用VsCode搭建Vue开发环境既然开发环境准备好了,我们就写一个小案例。原创 2022-09-13 22:37:36 · 638 阅读 · 3 评论 -
使用VsCode搭建Vue开发环境
新建文件夹和文件 工作目录叫vue-basic,里面创建一个文件夹叫01-初识vue,然后创建个html文件叫初始vue.html。F12查看控制台 发现多了两个关于vue的提示,就说明引入vue成功了,这两个小提示后面我们会进行关闭,不然开着不舒服。通过官网介绍我们知道,vue是默认开启生产提示的,我们可以修改这个属性为false,这样就能关闭提示。然后我们把控制台的提示进行清除,首先清除第一个,需要去谷歌应用商城安装vue开发者工具。可以发现,不仅名称有区别,大小也是有区别的,开发版本比生产版本大。原创 2022-09-13 22:28:32 · 11726 阅读 · 4 评论 -
Vue简介
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。简单来说:vue就是一套一套用于构建用户界面的渐(逐渐)进(递进)式JavaScript框架。原创 2022-09-13 22:16:01 · 2079 阅读 · 0 评论 -
Windows11下载安装vscode并编写第一个页面
最近打算学习前端相关的知识,所谓好马配好鞍,我平常也会写一些前端代码,但是都是通过IDEA或Webstorm进行开发,有点驴头不对马尾的感觉,平时看前端同事开发的软件都是使用VsCode,所以我也打算安装一个对他进行学习和了解VSCode(全称:Visual Studio Code)是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全(又称 IntelliSense)、代码重构、查看定义功能,并且内置了命令行工具和 Git 版本控制系统。原创 2022-09-10 22:20:07 · 2146 阅读 · 1 评论 -
使用vscode下载插件在线打开html界面,解决没有Open in default brower选择问题
今天刚下载的vscoode,写了一个html不知道怎么通过vscode打开问了下百度,说需要选择Open in default brower但是我鼠标右键后并没有找到 “Open in default brower”!又问了前端同事说需要安装一个插件,在VSCode中默认编写的html页面是不能运行的插件?这我熟啊,我在IDEA最喜欢安装插件玩了哈哈哈下面记录下如何使用vscode安装插件并打开网页1,打开VSCode软件,编写或者打开一个HTML页面。原创 2022-09-10 22:18:11 · 5548 阅读 · 2 评论 -
IDEA打开启动Vue项目和Vue文件
一般前端Vue都是用VsCode专门用来编辑,今天突发奇想想用IDEA去编辑打开终端 也可以通过alt+F12快捷键终端如下,自行根据需要输入命令即可相关代码下载Vue.js插件解析Vue文件解析前 IDEA不支持编辑VUE文件,但是我们可以通过下载Vue.js插件实现注:推荐工具:IntelliJ WebStorm或Visual Stuido Code下载插件下载完之后重启IDEA解析后效果如下看起来好多了,接下来就可以愉快的写代码了...原创 2022-06-24 11:34:22 · 3809 阅读 · 0 评论 -
Java实现登录时cookie记住密码
Java实现登录时cookie记住密码,下次登录不用重新输入密码,自动记住密码进行登录首先写一个页面登录表单,还有它对应的js<%-- Created by IntelliJ IDEA. User: wx_weiyihe Date: 2021/8/30 Time: 15:50 To change this template use File | Settings | File Templates.--%><%@ page contentType="text/ht原创 2021-08-30 16:34:51 · 4299 阅读 · 1 评论 -
登录页面的密码的显示与隐藏
原理就是点击的时候把密码的输入框的类型从password切换到text,再次点击把text切换成password,懒的话可以直接声明按钮点击,美观点的话可以去阿里icon官网上选几个使用效果选择喜欢的icon以png的形式下载到本地放在项目中引用即可丰富的icon资源:https://www.iconfont.cn/代码<%-- Created by IntelliJ IDEA. User: wx_weiyihe Date: 2021/8/30 Time: 14:原创 2021-08-30 14:44:57 · 5951 阅读 · 0 评论 -
jQuery在线引用地址
不需要把jar放到项目1.官网jquery压缩版引用地址:3.1.1版本: <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>3.0.0版本: <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>2.1.4版本: <script src="http://code.原创 2021-08-20 14:06:39 · 3143 阅读 · 0 评论 -
java查询数据库绑定到layui表格上,含有分页
效果这里把我的pom全上来,有的用不到自行筛选 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> &l原创 2021-08-20 11:17:40 · 2461 阅读 · 0 评论 -
HTML title 属性
定义和用法鼠标悬浮在该控件元素上会得到相应的提示title 属性规定关于元素的额外信息。这些信息通常会在鼠标移到元素上时显示一段工具提示文本(tooltip text)<button class="layui-btn " title="点击下载可以下载上传的文件到本地" onclick="downloadFile('<c:out value="${list.upload_path}" />');" />下载</button>...原创 2021-07-09 10:18:56 · 2411 阅读 · 0 评论 -
layer.confirm确认取消的事件处理以及常用操作
基本语法layer.confirm("提示信息",{ btn: ['按钮1', '按钮2'] }, function () { // 按钮1的事件 }, function(){ // 按钮2的事件 });点击第一个按钮不起作用?layer.confirm("提示信息",{ btn: ['确认', '取消'] }, function (index) { // 按钮1的事件 layer.close(index); }, function(){ // 按钮2的事件原创 2021-07-08 10:27:28 · 10519 阅读 · 0 评论 -
window.opener.location.reload关闭(打开)新界面,刷新父界面
弹出窗口关闭时用来刷新父窗口语法window.opener.location.reload();有时候需要子页面和父页面都加上这个函数原创 2021-07-06 17:17:41 · 3326 阅读 · 0 评论 -
文件上传accept 属性 文件上传只能上传固定格式
在input中添加accept=’.pdf’即可,可以换成任意你想要上传的格式,系统自己帮你过滤,不符合要求的自动屏蔽,比如我只想上传pdf的格式accept 属性只能与 配合使用。它规定能够通过文件上传进行提交的文件类型。 <input type="file" name="file" id="file" accept='.pdf'/>接收多种格式,接受 GIF 和 JPEG 两种图像: <input type="file" name="pic" id="pi原创 2021-07-04 09:59:20 · 6194 阅读 · 0 评论 -
onsubmit表单提交简单使用
一般表单判断哪些为必填项或者正则时候都会用到onsubmit函数,主要是通过返回的true或者false而进行执行,这里简单说下判断表单属性非空提交onsubmit只能表单上使用,提交表单前会触发, onclick是按钮等控件使用, 用来触发点击事件。在提交表单前,一般都会进行数据验证,可以选择在submit按钮上的onclick中验证,也可以在onsubmit中验证。但是onclick比onsubmit更早的被触发。提交过程1、用户点击按钮 —->2、触发onclick事件 —->原创 2021-06-29 13:50:08 · 3596 阅读 · 0 评论 -
封装公共js,使其他页面可以调用
项目开发中如果一个经常被使用的js或者方法需要被重复使用,我们如果每次使用都要复制粘贴一遍会很麻烦也会显得效率比较低,今天就简单做个例子就写一个公用的js使得所有页面直接引用就行非常方便1在合适的位置创建js文件写入公用脚本代码我这个以springboot项目为例1.1先在静态资源下创建js文件夹1.2然后在js文件夹下创建js文件最终目录1,3写入公用代码2.其他页面引用<script src="../js/LongTimeNoOperate.js"></scri原创 2021-06-07 23:27:59 · 3353 阅读 · 0 评论 -
页面长时间未操作关闭页面重新登录
页面长时间未操作关闭页面重新登录直接上代码,可以直接复制在你要处理的页面,也可以写一个全局的js,让全部页面都监视有无操作迹象这里的mouseover也可以换作click等其他事件 var lastTime = new Date().getTime(); var currentTime = new Date().getTime(); var timeOut = 10 * 60 * 1000; //设置超时时间: 10分 第一个是几就是几分钟 $(function(){原创 2021-06-03 23:29:54 · 4765 阅读 · 0 评论 -
html5 表单的required属性
html5 表单的required属性描述今天无意之中发现form有自带非空判断功能,查了资料发现,required 属性是 HTML5 中的新属性定义和用法required 属性是一个布尔属性required 属性规定必需在提交之前填写输入字段。如果使用该属性,则字段是必填(或必选)的。注释:required 属性适用于以下 类型:text, search, url, telephone, email, password, date pickers, number, checkbox, r原创 2021-06-03 23:05:44 · 12399 阅读 · 0 评论 -
html(jsp)登录页面
分享一个简单的登录页面,不是特别好看,但是还行能用直接复制代码就能用<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>aaa</title></head><style TYPE="text/css"> html{ width: 100%; hei原创 2021-06-03 21:53:04 · 4856 阅读 · 1 评论 -
分享炫酷的前端页面随机二维码验证
分享炫酷的前端页面随机二维码验证直接上代码<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>Title</title> <!--引入jquery的js --> <script type="text/javascript" src="../jquery/jquery.js">原创 2021-06-03 00:31:27 · 4770 阅读 · 1 评论 -
分享炫酷的前端页面滑动验证(2)
分享炫酷的前端页面滑动验证前面已经发过一种,这里再发一种,只是特效不一样还是直接上代码<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>Title</title> <style> /* 滑动控件容器,灰色背景 */ #dragContainer {原创 2021-06-03 00:29:06 · 5041 阅读 · 1 评论 -
分享炫酷的前端页面滑动验证
分享炫酷的前端页面滑动验证直接上代码<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>Title</title> <!--引入jquery的js --> <script type="text/javascript" src="../jquery/jquery.js"><原创 2021-06-03 00:24:56 · 4843 阅读 · 0 评论 -
ajax基本调用以及说明
ajax在项目中主要用作前后端交互,用的还是很多的,开发者应该掌握,面试的时候也是经常会被问到一些基本理论,先总结以下常用理论再举例说明实例1 什么是ajaxAJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。2 ajax的工作原理Ajax的工作原理相当于在用户原创 2021-06-02 00:08:34 · 6139 阅读 · 0 评论 -
js请求路径控制台报错 Failed to launch ‘xxx‘ because the scheme does not have a registered handler.
控制台报错: Failed to launch ‘xxx’ because the scheme does not have a registered handler.这种错误是因为请求没有协议,应该把协议头加上错误的例子 window.location.href="localhost:8080/goShowJSP"正确的例子 window.location.href="http://localhost:8080/goShowJSP".........原创 2021-06-02 00:07:56 · 41427 阅读 · 3 评论 -
js延迟window.open window.location几秒之后跳转
今天用ajax做个简单例子登录成功后跳转到展示数据页面,我想要登录成功后用layer提示一下再跳转页面,但是我用window.location.href会直接跳过我的layer提示,就想着让弹窗先出来几秒然后再跳转,现在已经解决,分享给大家我想要的效果 先提示一两秒再跳转直接跳过弹窗的代码success(data) { // 成功调用的回调函数 if(data=="1"){ layer.msg("登录成功",{icon:6,an原创 2021-06-02 00:04:34 · 6241 阅读 · 4 评论 -
html锚点简单使用
在项目开发中锚点可以丰富客户体验,比如说点击一个菜单定位去页面的某个位置,常见的就是返回顶部等,下面简单介绍下锚点的使用锚点离不开<a></a>标签,简单介绍下<a></a>超链接的一些常用例子1.链接访问地址<a href="http://www.baidu.com">点我去百度!!!</a>2.空链接不访问<a href="#">点我去百度!!!</a>3.链接访问js函数<a hre原创 2021-05-31 21:46:11 · 5001 阅读 · 0 评论 -
js传参中文格式不对乱码
js传参中文格式不对乱码今天做项目其中一个地方要把input的输入框输入的参数作为查询条件进行查询,试了很多次都不能正常接收中文参数,经过反复各种实验目前已经解决,大概总结一下一开始我就这样简单粗暴不经过处理直接传后台也简单粗暴的直接接收得到的结果就是不是格式不对就是报错然后各种百度一顿操作,解决方式如下1.前端传递中文参数在确保数据准确的情况下,首先将获取到的值进行两次转换再传function queryLike(){ var uname=$("#uname").val(); u原创 2021-05-28 17:22:33 · 5894 阅读 · 4 评论 -
SpringBoot引入layui
SpringBoot引入layui进入layui官方下载: https://www.layui.com/下载完是个压缩包进行解压缩在resource下创建static文件夹,把解压缩好的复制进去jsp添加引用 <!--引入layui的css--> <link rel="stylesheet" href="../layui/css/layui.css"> <!--引入layui的js--> <script type="te原创 2021-04-23 22:37:34 · 6387 阅读 · 2 评论