Fork me on GitHub
image frame

Hidden yourself until New God appear!

router

vue

路由

main.js 引入

1
2
3
4
5
6
7
8
9
10
11
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'
Vue.use(VueRouter)

new Vue({
	el:'#app',
	render: h => h(App),
	router:router
})

基本路由

path

使用路由的path

1
2
3
4
5
<router-link to="{
	path: "/home/news"                                         
    }">
    ...
</router-link>

若有<router-link> 必须在当前组件指定 <router-view></router-view>

name

使用路由的name

1
2
3
4
<router-link :to="{
	name:'xiangqing',				
    }">
</router-link>

路由传参

query参数

传递query参数

1
2
3
4
5
6
7
8
9
<router-link :to="{
	...
	query:{
		id:m.id,
		title:m.title
		}
	}">
{{m.title}}
</router-link>

接收query参数

1
{{ $route.query.id }}

params 参数

1
2
3
4
5
6
7
8
<router-link :to="{
	...
	params:{
		id:m.id,
		title:m.title
		}
	}">
</router-link>

路由props

目的：为了让路由读参数读的更容易；

不使用props接收参数，如下所示，这样很繁琐：

1
2
this.$route.query.xxx;
this.$route.params.xxx;

路由的props与组件的props一样，都需要在组件中使用：props: ['id', 'title', ...], 来接收

不同的是，路由的props，在 router/index.js 中，进行配置

方式一 不常用

//props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给组件。
props:{a:1,b:'hello'}

组件接收：

1
props:['a','b']

方式二

props的第二种写法，值为布尔值;

若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。

1
props:true;

组件接收：

1
props: ['xxx',..]

缺点：

只处理param参数，不处理query参数

方式三

props的第三种写法，值为函数

其实工作量没有减少，将本应在组件内写的代码，移到router/index.js中

1
2
3
4
5
6
7
8
props($route){
    return {
        id: $route.query.id,
        title: $route.query.title,
        a: 1,
        b: 'hello'
    }
}

组件接收：

1
props: ['id', 'title', 'a', 'b'],

问？组件的 props 和 路由的 props，都能在 props: ['id', 'title'] 中接收吗？

试了一下，发现不能一起接收

若觉得 $route.query.id, 写的很长可以使用结构赋值的连续写法

1
2
3
4
5
6
7
8
props({query:{id,title}}){
    return {
        id,
        title,
        a: 1,
        b: 'hello'
    }
}

vuex

vue

vuex

main.js

平时在vue的函数中分发请求使用，this.$store.dispatch('xxx');

但如果不是vue的函数，那么this指向的不再是vue。

以下main.js对外暴露了vue，从而使得在任何地方都可以拿到 $store。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// vuex
import store from './store'
const vue = new Vue({
  el: '#app',
  // 事件总线
  beforeCreate() {
    Vue.prototype.$bus = this;
  },
  components: { App },
  router: router,
  store,
  render: h => h(App),
});

export default vue;

通过暴露的 vue 拿到 $store

1
2
import vue from '@/main';
vue.$store.commit('paper/initPaper', paperId);

模块化写法

index.js

store/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import countOptions from './count'
import personOptions from './person'
//应用Vuex插件
Vue.use(Vuex)

//创建并暴露store
export default new Vuex.Store({
	modules:{
		countAbout:countOptions,
		personAbout:personOptions
	}
})

子模块

store/子模块.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//求和相关的配置
export default {
	namespaced:true,
	actions:{
		jiaOdd(context,value){
			if(context.state.sum % 2){
				context.commit('JIA',value)
			}
		},
		jiaWait(context,value){
			setTimeout(()=>{
				context.commit('JIA',value)
			},500)
		}
	},
	mutations:{
		JIA(state,value){
			state.sum += value
		},
		JIAN(state,value){
			state.sum -= value
		},
	},
	state:{
		sum:0, //当前的和
		school:'尚硅谷',
		subject:'前端',
	},
	getters:{
		bigSum(state){
			return state.sum*10
		}
	},
}

分发请求

personAbout/addPersonWang: 前面是子仓库的模块名

1
2
this.$store.dispatch('personAbout/addPersonWang',personObj);
this.$store.commit('personAbout/ADD_PERSON',personObj);

组件内简写形式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<h3>当前求和放大10倍为：{{bigSum}}</h3>
		<h3>我在{{school}}，学习{{subject}}</h3>
		<h3 style="color:red">Person组件的总人数是：{{personList.length}}</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment(n)">+</button>
		<button @click="decrement(n)">-</button>
		<button @click="incrementOdd(n)">当前求和为奇数再加</button>
		<button @click="incrementWait(n)">等一等再加</button>
	</div>
</template>

