Vue-computed与watch

2020-09-21

计算属性computed

用法

<div id="box">
    <input type="text" v-model="message"> 
    <p>{{changeMessage}}</p>
	<p>{{changeName}}</p>
</div>


el: '#box',
data: {
    message: '123',
    name: 'Silence'
},
computed: {
    // 这是属性
    changeMessage() {
    	return this.message;
    },
    // 这是属性
    changeName: {
    	get(){
    		return this.name;
    	},
    	set(val){
    		this.name = val;
    	}
    }
},

概念

computed计算属性，当依赖的属性的值（data中声明过或者父组件传递的props中的数据）发生变化时触发更改，否则使用的是缓存中属性值；
computed中有两个方法get()和set()，如果computed的属性值是函数，那么默认会走get方法，函数的返回值就是属性的属性值；
可以通过自定义set方法来给计算属性赋值；
computed的计算属性需要映射到DOM上，否则无效，即计算属性须被模板使用；
不支持异步，当computed内有异步操作时无效，无法监听数据的变化。

展开全文 >>

节流与防抖

2020-09-02

什么是防抖与节流

有这样一种应用场景，在滚动事件中做一个复杂取值计算或者频繁的触发一个事件，这是很影响性能并容易导致页面卡顿的，所以要合并多次请求，通过函数做一个精确操作。这时就会用到函数防抖或者函数节流。

函数节流是：在固定的时间内触发事件，每隔n秒触发一次
函数防抖是：当你频繁触发后，n秒内只执行一次

防抖

触发高频函数事件后，n秒内函数只能执行一次，如果在n秒内这个事件再次被触发的话，那么会重新计算时间。

实现：每次触发事件时都取消之前的延时调用方法，直到在规定时间内事件没有再被触发时执行事件。

function debounce(fn) {
    let timeout = null; // 创建一个标记用来存放定时器的返回值
    return function() {
        clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
        timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
            fn.apply(this, arguments);
        }, 500);
    };
}

function sayHi() {
    console.log('防抖成功');
}
let box = document.getElementById('box')
box.addEventListener('click', debounce(sayHi))

展开全文 >>

JavaScrip数组API

2020-08-14

遍历

every() :

返回值为boolean类型，每次遍历的结果都为true则返回true，有任何一个返回不为true时，则返回false。

var array = [1, 2, 3, 4, 5];
var flag = array.every(function (element, index, arr) {
    // 不写return时返回undefined 
    if (element < 5) {
        return true;
    }
})

// flag结果为false，因为当index = 4时不满足，故最后结果为false；

filter() :

返回值为数组，当遍历时的结果为true，则将该结果写入新数组中，最后返回该新数组。

var array = [1, 2, 3, 4, 5];
var newArr = array.filter(function (element, index, arr) {
    if (element > 2) {
        return true;
    }
    return false;
})

// 最后newArr = [3, 4, 5]

foreach()

无返回值，纯数组操作。

var array = [1, 2, 3, 4, 5];
array.foreach(function(element, index, arr) {
    log.info(element)
})

// foreach方法最大的问题是无法跳出循环，哪怕是return了或者抛异常，它都会看作continue操作，直到执行完所有的遍历操作为止。

展开全文 >>

JavaScript字符串API

2020-08-14

String.prototype.anchor()

anchor()方法用于创建一个html描元素

1 2	const str = '我是html内容'.anchor('我是name属性值') console.log(str) // "<a name="我是name属性值">我是html内容</a>"

String.prototype.bold()

bold()方法用于创建html元素

1
2
const str = 'aaa'.bold()
console.log(str) // "<b>aaa</b>"

String.prototype.charAt()
charAt()方法用于返回字符串指定位置的字符

1
2
'amz'.charAt() // 'a' 不传索引则默认为0
'amz'.charAt(1) // 'm'

String.prototype.concat()
concat()将多个字符串拼接在一起

1
2
3
4
const a = 'aaa'
const b = 'bbb'
const c = 'ccc'.concat(a, b, 'ddd')
console.log(c) // 'cccaaabbbddd' hs

String.prototype.endsWith()
endsWith()方法用于判断当前字符串是否以另一个给定字符串结尾

1
2
3
4
5
const name = 'my name is amz'
name.endsWith('z') // true
name.endsWith('mz') // true
name.endsWith('amz') // true
name.endsWith('is') // falsejs

前端

js

展开全文 >>

Django-数据库过滤器filter
2020-07-29

在做django项目时，难免会需要对数据库中的数据进行筛选，django有自己的数据库过滤语法。

