前端小白
文章平均质量分 72
不就是个div嘛
你代码写完了吗?写完借我抄一下呗
展开
-
实现 一个 类似谷歌登录的 input框
前言:上次登录谷歌账号的时候,觉得它的输入框挺有意思的,比较好看和新颖,于是有了想实现一个的冲动,照着它的样式,照虎画猫吧正版ui如下图:盗版ui如下图 :直接上代码:【HTML】<div class="container"> <div class="field"> <input type="text" required autocomplete="off" id="username" value="">原创 2022-01-13 10:39:58 · 401 阅读 · 0 评论 -
关于前端从地址栏 获取参数 引发的思考
项目场景(如图):这是常见的一种权限设置即:参数只有city,那么只有对应city的权限,----------- 成都就只能查成都的数据再加一个county="武侯区"的话,那么就只能查“武侯区”及其下属的数据,不能再查成都的数据了。问题描述:要完成这个功能,要明确两点:(1) JS 获取地址栏参数,操作完后 最好return 成一个 object,这样方便判断(2) 由于在此种业务场景下,页面一加载,就应该结合 地址栏参数来做 if 判断,达到下图的效果,那么,在请求回来一整原创 2022-01-11 17:01:12 · 1428 阅读 · 0 评论 -
关于 element-ui 的 datetimepicker无法满足操作需求的一次记录
项目需求:如图所示:【核心的需求即为 通过下拉选择时间粒度,从而来控制 分钟数的展示】上图是最近优化的样式,当初急于实现功能,采用的是下图所示的方案:【通过图上的注释我们可以得知,是通过 勾选时间粒度 来控制 timepicker的 分钟间隔,但是这样会有一个非常不爽的操作体验】比如,勾选一个15分钟粒度,那么 timepicker的样式将会是这样:(下拉的时候太多太长)于是乎:需求集中于——如何处理这一问题当初考虑的是用bootstrap风格 时间日期选择器【类似于 这样 :让原创 2021-08-02 15:35:28 · 861 阅读 · 0 评论 -
vue脚手架开发 实现 拓补图
项目前期调研:【最近要开始动手写项目,在分析需求的时候,发现核心的功能是 数据配置后一键生成拓补图】为了满足这一需求,不得不提前进行功能demo的实现面向百度编程期间,找了各式各样的拓补图的插件库,当然有很多都是需要收费的,所以直接省略。如下所示,都是博主用过的免费 canvas插件库,Jtopo 官网地址vis-network 官网地址echarts 【非常局限、建议不要使用,用来展示拓补有点屈才了】d3 【个人觉得写起来太麻烦而且没必要,博主也没有用过d3可视化,干脆就放弃了】原创 2021-06-02 15:11:46 · 501 阅读 · 0 评论 -
canvas 大小自适应屏幕(自动铺满屏幕)
原文出自:www.hangge.com 转载请保留原文链接:https://www.hangge.com/blog/cache/detail_1871.html1,问题描述我们知道使用 canvas 元素可以创建出一个空白的画布。但是这样创建的画布尺寸是一开始就设置好的,不能随着浏览器窗口大小的改变而动态改变。而 Canvas 又无法直接将 width 或 height 属性设置为 100% 来自适应屏幕。2,解决办法如果我们想让画布撑满整个浏览器窗口。也就是说要当我们改变浏览器窗口大小时,画转载 2021-05-07 21:40:42 · 13685 阅读 · 0 评论 -
vue开发+ 纯前端实现多条件表格查询
前言【之前写过 单条件查询的功能,这次算是把之前的文章补足,让这个功能更加完善一点。】一、多条件查询是什么?【相比于单条件而言,多条件查询更加科学,即:多个表单控件(input、select等)发生数据交互的时候,下面的tableData数据在展示的时候,会更加的 具体化、综合化】再也不会像之前一样,稚嫩、局限二、相关步骤:1.所有表单控件数据v-model一下<el-input size="mini" v-model="param_search.id" plac原创 2021-04-15 11:37:10 · 4745 阅读 · 0 评论 -
vue-cli3开发使用jQuery插件完成一键导出Word功能(纯前端)
前言:最近在做一个【生成报告类的系统】,其中最核心的功能就是“如何一键生成报告”为了解决这一难题,博主采取了很多方案,也参考了网上的文章,无奈的是,很多文章说的不够仔细、清楚,看了半天收获也不是很大。对此,我想通过这篇文章总结下,也是互相分享学习。一般来说,完成导出Word这一功能多多少少都需要后端的支持,网上大致的思路有如下几种:安装四个依赖包,自己规定模板类使用在线导出工具(建议不要去用,商用的,仅做参考)百度模板类(这种个人觉得相对复杂点,博主没怎么看过)使用jQuery插件——Wo原创 2021-04-06 14:19:54 · 808 阅读 · 3 评论 -
vue脚手架开发 + 关于steps步骤条功能的实现
项目背景:【由于业务需要,要做一个简单的动态steps组件来展示当前业务的状态,需要达到的效果如下图所示】图一:图二:【OK,图片放出来了,下面就来说说完成这个功能踩了的坑和学到的知识,希望下一次自己遇到能不犯同样的错误】本功能需要注意的几点:关于数据的问题,详情页与上一级列表页面 之间 数据如何传递?为什么最好不要用params来传递较多的数据?饿了么的steps组件与本功能之间的冲突有哪些?【1】很明显,数据肯定是由列表页的点击详情——详情页,在这里我犯了一个错误,我想通过这原创 2021-01-05 16:54:10 · 3266 阅读 · 3 评论 -
vue脚手架开发 + 事件总线$bus的妙用
项目背景:在做上一个项目中,遇到过这样一个问题:后端给的接口的数据中有公共数据,为了避免多次请求,前端避免不了的需要做数据储存,而且如果是多次请求相同数据,前端页面的性能也将大打折扣。【为了解决这个问题,我师父教了我一手,用$bus来储存数据,把它当成是全局的数据,然后就可以非常方便地拿到对应的值】【在我的认知的里面,事件总线$bus只是用来处理兄弟组件之间通讯的问题,竟然还有这等妙用】请往下看:在main.js里面:window.$bus = new Vue({ data() {原创 2020-12-31 17:51:26 · 494 阅读 · 0 评论 -
vue脚手架开发 + loading组件 + axios拦截器 实现 loading 效果
学习目标:原创 2020-12-31 14:38:23 · 488 阅读 · 0 评论 -
vue脚手架开发 + element-UI组件 实现 增删改查
学习目标:【虽然已经有很多轮子把增删改查封装好了直接用就行了,在github上面一大堆,但身为前端人,这种基本功当然是必须具备的】原型图解释:原创 2020-12-31 11:30:16 · 1396 阅读 · 4 评论 -
vue脚手架开发 + element实现简单的 面包屑导航
学习目标:【快速实现 可复用 的基础面包屑导航 】功能实现启发:路由元信息相关优秀文章具体代码体现:面包屑结构部分: <div class="bd_nav"> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item 这里就是受到上面文章的启发,在路由里面搞数据,通过 this.$route.meta 在当前页面原创 2020-12-29 18:30:34 · 165 阅读 · 0 评论 -
vue脚手架开发+Echarts基础图表 实现模拟数据的动态展示
学习目标:更加熟练地使用vue模板语法渲染数据、熟练地运用Echarts来展示动态数据原型图展示:核心问题:点击某个数据块,对应的CSS样式如何加上,而其他的样式不变,即:排他算法实现?绿色框框部分如何实现参数指标的动态变化遇到需要用索引判断的情况,如何变相地用双索引的方式来简化功能上代码,不废话:【tabs就不多说了,用的饿了么的el-tabs】互联网专线结构 <!-- 互联网指标展示面板 --> <div class="net_list"原创 2020-12-28 23:26:33 · 453 阅读 · 1 评论 -
纯前端实现各类表单组件单条件查询功能(看完必会)
学习目标:如题目所示,再也不用苦苦等待后端的数据配合,前端独立实现。【当然,真正前后端分离项目,还是后端大佬说了算】样式图展示:核心问题:数据查询成功后,如何还原?查询功能的核心算法是什么?本功能最应该注意什么问题?【1】由于查询功能是用的数组的filter方法来实现过滤的,所以它返回的是一个新数组,言下之意:它会改变原来的tableData数据,这样来处理还原的问题不好控制。所以,最开始的就要准备好一份原始数据,然后接下来的任何操作需要用到的—都用原始数据深拷贝出来的数据,这样有原创 2020-12-28 17:45:36 · 8381 阅读 · 5 评论 -
如此强大的<script>标签
HTML中的JavaScript学习背景:最近这几天难得有点时间,静下心来看了看刚买的红宝书它的第二章,才发现这个小小的script标签真的不能小看了它,还真能在书里面发现新世界。学习内容:一、script元素二、行内代码与外部文件三、文档模式四、元素总结归纳:...原创 2020-11-28 23:55:30 · 345 阅读 · 0 评论 -
vue脚手架开发+百度地图API的使用(带实例)
学习目标:在vue开发中彻底把 —— 百度地图API ——如何引用学会看了我写的这篇文章,你一定可以的。项目背景说明:最近这几天在写vue项目,遇到要用百度地图API的情况,故上网去搜索,无奈方法五花八门,根本一点都不系统,而且有的文章完全胡说八道。按他的方法根本地图都出不来,用最近比较流行的一句话概括:好了废话不多说,直接来吧。个人总结的使用方法:【步骤1】直接在你搭建好的vue项目的public文件夹中的——index.html——的上面引入下面这行代码【很多文章都说要 在项目中—原创 2020-11-19 23:14:07 · 9050 阅读 · 23 评论 -
CSS个人问题总结
一、CSS中关于background的使用场景和总结背景背景,一定要把它理解成为某个盒子的背景,也就是盒子里面随意写东西,写的东西层级永远比背景的z-index高适用场景:【一张很大的图片需要展示并且图上面还有相应的元素】【兼容IE8】【雪碧图】等在background中有5个属性分别是:【color】【image】【position】【repeat】【attachment】在CSS3中多了一个背景透明度【rgba】在实际开发中,用的最多的肯定是复合写法,不可能一行一行的去写它跟font的复合原创 2020-11-15 21:49:34 · 390 阅读 · 0 评论 -
Vue + Echarts 的开发 使用 注意
Vue + Echarts GitHub上的项目分析理解一般来说,大多数公司的技术栈都是vue开发,所以就只讲vue相关的吧,我看GitHub也有很多的vue+Echarts的开源项目,我把它git clone下来也大概看了看。我发现高手就是不一样,设计非常合理,举个简单的例子,他们的脚手架项目的搭建和配置都非常规范,我还发现【vue中引组件不光可以引一个vue格式的文件,竟然还可以引入一个文件夹? 真不知道】这一点有大佬知道的还望不吝赐教一下。那就让俺来说一下高手是怎么设计的:比如在view原创 2020-11-15 21:32:35 · 513 阅读 · 0 评论 -
前端做登录验证码功能的理解
前言前端小白一名,记录日常学习生活点滴【第二周】一、关于 前端做登录验证码功能的个人理解做这个功能之前一定要搞清楚它的作用是什么:【用它来确定正在访问网站的用户是人而不是一个程序】原因:不管是何种验证码方式,都是要让程序难以判断,而让人好判断的原则设计的。【防止用户利用机器人自动注册、登录、灌水】原因:安全角度出发,随着网络速度的提高,如果没有一种防御机制的话,那么攻击者完全可以通过疯狂猜测尝试来获得用户的密码,还可以利用机器人自动注册、登录、灌水。想想多可怕。一般来说,前端做登录验证就大原创 2020-11-14 20:53:37 · 2346 阅读 · 0 评论 -
前端入门基础知识
前言前端小白一名,记录日常学习生活点滴一、前端必会的PS技巧关于PS切图的总结:首先第一点 ,拿到一张PSD格式的图片,终于不慌了,知道该怎么办了,无非就是领导发给你一张PSD,你这边多复制几张(方便还原),然后开始!第一步:CTRL+鼠标左(前提选中工具栏中的定位 ) 用于选中PSD图片的任意位置的图层,方便下一步第二步:可以点击一下小眼睛,看看是不是该图层,确认无误后,单击右键,选择“栅格化图层”注:如果有多个图层,要选择“栅格化图层样式”,总之一句话,栅格化以后,一定是自己要切的部分,原创 2020-11-07 23:00:01 · 581 阅读 · 3 评论