<script>
	import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		computed:{
			//借助mapState生成计算属性，从state中读取数据。（数组写法）
			...mapState('countAbout',['sum','school','subject']),
			...mapState('personAbout',['personList']),
			//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
			...mapGetters('countAbout',['bigSum'])
		},
		methods: {
			//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
			...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
			//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
			...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
		},
		mounted() {
			console.log(this.$store)
		},
	}
</script>

<style lang="css">
	button{
		margin-left: 5px;
	}
</style>

全局写法

不常用，不建议使用

每个子仓库都可以写成独立js文件，模板如下；

在分发请求时，无需写子仓库的模块名了；缺点很严重，不同子仓库里的函数不能重名；

this.$store.dispatch('addPersonWang',personObj);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
let state = {
    data: {},
    age: 18,
}

let actions = {

}

let mutations = {
    
}

//仓库计算属性
let getters = {

};

//对外暴露小仓库
export default {
    state,
    mutations,
    actions,
    getters
}

pythonTricks

python

py tricks

记录python编程的一些小技巧

递归

最深处递归函数的值，会逐层被带回来

函数

修改外部对象

若参数是外部的对象

qB

tools

qBittorrent

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
http://1337.abcvg.info:80/announce

http://fxtt.ru:80/announce

http://milanesitracker.tekcities.com:80/announce

http://nyaa.tracker.wf:7777/announce

http://open.acgnxtracker.com:80/announce

http://open.nyap2p.com:8080/announce

http://open.tracker.ink:6969/announce

http://opentracker.xyz:80/announce

http://share.camoe.cn:8080/announce

http://t.acg.rip:6699/announce

http://t.nyaatracker.com:80/announce

http://t.overflow.biz:6969/announce

http://tr.cili001.com:8070/announce

http://tracker.aeerso.space:6969/announce

http://tracker.bt4g.com:2095/announce

http://tracker.files.fm:6969/announce

http://tracker.gbitt.info:80/announce

http://tracker.ipv6tracker.ru:80/announce

http://tracker.mywaifu.best:6969/announce

http://tracker1.itzmx.com:8080/announce

http://tracker2.itzmx.com:6961/announce

http://tracker3.520.jp:2095/announce

http://tracker3.itzmx.com:6961/announce

http://tracker4.itzmx.com:2710/announce

https://carbon-bonsai-621.appspot.com:443/announce

https://opentracker.i2p.rocks:443/announce

https://tr.abiir.top:443/announce

https://tr.burnabyhighstar.com:443/announce

https://tr.ready4.icu:443/announce

https://tracker.baka.ink:443/announce

https://tracker.imgoingto.icu:443/announce

https://tracker.lilithraws.cf:443/announce

https://tracker.nanoha.org:443/announce

https://tracker.tamersunion.org:443/announce

https://trackme.theom.nz:443/announce

udp://9.rarbg.com:2810/announce

udp://exodus.desync.com:6969/announce

udp://fe.dealclub.de:6969/announce

udp://ipv4.tracker.harry.lu:80/announce

udp://ipv6.babico.name.tr:8000/announce

udp://mirror.aptus.co.tz:6969/announce

udp://movies.zsw.ca:6969/announce

udp://oldboystudy.com:6969/announce

udp://open.demonii.com:1337/announce

udp://open.dstud.io:6969/announce

udp://open.free-tracker.ga:6969/announce

udp://open.publictracker.xyz:6969/announce

udp://open.stealth.si:80/announce

udp://open.tracker.ink:6969/announce

udp://open.xxtor.com:3074/announce

udp://opentor.org:2710/announce

udp://opentracker.i2p.rocks:6969/announce

udp://p4p.arenabg.com:1337/announce

udp://retracker.hotplug.ru:2710/announce

udp://run.publictracker.xyz:6969/announce

udp://thetracker.org:80/announce

udp://torrentclub.space:6969/announce

udp://tracker.0x.tf:6969/announce

udp://tracker.altrosky.nl:6969/announce

udp://tracker.auctor.tv:6969/announce

udp://tracker.beeimg.com:6969/announce

udp://tracker.birkenwald.de:6969/announce

udp://tracker.bitsearch.to:1337/announce

udp://tracker.cyberia.is:6969/announce

udp://tracker.edkj.club:6969/announce

udp://tracker.jordan.im:6969/announce

udp://tracker.leech.ie:1337/announce

udp://tracker.moeking.me:6969/announce

udp://tracker.openbittorrent.com:6969/announce

udp://tracker.opentrackr.org:1337/announce

udp://tracker.pomf.se:80/announce

udp://tracker.publictracker.xyz:6969/announce

udp://tracker.srv00.com:6969/announce

udp://tracker.theoks.net:6969/announce

udp://tracker.tiny-vps.com:6969/announce

