前端
蓝绿色~菠菜
对技术有一颗敬畏和严谨之心,对代码有精益求精的精神。像养小孩和女朋友一样,精心照料和打扮。想清楚了再干,坚持高标准,Design for future!
展开
-
仿Icloud背景模糊页面制作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-01-03 16:01:50 · 630 阅读 · 1 评论 -
前端:transition结合transform实现变形的平滑过渡效果
属性 含义 animation(动画) 用于设置动画属性,他是一个简写的属性,包含6个属性 transition(过渡) 用于设置元素的样式过度,和animation有着类似的效果,但细节上有很大的不同 transform(变形) 用于元素进行旋转、缩放、移动或倾斜,和设置样式的动画并没有什么关系,就相当于color一样用来设置元素的“外表” transla...原创 2019-12-03 12:43:38 · 3924 阅读 · 0 评论 -
JS Promise理解
Promise 是异步编程的一种解决方案,其实是一个构造函数,自己身上有all、reject、resolve这几个方法,实例对象上有then、catch等方法。所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作,如ajax请求)的结果。原创 2022-09-27 11:14:52 · 4826 阅读 · 0 评论 -
ajax异步请求执行顺序问题
上面这段代码本意是想先alert(1),再alert(2),但因为ajax是异步请求,如果请求耗时较长,2会先于1弹出。解决办法1: 将ajax改为同步请求,但会导致页面加载较慢,失去了ajax本身的优势。原创 2022-09-26 16:05:33 · 1010 阅读 · 0 评论 -
Node多项目版本控制
使用n模块管理node版本node中的n模块是专门用来管理node版本的模块,可以进行node版本的切换,下载,安装。全局下载n模块查看n模块的版本n --version13,显示下载所有下载的node版本n1回车后将会显示所有的node版本,使用上下键,来选择node版本,然后回车即可4,下载最新的node版本n latest15,安装最新稳定版本n stable16,删除指定的node版本n rm <version>17,命令使原创 2022-05-11 17:15:58 · 1061 阅读 · 0 评论 -
JS实现简单的轮询
syncStatus(){ proxy.api.supplier.syncStatus().then((res: any) => { data.sync_status = res.status }, (err: any) => { console.log('失败') })},polling(){ const timeId = setInterval(() => { if (data.sync_stat.原创 2022-03-11 15:34:08 · 2427 阅读 · 0 评论 -
CSS样式穿透
在写vue组件时,通常设置当前组件css style类型为scoped,避免污染全局样式。而有时候又想修改子组件的样式,这就需要样式穿透了。less、sass等类型穿透语法也稍有差别:待补充..原创 2022-03-08 18:35:00 · 282 阅读 · 0 评论 -
Chorme插件开发
核心是一个json文件,插件所有配置都在json文件中。以 打开百度首页,隐藏'百度一下'按钮,并在输入框输入‘123’为例目录结构:manifest.json:{ "manifest_version": 2, "name": "Hello", "version": "1.2.1", "author": "菠菜", "description": "Hello test", "icons": { "16": "logo.p.原创 2022-02-21 11:36:17 · 434 阅读 · 0 评论 -
JS 数组、对象的遍历方式
数组遍历:arr = [1, 2, 3, 4, 5, 3, 2, 3, 4, 6]// 基础用法for (let i = 0; i < arr.length; i++) { console.log(arr[i])}// 数组自带的forEach,运行起来不可中途终止,continue、break不可用arr.forEach((value, index) => { console.log(index + ':' + value);})// map遍历a原创 2021-10-15 10:29:15 · 102 阅读 · 0 评论 -
Vue Watch 深度监听对象属性值无效
一、watch 深度监听watch: { formData: { deep: true, handler(nv) { console.log("对象发生改变", nv); }, },},二、使用 $set 改变对象值created() { // 直接赋值监听无效 // this.formData.name = "这是修改的名称"; // this.formData.title = "这是修改的标题"; // 直接删除也无效原创 2021-10-14 18:09:06 · 1499 阅读 · 0 评论 -
Vue父子组件、兄弟组件双向绑定传值
父子组件双向绑定方法一:(仅适用于绑定的数据为对象时)父组件:(利用.sync语法)<template> <div class="app-container"> <ProjectDetail :detail-drawer.sync="detailDrawer" /> </div></template>export default { data() { detailDrawer: { showDrawer: fals原创 2021-09-16 16:59:44 · 705 阅读 · 0 评论 -
Django request.POST 、 request.body 、request.data使用
request.POST(只能获取表单数据) 、 request.body(获取非表单数据) 是django原生的属性,request.data(包含表单及非表单数据)则是DRF封装的属性。 表单数据:a = request.POST.get('a') alist = request.POST.getlist('a') Content-Type(请求头)为application/x-www-form-urlencoded(form表单默认格式) 非表单...原创 2021-05-14 10:22:45 · 7776 阅读 · 0 评论 -
ajax、axios异步请求那点事
异步请求谁都能做,包括原生JS都可以借助XMLHttpRequest对象封装异步请求。只不过jquery已经帮我们做了封装,名字就叫ajax,平时说的ajax异步请求就指的是jquery的ajax。而axios也是对XMLHttpRequest的封装,axios是通过 promise 实现对 ajax 技术的一种封装,就像 ajax 是 通过 jQuery 来封装一样。但它更符合ES规范,Vue2.0之后,尤雨溪也推荐大家用axios替换JQuery ajax。vue中还是尽量使用axios,因原创 2020-12-23 17:58:43 · 458 阅读 · 0 评论 -
开发一个大型后台管理系统,应该用前后端分离的技术方案吗?
1. 先审题,冷静的分析一下前后端分离的优点多多,这不需要多说,人人都清楚。结合“开发一个大型后台管理系统”这个约束条件,冷静的分析一下:什么是后台管理系统:首先后台管理系统这个称呼,意味着这是一个 B 端系统。可以小到部门级应用(客户投诉登记系统、办公设备台账系统),大一点可以是大集团级核心系统(500 强保险公司客服、呼叫中心),可以是 ERP、CRM、OA(SAP、用友、泛微协同),可以是一个 B2C 电商的商城后台、支付网关管理控制台,可以是 Saas 的管理后台(Salesforce、原创 2020-06-24 13:20:45 · 1927 阅读 · 0 评论 -
前端:css鼠标动作的五种状态
<style> a:link{color:#fff} 未访问时的状态(鼠标点击前显示的状态) a:hover{color:#fff} 鼠标悬停时的状态 a:visited{color:#fff} 已访问过的状态(鼠标点击后的状态) a:active{color:#fff} 鼠标点击时的状态 a:focus{color:#fff} 点击后鼠标移开保持鼠标点...原创 2019-12-03 12:47:16 · 3228 阅读 · 0 评论 -
前端:float属性 与position(定位)
float属性先来了解一下block元素和inline元素在文档流中的排列方式。 block元素通常被现实为独立的一块,独占一行,多个block元素会各自新起一行,默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性; inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换...原创 2019-11-21 08:46:31 · 2187 阅读 · 0 评论 -
前端:动态设置input、textarea标签必填非必填属性
<textarea name="comment_approver" id="textarea_offer_id" style="resize:none" cols="88" rows="8"></textarea><script type="text/javascript"> $('#offer_refuse').click(function(...原创 2019-11-15 09:48:16 · 10487 阅读 · 0 评论 -
前端:Odometer.js 实现数字滚动效果
使用该插件需要引入:<link rel="stylesheet" href="http://github.hubspot.com/odometer/themes/odometer-theme-car.css" /><script src="http://github.hubspot.com/odometer/odometer.js"></script...原创 2019-10-25 14:23:32 · 5271 阅读 · 0 评论 -
前端:利用Echart实现数据可视化
先看几个效果图:官方文档:https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts本人见过最为全面、详细、方便的官方文档了。开始教程:首先下载echarts.js库:https://www.echartsjs.com/zh/tut...原创 2019-10-24 15:03:41 · 3755 阅读 · 0 评论 -
前端:分享几个前端素材网站
1、17素材网:资源还算比较全,包括各种前端插件、图片展示、文字效果、以及整站模板等,但是需要花钱注册会员。网址:https://www.17sucai.com/2、模板之家:整站资源比较丰富,各种后台管理、企业、政府模板。免费,广告较多。网址:http://www.cssmoban.com/3、图标bootstrap图标大全:http://www.bootst...原创 2019-10-18 16:37:28 · 28974 阅读 · 6 评论 -
前端:常用图标大全
一、ionic icon(图标)ionic 也默认提供了许多的图标,大概有 700 多个,针对 Android 和 iOS 有不同的样式。Ionic icons 官网:http://ionicons.com/菜鸟教程:https://www.runoob.com/ionic/ionic-icon.html国内图标样式 CDN 地址:https://cdn.staticfile.o...原创 2019-10-18 16:25:37 · 9102 阅读 · 0 评论 -
前端:用jQuery实现文件上传的两种方法
1、利用FormData实现文件上传<input type="file" id="avatar" name="avatar"><button type="button">保存</button>$('button').click(function(){ var files = $('#avatar').prop('files'); var d...原创 2019-07-26 11:24:38 · 22419 阅读 · 0 评论 -
前端:Dom对象和jquery对象的区别
Dom对象是用javascript方法获取的对象,不能使用jquery定义的方法。var dom-elem = document.getElementById("msg")jquery对象是用jquery方法获取的对象,可以使用jquery定义的方法。var jquery-elem = $("#msg")两者可以互相转化:var d=document.getElemen...原创 2019-08-20 14:14:27 · 928 阅读 · 0 评论 -
前端:xadmin 实现二级联动
需求:当选择完语言时,语言等级会根据所选的语言动态生成思路:绑定1级(外语)select的change事件,获取当前选中的选项value.触发一个函数或者ajax去获取过滤后的二级数据.将获取到的二级数据填充到二级select的option中 (必须使用selectize)代码:一、引入js代码绑定1级select的change事件,必须植入我们自己写的js代码xadmin...原创 2019-06-18 17:20:49 · 5174 阅读 · 0 评论 -
前端:浅析JavaScript和jQuery区别 -- 事件
JavaScript:1、事件汇总窗口事件事件 说明 onload 页面或图片加载完成时 onunload 用户离开页面时 onscroll 元素滚动时 表单元素事件 事件 说明 onchange 框内容改变时 onsubmit 点击提交按钮时 onreset 重新点击鼠标按键时 onselect ...原创 2019-10-11 11:21:33 · 1940 阅读 · 0 评论 -
前端:浅析JavaScript和jQuery区别 -- 函数
本文将介绍js、jquery函数的区别。常规用法不赘述,只介绍各自特别之处。JavaScript:1、函数声明function functionName(parameters) { 执行的代码}2、匿名函数function (parameters) { //匿名函数 执行的代码 }3、函数调用functionName(1,2,3)v...原创 2019-10-11 13:12:16 · 185 阅读 · 0 评论 -
前端:Django Ajax CSRF 认证
Django 中自带了 防止CSRF攻击的功能,但是一些新手不知道如何使用,给自己编程带来了麻烦。常常会出现下面django csrf token missing or incorrect的错误。GET 请求不需要 CSRF 认证,POST 请求需要正确认证才能得到正确的返回结果。一般在POST表单中加入{% csrf_token %} 1 2 3 4 ...原创 2019-07-26 11:15:48 · 1803 阅读 · 0 评论