![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
张芝山
这个作者很懒,什么都没留下…
展开
-
jquery上传图片和文字的图文并茂上传组件的功能实现
2022年开来我一直沉迷于公司的业务开发,更多的是curd的工作还有自己在学习的分布式锁的知识,但是还没整理完毕,心想总得写点什么,不然都要荒废了!!!,刚好最近的项目有一个功能点很有意思:是一个上传图片的同时也要写入文字,这样的设计目的是让另一客户端取出数据的时候渲染是图文并茂的样子,并且不止一组图文,有涉及到多组,所以需要对元素有增加和删除的细节。效果图思路首先是把样式给画出来,接下来上传图片,上传之后将成功的值渲染到页面上,并在隐藏域中放置图片的名称,文本输入这点不需要赘述,填什么提交什么.原创 2022-03-24 15:03:31 · 2157 阅读 · 0 评论 -
总后台顶部实现站内信功能
近期的量化项目,接到一个需求,需要在总后台的顶部做一个站内信的功能,要求可以滚动显示,有信息的时候在站内信图标处显示红点,点击图标出现站内信列表,关掉之后再点击图标的时候,会有最新的信息进来效果如下:...原创 2021-12-30 11:41:39 · 875 阅读 · 0 评论 -
switchery按钮实现
因为用习惯了简单的checkbox,所以要换个新的按钮,具体效果如下效果图:css文件内容(switchery.css).switchery{background-color:#fff;border:1px solid #dfdfdf;border-radius:20px;cursor:pointer;display:inline-block;height:30px;position:relative;vertical-align:middle;width:50px;-moz-user-sele.原创 2021-12-13 11:19:11 · 973 阅读 · 0 评论 -
layui实现表单一键设置功能
需求就是 我给某个input框输入一个值之后 点击一键设置 其他input框的值就和刚才的值相同首先 先写一个form表单 将上述的框包裹起来 之后原创 2020-02-27 11:40:42 · 433 阅读 · 0 评论 -
layui实现后台快速登陆功能
需求:在后台的用户列表每一行增加一个快速登陆的按钮 点击之后 直接跳转到对应用户的后台 并且在这个过程中链接不暴露重要信息 需要进行加密 效果如下:那么该如何实现呢?第一步 先对这个快速登陆的按钮绑定事件 然后进行处理<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="login">快...原创 2019-11-22 17:24:42 · 1975 阅读 · 0 评论 -
layui使用excel.js完成列表导出excel功能
原先写过导出功能的业务处理是在后端进行导出通过前端直接打开即可!对应文章链接:https://blog.csdn.net/zhangzeshan/article/details/100549210但是因为需求原因 以及兼容性问题 不得不考虑另外一种实现方法就是后端的接口不再进行导出的业务处理 只进行数据的组织之后通过前端请求这个接口 拿到数据之后 在前端进行导出的业务处理...原创 2019-11-15 23:19:54 · 1617 阅读 · 0 评论 -
layui表格使用totalRow算出总合计(不是单纯计算单页合计)
用过layui的朋友都知道,当要计算列表中某一列的总合计的时候 只需要用到totalRow的属性就可以完成 大致代码如下:但是这样有个问题 这个写法是针对于当前页的某个列的合计 而不是所有数据的这个列的合计因此 我是这样实现的首先 为了代码的可读性 我单独写了一个接口 专门用来计算合计的 (其实是可以和请求列表数据的接口放在同一个地方)之后 我改写一下上述的代码 :...原创 2019-11-15 22:53:49 · 10638 阅读 · 5 评论 -
Vue组件间的通信基本用法和应用示例
在vue中 父组件指的就是我们new Vue的这个实例,而子组件通常指的就是我们自己定义的全局或者私有的组件,那么父子组件之间的通信是如何实现的?父组件向子组件传值首先我们创建一个Vue实例,在data对象中定义msg属性:(我们用属性的内容来区分值是属于父组件还是子组件)data:{ msg:'这是父组件内容 哈哈哈哈'},接下来我们创建一个私有子组件,这个私有子组...原创 2018-12-14 17:58:56 · 97 阅读 · 0 评论 -
Vue路由的基础知识和应用示例
基本使用方法:实现一个小功能 有两个按钮 一个叫登录 一个叫注册 当我点击其中一个按钮的时候 显示不一样的内容其实在日常中 我们也会遇到 比如使用某个软件 有账号就点登陆 ,没有账号就去注册 大概是这样也就是点击不一样的按钮 显示不一样的内容 不一样的表单而实现这个功能的方法很多 比如 我们可以利用vue的路由 来实现首先html方面 我们只需要 创建一个div 赋予...原创 2019-08-25 21:30:02 · 150 阅读 · 0 评论 -
vue组件基本用法及示例
首先讲组件的创建 有三种方式创建组件方式1第一步:使用vue.extend来创建全局组件var com1 = Vue.extend({ template:'<h3>这是使用Vue.extend创建的组件</h3>'//通过template属性来指定要展示的内容})第二步:使用vue.component('组件名称',创建出来的组件模块对象)组...原创 2018-12-14 17:17:24 · 604 阅读 · 0 评论 -
Vue动画基本用法及应用
Vue动画的应用先从基本开始:首先我们是基本的显示隐藏切换默认为false隐藏掉 通过按钮点击取反 实现显示隐藏功能,这边不再赘述<div id="app"> <input type="button" value="切换" @click="flag=!flag"> <h3 v-if=&qu原创 2018-12-14 16:14:38 · 229 阅读 · 0 评论 -
vue-resource请求数据基础用法及应用示例
首先引入vue.js再引入vue-resource,顺序不能乱,因为后者依赖于前者!不然会出现这个情况:先设置3个按钮:html代码:<div id="app"> <input type="button" value="get请求" @click="getInfo"> <input type="button&qu原创 2018-12-14 15:21:42 · 340 阅读 · 15 评论 -
vue自定义指令,过滤器及综合案例
vue过滤器Vue.filter<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1原创 2018-12-14 14:59:43 · 735 阅读 · 0 评论 -
Vue实现评论发布和列表的功能(父子组件之间的通信)
最近在巩固前端的知识,做了一个小案例,大致的功能就是:我发布评论 下方的列表中能显示记录下来,存储到本地的缓存中:首先,先看下效果:实现的过程需要引用bootstrap.css 和 vue.js 这两个文件 网上找即可!找不到可以留言!先一步步讲解 最后再贴上总代码:首先第一步是搭建页面 这个页面的搭建分为两部分 一个是上方的表单 一个是下方的列表上方的父组件是...原创 2019-08-10 15:35:21 · 522 阅读 · 0 评论 -
layui列表功能的实现以及搜索功能实现
需求很明了,前后端分离的项目,就是前端编写js和html代码 然后通过异步请求后端的接口提供的数据渲染到页面上本章就谈一下,关于如何用layui 布页面和接后台接口渲染数据到页面 显示出来的过程。先看下功能的效果老规矩先从页面布局开始其实布局没啥好讲的 因为用的layui 因此并不需要手写太多代码并且列表的加载是伴随着和后台的数据一起产生的因为 我们不需要直接让列表显示...原创 2019-08-23 16:10:34 · 20122 阅读 · 7 评论 -
layui列表中的编辑和新增数据以及删除的功能实现
上一篇文章讲到如何通过layui.js请求后台接口的数据 渲染列表页面以及搜索列表的功能这一篇讲述一下 编辑和新增的功能开发新增页面的实现编辑页面的实现先讲增加功能老规矩 依然是先页面的搭建说明一下 就是通过js将这个表单包裹起来 也就是不止页面显示 通过JS的触发之后在才能出现因此绑定了属性id boodTemplate然后其他的组件都是直接拿l...原创 2019-08-23 17:06:00 · 11211 阅读 · 2 评论 -
Vue关于监听的事件处理
监听1:keyup展示一个案例 有三个输入框 第一个输入框和第二个输入框 输入内容之后 第三个输入框 自动监听其他两个的值 并合并显示出来在实现的过程中 不需要通过提交去触发方法 而是用到keyup属性 监听输入框内容的变化双向绑定每个输入框的值 给第一个第二个输入框赋予keyup属性 属性的方法 叫getFullName至此 监听的事件完成 可以到页面上看下效果...原创 2019-08-25 21:29:55 · 1870 阅读 · 0 评论 -
webpack入门基础知识和示例
webpack是什么不再复制粘贴去说明这边主要是记录一些 刚开始接触webpack会遇到的一些问题 笔者总结了一下 并自己写了一个小demo来学习demo地址:https://download.csdn.net/download/zhangzeshan/11612596demo的根目录如下:webpack的使用1.先进行初始化 npm init -y2.然后安装要用的包...原创 2019-08-26 09:25:28 · 347 阅读 · 0 评论 -
webpack中使用vue示例
如何在webpack中使用vue 跟我们平常在html中进行操作还是有些区别的因为为了学习这个机制 我写了小demodemo地址:https://download.csdn.net/download/zhangzeshan/11612599demo目录结构如下:如何使用vue1. 先安装vuenpm i vue -S2.在入口文件 main.js中 导入i...原创 2019-08-26 09:25:13 · 153 阅读 · 0 评论 -
layui网站后台基础设置模块开发并实现update更新操作实现
项目是前后端分离,前端通过layui进行搭建,获取后台是通过layui的js去请求后台url拿到数据之后 渲染到页面上接下来不讲后端代码,只讲前端如何拿到值,并渲染到页面上。这个模块的功能是一个后台系统的网站设置,要求访问这个模块 直接出现一个表单,直接进行查看相关网站配置并进行相关的更新操作:首先看下最终的结果:首先先从页面的布局开始:因为这些数据我是直接从后台拿到 ...原创 2019-08-23 15:42:28 · 2609 阅读 · 0 评论 -
vue结合element实现图片上传
element的图片上传代码地址:https://element.eleme.cn/#/zh-CN/component/upload接下来开始展示代码:html部分: 这边就是使用element上传组件代码这边需要注意的是 选中图片之后 图片会先经过组件的判断是否合法 才能允许上传允许上传之后 会访问后台的接口 请求成功之后 会返回后台提供的即将插入到数据库的图片路径...原创 2019-09-28 15:19:05 · 1422 阅读 · 0 评论 -
原生JS实现点击选项卡,下面内容根据选项卡进行变化
先看前端代码,这边设置了四个按钮,每次点击其中一个按钮,跳出对应的div,其他div隐藏<div id="div1"> <input class="active" type="button" value="教育"/> <input type="button" value="培训" /> &原创 2018-09-05 21:46:40 · 1959 阅读 · 0 评论 -
vue指令,时间修饰符,使用样式介绍及综合应用
v-bind (:)用来绑定属性的指令 可以把值当成变量 去拼接字符串一般简写成 :<div id="app"> <input type="button" value="按钮" :title="myTitle+'abc'"/></div><script src="./lib/Vue.js&原创 2018-12-14 14:46:49 · 428 阅读 · 2 评论 -
正则表达式基础及应用
正则表达式,按照我自己的理解,其实就是字符串的操作校验,所以先介绍关于字符串操作的知识:第一个是search 查找搜索:var str='abcdef'alert(str.search('b')) //找到对应的位置 下标从0开始 没有找到对应的 返回是-1第二个是substring 字符串截取var str='abcdef' //第一个参数是起点 第二个参数...原创 2018-11-30 10:50:32 · 112 阅读 · 0 评论 -
Laravel前台实现列表渲染数据(Vue),调用后台接口
首先实现的功能是 首页有小列表 顶部点击查看更多 进入大列表如此,调用一个接口即可,在这里前端渲染数据,使用Vue.js好,话不多说,现在开始:首先展示下做出来的效果图:左侧是首页显示的小列表,右侧是点击查看更多后的大列表接下来 先看下从后台调取数据的接口写法:public function run(&$params) { //定义变量...原创 2018-08-08 21:04:01 · 2078 阅读 · 0 评论 -
laravel关于前台vue结合写后台接口拿数据渲染到页面上的过程(vant时间组件的运用)
先展示下效果图,要完成的功能就是通过时间筛选功能,查到每个月的交易数据点击右上角时间筛选这就是要完成的功能先引进的vue组件库的DatetimePicker 时间选择组件接下来编写一个文本框,赋予一个id="time" 还有一个点击事件 @click="onclickIndex":(这边命名随意取,只是用来渲染数据的时候弄来调用)下一步,引入组件代码,这边为了效果,...原创 2018-09-01 09:56:54 · 4687 阅读 · 7 评论 -
QRcode.js的二维码支持在移动端长按扫码和保存到手机相册
公司的项目是前后端分离,后台框架是laravel,前台拿数据,是通过编写接口从后台拿数据,再通过前台vue进行拿值,先看接口方面的读数据:$id = $params['id']; //商户信息内容 $data = User::select('name','mobile')->where('id',$id)->first(); ...原创 2018-09-05 08:59:20 · 9623 阅读 · 5 评论 -
bootstrap基础知识学习笔记(含相关JS下载链接)
标签--<h1>我的第一个bootstrap标题</h1>--<div class="h1">我的第一个bootstrap标题</div>如果想让一个段落p突出显示,可以通过添加类名“.lead”实现,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理。Bootstrap还通过元素标签:<small&...原创 2018-09-15 12:00:36 · 1496 阅读 · 0 评论 -
Laravel项目应用PullRefresh 下拉刷新(Vue组件)获取后台数据的详细使用过程
我们在查询自己一些历史记录的时候,是一个列表页,这个列表页往下滑,会自动加载。今天记录的是如何使用vant组件应用到laravel项目中假设现在要获取一个账户的提现列表,就可以用到该组件首先看下从接口获取数据,$page_num = $params['page_num'];//从前台定义之后传过来的变量//进行查询 $data = Withdrawal::sel...原创 2018-09-16 11:14:05 · 602 阅读 · 0 评论 -
laravel前台利用highcharts制作折线图(数据从接口获取)
需求是获取日,周,月的数据折线图变化,先看下效果图大概是这样:首先看下前台html部分:<van-row style="margin-top: 60px;margin-left: 10px;text-align: center"> <van-button v-on:click="startdata" type="primary" size="smal...原创 2018-09-17 22:12:48 · 824 阅读 · 0 评论 -
原生JS实现公告栏文字横向滚动(通告栏)
先看下实现的效果就是红色箭头部分指向的位置,字体会从右往左进行滚动接下来看下html代码<div id="scroll_div" class="fl"> <div id="scroll_begin"> 尊敬的用户,您好!<span class="pad_right">感谢您的长期支持,本平原创 2018-10-31 19:19:53 · 14492 阅读 · 14 评论 -
jQuery实现页面滚动条自动滚动到需要的位置
代码如下:<script>$(function(){$('html,body').animate({scrollTop:1000},'slow');})</script>解读代码:在载入html页面的body这一块内容中,实现滚动进行展示body的某一块内容,scrollTop方法 进行滚动1000像素(像素越大滚动的越下去,也...原创 2018-07-23 11:00:28 · 13347 阅读 · 0 评论 -
关于bootstrap的栅栏小总结
根据浏览器的大小,Boostrap有四种栅栏类名提供使用,用法与CSS样式表类名选择器样式调用是一样的:xs:col-xs-1 ~ col-xs-12,多列始终在一行内。sm:col-sm-1 ~ col-sm-12,多列在浏览器像素宽度大于等于768px时才在一行内。md:col-md-1 ~ col-md-12,多列在浏览器像素宽度大于等于992px时才在一行内。lg:col-...原创 2018-07-26 21:52:08 · 1238 阅读 · 0 评论 -
CSS实现照片在边框内偏移,鼠标移到图片上,图片偏移回到边框中
实现的效果:鼠标还没移上去的时候:鼠标移上去:代码部分:首先现将一个DIV把图片包起来DIV固定宽高 加上边框图片宽高百分百填充在原来的图片样式上 设置偏移translate(x,y) 这时候x=20 Y=20 代表向X轴方向偏移20PX 向Y轴方向偏移20px 到这里 就实现了照片偏移接下来 给照片设置一个伪类 当鼠标移动的时候 设置不偏...原创 2018-07-25 21:37:54 · 2405 阅读 · 0 评论 -
JS实现鼠标移动后面跟随着特效
要实现的效果是,鼠标在移动的过程中,鼠标尾巴后面跟着一些小特效,:这是鼠标移动到时候,后面跟随着小特效其实原理就是遍历出所有的div小方块 然后每一个小方块都跟随自己前面的小方块,第一个小方块就跟随鼠标,当鼠标移动的时候,就会出现这样的效果css代码:给小方块设置样式 记得位置是绝对定位div{ width: 20px; height: 20px; backgrou...原创 2018-11-21 15:26:14 · 6452 阅读 · 2 评论 -
Vue和微信小程序的区别
数据请求vue一般会在created或者mounted中请求数据,而在小程序,会在onLoad或者onShow中请求数据。数据绑定VUE:vue动态绑定一个变量的值为元素的某个属性的时候,会在变量前面加上冒号:,例:<img :src="imgSrc"/>小程序:绑定某个变量的值为元素属性时,会用两个大括号括起来,如果不加括号,为被认为是字符串。例:<...原创 2018-11-15 15:13:26 · 332 阅读 · 0 评论 -
JS实现图片自动滚动(图片横向滚动)
实现的效果就是 一排图片自动横向滚动,鼠标指向的时候,暂定滚动,鼠标离开,继续滚动首先看下html代码:随便加入四张图片<div id="div1"> <ul> <li><img src="img/logo-black.png" alt=""></li> <li><img src="img...原创 2018-11-13 15:55:57 · 38976 阅读 · 19 评论 -
小程序学习--ES6扩展运算符的用法
看下这段JS代码,请求到数据之后,在前端渲染页面都是需要写上前缀,比如我这个代码中的前缀是classic,所以在渲染的时候,都需要写上classic.字段名onLoad: function (options) { classicModel.getLatest((res) => { this.setData({//数据绑定和数据更新 cla...原创 2018-11-13 09:52:23 · 743 阅读 · 2 评论 -
小程序学习--ES6模板字符串用法
我们通常JS变量和字符串连接是通过+号来进行,例如这样:let a = 123;console.log(a+'123')很简单 结果就是等于123123;但是有时候看代码比较不好懂,不够明了ES6有另外一个写法,也就是模板字符串,比较简洁,可读性更好:let a = 123;console.log(`${a}123`)同样打印出来也是123123;这里需要注意的是,去掉...原创 2018-11-13 09:40:58 · 2022 阅读 · 0 评论 -
ajax实现点击导航栏对应页面内容异步刷新
这是自己在第一次接触TP框架的时候 写的AJAX虽然写的不够好 ,但是适合刚开始接触的人借鉴下具体注释写在语句后面!代码如下:function getItems(id) { $.ajax({ type: "POST", //请求数据方式 是POST请求 url: "/index.php/engineering/getItems", //这是所需要异步的页面html...原创 2018-07-23 11:01:34 · 7382 阅读 · 3 评论