udp://tracker.torrent.eu.org:451/announce

udp://tracker.zerobytes.xyz:1337/announce

udp://tracker1.bt.moack.co.kr:80/announce

udp://tracker2.dler.com:80/announce

udp://tracker2.dler.org:80/announce

udp://tracker6.lelux.fi:6969/announce

udp://v2.iperson.xyz:6969/announce

udp://vibe.sleepyinternetfun.xyz:1738/announce

udp://www.torrent.eu.org:451/announce

udp://zecircle.xyz:6969/announce

ws://hub.bugout.link:80/announce

wss://tracker.openwebtorrent.com:443/announce

http://1337.abcvg.info:80/announce

http://207.241.226.111:6969/announce

http://207.241.231.226:6969/announce

http://[2001:1b10:1000:8101:0:242:ac11:2]:6969/announce

http://[2a04:ac00:1:3dd8::1:2710]:2710/announce

http://fe.dealclub.de:6969/announce

http://fxtt.ru:80/announce

http://milanesitracker.tekcities.com:80/announce

http://movies.zsw.ca:6969/announce

http://nyaa.tracker.wf:7777/announce

http://open.acgnxtracker.com:80/announce

http://open.acgtracker.com:1096/announce

http://open.nyap2p.com:8080/announce

http://open.tracker.ink:6969/announce

http://opentracker.i2p.rocks:6969/announce

http://opentracker.xyz:80/announce

http://retracker.hotplug.ru:2710/announce

http://share.camoe.cn:8080/announce

http://t.acg.rip:6699/announce

http://t.nyaatracker.com:80/announce

http://t.overflow.biz:6969/announce

http://tr.cili001.com:8070/announce

http://tracker.aeerso.space:6969/announce

http://tracker.birkenwald.de:6969/announce

http://tracker.bt4g.com:2095/announce

http://tracker.dler.com:6969/announce

http://tracker.dler.org:6969/announce

http://tracker.edkj.club:6969/announce

http://tracker.files.fm:6969/announce

http://tracker.gbitt.info:80/announce

http://tracker.ipv6tracker.ru:80/announce

http://tracker.mywaifu.best:6969/announce

http://tracker.noobsubs.net:80/announce

http://tracker.opentrackr.org:1337/announce

http://tracker.srv00.com:6969/announce

http://tracker.srv00.com:80/announce

http://tracker.zerobytes.xyz:1337/announce

http://tracker1.bt.moack.co.kr:80/announce

http://tracker1.itzmx.com:8080/announce

http://tracker2.520.jp:2095/announce

http://tracker2.dler.org:80/announce

http://tracker2.itzmx.com:6961/announce

http://tracker3.520.jp:2095/announce

http://tracker3.ctix.cn:2095/announce

http://tracker3.itzmx.com:6961/announce

http://tracker4.itzmx.com:2710/announce

http://vps02.net.orel.ru:80/announce

https://1337.abcvg.info:443/announce

https://carbon-bonsai-621.appspot.com:443/announce

https://chihaya-heroku.120181311.xyz:443/announce

https://opentracker.i2p.rocks:443/announce

https://tr.abiir.top:443/announce

https://tr.abir.ga:443/announce

https://tr.burnabyhighstar.com:443/announce

https://tr.ready4.icu:443/announce

https://track.plop.pm:8989/announce

https://tracker.babico.name.tr:443/announce

https://tracker.baka.ink:443/announce

https://tracker.dmhy.pw:443/announce

https://tracker.foreverpirates.co:443/announce

https://tracker.imgoingto.icu:443/announce

https://tracker.kuroy.me:443/announce

https://tracker.lelux.fi:443/announce

https://tracker.lilithraws.cf:443/announce

https://tracker.lilithraws.org:443/announce

https://tracker.nanoha.org:443/announce

https://tracker.nitrix.me:443/announce

https://tracker.srv00.com:443/announce

https://tracker.tamersunion.org:443/announce

https://tracker1.520.jp:443/announce

https://tracker1.loli.co.nz:443/announce

https://trackme.theom.nz:443/announce

https://xtremex.herokuapp.com:443/announce

udp://93.158.213.92:1337/announce

udp://151.80.120.114:2810/announce

udp://45.154.253.8:6969/announce

udp://89.234.156.205:451/announce

udp://185.181.60.155:80/announce

udp://5.79.216.168:6969/announce

udp://208.83.20.20:6969/announce

udp://149.28.47.87:1738/announce

udp://156.234.201.18:80/announce

udp://209.141.59.16:6969/announce

udp://194.53.137.231:6969/announce

udp://93.104.214.40:6969/announce

udp://107.189.11.230:6969/announce

udp://185.70.187.79:6969/announce

udp://185.134.22.3:6969/announce

