Eight this year Https://www.barben.cn We have been there all the time. Tue, 06 Aug 2019 06:55:32 +0000 Zh-CN Hourly One Https://wordpress.org/? V=5.0.4 Https://www.barben.cn/wp-content/uploads/2019/03/2019030513473896-150x150.png Eight this year Https://www.barben.cn Thirty-two Thirty-two CSS allows unknown size of div or elements to center. Https://www.barben.cn/code/562.html Https://www.barben.cn/code/562.html#respond Tue, 06 Aug 2019 06:19:12 +0000 Https://www.barben.cn/? P=562 Set the top and bottom centers for known size elements.

[method 1] after positioning, the positions of the upper and lower positions are set to 0, and finally set margin to auto.

 .photo{
width: 200px; 
height: 200px; 
position: fixed; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
margin: Auto;}}

[method 2] after positioning, the upper and left positions are 50%, and finally set margin-top to half of the negative height. Margin-left is half of the negative width, and it can also achieve the upper and lower left and right sides.

 .photo{
width: 200px; 
height: 200px; 
position: fixed; 
top: 50%; 
left: 50%; 
margin-top: -100px; 
margin-left: -100px;}}

Set up unknown elements for the unknown size.

In this case, whether you know the width or height of the element, you can directly set up the left and right position to 50%, then use the attribute transform of CSS3 to make the element shift its half to the left so as to reach the top and bottom.

 .photo{
position: fixed; 
top: 50%; 
left: 50%; 
transform: translate (-50%, -50%);}}


Eight this year's blog, we've been there.
If the author does not indicate the original article, please indicate the link and source.
CSS lets unknown sizes of div or elements Center - https://www.barben.cn/code/562.html
> >
Https://www.barben.cn/code/562.html/feed Zero
Using local storage localStorage to achieve no longer pop-up function Https://www.barben.cn/code/513.html Https://www.barben.cn/code/513.html#respond Tue, 11 Jun 2019 08:40:10 +0000 Https://www.barben.cn/? P=513 Analogy

I have a web page. When I open it, I play a bulletin or an advertisement. Anyway, I want to play a window.
If you do not click "next time no longer remind" or something like that, it will still play for you next time!!!

Who is it? Why do you want to beat him?


Implementation method: User click "no longer pops up" and write a value, for example, butanchuang = true. Every time the page is loaded, it is determined whether butanchuang is true or not for true.

Besides Cookie, you can use simpler ones. LocalStorage (local storage) To achieve this function.

What is localStorage?

In HTML5, a new localStorage feature is added. This feature is mainly used for local storage. It solves the problem of insufficient storage space of cookie (the storage space of each cookie in 4K is cookie), and the general browser in localStorage is 5M size, which will be different in different browsers.

Advantages of localStorage

1, localStorage expanded the 4K limit of cookie.
2, localStorage will be able to store the first request data directly to the locality, which is equivalent to a 5M size. For the front page database, compared to cookie, it can save bandwidth, but this is supported only in the high version browsers.

Limitations of localStorage

1, browser size is not uniform, and the IE version above IE8 only supports localStorage attribute.
2, at present, all browsers will restrict the value type of localStorage to string type, which requires some transformations in the JSON object types that are more common in our daily life.
3. LocalStorage is not readable under the browser's privacy mode.
4, localStorage is essentially reading strings. If you store more content, it will consume memory space, which will lead to page change.
5, localStorage cannot be crawled by crawlers.
6, localStorage belongs to permanent storage.

