前端
关注
分享
扫一扫
小马 同学
Java | Web前端 | 数据结构与算法 | 记录学习
展开
-
一文带你彻底搞懂JS前端跨域请求
什么是跨域请求在前端开发编码过程中，常见的 html 标签例如：a、form、img、script、link、iframe以及 Ajax 操作都可以指向一个资源地址或者说可以发起对一个资源的请求，那么这里所说的请求就存在同域请求还是跨域请求。所谓跨域请求就是指：当前发起请求的域与该请求指向的资源所在的域不一致（这里所有的域是协议、域名和端口号的合集，同域就是所协议、域名和端口号均相同，任何一...原创 2020-04-02 18:21:33 · 4071 阅读 · 54 评论 -
从浅到深，带你彻底搞懂AJAX异步请求
文章目录什么是 AJAX实例用法1、AJAX load() 方法2、$.get() 方法3、$.post() 方法4、ajax() 方法什么是 AJAXAJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传...原创 2020-03-09 18:01:22 · 15757 阅读 · 27 评论 -
大厂都在用的Markdown编辑器
现在很多平台写文章都是使用的Markdown编辑器。曾几何时，我们是否也想过把Markdown运用到自己的项目中。这不，最近项目需要一个新闻管理的功能，我毫不犹豫的选择的时下最火Markdown来完成。下面来一起看一下具体的实现吧！！！文章目录准备工作准备工作在使用之前当然是需要先下载对应的插件，下载地址：https://pandao.github.io/editor.md/index...原创 2020-02-27 18:37:34 · 3335 阅读 · 30 评论 -
Layui图片上传组件使用指南
前言Layui是一套非常棒的前端框架，页面简约美观，关键是非常容易上手，在开发中也是很多项目的首选。之前用Layui做过开发，现在整理一下Layui的文件上传组件，Layui上传组件页面效果看起来非常舒服，简约美观。之前也用过Bootstrap的上传组件，这两款上传组件平分秋色，各有各的特点，总而言之，都是很实用而且很美观的上传组件，想了解BootStrap上传组件的请移步：BootStrap ...原创 2020-02-11 17:32:56 · 8097 阅读 · 16 评论 -
BootStrap FileInput 文件上传组件使用指南
BootStrap FileInputBootStrap FileInput是一款非常优秀的HTML5文件上传插件，支持文件预览、多选等一系列特性。BootStrap FileInput样式设计的非常美观，功能也很齐全。是一款很好用的上传组件。先来看一下效果图选择后查看详情，可以放大，全屏预览。选择多张图片引入插件的样式文件插件下载地址：https://github.com/...原创 2020-02-09 18:32:30 · 16937 阅读 · 24 评论 -
BootStrap Table行内编辑
BootStrap Table表格内编辑BootStrap作为目前比较流行的一款前端框架，平时开发中也用到的很多，之前在写项目页面用的Bootstrap，数据展示用的BootStrap Table。因为项目需求，需要对表格中某些字段可以直接在表格中编辑保存。对于BootStrap Table表格内编辑这里整理了两种方法。想了解BootStrap Table的小伙伴可以移步到Bootstrap ...原创 2020-02-06 18:57:14 · 15618 阅读 · 19 评论 -
Bootstrap-Switch开关控件使用指南
Bootstrap-SwitchBootstrap Switch是一款轻量级插件，可以给选择框设置类似于开关的样式,它是依赖于Bootstrap的一款插件。将复选框和单选按钮切换为切换开关。效果图插件下载地址：https://github.com/Bttstrp/bootstrap-switch引入插件文件<link href="static/bootstrap...原创 2020-02-04 18:07:11 · 14662 阅读 · 11 评论 -
LayUI数据表格的使用指南
LayUI是现在比较流行的一款前端框架，数据表格也是后台管理中很长用到的工具了。最近做项目就用到了，项目的要求是用数据表格显示出后台文章的列表并且每一行的文章都有对应的修改删除操作按钮。之后就写了一个小案例，做一下整理和记录。首先需要引入LayUI的CSS和JS样式。之后页面代码只需要一个table标签即可，只有用JS请求数据渲染表格。<table class="layui...原创 2020-01-07 18:59:49 · 11933 阅读 · 9 评论 -
LayUI下拉树TreeSelect的使用
树形结构在实际开发中是很长用的一种结构。最近写了一个LayUI的小案例，其中用到了TreeSelect，这里整理一下。TreeSelect官网地址：https://fly.layui.com/extend/treeSelect/显示效果图。因为TreeSelect不是LayUI官方开发的，而是第三方基于LayUI开发的，所以需要先用Layui引入一下文件。之后页面只需要引入...原创 2019-12-30 08:55:31 · 31221 阅读 · 36 评论 -
BootStrap-Table-Treegrid树形表格使用指南
BootStrap-bable-treegridBootstrap是目前很流行的一款前端框架，也有很多第三方基于Bootstrap开发出了很多跟实用性的一些功能，比如BootStrap-bable-treegrid树形表格。树形表格在开发中应该是很常用到的。引入样式文件<link rel="stylesheet" href="static/bootstrap/dist/css/...原创 2019-12-28 14:01:44 · 13514 阅读 · 13 评论 -
JS实现滑动拼图验证
先看一下效果图：设置画布滑块属性const l = 42, // 滑块边长 r = 10, // 滑块半径 w = 310, // canvas宽度 h = 155, // canvas高度 PI = Math.PIconst L = l + r * 2 // 滑块实际边长设置背景图片：图片链接地址可以自行更换function getRandomImg...原创 2019-11-08 13:21:05 · 10873 阅读 · 13 评论 -
JS中定义变量的几种方法，你都知道吗
前段时间看了一道面试题，问JS有几种定义变量的方式，平时用的一般的就是var声明了，最多在用到一个let，当时就想的两种。之后看答案是三种，当时就蒙了，之后找了一些资料看了一下。才知道原来JS有三种声明变量的方式：var，let，const。这里整理记录一下。1、var定义的变量可以修改，如果不初始化会输出undefined，不会报错，也是最常用的一种定义变量方式。var定义变量在方法中修...原创 2019-11-11 13:47:17 · 8278 阅读 · 0 评论 -
LayUI时间线优化
layui时间线官方文档：https://www.layui.com/doc/element/timeline.htmllayui原本时间线样式代码部分，首先需要引入layui的样式文件<div style="margin: 20px 50px;"> <ul class="layui-timeline"> <!--定义时间线组件--> ...原创 2019-11-06 13:15:53 · 10569 阅读 · 7 评论 -
Web网页如何实现QQ好友，QQ空间，微博分享
QQ好友，QQ空间，微博分享实现起来都是差不多的，就是请求地址需要改一下，参数基本都是一样的。分享参数信息/*获取当前网页链接，分享的链接*/var url = window.location.href;var desc = "分享描述";var title = "分享标题";var summary = "分享摘要";var pics = "图片";QQ好友分享请求地址...原创 2019-11-04 22:34:59 · 4411 阅读 · 4 评论 -
LayUI—tree树形结构的使用
树形结构在实际开发中很长用到，比如部门管理，权限菜单等。因为用树形结构来展示会显的很清晰明了。最近写了一个个人博客小项目中用到了LayUI的树形结构，之后写了一个小案例整理一下。官网地址：https://www.layui.com/v1/doc/modules/tree.html先看一下显示的效果图。点击节点右面会显示对应部门的详情信息，可以修改。可以自定义按钮添加部门，也可以直接...原创 2019-09-01 21:46:46 · 106405 阅读 · 73 评论 -
Bootstrap Table数据表格的使用指南
Bootstrap-Table：在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，Bootstrap-Table是一款非常好用的开源表格插件，在很多项目中广泛的应用。Bootstrap-Table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表...原创 2020-02-03 18:22:29 · 11356 阅读 · 14 评论 -
layui富文本域form表单提交和ajax提交获取编辑器内容详解
最近写项目中需要用到LayUI富文本编辑器，提交时发现富文本编辑器中内容是空的，查了很多资料才发现，LayUI在渲染富文本域时，是在下面插入的样式代码。我们页面上定义的是一个textarea标签，之后用JS渲染的。我们获取的内容是textarea中内容，富文本域中的内容和textarea中的内容不是自动同步的，所以我们需要在提交前把内容同步一下。form表单提交：首先定义文本域和提交按...原创 2019-04-21 15:28:29 · 10582 阅读 · 0 评论 -
layui富文本编辑器添加图片回显问题详解
最近写项目中需要用到LayUI富文本编辑器，其他地方都挺好，唯独上传图片时，要不就是上传完成后回显404，要不就是访问时404（访问时我是新打开的一个页面），返回路径一直有问题，之后把返回的路径改成绝对路径就可以。效果图如下：先添加上传图片接口，layui会自动传递参数，后台直接写对应的上传方法就行了。var layedit = layui.layedit;layedi...原创 2019-04-21 15:45:22 · 16708 阅读 · 17 评论 -
js如何实现登录时记住密码
常见的很多网站登录，都有记住密码功能，下面是用js实现的记住密码功能（代码用的源生js，不用引入任何插件，大家如果引入了jQuery，可以进行修改，优化）js部分window.onload = function(){ var oForm = document.getElementById('myForm'); var oUser = document.getElementById('...原创 2019-04-26 10:39:36 · 12776 阅读 · 2 评论 -
LayUI富文本域使用案例
LayUI富文本域是一款轻量级的富文本编辑器，页面设计比较简约。之前写项目时因为用的是LayUI框架，所以富文本域当时就用的LayUI富文本编辑器，这里整理一下。先来看一下效果图，页面效果图。访问效果图：首先需要引入LayUI的JS和CSS样式文件。显示LayUI的富文本域页面只需要放一个textarea标签，可以设置富文本域的默认值。<textarea ...原创 2019-04-26 11:24:44 · 18192 阅读 · 23 评论 -
HTML实现百度地图定位及导航功能
首先使用百度地图需要在百度地图平台申请一个密钥，网址：http://lbsyun.baidu.com/apiconsole/key申请之后就可以直接引用了。效果图：代码实现（详细注释）:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <!--适应移...原创 2019-04-27 13:22:06 · 23457 阅读 · 19 评论 -
vue-devtools下载与安装
简介vue-devtools是一款基于浏览器的插件，用于调试vue应用，现在已经可以在Firefox和Safari中安装。这可以提高我们的调试效率。商店直接安装Chrome Extension https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpdFirefo...原创 2019-04-19 19:34:38 · 7720 阅读 · 1 评论 -
jquery实现两个div中的元素相互拖动
这里写了两个实例，两个都是基于jquery实现的。如果有更好的方法，欢迎分享。第一个效果图：拖动中：拖动完成后：代码实现：<!doctype html><html> <head> <meta charset="utf-8"> <title></title> <link rel...原创 2019-05-09 18:16:21 · 3723 阅读 · 0 评论 -
LayUI树形表格treetable使用详解
LayUI是现在比较流行的一款前端框架，也有很多人基于LayUI开发了很多不错的组件，比如treetable树形表格。因为treetable是第三方基于LayUI开发的，所以需要先用Layui引入一下文件。layui.config({ base : 'static/layui/'}).extend({ treetable : 'treetable-lay/treetab...原创 2019-04-29 12:40:08 · 149370 阅读 · 109 评论 -
BootStrap富文本编辑器Summernote
Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器，基于JQuery 和 Bootstrap 构建，支持快捷键操作，提供大量可定制的选项。官方API和插件下载官网地址：http://summernote.org/getting-started/下载地址：https://github.com/summernote/summernote/效果图上传图片...原创 2020-02-09 09:15:26 · 9835 阅读 · 31 评论 -
LayUI流加载的基本使用
最近写了一个个人博客项目，博客显示用的LayUI流加载实现的。这里整理一下吧。流加载的原理其实和分页一样，每次加载一页的数据显示，只是加载的方式不同。LayUI流加载的官方文档地址：https://www.layui.com/doc/modules/flow.html首先在HTML页面中定义一个存放加载内容的标签（页面样式可以根据自己需求进行调试）:<ul class="flow-...原创 2019-06-30 10:34:41 · 9148 阅读 · 0 评论 -
BootstrapValidator，简单而实用的表单验证插件
Bootstrap是现在非常流行的一款前端框架，这篇来介绍一款基于Bootstrap的验证插件BootstrapValidator。先来看一下效果图（样式是不是还不错O(∩_∩)O哈哈~）。Bootstrapvalidator下载地址：https://github.com/nghuuphuoc/bootstrapvalidator/引入对应的CSS和JS<link r...原创 2020-02-04 14:09:45 · 7644 阅读 · 7 评论