udp://185.21.216.185:6969/announce

udp://tracker.sbsub.com:2710/announce
http://open.acgtracker.com:1096/announce
http://176.113.68.67:6961/announce
http://176.113.71.60:6961/announce
http://184.105.151.164:6969/announce
http://185.83.214.123:6969/announce
http://51.15.55.204:1337/announce
http://51.38.230.101:80/announce
http://93.158.213.92:1337/announce
http://95.107.48.115:80/announce
http://aaa.army:8866/announce
http://bobbialbano.com:6969/announce
http://derpyradio.net:6969/announce
http://h4.trakx.nibba.trade:80/announce
http://open.acgnxtracker.com/announce
http://opentracker.i2p.rocks:6969/announce
http://publictracker.ch:6969/announce
http://retracker.sevstar.net:2710/announce
http://rt.tace.ru:80/announce
http://share.camoe.cn:8080/announce
http://t.acg.rip:6699/announce
http://t.nyaatracker.com/announce
http://t.nyaatracker.com:80/announce
http://t.overflow.biz:6969/announce
http://tr.cili001.com:8070/announce
http://tracker.anonwebz.xyz:8080/announce
http://tracker.dler.org:6969/announce
http://tracker.files.fm:6969/announce
http://tracker.gbitt.info/announce
http://tracker.gbitt.info:80/announce
http://tracker.ipv6tracker.ru:80/announce
http://tracker.kamigami.org:2710/announce
http://tracker.lelux.fi:80/announce
http://tracker.noobsubs.net:80/announce
http://tracker.skyts.cn:6969/announce
http://tracker.skyts.net:6969/announce
http://tracker.ygsub.com:6969/announce
http://tracker.zerobytes.xyz:1337/announce
http://tracker1.itzmx.com:8080/announce
http://tracker2.dler.org:80/announce
http://tracker2.itzmx.com:6961/announce
http://tracker3.itzmx.com:6961/announce
http://tracker4.itzmx.com:2710/announce
http://vpn.flying-datacenter.de:6969/announce
http://vps02.net.orel.ru/announce
http://vps02.net.orel.ru:80/announce
https://1337.abcvg.info/announce
https://1337.abcvg.info:443/announce
https://aaa.army:8866/announce
https://publictracker.pp.ua:443/announce
https://tr.ready4.icu:443/announce
https://tracker.gbitt.info/announce
https://tracker.hama3.net:443/announce
https://tracker.imgoingto.icu:443/announce
https://tracker.lelux.fi:443/announce
https://tracker.nitrix.me:443/announce
https://tracker.tamersunion.org:443/announce
https://trakx.herokuapp.com:443/announce
https://w.wwwww.wtf:443/announce
udp://176.113.68.67:6961/announce
udp://176.113.71.60:6961/announce
udp://185.181.60.67:80/announce
udp://185.83.214.123:6969/announce
udp://207.241.226.111:6969/announce
udp://207.241.231.226:6969/announce
udp://208.83.20.20:6969/announce
udp://212.1.226.176:2710/announce
udp://212.47.227.58:6969/announce
udp://217.76.183.53:80/announce
udp://37.235.174.46:2710/announce
udp://46.148.18.250:2710/announce
udp://46.148.18.254:2710/announce
udp://47.ip-51-68-199.eu:6969/announce
udp://5.226.148.20:6969/announce
udp://61626c.net:6969/announce
udp://62.210.97.59:1337/announce
udp://6ahddutb1ucc3cp.ru:6969/announce
udp://91.149.192.31:6969/announce
udp://91.216.110.52:451/announce
udp://93.158.213.92:1337/announce
udp://adm.category5.tv:6969/announce
udp://admin.videoenpoche.info:6969/announce
udp://adminion.n-blade.ru:6969/announce
udp://api.bitumconference.ru:6969/announce
udp://aruacfilmes.com.br:6969/announce
udp://bclearning.top:6969/announce
udp://benouworldtrip.fr:6969/announce
udp://bioquantum.co.za:6969/announce
udp://bitsparadise.info:6969/announce
udp://blokas.io:6969/announce
udp://bms-hosxp.com:6969/announce
udp://bubu.mapfactor.com:6969/announce
udp://cdn-1.gamecoast.org:6969/announce
udp://cdn-2.gamecoast.org:6969/announce
udp://chanchan.uchuu.co.uk:6969/announce
udp://cutiegirl.ru:6969/announce
udp://daveking.com:6969/announce
udp://discord.heihachi.pw:6969/announce
udp://dpiui.reedlan.com:6969/announce
udp://edu.uifr.ru:6969/announce
udp://eliastre100.fr:6969/announce
udp://engplus.ru:6969/announce
udp://fe.dealclub.de:6969/announce
udp://forever-tracker.zooki.xyz:6969/announce
udp://inferno.demonoid.is:3391/announce
udp://ipv4.tracker.harry.lu:80/announce
udp://josueunhuit.com:6969/announce
udp://kanal-4.de:6969/announce
udp://koli.services:6969/announce
udp://mail.realliferpg.de:6969/announce
udp://movies.zsw.ca:6969/announce
udp://mts.tvbit.co:6969/announce
udp://nagios.tks.sumy.ua:80/announce
udp://ns-1.x-fins.com:6969/announce
udp://open.stealth.si:80/announce
udp://opentor.org:2710/announce
udp://opentracker.arg.bz:6969/announce
udp://opentracker.i2p.rocks:6969/announce
udp://publictracker.xyz:6969/announce
udp://qg.lorzl.gq:2710/announce
udp://retracker.akado-ural.ru:80/announce
udp://retracker.lanta-net.ru:2710/announce
udp://retracker.local.msn-net.ru:6969/announce
udp://retracker.netbynet.ru:2710/announce
udp://retracker.sevstar.net:2710/announce
udp://rutorrent.frontline-mod.com:6969/announce
udp://sd-161673.dedibox.fr:6969/announce
udp://storage.groupees.com:6969/announce
udp://teamspeak.value-wolf.org:6969/announce
udp://torrent.tdjs.tech:6969/announce
udp://tr.cili001.com:8070/announce
udp://tracker.0x.tf:6969/announce
udp://tracker.altrosky.nl:6969/announce
udp://tracker.blacksparrowmedia.net:6969/announce
udp://tracker.coppersurfer.tk:6969/announce
udp://tracker.dler.org:6969/announce
udp://tracker.ds.is:6969/announce
udp://tracker.dyne.org:6969/announce
udp://tracker.filemail.com:6969/announce
udp://tracker.fortu.io:6969/announce
udp://tracker.kamigami.org:2710/announce
udp://tracker.leechers-paradise.org:6969/announce
udp://tracker.lelux.fi:6969/announce
udp://tracker.opentrackr.org:1337/announce
udp://tracker.shkinev.me:6969/announce
udp://tracker.skynetcloud.site:6969/announce
udp://tracker.skyts.net:6969/announce
udp://tracker.tiny-vps.com:6969/announce
udp://tracker.uw0.xyz:6969/announce
udp://tracker.v6speed.org:6969/announce
udp://tracker.vulnix.sh:6969/announce
udp://tracker.zemoj.com:6969/announce
udp://tracker.zerobytes.xyz:1337/announce
udp://tracker.zum.bi:6969/announce
udp://tracker0.ufibox.com:6969/announce
udp://tracker2.dler.org:80/announce
udp://tracker2.itzmx.com:6961/announce
udp://tracker3.itzmx.com:6961/announce
udp://tracker6.dler.org:2710/announce
udp://tracker-udp.gbitt.info:80/announce
udp://ultra.zt.ua:6969/announce
udp://us-tracker.publictracker.xyz:6969/announce
udp://valakas.rollo.dnsabr.com:2710/announce
udp://vibe.community:6969/announce
udp://www.midea123.z-media.com.cn:6969/announce
udp://zephir.monocul.us:6969/announce