Writing and modifying operation of localStorage

 Window.localStorage["name" = "Bourbon"; 
window.localStorage.age = 18; 
window.localStorage.setItem ("sex", "male");

The above code is written into name, age and Sex fields in three different ways, and the corresponding values are also given: Bourbon, 18, male.

 Window.localStorage["name" = = "Bobi";

Modifying the value of a field can be directly covered by new values.

Read localStorage

 Console.log (window.localStorage["name"); 
console.log (window.localStorage.age); 
console.log (window.localStorage.getItem ("sex"));

You can also read their values in three different ways.


By the way, localStorage only supports string type storage, no matter what type of data you are storing, the result of output is string.

 Window.localStorage.num = 666; 
console.log (typeof window.localStorage.num); / / string
window.localStorage.bool = true; 
console.log (typeof window.localStorage.bool); / / String

Deletion of localStorage

 Window.localStorage.clear ();

You can use the clear () method to empty all fields.

 Window.localStorage.removeItem ("age");

You can also delete the specified fields using the removeItem () method.


Eight this year's blog, we've been there.
If the author does not indicate the original article, please indicate the link and source.
Using local storage localStorage to achieve no longer pop-up function - https://www.barben.cn/code/513.html
> >
Https://www.barben.cn/code/513.html/feed Zero
Vue.js encrypts the text with MD5 code (no plug-ins). Https://www.barben.cn/code/504.html Https://www.barben.cn/code/504.html#respond Thu, 30 May 2019 01:58:37 +0000 Https://www.barben.cn/? P=504 Remember last week when you used Baidu to translate API, you need to submit the following fields.

Field name type Required parameters describe Remarks
Q TEXT Y Request translation query UTF-8 encoding
From TEXT Y Translation source language For example, Zh Chinese, en English, can be set to auto automatic detection.
To TEXT Y Translation language For example, Zh Chinese, en English, can not be set to auto automatic detection.
Appid INT Y APP ID Can be viewed in Baidu translation API management console.
Salt INT Y random number
Salt (random number) is needed for sign (signature), in order to check whether there has been tampered with in the process.
Sign TEXT Y autograph The MD5 value of the appid+q+salt+ key

So how do I encrypt sign into MD5 in Vue.js?

(Baidu's many ways are to let us install the plug-in, but I don't have so many plug-ins in the CIC processor!!! )

Without plug-ins, you can only write your own code.

The code is a bit long. At the bottom, it also provides the download address of DEMO, which can be downloaded by itself.

Usage method:
Hex_md5 ("I want to encrypt the entire eight books that year").
The content that needs encryption is passed into this method, the return value is the encrypted MD5.

 hex_md5(a) {
    if (a == "") return a;
    return this.rstr2hex(this.rstr_md5(this.str2rstr_utf8(a)))
},
hex_hmac_md5(a, b) {
    return this.rstr2hex(this.rstr_hmac_md5(this.str2rstr_utf8(a), this.str2rstr_utf8(b)))
},
md5_vm_test() {
    return this.hex_md5("abc").toLowerCase() == "900150983cd24fb0d6963f7d28e17f72"
},
rstr_md5(a) {
    return this.binl2rstr(this.binl_md5(this.rstr2binl(a), a.length * 8))
},
rstr_hmac_md5(c, f) {
    var e = this.rstr2binl(c);
    if (e.length > 16) {
        e = this.binl_md5(e, c.length * 8)
    }
    var a = Array(16),
    d = Array(16);
    for (var b = 0; b < 16; b++) {
        a[b] = e[b] ^ 909522486;
        d[b] = e[b] ^ 1549556828
    }
    var g = this.binl_md5(a.concat(this.rstr2binl(f)), 512 + f.length * 8);
    return binl2rstr(this.binl_md5(d.concat(g), 512 + 128))
},
rstr2hex(c) {
    var hexcase;
    try {
        hexcase
    } catch(g) {
        hexcase = 0
    }
    var f = hexcase ? "0123456789ABCDEF": "0123456789abcdef" ;
    var b = "";
    var a;
    for (var d = 0; d < c.length; d++) {
        a = c.charCodeAt(d);
        b += f.charAt((a >>> 4) & 15) + f.charAt(a & 15)
    }
    return b
},
str2rstr_utf8(c) {
    var b = "";
    var d = -1;
    var a, e;
    while (++d < c.length) {
        a = c.charCodeAt(d);
        e = d + 1 < c.length ? c.charCodeAt(d + 1) : 0;
        if (55296 <= a && a <= 56319 && 56320 <= e && e <= 57343) {
            a = 65536 + ((a & 1023) << 10) + (e & 1023);
            d++
        }
        if (a <= 127) {
            b += String.fromCharCode(a)
        } else {
            if (a <= 2047) {
                b += String.fromCharCode(192 | ((a >>> 6) & 31), 128 | (a & 63))
            } else {
                if (a <= 65535) {
                    b += String.fromCharCode(224 | ((a >>> 12) & 15), 128 | ((a >>> 6) & 63), 128 | (a & 63))
                } else {
                    if (a <= 2097151) {
                        b += String.fromCharCode(240 | ((a >>> 1 8) & 7), 128 | ((a >>> 12) & 63), 128 | ((a >>> 6) & 63), 128 | (a & 63))
                    }
                }
            }
        }
    }
    return b
},
rstr2binl(b) {
    var a = Array(b.length >> 2);
    for (var c = 0; c < a.length; c++) {
        a[c] = 0
    }
    for (var c = 0; c < b.length * 8; c += 8) {
        a[c >> 5] |= (b.charCodeAt(c / 8) & 255) << (c % 32)
    }
    return a
},
binl2rstr(b) {
    var a = "";
    for (var c = 0; c < b.length * 32; c += 8) {
        a += String.fromCharCode((b[c >> 5] >>> (c % 32)) & 255)
    }
    return a
},
binl_md5(p, k) {
    p[k >> 5] |= 128 << ((k) % 32);
    p[(((k + 64) >>> 9) << 4) + 14] = k;
    var o = 1732584193;
    var n = -271733879;
    var m = -1732584194;
    var l = 271733878;
    for (var g = 0; g < p.length; g += 16) {
        var j = o;
        var h = n;
        var f = m;
        var e = l;
        o = this.md5_ff(o, n, m, l, p[g + 0], 7, -680876936);
        l = this.md5_ff(l, o, n, m, p[g +  1], 12, -389564586);
        m = this.md5_ff(m, l, o, n, p[g + 2], 17, 606105819);
        n = this.md5_ff(n, m, l, o, p[g + 3], 22, -1044525330);
        o = this.md5_ff(o, n, m, l, p[g + 4], 7, -176418897);
        l = this.md5_ff(l, o, n, m, p[g + 5], 12, 1200080426);
        m = this.md5_ff(m, l, o, n, p[g + 6], 17, -1473231341);
        n = this.md5_ff(n, m, l, o, p[g + 7], 22, -45705983);
        o = this.md5_ff(o, n, m, l, p[g + 8], 7, 1770035416);
        l = this.md5_ff(l, o, n, m, p[g + 9], 12, -1958414417);
        m = this.md5_ff(m, l, o, n, p[g + 10], 17, -42063);
        n = this.md5_ff(n, m, l, o, p[g + 11], 22, -1990404162);
        o = this.md5_ff(o, n, m, l, p[g + 12], 7, 1804603682);
        l = this.md5_ff(l, o, n, m, p[g + 13], 12, -40341101);
        m = this.md5_ff(m, l, o, n, p[g + 14], 17, -1502002290);
        n = this.md5_ff(n, m, l, o, p[g + 15], 22, 1236535329);
        o = this.md5_gg(o, n, m, l, p[g + 1], 5, -165796510);
        l = this.md5_gg(l, o, n, m, p[g  + 6], 9, -1069501632);
        m = this.md5_gg(m, l, o, n, p[g + 11], 14, 643717713);
        n = this.md5_gg(n, m, l, o, p[g + 0], 20, -373897302);
        o = this.md5_gg(o, n, m, l, p[g + 5], 5, -701558691);
        l = this.md5_gg(l, o, n, m, p[g + 10], 9, 38016083);
        m = this.md5_gg(m, l, o, n, p[g + 15], 14, -660478335);
        n = this.md5_gg(n, m, l, o, p[g + 4], 20, -405537848);
        o = this.md5_gg(o, n, m, l, p[g + 9], 5, 568446438);
        l = this.md5_gg(l, o, n, m, p[g + 14], 9, -1019803690);
        m = this.md5_gg(m, l, o, n, p[g + 3], 14, -187363961);
        n = this.md5_gg(n, m, l, o, p[g + 8], 20, 1163531501);
        o = this.md5_gg(o, n, m, l, p[g + 13], 5, -1444681467);
        l = this.md5_gg(l, o, n, m, p[g + 2], 9, -51403784);
        m = this.md5_gg(m, l, o, n, p[g + 7], 14, 1735328473);
        n = this.md5_gg(n, m, l, o, p[g + 12], 20, -1926607734);
        o = this.md5_hh(o, n, m, l, p[g + 5], 4, -378558);
        l = this.md5_hh(l, o, n, m, p[g + 8],  11, -2022574463);
        m = this.md5_hh(m, l, o, n, p[g + 11], 16, 1839030562);
        n = this.md5_hh(n, m, l, o, p[g + 14], 23, -35309556);
        o = this.md5_hh(o, n, m, l, p[g + 1], 4, -1530992060);
        l = this.md5_hh(l, o, n, m, p[g + 4], 11, 1272893353);
        m = this.md5_hh(m, l, o, n, p[g + 7], 16, -155497632);
        n = this.md5_hh(n, m, l, o, p[g + 10], 23, -1094730640);
        o = this.md5_hh(o, n, m, l, p[g + 13], 4, 681279174);
        l = this.md5_hh(l, o, n, m, p[g + 0], 11, -358537222);
        m = this.md5_hh(m, l, o, n, p[g + 3], 16, -722521979);
        n = this.md5_hh(n, m, l, o, p[g + 6], 23, 76029189);
        o = this.md5_hh(o, n, m, l, p[g + 9], 4, -640364487);
        l = this.md5_hh(l, o, n, m, p[g + 12], 11, -421815835);
        m = this.md5_hh(m, l, o, n, p[g + 15], 16, 530742520);
        n = this.md5_hh(n, m, l, o, p[g + 2], 23, -995338651);
        o = this.md5_ii(o, n, m, l, p[g + 0], 6, -198630844);
        l = this.md5_ii(l, o, n, m, p[g + 7] , 10, 1126891415);
        m = this.md5_ii(m, l, o, n, p[g + 14], 15, -1416354905);
        n = this.md5_ii(n, m, l, o, p[g + 5], 21, -57434055);
        o = this.md5_ii(o, n, m, l, p[g + 12], 6, 1700485571);
        l = this.md5_ii(l, o, n, m, p[g + 3], 10, -1894986606);
        m = this.md5_ii(m, l, o, n, p[g + 10], 15, -1051523);
        n = this.md5_ii(n, m, l, o, p[g + 1], 21, -2054922799);
        o = this.md5_ii(o, n, m, l, p[g + 8], 6, 1873313359);
        l = this.md5_ii(l, o, n, m, p[g + 15], 10, -30611744);
        m = this.md5_ii(m, l, o, n, p[g + 6], 15, -1560198380);
        n = this.md5_ii(n, m, l, o, p[g + 13], 21, 1309151649);
        o = this.md5_ii(o, n, m, l, p[g + 4], 6, -145523070);
        l = this.md5_ii(l, o, n, m, p[g + 11], 10, -1120210379);
        m = this.md5_ii(m, l, o, n, p[g + 2], 15, 718787259);
        n = this.md5_ii(n, m, l, o, p[g + 9], 21, -343485551);
        o = this.safe_add(o, j);
        n = this.safe_add(n, h);
        m = this.safe_add(m, f);
         l = this.safe_add(l, e)
    }
    return Array(o, n, m, l)
},
md5_cmn(h, e, d, c, g, f) {
    return this.safe_add(this.bit_rol(this.safe_add(this.safe_add(e, h), this.safe_add(c, f)), g), d)
},
md5_ff(g, f, k, j, e, i, h) {
    return this.md5_cmn((f & k) | ((~f) & j), g, f, e, i, h)
},
md5_gg(g, f, k, j, e, i, h) {
    return this.md5_cmn((f & j) | (k & (~j)), g, f, e, i, h)
},
md5_hh(g, f, k, j, e, i, h) {
    return this.md5_cmn(f ^ k ^ j, g, f, e, i, h)
},
md5_ii(g, f, k, j, e, i, h) {
    return this.md5_cmn(k ^ (f | (~j)), g, f, e, i, h)
},
safe_add(a, d) {
    var c = (a & 65535) + (d & 65535);
    var b = (a >> 16) + (d >> 16) + (c >> 16);
    return (b << 16) | (c & 65535)
},
bit_rol(a, b) {
    return (a << b) | (a >>> (32 - b))
}

DEMO download address

[local download]


Eight this year's blog, we've been there.
If the author does not indicate the original article, please indicate the link and source.
Vue.js code to encrypt text by MD5 (without plug-ins) - https://www.barben.cn/code/504.html
> >
Https://www.barben.cn/code/504.html/feed Zero
Remember Vue.js uses Axios for cross domain requests. Https://www.barben.cn/code/482.html Https://www.barben.cn/code/482.html#respond Sun, 19 May 2019 13:47:50 +0000 Https://www.barben.cn/? P=482 Today is another day of fishing at home. Knock BUG Write an online translation function.

And then he took it down. Baidu translate open platform technical document In the example interface address, try and ask for normal request.

It's really sweet to request with Axios.

 Axios.get ('http://api.fanyi.baidu.com/api/trans/vip/translate? Q=apple&from=en&to=zh&appid=2015063000000001&salt=1435660288&sign=f89f9594663708c1605f3d736d01d2d4') 
.then ((response) = > {
console.log (response);}} 
.catch ((error) = > {
console.log (error);}}

This story tells us a more fun request. No Access-Control-Allow-Origin header is present on the requested resource I will never forget to hit your head!

Obviously, this is due to the failure of requests across domains.

Resolving cross domain requests

1. open the config/index.js file.
2. find the following code in index.js

 Module.exports = {
dev: {
proxyTable: {}

3. modify the proxyTable in the code as shown below.

 ProxyTable: {
'/api': {
target:'https://www.barben.cn', / / write the domain name and port to call the interface, remember to add http. 
changeOrigin: true, 
pathRewrite: {
'^/api': / / / here is understood to replace /api in target address, calling the interface directly with /api instead. For example, if I want to call the https://www.barben.cn/request/ts interface, I can write /api/request/ts directly. I am very sorry.

4. restart the whole project.

After modifying proxyTable, the cross domain request is successfully solved.



Eight this year's blog, we've been there.
If the author does not indicate the original article, please indicate the link and source.
Remember the way Vue.js uses Axios for cross domain requests - https://www.barben.cn/code/482.html
> >
Https://www.barben.cn/code/482.html/feed Zero
Something that happened with the iTunes brush. Https://www.barben.cn/live/467.html Https://www.barben.cn/live/467.html#respond Fri, 03 May 2019 04:06:33 +0000 Https://www.barben.cn/? P=467 Since mobile OTA has been upgraded to IOS12.3, it has been consuming electricity like water.

However, it is said that using the computer to re brush the machine can solve the problem of power consumption.

ITunes 12.9.4.102 Crashed


Maybe it's not the right way to open it. Let me try it several times.

Sorry to disturb you, your pop-up looks like love.

Resolvent

The problem must be solved.


Eight this year's blog, we've been there.
If the author does not indicate the original article, please indicate the link and source.
Something that happened with iTunes brush machine - https://www.barben.cn/live/467.html
> >
Https://www.barben.cn/live/467.html/feed Zero
Company website was hung up, self checking loopholes Https://www.barben.cn/skill/435.html Https://www.barben.cn/skill/435.html#respond Sat, 20 Apr 2019 03:28:40 +0000 Https://www.barben.cn/? P=435 Yesterday, the manager visited the company again, saying that the company's website was hung up.

Since I don't know how to infiltrate, I can only fool around.

Look at what is in the home page file.

The three most appalling labels are:

There is also a JS code, copied to Baidu, found that this code is basically appear on the black website, but I do not know what it is.

 

The 16 decimal encoding, roughly converting the Unicode code, is the result of:
If you look at it, it may be the return value of the JS file on the page.

At the bottom of the page, you find a bunch of things that are linked to the PHP file.

Then I looked at the sanctity of these PHP documents.

But they found that the files were the same, but the names were different. Probably look at the PHP code again, meaning that it should read the contents and output of the Reads address that is passed to the custom method.

Then I decisively opened the address, but because the company's website was too dark for a long time, it was found that the address was also very unfortunate 404.

Check through logs

Knowing where the web page is hung up, you have to find out how it has been granted permission.
First of all, it is impossible to guess the FTP password. The FTP password of all the websites of the company is randomly generated to mix the uppercase and the lowercase numbers.
Then downloaded all the access logs of the website, but it was too long to get it.
Next, I want to go back to the background to check the operation log, but I find that the background is written by the predecessors of my company. It is not perfect at all, let alone the operation log.
True no solution

How about a safe dog?

Since you don't have the ability to do that, check with the software where the back door is.
Let's take a look at the website security dog: http://free.safedog.cn/website_safedog.html
@ @ @ remember to pay for the security dog advertising fee.

After downloading all the files on the website, a lot of horses were found.

Because in the past, he also used a Trojan horse to play a simple invasion, so he randomly opened second scanning results, but really confirmed the look!!!

Next, the Trojan file was opened. The whole file was exposed only by two lines of code, and all the other code was annotated (just to disguise itself as a dream weaving CMS file).

Copy these two pieces of code to Baidu to see what this is.

 $a=range (1200); $b=chr ($a[96]).Chr ($a[114]).Chr ($a[114]).Chr ($a[100]).Chr ($a[113]).Chr;

Indeed, it is indeed a word to miss. After Baidu knows this sentence, the Trojan horse's password is 4.

Well, now that I know a sentence, I will try to use some of the past trivial things and add the legendary Chinese kitchen knife.

Sure enough to connect and get all the rights of the website.

To be continued

There are too many things to say about infiltration, and the most important thing is to do a good job of website security protection. To check out the security holes and Trojan documents, your partners should be deleted in time, so that there will be no opportunity for bad corn!!!
As for the company website vulnerabilities... Emmmmm... Still looking for


Eight this year's blog, we've been there.
If the author does not indicate the original article, please indicate the link and source.
Company website was hung up, self checking loophole method - https://www.barben.cn/skill/435.html
> >
Https://www.barben.cn/skill/435.html/feed Zero
Solutions to block level elements such as div and P overflow in numbers, English and links. Https://www.barben.cn/code/424.html Https://www.barben.cn/code/424.html#respond Fri, 12 Apr 2019 01:58:41 +0000 Https://www.barben.cn/? P=424 Origin of problem


Yesterday, the manager suddenly called on me, saying that there was a style in the project that was blown up and never changed automatically.

I went to look at it, and I found it strange that the automatic line changing is normal in the case of normal Chinese input. How can a longer link be able to overflow itself?

Tossing course

After many times, Baidu...
P tag automatic wrap   Use Baidu Search
The links in the P tag do not wrap.   Use Baidu Search
Look at it again. Overflow Property...

Did not get the answer, as if the key words are so wrong!!! What can I do? I have no choice.

Resolvent

Finally, the problem was discovered.

Unlike Chinese characters, a continuous number or English alphabet does not automatically line wrap as you define a wide box.


So you need to use the CSS style to solve this problem so that they can force the wrap.

 Word-wrap: break-word;


Set this style to the corresponding labels in the code!!!


Eight this year's blog, we've been there.
If the author does not indicate the original article, please indicate the link and source.
Digital, English and link overflow elements such as div and P block level elements - https://www.barben.cn/code/424.html
> >
Https://www.barben.cn/code/424.html/feed Zero
Talk about nofollow and link jump related to SEO. Https://www.barben.cn/skill/397.html Https://www.barben.cn/skill/397.html#respond Tue, 02 Apr 2019 07:19:26 +0000 Https://www.barben.cn/? P=397 I met someone like this before.
Make friends with my website, and have added our friendship links first.
Then, as a small collection of stations, I am very happy to have a friend chain!!!
But from his friend chain page, I found something wrong.


Page white screen just a few seconds to jump to my blog, look at the browser address bar, turned out to be a jump.

Then I opened the censorship element, and I had nothing to say to this person at once.


Speaking of which, I will talk about the core of these codes.

Href and rel in the a tag are the key.

First, let's take a look at the href attribute.

In /go/ Obviously, this is the website address of this man, so let's take a look at the back. AHR0cHM6Ly93d3cuYmFyYmVuLmNu What is it?

First of all, search for "Base64 online decryption" in Baidu, you will suddenly see it: Yo, this is my domain name!!!

The advantage of using jump links is to centralization of the weight of a web page, and to reduce the weight of web pages to jump, which can be said to be low to no weight.

Originally jump links have no SEO weight vote, it is necessary to give my website domain name once again encrypted?

Two, let's talk about the rel attribute again.

Yes, I want to speak now. Nofollow Now!

The meaning of this tag is to tell spiders: do not enter the links that use the nofollow attribute.

The search engine will know that this link is not compiled by the author himself, so it is not a vote of confidence.

Therefore, the voting weight of this link may be reduced or cancelled completely.

Website links have become basically do not know what is the mess code, any weight is not, do you still want to call the search engine from your "encrypted jump links" into my station?

Some are away from the topic, but in the end they want to talk to such people.

Your abacus is very smart. Is it a trick to play with others?

Although friends should not talk about these problems with SEO, no one wants to make friends with such a calculating figure.

Others are willing to give you all the weight, so what do you mean by exchanging such links with people? This is very friendly.

Finally, you look at your website a little bit, HTTPS is not configured completely, the weight of all search engines is also 0, buddy!


Eight this year's blog, we've been there.
If the author does not indicate the original article, please indicate the link and source.
Talk about nofollow and link jump related to SEO - https://www.barben.cn/skill/397.html
> >
Https://www.barben.cn/skill/397.html/feed Zero
ScreenToGif: super easy to use and free GIF recording software. Https://www.barben.cn/software/362.html Https://www.barben.cn/software/362.html#respond Sat, 30 Mar 2019 16:11:30 +0000 Https://www.barben.cn/? P=362 I'm publishing the article. Vue.js to achieve simple search function At that time, there was a demand for recording screens, so it turned over for a long time in the pocket of Dora A dream (the cartoon story was all deceptive), and finally turned to a GIF recording software not only small but also high quality and high definition, which can also customize the number of frames!!!

Not many people use it, but many people can't find such a wonderful thing.

This is the setup of recording software. I don't describe all the functions.
Take this set of dynamic diagrams as an example, you can clearly display every word after enlargement, and only 326KB.

Just a little reminder. The software records the middle hollow part, and the window can adjust the size arbitrarily. !!!

Download address

[local download]


Eight this year's blog, we've been there.
If the author does not indicate the original article, please indicate the link and source.
ScreenToGif: super easy to use and free GIF recording software - https://www.barben.cn/software/362.html
> >
Https://www.barben.cn/software/362.html/feed Zero
Vue.js to achieve simple search function Https://www.barben.cn/code/345.html Https://www.barben.cn/code/345.html#respond Sat, 30 Mar 2019 12:22:50 +0000 Https://www.barben.cn/? P=345 The implementation of this search function is very simple, whether it is method or logic (at the end of the article). There are only two ways to use filter and match. Now let's go to two simple demo.

Demo1: input box content changes automatically search

HTML code

 

VUE code

 new Vue({
    el: "#app",
    data: {
        search: "",
        list: [
            "上路巩州遇虎熊",
            "五百年前一场疯",
            "腾宵又是孙悟空",
            "失马鹰愁涧飞白龙",
            "沙河阻断路难通",
            "福陵山中收天蓬",
            "岭上前行逆黄风",
            "七星不照波月洞",
            "千年白骨化阴风",
            "鱼篮网通天一尾红",
            "紫金葫芦二道童",
            "九尾老狐敢压龙",
            "白虹坠雪浪击石碎",
            "思归",
            "难归",
            "堕回",
            "轮回",
            "月满一江水",
            "前世莫追",
            "福泽聚宝象",
            "春风度不让洛阳",
            "玉面狐折兰香",
            "七绝崖上暗伏赤色大蟒",
            "过西梁女儿国",
            "鸳鸯罗帐",
            "与三道斗法相火云扬",
            "明枪易挡暗 
computed: {
searchList: function () {
return this.list.filter ((text) = {
return > text.match (this.search);

Demo2: click OK to manually search the contents of the input box.

HTML code

 

VUE code

 new Vue({
el: "#app",
data: {
    search: "",
    list: [
        "上路巩州遇虎熊",
        "五百年前一场疯",
        "腾宵又是孙悟空",
        "失马鹰愁涧飞白龙",
        "沙河阻断路难通",
        "福陵山中收天蓬",
        "岭上前行逆黄风",
        "七星不照波月洞",
        "千年白骨化阴风",
        "鱼篮网通天一尾红",
        "紫金葫芦二道童",
        "九尾老狐敢压龙",
        "白虹坠雪浪击石碎",
        "思归",
        "难归",
        "堕回",
        "轮回",
        "月满一江水",
        "前世莫追",
        "福泽聚宝象",
        "春风度不让洛阳",
        "玉面狐折兰香",
        "七绝崖上暗伏赤色大蟒",
        "过西梁女儿国",
        "鸳鸯罗帐",
        "与三道斗法相火云扬",
        "明枪易挡暗箭难防"
    ],
    listSearch: [
        "上路巩州遇虎熊",
        "五百年前一场疯",
        "腾宵 又是孙悟空",
        "失马鹰愁涧飞白龙",
        "沙河阻断路难通",
        "福陵山中收天蓬",
        "岭上前行逆黄风",
        "七星不照波月洞",
        "千年白骨化阴风",
        "鱼篮网通天一尾红",
        "紫金葫芦二道童",
        "九尾老狐敢压龙",
        "白虹坠雪浪击石碎",
        "思归",
        "难归",
        "堕回",
        "轮回",
        "月满一江水",
        "前世莫追",
        "福泽聚宝象",
        "春风度不让洛阳",
        "玉面狐折兰香",
        "七绝崖上暗伏赤色大蟒",
        "过西梁女儿国",
        "鸳鸯罗帐",
        "与三道斗法相火云扬",
        "明枪易挡暗箭难防"
    ]
},
methods: {
    searchCont(){
        this.listSearch = this.list.filter((text) => {
            return text.match(this.search);
        })
    }
}
})

In essence, there are only two sentences.

First, let's see what filter means.

 / / now I have an array in my hand, which represents the age of people. I want to get those who are more than 18 to make a fight. 
var arr = [32, 33, 16, 40]; the filter method is used for this array. The callback function in filter has a parameter num, which can be regarded as a value traversed from the array every time, and return can be an expression after all, in short, it returns all the values that match this expression. The result is true (coincidence greater than or equal to 18), so it returns [32, 33]
 third times: the parameter in the callback function is 16, and the result is false (not greater than or equal to 18), so the return parameter is still num. The parameter in callback function is num, and the result is 
arr. Operation logic: the 
arr array has 4 values, so filter executes 4 times, the first time: the num in the callback function is 32, and the result is true.

Let's see what match means again.

 / / I have a string, you can use the match method to retrieve whether there is a content in the string, 
var Hello = "Hello, the world"; if you want to retrieve the content, you can return this content, and you can also know where the content is located (index 0, the first). The result is: [you, index: 0, input: "Hello, world"]
console.log (hello.match ("you"));

Therefore, the idea of using filter and match to mix search is a simple sentence:

 The way to implement search is to use the filter method to use the filter method to get the values that satisfy the requirements (i.e. the result is true). The condition is: use the match method to traverse values (text) in the array (list). If the content of user search is in this value, we should pay attention to the result that the result returned by the method is either a value (any non empty text data is converted to boolean type is all), otherwise, it is a (empty value conversion to boolean type). This.list.filter ((text) = > {
return text.match (this.search);

Finally, I'll give you a supplement to the compulsory conversion of Boolean:

When all contents are coerced into Boolean values.
Will be converted to "false" as follows:
"," 0, -0, NaN, null, undefined, false
Any "false" list is not "true", for example:
"Hello", 18, true, array array[], object object{}, function function ()


Eight this year's blog, we've been there.
If the author does not indicate the original article, please indicate the link and source.
Vue.js to achieve a simple search function - https://www.barben.cn/code/345.html
> >
Https://www.barben.cn/code/345.html/feed Zero