前端开发
文章平均质量分 62
非专业前端开发,记录些经验
DexterLien
这个作者很懒,什么都没留下…
展开
-
Next.js 入门笔记
之前初步体验了 React 的魅力, 又看文档理解了一下useState和useEffectuseState用来声明在组件中使用并且需要修改的变量useEffect用来对useState声明的变量进行初始化赋值可能理解的不太准确, 不过大概差不多是这么个意思. 但是再往后看路由什么的就头大了, 还得手动添加各种其他的 package 进行实现, 显然不符合 OOBE 的体验. 逛了一圈发现基于 React 做的另外一个更 “高级” 的框架 Next.js, 来个快速入门做一下笔记.原创 2023-10-05 23:22:13 · 1213 阅读 · 0 评论 -
React 入门笔记
国庆值班把假期拆了个稀碎, 正好不用去看人潮人海, 趁机会赶个晚集入门一下都火这么久的 React 前端技术. 话说其实 n 年前也了解过一丢丢来着, 当时看到一上来就用 JS 写 DOM 的套路直接就给吓退了, 扭头还去看 Vue 了🤣, 现在从市场份额来看, 确实 React 还是占有率更高加上单位现在也都在推 CloudScape 做项目, 有必要再试一试了.本次入门主要围绕 React 前端开发的环境准备和基本功能实现, 后端用。原创 2023-10-01 01:21:25 · 595 阅读 · 0 评论 -
TM/GM 使用 MutationObserver 检查页面元素加载完成
在 TamperMonkey 中经常需要在等待页面加载所有(或特定)元素后再去进行操作, 以前用的方法是通过。循环每隔一段时间检查一下 DOM 是否可以通过。拿到. 下面分享使用原生的。接口方式实现, 效率更高.原创 2023-09-26 10:28:44 · 434 阅读 · 0 评论 -
WEB前端设置A4页面布局的轮子: paper-css
先上官方repo: https://github.com/cognitom/paper-csspaper.min.css@page{margin:0}body{margin:0}.sheet{margin:0;overflow:hidden;position:relative;box-sizing:border-box;page-break-after:always}body.A3 .sheet{width:297mm;height:419mm}body.A3.landscape .sheet{widt原创 2021-04-26 11:15:01 · 1965 阅读 · 0 评论 -
Mermaid修改流程图大小
Gayhub上发现个web绘制流程图的宝藏repo: Mermaid先存一下Live Editor: https://mermaid-js.github.io/mermaid-live-editor具体的使用方法看官方文档就行了:https://mermaid-js.github.io/mermaid/也可以参考平头某的这篇文章总结的不错:https://blog.csdn.net/fenghuizhidao/article/details/79440583画好流程图之后想要调整一下图的大小,原创 2021-04-23 22:39:39 · 10217 阅读 · 3 评论 -
解决Layui使用Layer弹出页面中调用模块路径异常问题
问题描述使用ajax异步获取指定url内容后再用Layer模块弹窗显示内容的时候遇到了下面的错误:因为异步获取到的页面中又引用了table模块,但是通过layer渲染出来后加载过程中调用模块的url路径出现了问题,正确的路径应该是/static/layui/lay/modules/table.jslayer调用部分的代码:$.post({ url: '/detail/', data: { zy: _cur_zy, zone: zone,原创 2020-09-11 16:32:46 · 3477 阅读 · 1 评论 -
Layui解决layer的tips无法吸附input元素的问题
在使用layer.tips()对同样使用Layer渲染的表单input控件进行吸附时,如果直接传入input对应的id或其他css选择器,由于Layer在进行二次渲染的时候会隐藏原始的input标签,用新的div层进行替换显示,所以会导致layer的tips提示框无法正确吸附到上面,解决方法是在对input控件进行事件监听,在回调函数中初始化layer.tips,示例代码:// 算法切换 form.on('radio', function (data) { // 显示算法公式tip原创 2020-09-11 09:55:41 · 1958 阅读 · 0 评论 -
解决Layui-layer弹出层中嵌入TinyMCE的菜单不显示的问题
在layui的layer弹出窗控件中嵌入了TinyMCE富文本编辑器后,点击顶部菜单不显示,可以看到是被layer的弹出层给挡住了,所以应该是layer的z-index属性比菜单层高导致.经过一番定位,最终找到影响TinyMCE菜单层的z-index属性的类叫.tox-tinymce-aux,把它的z-index属性从默认的1300调整到19891015以上就可以解决问题啦!ps: layer弹出层的默认z-index是19891014,根据官方文档中的说明,这是layui作者闲心的生日????原创 2020-09-06 13:40:42 · 2280 阅读 · 0 评论 -
解决Chrome打印对话框中没有布局设置横向问题
今天遇到一个很奇怪的问题,用Chrome打印自己写的B/S程序发现打印对话框中居然找不到设置页面方向的选项:还是在万能的stack overflow上找到了原因:https://stackoverflow.com/questions/36322109/chrome-printing-website-missing-layout-options这个web页面是用bootstrap4做的,css样式中默认定义了@page属性导致Chrome打印对话框中隐藏了布局的选项,自己再写个css把bootstra原创 2020-07-14 09:18:56 · 9893 阅读 · 1 评论 -
Flask-WTF制作复杂表单例子
需求分析需要设计下图所示的一个表单,其中前三项基本表单内容很好整,但是后面的表格需要在渲染的时候就输出好指定单位列表,每个单位一行要采集的数据渲染结果的HTML代码中为表格中每一行重复出现的表单控件的id和name属性自动进行编号实现代码"""@Description : 问卷表单类@File : wenjuan.py@Project : investigation@Time : 2020/7/12 18:28@Author : Dexte原创 2020-07-12 20:18:19 · 1341 阅读 · 0 评论 -
简单好用的前端Ajax数据渲染引擎jquery-view-engine
前言疫情期间曾一口气入门了一下vue和webpack开发SPA单页面应用的套路,当时感觉满嘴香,结果中间停了个把月没怎么玩就忘的差不多了????毕竟不是专门做前端的,用脚手架什么的搞webpack项目还是太复杂了,显然不符合我一向简单粗暴有效的开发风格.不过已经体验过vue的模板渲染的风格后,再用Flask+Jinja2撸的前端一看到页面刷新的闪屏就觉得不舒服,用jquery的ajax做异步渲染又好麻烦,逛了逛gayhub Github发现了jquery-view-engine这货,尝了下,很是中意!非原创 2020-07-08 16:00:58 · 580 阅读 · 0 评论 -
前端用js压缩上传的图片
核心函数/** * 压缩图片 * @param fileObj 传入的文件对象 * @returns {Promise} resolved promise 返回压缩后的新图片blob对象,可以直接用于表单提交 * @example 当前页面显示blob对象图片实例 * let file = document.getElementById('input_file').files[0]...原创 2020-04-01 19:03:05 · 286 阅读 · 0 评论 -
router-view中的视图模块修改父模块中的数据
最近在用Vuetify练手做个博客,vue是真香,不过许多概念还需要慢慢消化下~记录一下这次遇到的需求和解决方法文章目录需求描述实现方法完整代码父模块`Index.vue`视图模块`Article.vue`需求描述博客设计的管理后台如下图所示:照着Vuetify文档中的例子写出来这样的一个界面并不难,代码看结构就行了:<v-content>里面使用<router...原创 2020-03-17 01:30:33 · 2028 阅读 · 0 评论 -
Vue开发中使用.env配置开发和生产环境中不同的变量
使用.env文件可以方便的配置开发调试环境和服务器正式部署的生产环境中使用两套不同的配置文件,以实现代码中不用来回切换要访问的api接口路径需求.官方文档https://cli.vuejs.org/zh/guide/mode-and-env.html创建.env文件在vue项目的根目录下分别创建.env.development和.env.production两个文本文件分别用于开发和生...原创 2020-03-09 15:48:42 · 5191 阅读 · 0 评论 -
Vuetify使用本地图标资源
@vue/cli 4.2.3脚手架创建的Vuetify项目默认使用的是国外CDN上的Roboto和Material Design Icons资源,速度很慢甚至会加载失败,下面记录一下如何把这两个用本地资源代替修改/public/index.html删除下面两行引用<link rel="stylesheet" href="https://fonts.googleapis.com/cs...原创 2020-03-04 18:33:14 · 6698 阅读 · 7 评论 -
新版vue/cli创建项目中解决axios跨域CORS问题
本地开发环境中使用axios调用远程服务器api接口出现下面的错误:Access to XMLHttpRequest at ‘https://api.xxx.xxx/xx’ from origin ‘http://localhost:8081’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is...原创 2020-02-29 00:19:24 · 32766 阅读 · 1 评论 -
js判断undefined和null
使用typeof()判断结果是否为字符串"undefined"var exp = undefined;if (typeof(exp) == "undefined"){ alert("undefined");}原创 2020-02-21 17:23:08 · 287 阅读 · 0 评论 -
[Vue warn]: Error in render: "TypeError: Cannot read property 'g1' of undefined" found in 问题解决
问题描述自定义了一个component组件给父组件调用,数据功能都挺正常的,但是浏览器控制台中会报错:[Vue warn]: Error in render: "TypeError: Cannot read property 'g1' of undefined"found in---> <Gauge> at src/components/Gauge.vue ...原创 2020-02-20 12:07:22 · 1344 阅读 · 0 评论 -
VUX新手入坑记录
前端入坑需谨慎啊! 想玩玩VUE做移动端的web开发,貌似VUX这个框架还蛮不错的,用了微信官方的WEUI界面,视觉效果可以保持一致.但是前端轮子的更新换代速度也太tm快了~很容易就出现各种依赖版本问题,以及各种文档过时的情况,这不试试使用最新版本的Vue CLI脚手架@vue/cli 4.2.2创建项目后按照VUX官网文档进行到这一步傻脸了:vux2必须配合vux-loader使用, 请在...原创 2020-02-13 02:25:01 · 527 阅读 · 0 评论 -
Vue+Element UI前端开发实例记录
环境准备安装Node.js(npm)官网下载安装LTS版本:https://nodejs.org/en/download/修改npm使用淘宝镜像源npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --gl...原创 2020-02-12 22:16:20 · 1891 阅读 · 0 评论 -
Bootstrap4使用gijgo的日期选择插件
Bootstrap4中居然没有带日期选择的控件,蜜汁尴尬,好在找到了gijgo这个插件,bootcdn上也有支持,记录一下用法CDN地址https://www.bootcdn.cn/gijgo/效果演示代码全部使用bootcdn上的引入,注意需要额外引入中文语言包,并在实例化datepicker对象的时候加入配置locale format weekStartDay分别表示语言 输出...原创 2019-11-05 16:23:40 · 5047 阅读 · 2 评论 -
使用Flask和Vue开发单页面应用
使用Flask和Vue制作一个基本的CRUD单页面应用,其中后台用到了RESTful API参考原版的教程https://testdriven.io/blog/developing-a-single-page-app-with-flask-and-vuejs/ 步骤清晰,动作规范.下面开始我的实际操练步骤记录最终效果环境准备系统:Windows10 + WSL的Ubuntu18.0...原创 2019-11-01 15:49:45 · 3348 阅读 · 0 评论 -
Flask异步渲染管理后台局部页面
想法 / One simple idea最近在折腾研究Python Web开发,入坑了Flask,用习惯Python了发现用它干啥都是~真香!试着写了个考试管理的后台,以前做web开发的套路,管理后台用传统的iFrame来加载和切换不同功能页面,感觉很low,完全无法愉快的装X啊~之前看过一篇用Flask+VUE做单页面应用的教程(传送门),也感受过了VUE的魅力,各种双向绑定6的飞起,不过像...原创 2019-10-23 19:38:58 · 1523 阅读 · 0 评论 -
Python+Vue开发Web入门实例
其实是个夭折了的练手项目,用Python写的后端,提供json格式数据给前端Vue进行渲染代码写的比较乱,不过还是不忍扔掉,归档记录一下吧,以后再用到了也可以做个参考数据库文件列表db.py 数据库操作import pymysqlimport jsonclass Db: def connect(self): # 设置连接属性curs...原创 2019-10-18 11:06:47 · 3973 阅读 · 1 评论 -
使用jQuery获取input单选框数据
HTML代码<div> <input type="radio" name="option1" id="op1" value="op1"> <input type="radio" name="option1" id="op2" value="op2"> <input type="radio" name="option1" id="op3" value...原创 2019-10-17 11:28:11 · 434 阅读 · 0 评论 -
百度地图开发笔记
基本的调用代码<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0,原创 2018-04-24 17:17:27 · 374 阅读 · 0 评论 -
使用asciinema对Linux控制台操作记录进行录制和回放
偶然发现这么个好玩的东西asciinema 官方发音[as-kee-nuh-muh]可以将Linux控制台中的操作记录进行录制,配合播放器还可以在web中回放录制的所有输入输出内容,最关键的是,播放器中回放的时候所显示的内容是可以直接用鼠标选择复制的,相当神器和好用(貌似就做到自己的个人博客网站里面写操作文档日志的时候有点用),还是给大家安利一下吧官方网站:https://asciinema.or...原创 2018-05-01 21:54:26 · 1749 阅读 · 0 评论 -
Vue刷新修改页面中数据
因为Vue对象一旦生成之后,如果只是修改Vue对象中的数据,在页面上是不会自动更新的,得用Vue.set()函数来进行修改,函数格式为Vue.set(data,'para','value'),其中data为Vue创建时传输的data对象名,后面两个参数分别是data对象中的变量名称与值页面初始化代码:<script type="text/javascript" charset="utf-8"...原创 2018-04-24 13:13:15 · 3576 阅读 · 0 评论 -
使用百度地图绘制热力图
首先需要到百度地图开放平台注册开发者信息,并且获得AK应用访问标识码因为要做本地调用,所以Referer白名单里面只写一个*就全允许了,拿到AK码之后写个HTML调用演示代码如下 这里是自己的AK码"> 热力图功能示例 ul,li{list-style: none;margin:0;padding:0原创 2018-01-30 10:01:51 · 47074 阅读 · 31 评论 -
本地开发的项目添加到svn服务器
首先需要在svn服务器上创建新的资源库,进入repo的目录中后,执行svnadmin create myRepo //自己的资源库名称,通常个人来讲的话一个就可以了,然后可以在repo里面用文件夹结构进行划分整理进入到myRepo/conf文件夹下,分别修改用户信息和权限设置authz文件尾部插入[/]username = rwpasswd文件[users]下面插入username = p...原创 2017-12-07 18:54:05 · 5708 阅读 · 0 评论 -
Smarty中自定义函数与调用方法
首先在实例化Smarty的php页面中写自定义的函数,并且注册到Smarty中<?phprequire 'libs/Smarty.class.php';require 'com/dao.class.php';$smarty = new Smarty;$dao = new dao;$r=$dao->getSingle();$smarty->assign("r",$r);$smar原创 2017-12-01 13:15:49 · 2833 阅读 · 0 评论 -
使用jquery.lazyload进行图片懒加载
首先需要引入jquery.js和jquery.lazyload.js,然后对标签进行修改,将原来的src属性改为data-original设置图片地址,最后加入初始化js代码即可,最终示例代码如下: $(function(){ $("img.lazy").lazyload({ effect:"fadeIn", //载入效果使用渐变 threshold:100, //离页原创 2017-11-14 17:54:12 · 595 阅读 · 0 评论 -
百度地图接口绘制任意多边形并获取每个点的经纬度
转自:https://blog.csdn.net/superdog007/article/details/52795216实现思路:1:添加绘制工具的监听事件2:遍历取出坐标集合copy代码直接运行测试即可<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont...转载 2018-04-24 17:25:58 · 3012 阅读 · 4 评论 -
Vue中使用自定义过滤器转换Unix时间戳
从后台得到的json数据中使用了unix格式的时间戳,前台使用vue展示的时候可以用过滤器对模板中的标签进行处理,很是方便,实现过程:1.注册自定义过滤器<script> //注册自定义过滤器 Vue.filter('convTime', function(value) { var unixTimestamp = new Date(value * 1000); commo...原创 2018-05-06 17:38:53 · 1883 阅读 · 0 评论 -
Vue+Echarts制作单页面的XMR矿池监控台
练手用的,数据源是从矿池官网拿的json,页面源代码存个档<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s原创 2018-05-07 00:19:37 · 698 阅读 · 0 评论 -
FullCalendar学习笔记1-入门
官方网址:https://fullcalendar.io/官网下载Latest: fullcalendar-3.9.0.zip解压后修改了demos里面basic-views的一些参数,直接看下面代码注释<!DOCTYPE html><html><head><meta charset='utf-8' /><link href='../f...原创 2018-05-15 00:08:12 · 2244 阅读 · 0 评论 -
记一次jQuery跨域调用JSON数据的例子
最近帮朋友做个小工具,试图从"天天基金网(http://fund.eastmoney.com)"上获取相应基金代码的一些收益率数据,通过分析发现网站首页的搜索基金代码真实的请求路径是一个js:http://fundgz.1234567.com.cn/js/002624.js?rt=1527344754062这里的002624就是搜索的基金代码,rt则是要查询的时间(UNIX时间戳格式)看上去很简单...原创 2018-05-26 23:15:56 · 1884 阅读 · 0 评论 -
使用MUI制作基金单位净值查询平台
数据基于天天基金网,先pia上代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-s原创 2018-05-27 00:38:19 · 1430 阅读 · 0 评论 -
VUE单页面刷新闪烁标签{{}}问题解决
在el对象DOM标签里面增加个属性v-cloak,同时在页面css里面增加样式[v-cloak],代码如下:[v-cloak]{ display:none !important; }<div id="main" v-cloak>...</div><script>var v = new Vue({ ...原创 2019-01-30 11:05:26 · 711 阅读 · 0 评论 -
eCharts绘制双系列混合类型图表+额外tooltip信息
直接上效果图,双Y轴,双系列+额外tooltip信息<script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('myAreaChart')); // 指定图表的配置项和数据 var o...原创 2019-10-08 23:59:45 · 1763 阅读 · 0 评论