paperStruct

autoWrite

结构设计

ShowPaper.vue加载不同文件

showPaper 带有不同的query参数，实现访问不同文件的效果。

如何将一个query参数传给一个组件？

jsIntro

javascript

js基础知识

建议阅读 现代 JavaScript 教程 ，分类细，写的水平也高

promise

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function proDemo(num) {
    return new Promise(
        function (resolve, reject) {
            let a = num;
            if (a % 2) {
                resolve(a);
            } else {
                reject(a);
            }
        }
    );
}

function odd(params) {
    console.log(params + "是奇数");
}

function even(params) {
    throw new Error(params + " even error");
}

let promise = proDemo(10);
promise.then(odd, even).catch((err) => console.log(err + " catch"));

读取值

从对象读取值，如果为undefied，则赋值为 [ ]

1
JSON.parse(localStorage.getItem('papers')) || []

对象

键

键为变量

1
2
let a = "abc";
{ [a] : "xxx"}

使用[]把作为键的变量包起来

判断键是否存在

1
2
3
a["age"];
a.hasOwnProperty('ndfaame');

在ECMAScript 5.1中，Object.create添加了该方法，该方法可以创建具有指定[[Prototype]]的对象。Object.create（null）是用于创建将用作Map的对象的常见模式。当假设对象将具有from的属性时，这可能会导致错误Object.prototype。该规则no-prototype-builtins防止Object.prototype直接从对象调用方法。有关no-prototype- builtins的更多信息，请在此处访问ESLint的官方文档。

