前端
小瑜的csdn
这个作者很懒,什么都没留下…
展开
-
2020-11-03 前端算法每日一题 递归(山脉数组)
var validMountainArraya = function(A) { let isUp = false let isDown = false return A.length >= 3 && A.every((h, i) => { if (i === 0) return true if (A[i] === A[i - 1]) return false if (A[i] > A[i -...原创 2020-11-03 18:42:10 · 235 阅读 · 0 评论 -
初级前端面试题
flex布局apply和call和bind图片懒加载原型和原型链border-box和content-boxcookie localstorge sessionstorge区别flex布局浏览器兼容问题Vue监听不到对象变化怎么办computed和watch字符串去重字符串查出最多的字母settimeout(0)webpack {常见loader,puygin,入口出口}Axios遇到的问题axios和ajax不同水平垂..原创 2020-07-11 12:27:56 · 403 阅读 · 0 评论 -
es5对象的扩展
var obj = { name: 'xiaoyu' }var obj2 = {}obj2 = Object.create(obj, {sex: {value: 'nan',writable: true, //是否可以修改configurable: true, //是否可以删除enumerable: true //是否可以用for in进行枚举}})cons...原创 2020-05-08 17:14:22 · 309 阅读 · 0 评论 -
token和cookie
token和cookie一样都是首次登陆时,由服务器下发,都是当交互时进行验证的功能,作用都是为无状态的HTTP提供的持久机制。token存在哪儿都行,localstorage或者cookie。token和cookie举例,token就是说你告诉我你是谁就可以。cookie 举例:服务员看你的身份证,给你一个编号,以后,进行任何操作,都出示编号后服务员去看查你是谁。token 举例...原创 2020-01-06 18:34:50 · 312 阅读 · 0 评论 -
js中删除两个数组中id相同的对象
let arr1= [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }]let arr2= [{ id: 1 }, { id: 2 }, { id: 3 }]arr1= arr1.filter(item => {let idList= arr2.map(v => v.id)return !idList.includes(...原创 2019-12-26 14:17:23 · 595 阅读 · 0 评论 -
查找数组内的对象
const arr = [{a : 1, b : 2},{a : 3, b : 4},{a : 5, b : 6}]console.log(arr.find((item) => (item.a == '3')))原创 2019-11-26 20:09:33 · 685 阅读 · 0 评论 -
js 删除两个数组中id相同的对象
原创 2019-10-14 13:23:57 · 327 阅读 · 0 评论 -
flex布局的几种常用布局方式代码
<style> * { padding: 0; margin: 0 } .big-box { background-color: olivedrab; width: 100%; height: 100px;...原创 2019-02-24 22:11:27 · 1212 阅读 · 0 评论 -
vue报错Duplicate keys detected: '1'. This may cause an update error.key值重复
除了网上大家都在说的原因key值重复之外还有一个原因就是有两个相同的for循环,而这两个for循环的key值是一样的,此时将一个的key值加一个数字或者加一个字符串例如<template> <div class="nav"> <div v-for="(item,index) in iconHref" class="icon" :key="index&q原创 2019-02-14 13:59:08 · 7942 阅读 · 1 评论 -
句号超出div问题
在父元素中添加以下字段<listyle="word-wrap:break-word;">原创 2019-03-04 20:05:52 · 238 阅读 · 0 评论 -
相对定位让父元素高度不能自适应解决办法
<template> <div> <div class="c"> <div class="a">1</div> <div class="b">2</div> </div> &a原创 2019-03-04 21:04:15 · 1964 阅读 · 1 评论 -
vue 实现横向滑动 加效果
<template> <div class="lateral-sliding"> <div class="lateral-sliding-item" v-for="(item,index) in items" :key="index"> <div class="each-img"&原创 2019-03-14 17:34:45 · 12445 阅读 · 6 评论 -
轮播图vue
<template><div><div class="banner-box"><swiper :options="swiper.swiperOption"><swiper-slide v-for="(item,index) in pics" :key="index"><img :src="item.picture...原创 2019-03-22 11:23:55 · 416 阅读 · 0 评论 -
offsettop及相关属性介绍
offsetParent定位父级 偏移量属性一般就是offsetLeft、offsetTop、offsetHeight、offsetWidth这四种了,然后还有一个offsetParent属性作为偏移的参照点。在网上看到的offsetParent的定义是:与当前元素最近的经过定位(position不等于static)的父级元素(感觉和绝对定位的定位点很类似?)。然后具体情况分为下面几种:...原创 2019-03-19 11:32:30 · 2224 阅读 · 0 评论 -
获取body的滚动条长度一直是0的原因
1:要做一下兼容:document.documentElement.scrollTop || document.body.scrollTop2:如果还不管用,你可以看一下是不是你的body已经设置了100vh高度,如果高度被定死了那说明1滚动条并不是body的,你应该查找其他元素。...原创 2019-04-04 15:17:12 · 1937 阅读 · 0 评论 -
移动端滚动
移动端滚动优化#概述iOS 的微信浏览器里实现滚动效果有几个问题:通过overflow: auto/scroll实现的滚动会有很严重的卡顿感。 滚动到边界后继续上拉/下拉,会显示微信自带的遮罩(有时会遮盖住页面的原内容,感官上很不好)第一个问题有两个解决办法:设置-webkit-overflow-scrolling: touch; 使用better-scroll等滚...原创 2019-04-04 15:25:19 · 269 阅读 · 0 评论 -
居中案例
<div class="container"> <div class="item"> <div class="img-bg"> <img src="https://assets.2dfire.com/frontend/f60ebff21e88a872d2bce1a2474da50b.png"/> &l...原创 2019-07-01 19:26:33 · 215 阅读 · 0 评论 -
对数组内的对象去重的方法
<script> const Obj1 = [ { a: 1, b: 2 }, { a: 3, b: 4 }, { a: 5, b: 6 }, { a: 3, b: 4 }]function reduceDuplicate(Obj) { const Equityobj = {} const Result = Obj.reduce((cur, next)...原创 2019-06-27 19:43:09 · 293 阅读 · 0 评论 -
优惠券样式
<!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-UA-Com...原创 2019-07-09 18:54:18 · 1295 阅读 · 0 评论 -
django中图片的上传
案例:用户注册上传图片。1:首先创建用户表,其实本质上保存的是文件的路径。from django.db import models# Create your models here.class Yonghu(models.Model): u_name=models.CharField(max_length=50) u_age=models.IntegerField(d...原创 2018-09-18 20:18:04 · 493 阅读 · 0 评论 -
2019年2月编程语言排行榜
TIOBE Index for February 2019February Headline: Groovy re-enters the TIOBE index top 20The programming language Groovy has re-entered the TIOBE index top 20. This dynamically typed language t...原创 2019-02-11 17:30:41 · 15175 阅读 · 12 评论 -
vue中子组件往父组件传值,父组件往子组件传值
vue中子组件往父组件传值:emitmethods: {add: function() {this.$emit("showpro", this.list+'我是孩子的值'); // showpro是传往父组件的方法,后面参数是要传过去的参数}} 父组件中import HelloWorldVue from "./HelloWorld.vue";<abc @s...原创 2018-12-27 11:01:23 · 2583 阅读 · 0 评论 -
创建404错误页面
在开发过程中我,我们可以借助debug来调试bug,但是我们在项目上线一周,就不能让用户看见不存在的网页,因此要消除404的存在!如果用户遇到404通常做友好提示,或者 直接跳到首页 定制404页面 1.在项目的templates目录下定义404.html (注意名字不是随意定义) 2.在404.html可以任意定制内容 3.404要设置DEBUG = ...原创 2018-09-19 21:00:39 · 253 阅读 · 0 评论 -
.富文本rtf
rtf是 在线富文本编辑器, 论坛博客编辑的时候使用配置: 1.安装django中的插件 pip install django-tinymce 2.在setting中配置 TINYMCE_DEFAULT_CONFIG = { 'theme':'advanced', 'w...原创 2018-09-19 20:56:22 · 528 阅读 · 0 评论 -
django实现分页功能
1:首先建立表,并且插入数据。我在这里插入了17条数据表有了,数据有了,我们要把他显示在前端,这个是我们def getstupage(request,pagenum):#pagenum是我们前端传的数据,意思是你要哪一页的数据#stall是我们获得的数据库内的所有数据 stall=Student.objects.all() #分页,每一页最多4条数据,pageIn...原创 2018-09-19 20:44:16 · 452 阅读 · 0 评论 -
自定义文件的上传
如同我的上一篇博客,在这里上传文件的思路和上传照片的思路是大致一样的,只需要改变几个地方。在这里涉及到一个问题就是服务器文件的名字是唯一的,我们可以用的uuid来大体实现一个唯一的文件名def createFileName(): fileName = str(uuid.uuid4()) return fileNamedef doimgUpload(request)...原创 2018-09-18 20:32:59 · 421 阅读 · 0 评论 -
在django中静态资源的使用
静态资源:css,js,img,文件,,, 如何使用静态资源?1:首先在项目的目录下创建static目录。 2:必须在项目下的setting配置一下才能使用。在setting末尾追加STATICFILES_DIRS = [static的路径os.path.join(BASE_DIR,"static")]3:在模板中在htm...原创 2018-09-18 19:47:02 · 384 阅读 · 0 评论 -
django 实现验证码功能
这是我做的验证码的效果图 .验证码---- 提高安全性的 1.特点: 1.时效性 2.随机性 3.安全 4.模糊 2.使用: 1.安装pillow模块来处理 pip install pillow 2.材料: 画布, 画笔,... 3.代码画验证码: # 创建一个画布...原创 2018-09-18 17:59:25 · 4957 阅读 · 1 评论 -
css中选择器属性选择器
.a.b 交集选择器.a .b .c 后代选择器 获取a下面的的b.a,.b 并集选择器.a>p 子代选择器,选取子一代的p标签.a~p同代选择器 选取a后面的跟a同代的所有p标签.a+p同代选择器 选取 a后面紧挨着的同代的标签选择器权重 class>id>divdiv[class]:只要标签中包含class,就能被选中div[class=di...原创 2018-09-06 16:51:18 · 228 阅读 · 0 评论 -
display:inline-block 和float:left块级行内标签和浮动的区别
inline-block的意思是左右排列,宽高也有效的,然而,不设置inline-block设置左浮动也可以实现左右排列宽高有效,但他们肯定是有区别的,不同的场景可以用不同的方法。 <div style="width: 100px;height: 130px;background-color: olivedrab;display: inline-block"><...原创 2018-09-06 13:48:35 · 547 阅读 · 0 评论 -
vue生命周期,实践证明版
<!DOCTYPE html><html><head><title></title><script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>原创 2018-12-27 16:07:32 · 212 阅读 · 0 评论 -
js 数组求和
const sum = (...arr) =>[].concat(...arr).reduce((acc, val) => acc + val, 0);this.sumprice = sum(this.pricelist).toFixed(2);原创 2019-01-17 14:53:19 · 426 阅读 · 0 评论 -
dom数组打印为空,但是里面内容不为空,问题解决办法
console.log(this.$refs); 这是vue中dom生成有时间差的,当出现此类情况,也就是打印出来的数组为但是展开里面是不为空的,试用下面的办法this.$nextTick(() => {this.$refs.circle[0].style.backgroundColor = "#48ACFF";});使用 nextTick,这样就能获取到里面的元素了...原创 2019-02-11 10:57:45 · 4252 阅读 · 0 评论 -
js将多个方法添加到window对象上的多种方法
方法一:(最简单也是最笨的方法)window.a = function(){}window.b = function(){}window.c = function(){}方法二:(利用jq的extend方法)window.c = function(){}$.extend(window,{ a:function(){}, b:function(){}, ...原创 2019-02-15 16:43:32 · 4900 阅读 · 0 评论 -
使用vue模拟购物车全选按钮,逻辑
<template> <div> <table border="1"> <tr> <td> <input type="checkbox" @click="Allselect" v-model="Allchecked"原创 2019-01-09 11:57:20 · 3877 阅读 · 3 评论 -
用store 模拟记住密码功能 VUE
register.vue<template> <div> <h3>Register</h3>Name: <input type="text" v-model="a"> <br>Password: <input type="passwor原创 2019-01-09 11:51:37 · 602 阅读 · 0 评论 -
图片在div水平竖直中间
<div style="display: table-cell;vertical-align: middle;text-align: center"><img src="" /></div>原创 2019-01-24 10:14:50 · 360 阅读 · 0 评论 -
eslint perfer-spread error
scrollTo() {// return this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)return this.scroll && this.scroll.scrollTo(...arguments) },原创 2019-01-12 14:45:34 · 283 阅读 · 0 评论 -
使用vue 实现外卖平台,饿了么美团模仿
可以搜索,可以添加到购物车,可以计算价格 目录结构:components(folder) meituan.vue store(folder) action.js mulation.js action.js index.js...原创 2019-01-17 15:21:41 · 4016 阅读 · 1 评论 -
实现图片轮播功能,js+css,超级简练通俗易懂
<html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i原创 2018-09-05 21:13:29 · 402 阅读 · 0 评论