Web前端
关注
分享
扫一扫
文章平均质量分 67
罗汉爷
每一个不曾起舞的日子，都是对生命的辜负！
展开
-
【开源】word中插入代码之Prism+PHP实现高亮代码带格式一键复制到word
你是否还在为word中插入代码格式难看，难以复制或复制出现莫名其妙格式问题而困扰？这个工具就是一键高亮代码，一键原样复制到word，保证代码在word中一样的好看，一样的容易复制而不会出乱子，怎么样，还不赶紧收藏下载试一试？【项目地址】：https://github.com/mudfish/code-highlight原创 2024-05-02 00:03:17 · 885 阅读 · 0 评论 -
VuePress + Github Pages 搭建文档博客
最近想把常用的一些干货知识点都集中起来，方便发布和查找。相当于创建一个自己的知识库，我就叫它Java技术文档。虽然博客写文档也挺方便，但是在于文档的集中阅读和管理方面还是不够简洁和快速。此处就以Vue官方文档举例，它就是用的自家技术vuepress创建的。...原创 2022-08-05 22:46:36 · 732 阅读 · 0 评论 -
Vuepress + GitHub Actions实现文档博客自动部署
接着我上一篇文章，已经使用vuepress+搭建好了自己的文档博客，并且可以在本地打包上传后就可以在pages上查看更新内容。但是有1个比较明显的缺点：打包速度并不快！！！这是受限于vuepress是利用webpack打包造成的，有幸我们可以将打包工作交给。.........原创 2022-08-05 22:03:40 · 1101 阅读 · 0 评论 -
Uniapp+Nodejs实现外卖App项目1-项目介绍
本项目采用uniapp和nodejs（数据接口）、mongodb等技术实现了一个类似美团外卖的简易APP。项目主要目的是为了快速上手，如何快速使用uniapp开发一个app项目，同时掌握一些常用的知识点。有兴趣的朋友可以拿去做二次开发或毕业设计也是不错的。通过本项目，你将学习到：1、uniapp基础2、vue和vuex的使用3、nodejs+express+mongodb的组合如何快速开发一套api接口4、uniapp本地存储的使用5、uniapp基本组件和扩展组件的使用6、如何实现购物车逻辑？原创 2022-07-13 10:03:35 · 2490 阅读 · 3 评论 -
uniapp实现点击加载更多
举个栗子：外卖app当订单商品数量比较多时，不方便一次性展示出来。通常会展示一部分，并在页面给出一个查看更多功能。点击后即可自定义展示剩余内容，比如可以每次点击多展示N个内容，或展示所有。以下为整个页面的所有代码，涉及到的数据可以自己造一些，此处不再赘述。...原创 2022-07-02 18:28:03 · 4097 阅读 · 0 评论 -
el-dialog关闭后重置表单和校验提示
问题说明最近测试反馈操作某新增/修改表单，点击【取消】或【关闭】窗口后再次点击【新增】或【修改】发现校验提示仍然存在！问题原因项目采用Vue+ElementUI，修改表单的窗口控件采用el-dialog中添加el-form实现，默认在关闭和取消操作是没有绑定任何事件的，所以不会去清除原有的validate校验提示信息。解决方案1、在el-dialog元素上绑定一个@close事件，指向一个自定义函数，例如此处叫做：reset(formName)意思就是点击关闭按钮重置表单，同时清空校验信息。例如原创 2021-10-19 12:11:40 · 3023 阅读 · 1 评论 -
Javascript操作对象数组实现增删改查
1.介绍最近帮朋友弄一个简单的针对json数组的增删改成页面，正好涉及到了js去操作对象数组实现增删改查功能。我估计很多朋友应该也会遇到这类操作，所以记录一下以便分享。2.数据准备这里我就以学生对象数组为例了，其实这个数组和json数组操作起来基本一致的，转换一下即可。例如可以使用JSON.parse将一串JSON字符串转换为js对象数组。测试数据：// 学生对象数组var students = [ {id:1, name: "张三", age: 14}, {id:2, name原创 2021-07-03 16:14:16 · 1381 阅读 · 2 评论 -
layui切换select选项事件
说明我们经常遇到表单上面选择不同的下拉选项需要触发函数去完成一些业务逻辑，比如我这个地方根据所选商品查询它底下明细的数量，并展示。效果演示代码<!--选择商品--><div class="layui-form-item"> <label class="layui-form-label">商品</label> <div class="layui-input-block"> <select id="go原创 2021-05-25 14:36:49 · 2054 阅读 · 0 评论 -
Vue+ElementUI实现用户管理前后分离实战二：API接口篇
项目介绍上一篇介绍了前端相关实现代码和效果，本篇则介绍后端接口API如何实现。 ：）上一篇地址：https://blog.youkuaiyun.com/IndexMan/article/details/112480590项目截图用到的技术栈SpringBootMybatis-PlusMysql实现的API如下1.登录接口2.列表接口3.保存接口4.删除接口5.单条查询接口主要代码这里主要列一下主要代码片段，完整请看项目源码。LoginController@RestC原创 2021-01-11 19:30:53 · 741 阅读 · 4 评论 -
HTML+CSS设计一个朴实无华的登录页
说明之前一直偏重于后端技术研究，最近设计网站感觉前端太菜，遂集中看了下CSS的内容。后续我会发表一些前端实战的一些例子，给自己记录的同时希望也能分享给大家。实现效果主要知识点DIV屏幕垂直居中（自动管理宽度和高度）input标签修饰（padding和focus样式）DIV边框阴影和圆角效果（利用：box-shadow）如何让label标签垂直右对齐（inline-block）如何调整line-height使得块级元素不会乱动源码<!DOCTYPE html><原创 2020-12-25 18:39:31 · 3683 阅读 · 8 评论 -
使用clipboard插件结合layui实现的一键复制按钮
说明之前开发了个基金分析的网页，主要是方便几个朋友买卖基金做个参考。这里面基金代码是存储在浏览器cookie中的，也就是说假如我换了浏览器就没法查了，最方便的就是一键复制代码粘贴到另外一个浏览器中一次添加好。实现效果代码我这里用了layui我就不列了。引入剪切板插件js下载地址： https://github.com/zenorocha/clipboard.js/archive/master.zip<script th:src="@{/static/js/clipboar原创 2020-12-23 17:22:56 · 2998 阅读 · 4 评论 -
nodejs+express4实现文件上传下载删除和列表展示功能
0.效果展示1.创建项目创建文件夹：express_file_uploadnpm init# 入口文件选择server.js安装插件npm install expressnpm install nodemon -gnpm install body-parser multer npm install ejs参考资料2.上传文件上传页面<!D...原创 2020-04-15 08:38:28 · 1669 阅读 · 8 评论 -
Vue实现简单图书管理例子
以下内容整理自网络。说明本例主要涵盖以下知识点：数据绑定 条件与循环 计算属性 监听器 过滤器 常见数组和对象操作 vue生命周期示例演示代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name=...原创 2020-03-18 20:38:22 · 1943 阅读 · 2 评论 -
Layui项目实战干货总结（精品）
写代码时遇到的知识点拿出来分享，我把上下文都列出来了。1.layer弹出层显示在top顶层// 监听工具条 table.on('tool(tb-book)', function (obj) { var data = obj.data; // 修改 if (obj.event === 'edit'...原创 2020-01-12 11:30:53 · 3660 阅读 · 0 评论 -
JS实现提示文本框可输入剩余字数
最近在设计写博客功能时，涉及到留言框输入字数限制，需要给用户剩余数字提示。参考文章：https://www.cnblogs.com/crazytrip/p/4968230.html实现效果：源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&...原创 2019-05-12 00:16:26 · 2296 阅读 · 0 评论 -
js加css实现div展示更多隐藏内容
说明在设计博客首页文章分类等栏目时，有时候列表内容太多往往不是一次性展示出来。此时需要添加更多功能，当点击更多标签时再展示剩余隐藏的项目。效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta na...原创 2019-05-25 19:02:02 · 3748 阅读 · 0 评论 -
使用JS实现博客搜索关键字高亮
说明最近博客添加了搜索功能，有个需求是要针对搜索结果中搜索关键字需要高亮显示。以便用户可以更快速的挑选自己中意的文章。原理就是在渲染列表数据中给含有关键字的文本标签添加自定义class，渲染完毕后调用写好的高亮js方法。实现效果代码// 搜索关键字高亮var highlightKeyword=function(keyword) { //1.获取要...原创 2019-06-16 10:10:23 · 3053 阅读 · 0 评论 -
js日期格式化
最近在学习js，发现没有直接提供方便的日期格式化函数。搜集了下网上通用的做法，以备后续工作中使用：// 对Date的扩展，将 Date 转化为指定格式的String// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) Date.proto原创 2017-10-15 00:23:55 · 595 阅读 · 0 评论 -
ckeditor使用技巧总结
介绍我自己开发的博客系统，写博客个人喜好富文本编辑器。我有几个理由推荐ckeditor：复制、粘贴方便，还把格式都带过来，例如:word,excel 可以直接复制截图，或上传图片；可编辑图片属性 插件丰富，满足你的DIY爱好，还可以自己写插件 用户群体及其广泛遍布全球，社区活跃，资料丰富，易学易用官方开发者文档：https://ckeditor.com/docs/ckedit...原创 2019-05-21 10:51:37 · 1528 阅读 · 0 评论 -
bootstrap响应式网页布局
bootstrap可以说是没有布局和审美概念的后端狗的福利。使用它的栅格系统可以轻松的对网页进行布局，而且可以做到响应式的布局。看起来很酷，接下来我就会总结自己在开发博客系统中用到的知识点及实战案例给大家，作为一个专栏管理。知识点栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。container:用于固定宽度并支持响...原创 2019-05-04 10:16:52 · 2547 阅读 · 0 评论 -
CSS实现页脚始终在页面底部
说明 最近在布局自己的博客系统，我是想练练手把时下比较流行的前后端技术串起来。同时，我会把设计和编码过程中遇到的问题或值得分享的技术点、实现方式做下总结，记录下来。本篇就是第一篇，个人能力有限，不足之处欢迎指正。大家一起交流，共同进步是我写博客的初衷。 我们知道要想让页脚DIV始终固定在底部有几种实现方式。1.是靠绝对定位position:absoute实现div固定在...原创 2019-04-14 23:29:06 · 2184 阅读 · 0 评论 -
js常用知识点整理
说明：以下内容都是我工作中实际碰到的js知识点。后面还会碰到其他知识点或对原来解决方案的改进，都会在本篇中持续不断的维护，希望给刚参加工作或初学的朋友一些参考。1.给元素添加事件$("button").click(function(){ $("p").css("color","red"); });2.遍历DOM元素小说分类：<br> ...原创 2018-01-27 15:51:05 · 728 阅读 · 0 评论 -
js中返回今天是星期几的方法
var weeks=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];var today = new Date();var num = today.getDay();//0-6 0:星期日 1:星期一console.log("今天:" + weeks[num]);效果：原创 2018-01-27 13:02:06 · 2111 阅读 · 0 评论 -
html中iframe调用兄弟iframe中的js方法
问题说明最近工作中碰到一个页面有一个主iframe A，用于操作主要业务元素。其中有一个弹出框里面也嵌入了一个iframe B，此时，我需要在B中调用A中JS的指定方法。下面咱们来通过例子还原一下这个场景，看如何实现的。主页面htmltestframe.html iframe1即A页面原创 2018-01-26 18:33:03 · 3539 阅读 · 0 评论 -
zTree如何实现模糊查找实战
1.说明最近在研究zTree树控件。过程中涉及到了实现模糊查找结点的功能，特此分享一下。有关zTree的有关介绍和使用，请访问其官网：zTree -- jQuery 树插件本文假设你已经比较熟悉了这个控件。2.实现效果3.代码<!DOCTYPE html><html><meta http-equiv="content-ty...原创 2018-01-12 10:37:17 · 3324 阅读 · 5 评论 -
常用js正则表达式
以下内容整理自网络，以备自用和分享：js中15个常用的正则表达式+正则集合1 用户名正则//用户名正则，4到16位（字母，数字，下划线，减号）var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;//输出 trueconsole.log(uPattern.test("iFat3"));2 密码强度正则//密码强度正则，最少6转载 2017-10-15 13:22:57 · 1827 阅读 · 0 评论 -
js数组类型
js数组类型:数组检测1.判断变量是否为数组类型：arr1 instanceof ArrayArray.isArray(arr1);true转换方法toString()方法，以便返回数组的字符串表示valueOf()返回的还是数组由于 alert()要接收字符串参数，所以它会在后台调用 toString()方法，由原创 2017-10-13 00:11:56 · 580 阅读 · 0 评论 -
24个javascript最佳实践
1. Use === Instead of ==JavaScript utilizes two different kinds of equality operators: === | !== and == | != It is considered best practice to always use the former set when comparing."If two翻译 2017-10-18 21:59:29 · 1052 阅读 · 0 评论 -
免费接口API
前言我们经常在不同的应用中见到镶嵌的本地地理位置气象信息，一般配合定位使用，即先获取用户位置，然后通过用户的区域请求免费的天气接口，获取气象数据，json解析后展示。一，常用的三个接口我常用的接口地址有三个，都是以北京的为准，如下：1， http://www.weather.com.cn/data/sk/101010100.html转载 2014-04-22 15:12:31 · 8133 阅读 · 1 评论 -
js根据输入字符长度自动调整textarea高度
1.编写html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自动扩展文本框高度</title> <script type="text/javascript&qu原创 2018-03-07 11:24:58 · 1122 阅读 · 0 评论 -
工作中常用HTML知识点整理
1.table相关样式border：设置表格边框大小cellspacing：设置单元格间距cellpadding：设置单元格边界与单元格内容间距border-collapse：设置表格的边框是否被合并为一个单一的边框，--separate默认值。边框会被分开。--collapse如果可能，边框会合并为一个单一的边框；会忽略 border-spacing 和 empty-cells 属性；例子：&l...原创 2018-03-28 23:58:07 · 308 阅读 · 0 评论 -
CSS加JS实现网页返回顶部功能
最近在设计自己的博客，前端页面在内容很多的时候往下拖动会有滚动条。通常我们都需要一个返回顶部的功能来实现快速来到网页顶部。当然实现方式不止一种，这里我采用的最实用的一种。使用CSS+Jquery方式 代码量相对较少，容易理解。实现原理1.我们需要再DOM中添加自己的DIV，里面包含一个a标签，a标签里面包含两个img标签用于存放返回顶部的图片。2.添加必要的CSS样式3.然后...原创 2019-04-21 19:50:38 · 1923 阅读 · 1 评论 -
CSS实现下拉菜单
1.知识点定位postition浮动float展示display2.实现效果3.代码<!DOCTYPE html><html><head><title>下拉菜单</title><meta charset="utf-8"><style>ul { list-...原创 2019-04-09 22:18:22 · 2387 阅读 · 0 评论 -
Vue实例的生命周期
官方图解光看着图大家可能不是很理解，起码不是100%看得透，结合下面的代码就可以了。我先总结了一下几个函数执行时Vue实例的状态：执行beforeCreate，此时实例完全被创建出来，而data 和 methods 中的数据都还没有没初始化。 执行created，data 和 methods 都已经被初始化好了！通常：如果要调用 methods 中的方法，或者操作 data 中...原创 2019-04-02 16:25:38 · 314 阅读 · 0 评论 -
Vue实现静态列表增删查功能
知识点1.双向数据绑定2.自定义指令3.自定义过滤器4.v-for循环对象数组5.ES6操作数组的新方法：forEach some filter findIndex实现效果页面源码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF...原创 2019-04-01 15:54:27 · 2431 阅读 · 0 评论 -
vscode添加自定义html片段
最近在学vue，用的是微软的vscode 开发工具。很不错，赞一下微软。里面包含了众多插件大家可以各取所需。另外有一项实用的功能，User Snippets用户自定义代码段，对于那些需要重复编写的代码段 用一个快捷键自动补全，很省事。下面就演示一下，代码如下："vh": { "prefix": "vh", // 触发的关键字 输入vh按下tab键 "body": [ ...原创 2019-03-30 17:57:11 · 2587 阅读 · 0 评论 -
Vue实现简单计算器功能
知识点：v-model双向绑定v-on事件绑定实现效果源码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-wid...原创 2019-03-30 17:28:48 · 1756 阅读 · 3 评论 -
CSS实现导航栏
1.知识点列表 浮动 伪类 背景 文本格式化 盒子模型2.效果3.代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=devic...原创 2019-04-04 09:25:53 · 1952 阅读 · 0 评论 -
form表单如何实现ajax提交
最近在开发一个游戏网关的后台管理系统，总结了下中间碰到的一些问题。之一就是：form表单如何实现ajax提交？问题：在使用form表单的时候,一旦点击提交触发submit事件，一般会使得页面跳转，页面间的跳转等行为的控制权往往在后端，后端会控制页面的跳转及数据传递，但是在某些时候不希望页面跳转，或者说想要将控制权放在前端，通过js来操作页面的跳转或者数据变化。一般这种异步的操作，我们都...原创 2018-11-10 12:12:53 · 2460 阅读 · 2 评论 -
使用marquee标签实现文字滚动
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body style="text-align: cen原创 2018-03-29 00:22:17 · 5379 阅读 · 0 评论