1
Object.prototype.hasOwnProperty.call(a, "jie");

单对象键值

获取单个对象的键和值

1
2
3
4
let arr = { name: 'jie' };
let key = Object.keys(arr)[0];
let value = Object.values(arr)[0];
console.log(key, value);

结构赋值

直接拿到参数内部的属性，简化代码；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let obj = {
    person: {
        name: "jie"
    }
}

const show1 = ({ person }) => {
    console.log(person);
}

// 结构赋值连续写法
const show2 = ({ person: { name } }) => {
    console.log(name);
}

show1(obj);
show2(obj);

输入结果如下：

1
2
{ name: 'jie' }
jie

数组

一维数组

指定声明数组的长度

new Array(3);

如下所示，即使不指定数组长度，也无需担心数组越界

1
2
3
4
5
6
let arr = new Array();
console.log(arr.length);

arr[10] = 11;
console.log(arr.length);
console.log(arr);

[<10 empty items>, 11 ]

二维数组

初始化

1
2
3
let m = 3;
let n = 2;
const mat = new Array(m).fill(0).map(() => new Array(n).fill(0));

nextDo

autoWrite 
1
2
3
4
5
6
7
8
9
10
11
12
init(obj) {
    this.avgGdp = obj.avgGdp
    this.avgProvinceGdp = obj.avgProvinceGdp
    this.cityID = obj.cityID
    this.countryGdp = obj.countryGdp
    this.countryGdpIncrease = obj.countryGdpIncrease
    this.gdp = obj.gdp
    this.gdpIncrease = obj.gdpIncrease
    this.provinceGdp = obj.provinceGdp
    this.provinceGdpIncrease = obj.provinceGdpIncrease
    this.year = obj.year
},

在每个页面都这样写，太丑了。遍历data中的数据，如果obj含有该属性则对data中的数据进行赋值。

发起网络请求的代码，建议移到showPaper组件内。资源加载后，存放在浏览器的缓存内。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
getData() {
      let url = "http://localhost:80/api/jsons/query?year=2021&cityID=422801";
      axios.get(url).then(
        (response) => {
          console.log("请求成功了", response.data);
          this.init(response.data);

          setTimeout(() => {
            this.fillParagraphText();
          });
        },
        (error) => {
          console.log("请求失败了", error.message);
        }
      );
    },

存储在浏览器内存的内容，保存时间多久，会不会存在用户一直在本地编辑不提交，从而丢失用户数据的问题？

basic

vue

vue

配置项

允许组件名为单个单词

在vue根目录下，增加.eslintrc.js文件，文件内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
module.exports = {
    root: true,
    env: {
        node: true
    },
    'extends': [
        'plugin:vue/essential',
        'eslint:recommended'
    ],
    parserOptions: {
        parser: '@babel/eslint-parser'
    },
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        //在rules中添加自定义规则
        //关闭组件命名规则
        "vue/multi-word-component-names": "off",
    },
    overrides: [
        {
            files: [
                '**/__tests__/*.{j,t}s?(x)',
                '**/tests/unit/**/*.spec.{j,t}s?(x)'
            ],
            env: {
                jest: true
            }
        }
    ]
}

组件

注册为全局 组件

1
2
3
4
5
6
//导入需要全局注册的组件
import Count from '@/components/Count.vue'

//参数1：字符串格式，表示组件的“注册名称”
//参数2：需要被全局注册的那个组件
Vue.component('MyCount',Count)

v-for

v-for 数据修改后，页面不变化原因

1
2
3
4
<div v-for="data in paper" :key="data.id">
    <PImg :textObj="data" />
    {{data}}
</div>

paper的数据格式如下：

1
2
3
4
5
6
7
[
	{
        id:xxx,
        value:xxx,
    },
    ...
]