1
users = User.objects.filter()

其中有多种参数：

__contains：包含， like ‘%aaa%’； __icontains：包含（忽略大小写） ilike ‘%aaa%’，但是对于sqlite来说，contains的作用效果等同于 icontains

__exact ：精确等于， like ‘aaa’ ；iexact 精确等于（忽略大小写） ilike ‘aaa’

__gt 大于

__gte 大于等于

__lt 小于

__lte 小于等于

__in 存在于一个list范围内

__startswith 以…开头

__istartswith 以…开头忽略大小写

__endswith以…结尾

__iendswith 以…结尾，忽略大小写

__range 在…范围内

__year 日期字段的年份

__month 日期字段的月份

__day日期字段的日

__isnull=True/False 空查询

“Q() |” 或；“&”与(逗号效果一样) ； “~”非(不等于)

1
2
3
from django.db.models imports Q

XXX.objects.filter(Q(id__gt=3)|Q(bread__gt=2))

后端

django

展开全文 >>

Vue-实现路由跳转传值的几种方式
2020-07-29

一、router-link
URL路径：http://localhost:8080/#/test?userid=1

1
<router-link :to="{path:'/test',query: {userid: id}}">跳转</router-link>

接收数据：

1
var id = this.$route.query.userid

二、this.$router.push()
1、使用path+query
URL路径：http://localhost:8080/#/selectCate?userid=1

发送数据：

1
2
var id = 1;
this.$router.push({path:'/selectCate',query:{userid:id}});

接收数据：

1
var id = this.$route.query.userid;

2、使用name+params
URL路径：http://localhost:8081/#/selectCate

发送数据：

1
2
3
var id = 1;
this.$router.push({name:'selectCate',params:{userid:id}});
12

接收数据：

1
var id = this.$route.params.userid;

注意：使用query，传输的值会在url后面以参数的形式显示出来，可以刷新页面，数据不变；而使用params，参数不会出现在url后面，但是一刷新页面传的值就没了。

三、sessionStorage存值
使用sessionstorage可以将值保存在浏览器上，方便存取。

1
2
3
window.sessionStorage.setItem('token', this.token); //存值

window.sessionStorage.getItem('token'); //取值

vue

前端

展开全文 >>

Django-Paginator分页器
2020-07-07

调用
1、导入Paginator

1
from django.core.paginator import Paginator

2、创建分页对象

1
2
3
paginator = Paginator(list, 2)
# 第一个参数是访问数据库返回得到的一个对象
# 第二个参数表示每一页显示几条信息

3、创建单个页面的对象

1
2
page = paginator.page(page_index)
# 参数为页码

后端

django

展开全文 >>

JavaScript的宏任务与微任务
2020-06-22

一、同步任务与异步任务
首先，我们需要搞清楚同步任务和异步任务的概念以及工作原理。

同步任务
同步任务指的是在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。

异步任务
异步任务指的是刚开始不进入主线程，当主线程的任务执行完了之后再调用异步任务，异步任务任务才会进入主线程执行。（setTimeout， setInterval，promise，process.NextTick）

前端

JS

展开全文 >>

python-视频的剪切与拼接
2020-05-23

1、导入moviepy的包
1
from moviepy.editor import *

2、读取视频到内存
1
video = VideoFileClip(path)

由此得到了一个VideoFileClip的对象，可通过对此对象的操作，实现对视频的操作。

3、对视频进行剪切
1
videoclip = video.subclip(time1, time2)

time1：起始时长，time2：终止时长，单位均为秒。

videoclip是从时长time1到time2的视频的对象。

python

moviepy

展开全文 >>

Linux-部署FastDFS分布式文件系统
2020-05-20

一、安装fastdfs依赖包

解压缩libfastcommon-master.zip

进入到libfastcommon-master的目录中

执行 ./make.sh

执行 sudo ./make.sh install

二、安装fastdfs

解压缩fastdfs-master.zip

进入到 fastdfs-master目录中

执行 ./make.sh

执行sudo ./make.sh install

三、配置跟踪服务器tracker

执行sudo cp /etc/fdfs/tracker.conf.sample /etc/fdfs/tracker.conf

在/home/python/目录中创建目录 fastdfs/tracker，mkdir –p /data/home/silence/FastDFS/fastdfs/tracker

编辑/etc/fdfs/tracker.conf配置文件 sudo vim /etc/fdfs/tracker.conf，修改 base_path=/data/home/silence/FastDFS/fastdfs/tracker

linux

django

展开全文 >>

12 3 4 Next »