若只更改paper某个value的数据:

  • 中的数据会变化

  • pImg组件的数据不会变化

    只改变了value，:key=”data.id”`没有变，vue不知道数据发生了变化，仍然使用上一次的虚拟dom，故新数据显示不出来。

在修改数据时，用一个新对象替代原来对象的做法是不对的，这样也会导致vue感知到不到数据的变化

❌

1
2
3
4
state.data[key] = {
      value: newValue,
      id: nanoid(),
}

必须逐个修改对象的值：

1
2
3
4
5
6
for (const key in paper) {
    if (paper[key].id == id) {
        paper[key].id = nanoid();
        paper[key].value = newValue;
    }
}

消息订阅与发布

用的不多，在vue中常用 事件总线

推荐包: pubsub-js

装包: npm i pubsub-js

导入包：import pubsub from 'pubsub-js'

订阅消息

1
2
3
this.pubId = pubsub.subscribe('hello',function(msgName,data){
	// console.log(this); 问：这里的this为什么是undefined
})

订阅hello,当有人发布hello后，执行回调函数。pubsub.subscribe回调函数里的 this 不是vc 。因为vue承诺函数内的this是vc，而第三方库函数里的this不会这样设置。若需要使用vc，可参考下述的两种写法。

每一次订阅后，都有一个订阅的id。避免取消订阅的函数读取不到pubId，所以把它放在 this 身上。

  • msgName

    订阅名，即“hello”

  • data

    发布的数据

正确写法 √

方式一,箭头函数：

1
2
3
4
5
mounted(){
    this.pubId = pubsub.subscribe('hello',(msgName,data) => {
        console.log(this); // 这里的this是vc
    })
}

方式二：

1
2
3
4
5
6
7
8
methods:{
	demo(msgName,data){
		console.log(data,this);// 这里的this是vc
	}
},
mounted(){
    this.pubId = pubsub.subscribe('hello',this.demo)
}

发布消息

1
pubsub.publish('hello',666)

取消订阅

1
2
3
beforeDestroy(){
	pubsub.unsubscribe(this.pubId)
}

生命周期

参考点击

computed是在DOM执行完成后立马执行（如：赋值）

created执行时挂载阶段还没有开始，模版还没有渲染成html，所以无法获取元素。created钩子函数主要用来初始化数据。通常在created钩子函数里执行访问数据库的方法，然后返回数据给前端，前端data中定义全局变量接收数据

mounted钩子函数一般用来向后端发起请求，拿到数据后做一些业务处理。该函数在模版渲染完成后才被调用。DOM操作一般是在mounted钩子函数中进行。
methods方法有一定的触发条件，如click等。
watch用于检测vue实例上数据的变动

  • 需求一

    页面上的内容，由 axios 从服务器端拿回数据，并渲染到页面上。

    问题：当 axios 从服务器取回数据后，vue如何感知到数据发生了变化，并重新渲染模板。

参考链接

props

props，在data函数调用前就可以拿到；故可用props接收参数后，在data函数中。

1
2
3
4
5
6
props: ['id'],
  data() {
    return {
      id2: this.id,
    }
  },
  • 建议在created阶段发起ajax请求

自定义事件

涉及到子给父传东西

在父组件中，给子组件添加一个自定义事件，@后面跟事件名，再跟事件的回调函数。比如：@getA="getA"。

点击了子组件的按钮后，父组件接收到了子组件传过来的a。

子组件执行 this.$emit("getA", "xxx")后，只有对应的父组件才会对此响应。

父组件代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
    <div>
        <h1>This is Father! A is {{ a }}</h1>
        <Son @getA="getA"></Son>
    </div>
</template>

<script>
import Son from '@/components/Son.vue';
export default {
    data() {
        return {
            a: 10,
        }
    },
    components: {
        Son
    },
    methods: {
        getA(value) {
            this.a = value;
        }
    }
}
</script>

子组件代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
    <div>
        <h2>This is son!</h2>
        <button @click="send">点击</button>
    </div>
</template>

<script>
export default {
    methods: {
        send() {
            this.$emit("getA", "A from son");
        }
    }
}
</script>

全局事件总线

前面的自定义事件，只能是父子组件之间传递数据，孙子组件则不能传递数据；故引出了总线；

导入

在main.js中，进行引入

1
2
3
4
5
6
7
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this
	},
})

绑定

1
2
3
mounted() {
    this.$bus.$on('checkTodo',this.checkTodo);
}

解绑

1
2
3
beforeDestroy() {
	this.$bus.$off('checkTodo');
}

emit

1
2
3
4
5
6
7
8
methods: {
    //勾选or取消勾选
    handleCheck(id){
        //通知App组件将对应的todo对象的done值取反
        // this.checkTodo(id)
        this.$bus.$emit('checkTodo',id)
    }
}

本地存储

写入

deep:true 表示当 todos 对象的数据发生变化后，也能监视到；若不写deep，则只能监视到值的变化，不能监视到对象内部值的变化。

1
2
3
4
5
6
7
8
watch: {
			todos:{
				deep:true,
				handler(value){
					localStorage.setItem('todos',JSON.stringify(value))
				}
			}
		}

读取

1
2
3
4
5
6
data() {
			return {
				//由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
				todos:JSON.parse(localStorage.getItem('todos')) || []
			}
		},

定时器

在一个函数中，修改完数据后，网页模板会重新解析。

希望在网页模板解析完成后执行某项操作，通常情况当前函数内容全部执行完，模板才会重新解析。

解决方法：使用 setTimeout 将该操作添加到队尾。计时的参数可以不用填。

1
2
3
4
this.obj = this.getData();
setTimeout(() => {
    this.arr = this.fillParagraphText();
});

常用操作

确认删除

1
2
3
4
5
6
7
8
9
10
methods: {
        handle() {
            if (confirm('确定删除吗？')) {
                //通知App组件将对应的todo对象删除
                console.log("已删除");
            } else {
                console.log("取消");
            }
        }
    }

API

$set

在vc中添加一个数据后，这个数据的修改后不会重新加载模板

1
this.$set(obj,'attr',true);

案例：

1
2
3
4
5
6
7
8
if(todo.hasOwnProperty('isEdit')){
    todo.isEdit = true;
}else{
    // console.log('@')
    this.$set(todo,'isEdit',true)
}

todo.isEdit = false;

给对象绑定属性，得先用 xxxobj.hasOwnProperty("xxxattr")，判断它是否有某个属性。

没有该属性，才 this.$set(xxxobj,"xxxattr","初始值")

$nextTick

1
2
3
4
5
6
7
8
xxxfunc(){
    //修改数据
    this.$nextTick(
        function(){
			
        }
    )
}

在xxxfunc函数内，修改了数据，会导致模板重新解析。

比如，模板重新解析后，页面上会出现输入款，想拿到输入框的焦点，需要执行this.$refs.xxx.focus()。在xxxfunc函数内的操作全部执行完毕后，输入框才会解析出来。

故将获取输入框的代码，放在 $nextTick()内，表示在本轮解决后，再执行。

nginx

linux

nginx

相关资料

尚硅谷 @张一明

https://www.bilibili.com/video/BV1yS4y1N76R

笔记：https://blog.csdn.net/learning_xzj/category_11792194.html @不知名架构师

安装方式

方式一：

yum install nginx

方式二：

centos下载安装nginx在线版、离线版_hmb↑的博客-CSDN博客_centos 下载nginx

在这篇文章中，给出了如何下载nginx的压缩包，编译安装的命令

选择nginx的安装位置

./configure --prefix=/usr/local/nginx

比较

方式一：yum安装。自动添加进环境变量。文件分散在各处。

方式二：编译安装。不会添加进环境变量，文件集中在一个文件夹下。

ps aux|grep nginx 查看运行的nginx的进程

sudo /usr/sbin/nginx 启动nginx

如果出现端口占用，会启动失败，查出占用的端口的进程：

netstat -ano | grep 80

设置nginx开机自启动, 参考的是这篇文章的做法。systemctl start|enable nginx.service

具体nginx.conf配置文件的配置参考的这篇文章。

1
user  普通用户名|root;

若不填写, nginx没有访问本地文件的权限

报错

若出现 500 Internal Server Error

直接进入nginx的配置文件去找问题，进入nginx/logs/error.log文件

django部署

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
server{
        listen 8080;
        server_name 127.0.0.1;
        access_log /home/jie/.logs/django/access.log;
        charset utf-8;
        gzip on;
        gzip_types text/plain application/x-javascript text/css text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        error_page 404  /404.html;
        error_page 500 502 503 504  /50x.html;
        location / {
                include uwsgi_params;
                uwsgi_connect_timeout 30;
                uwsgi_pass 127.0.0.1:8000;
        }
        location /static/ {
                alias /home/jie/site/mysite/app/static/;
                index index.html index.htm;
        }
}

要修改的地方:

  • access_log /home/jie/.logs/django;
  • uwsgi_pass 127.0.0.1:8000;
  • alias /opt/project_teacher/mysite/app/static/;

uwsgi.ini

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[uwsgi]
chdir=../mysite
uid=root
gid=root
module=mysite.wsgi:application
socket=127.0.0.1:8000
master=true
workers=2
pidfile=uwsgi.pid
vacuum=true 
thunder-lock=true
enable-threads=true
harakiri=30
post-buffering=1024
daemonize=uwsgi.log

django 装包

以下以 vmware的centos7为例：

1
2
3
4
pip3.9 install pymysql
pip3.9 install pillow
pip3.9 install simplejson
pip3.9 install python-docx

若pip装包时，遇到如下报错：

This error originates from a subprocess, and is likely not a problem with pip

只需要：pip3 install --upgrade setuptools

http://192.168.31.103/

vue部署

npm run build 在当前目录生成 dist文件夹

scp -r dist/* root@xxx.xxx.xxx.69:/xxx/xxx/www

在windows中，将window dist文件夹下的内容传到服务器上。

开启自启动

nginx 和 uwsgi 开机自启动

nginx开机自启动，在前面已经给出了参考的链接。 systemctl start|stop|status nginx.service

uwsgi开机自启动，还没设置。不过云服务器，不需要关机，这个也不用设置。

  • Copyrights © 2022 Jie Shen
  • 访问人数: | 浏览次数:

请我喝杯咖啡吧~

支付宝
微信