2.阿里云服务器安装Redis

最后更新于：2020-09-25 22:26:29 | 110 次浏览

2.阿里云服务器安装Redis

1.Redis简介

最后更新于：2020-09-25 22:23:46 | 9 次浏览

Redis是一种开放源代码（BSD许可）的内存数据结构存储，用作数据库，缓存和消息代理。它支持数据结构，例如字符串，哈希，列表，集合，带范围查询的排序集合，位图，超日志，带有半径查询的流空间索引和流。Redis具有内置的复制，Lua脚本，LRU逐出，事务和不同级别的磁盘持久性，并通过以下方式提供高可用性：Redis Sentinel和Redis Cluster自动分区。

您可以对这些类型运行原子操作，例如追加到字符串；在哈希中增加值 ; 将元素推送到列表 ; 计算集的交集，并集和差 ; 或获得排序集中排名最高的成员。

为了获得出色的性能，Redis使用内存中的数据集。根据您的用例，您可以通过将数据集偶尔转储到磁盘上，或者通过将每个命令附加到log来持久化它。如果您只需要功能丰富的网络内存缓存，则可以选择禁用持久性。

Redis还支持琐碎的设置主从异步复制，具有非常快速的非阻塞式第一次同步，自动重新连接以及网络拆分中的部分重新同步。

其他功能包括：

交易次数
发布/订阅
Lua脚本
生存时间有限的键
LRU收回钥匙
自动故障转移
您可以从大多数编程语言中使用Redis 。

Redis是用ANSI C编写的，并且可以在大多数POSIX系统中使用，例如Linux，* BSD，OS X，而无需外部依赖。Linux和OS X是Redis开发和测试最多的两个操作系统，我们建议使用Linux进行部署。Redis可以在基于Solaris的系统中使用，例如SmartOS，但是尽力提供了支持。Windows版本没有官方支持。

2.阿里云LINUX服务器配置PHP运行环境！

最后更新于：2020-09-28 12:22:57 | 13 次浏览

前置需求:

需要一台阿里云或其它云的ECS服务器(需要购买)
需要下载一个Xshell 6服务器连接软件
需要下载一个Xftp 6或FileZilla Client软件
使用lnmp集成环境安装,也可以单独安装运行环境
一台windows系统的客户端主机(就是你自己的电脑),如果是苹果电脑略有区别

正式开始

1.php介绍

最后更新于：2020-09-25 21:54:19 | 12 次浏览

PHP是什么？PHP能干什么？为什么学习PHP？PHP的优点

1.PHP是什么？

PHP是一种服务器端脚本语言，它是专门为Web而设计的。在一个HTML页面中，你可以嵌入PHP代码，这些代码在每次页面被访问时执行。PHP代码将在Web服务器中被解释并且生成HTML或访问者看到的其他输出。

PHP是1994年出现的，最初只是Rasmus Lerdorf一个人的工作成果。其他一些天才改进了这种语言，它经历了4次非常重要的重新编写，才变成了我们今天所看到的广为使用的、成熟的PHP。到2007年11月，PHP已经在全球的2100多万个网站域中安装，而且该数字还在不断地快速增长。访问http://www.php.net/usage.php 站点，你可以获得当前的确切数据。

PHP是一个开放源代码的产品，这就意味着，你可以访问其源代码，也可以免费使用、修改并且再次发布。

PHP最初只是Personal Home Page（个人主页）的缩写，但是后来经过修改，采用了GNU命名惯例（GNU=Gnu's Not UNIX），如今它是PHP超文本预处理程序的缩写。

截止2020年目前，PHP的主要版本是第7版

最新版是前期实验版 php8.0 已经发布，但是不可用于生产环境！

PHP的主页是：http://www.php.net

Zend Technologies的主页是：http://www.zend.com

2.PHP能干什么？

PHP 能做任何事。PHP 主要是用于服务端的脚本程序，因此可以用 PHP 来完成任何其它的 CGI 程序能够完成的工作，例如收集表单数据，生成动态网页，或者发送／接收 Cookies。但 PHP 的功能远不局限于此。

3.为什么学习PHP？

目前互联网80%的网站都是PHP语言开发，并且PHP更容易学习，在各个行业中待遇起点高，大量企业需要这方面的人才。php主要用于开发web站点和互联网软件。它安全、易学、免费、跨平台、执行速度快。与其他网络编程语言相比，php具有明显的开发优势。

4.PHP的优点

PHP的主要竞争对手是Perl、Microsoft ASP.NET、Ruby（on Rails或其他）、JavaServer Pages（JSP）和ColdFusion。

与这些产品比较，PHP具有很多优点，如下所示：

高性能
可扩展性
与许多不同数据库系统的接口
内置许多常见Web任务所需的函数库
低成本
容易学习和使用
对面向对象的高度支持
可移植性
开发方法的灵活性
源代码可供使用
技术支持和文档可供使用

接下来我们将详细介绍这些优点。

1. 性能

PHP的速度非常快。使用一个单独的廉价的服务器，就可以满足每天几百万的点击。

Zend Technologies（http://www.zend.com）公司发布的评测表明PHP的性能要优于其竞争产品。

2. 扩展性

PHP具有Rasmus Lerdorf经常提到的"shared-nothing"架构。这就意味着，你可以有效并廉价地对大量服务器进行水平方向扩展。

3. 数据库集成

对于许多数据库系统来说，PHP都具有针对它们的内置连接。除了MySQL之外，你可以直接连接到PostgreSQL、mSQL、Oracle、dbm、FilePro、Hyperwave、Informix、InterBase和Sybase数据库。PHP 5还提供了针对普通文件（平面文件）的内置SQL接口，名为SQLite。

使用开放式数据库连接标准（ODBC），可以连接到任何提供了ODBC驱动程序的数据库。

这包括Microsoft产品和许多其他产品。

除了本机函数库，PHP还提供了数据库访问抽象层，名为PHP数据库对象（PDO），它提供了对数据的一致性访问，并且倡导了安全的编码实践。

4. 内置的函数库

由于PHP是为Web开发而设计的，它提供了许多内置函数用来执行有用的Web任务。

它可以生成一个图像、连接到Web服务和其他网络服务、解析XML、发送电子邮件、使用cookie以及生成PDF文档，所有这些任务只需要非常少的几行代码。

5. 成本

PHP是免费的，用户可以在任何时候从http://www.php.net站点免费下载最新版本。

6. 容易学习PHP

PHP的语法是基于其他编程语言的，主要是C和Perl。如果读者已经了解了C或Perl，或者其他类似C的语言，例如C++或Java，那么几乎立即就可以高效地使用PHP。

7. 对面向对象的支持

PHP版本5具有设计良好的面向对象特性。如果读者学习了使用Java或C++进行编程，将发现所期望的一些特性（和常见语法），例如继承、私有和受保护的属性和方法、抽象类和方法、接口、构造函数和析构函数。读者还将发现一些不常见的特性，例如迭代器。该功能的一部分可以在PHP版本3和版本4中获得，但是版本5中具有更全面的面向对象支持功能。

8. 可移植性

PHP在许多不同的操作系统中都可以使用。我们可以在类似于UNIX的免费操作系统中（例如FreeBSD和Linux）编写PHP代码，也可以在商业性的UNIX版本（例如Solaris和IRIX，Mac OS X）或者在Microsoft Windows的不同版本中编写代码。

通常，代码不经过任何修改就可以在运行PHP的不同系统中运行。

9. 开发方法的灵活性

PHP允许实现简单的任务，同样，也很容易应用到大型应用程序的实现，例如使用基于设计模式的框架（例如，模型-视图-控制器，MVC）。

10. 源代码

我们可以访问PHP的所有源代码，与商业性的封闭式源代码产品不同，如果要在该语言中进行修改或者添加新特性，可以免费进行。

我们无须等待开发商来发布补丁，也不需要担心开发商倒闭或者决定停止对一个产品的支持。
可供使用的技术支持和文档
PHP文档和社区都非常成熟，有大量的共享信息资源。

jQuery + RequireJS（SeaJS）+ artTemplate（doT）+ Gulp(Grunt)

最后更新于：2020-09-17 16:47:51 | 212 次浏览

jQuery：以 jQuery 为核心，能兼容绝大部分浏览器

RequireJS（SeaJS）：使用 RequireJS SeaJS 进行模块化开发可以解决代码依赖混乱的问题同时便于维护及团队协作

artTemplate（doT）：使用轻量级的前端模板（如 doT ）可以将数据与 HTML模板分离

Gulp(Grunt) ：使用自动化构建工具（如 Gulp ）可以合并压缩代码，如果你喜欢写 Less Sass以及现在流行的 ES ，也可以帮你进行预编译

L2Dwidget 二次元看板娘使用方法

最后更新于：2020-09-16 08:55:10 | 33 次浏览

今天看到一个学生在用这个工具.觉得特别好玩.就要了过来.也用了一下.有点意思.把使用方法记录一下
官网：https://www.npmjs.com/package/hexo-helper-live2d
下载各种动画model：https://github.com/xiazeyu/live2d-widget-models

var jsonPath = [
    'https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json',
    'https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json',
    'https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json',
    'https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json',
    'https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json',
    'https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json'
]
// jsonPath 对应的是六个不同的人物,具体效果可以刷新当前页面看到
var n = Math.floor(Math.random() * jsonPath.length + 0);
if (!(/Android|webOS|iPhone|iPod|BlackBerry|iPad/i.test(navigator.userAgent))) {
// 这行if 是用来判断不要在移动端显示
    L2Dwidget.init({
        "model": {
            "jsonPath": jsonPath[n],
            "scale": 0.5
        },
        "display": {
            "position": "left",
            "width": 150,
            "height": 300,
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 1,
            "opacityOnHover": 1
        },
        "dialog": {
            "enable": true,
            "script": {
                //每20s，显示一言（调用一言Api返回的句子）
                'every idle 20s': ' $hitokoto$ ',
                //触摸到class='star'对象
                'hover .star': '星星在天上而你在我心里 (*/ω＼*)',
                //触摸到身体
                'tap body': '害羞⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄',
                //触摸到头部
                'tap face': '~~'
          }
        }
    });

}

前端跨域服务使用爬虫解决方案

最后更新于：2020-09-11 23:29:57 | 52 次浏览

如果您需要源码地址：gitee
代理跨域的代码已经配置完成。测试地址：https://api.hzbiz.net/

前端Vue部分代码

<template>
<div class="container">
    <b-jumbotron>
        <template v-slot:header>前端跨域免费代理服务</template>

        <template v-slot:lead>
            如果您需要代理服务地址，请自行查看<a href="https://gitee.com/yyx219/agent" target="_blank">源码</a>
        </template>

        <hr class="my-4">
        <b-form @submit.prevent="onSubmit" v-if="form.show">
            <b-form-group id="input-group-1" label="请求地址:" label-for="input-1" description="请输入要跨域的网址">
                <b-form-input id="input-1" v-model="form.url" type="url" required placeholder="请输入要访问的域名地址"></b-form-input>
            </b-form-group>
            <b-form-group label="请选择您要获取的目标页的内容">
                <b-form-radio-group id="radio-group-2" v-model="form.type" name="radio-sub-component">
                    <b-form-radio value="all">默认请求方式</b-form-radio>
                    <b-form-radio value="links">获取页面所有链接</b-form-radio>
                    <b-form-radio value="text">获取页面所有文本内容</b-form-radio>
                    <b-form-radio value="form">获取表单内容</b-form-radio>
                </b-form-radio-group>
            </b-form-group>

            <b-button type="submit" variant="primary">请求跨域</b-button>
        </b-form>

        <b-card header="请求的结果" v-if="result">
            <b-card-text>
                <pre class="line-numbers language-html">
                {{ result }}
                </pre>
            </b-card-text>
        </b-card>

    </b-jumbotron>
</div>
</template>

<script>
export default {
    name: 'Home',
    data() {
        return {
            form: {
                type: "all",
                url: "",
                show: true
            },
            result: null
        }
    },
    methods: {
        onSubmit() {
            this.axios.get('api/index.php?url=' + this.form.url +
                    '&type=' + this.form.type)
                .then((res) => {
                    this.result = res.data
                    console.log(res)
                })
        }

    }
}
</script>

<style lang="scss">
.container {
    margin-top: 2%;

    .card-header {
        margin-top: 15px;
    }
}
</style>

后端PHP部分代码：

// header("Content-Type:application/json;charset=UTF-8");
header("Access-Control-Allow-Origin:*");
date_default_timezone_set("PRC");
include("Snoopy.class.php");//使用时不要忘记引入Snoopy类库
function checkUrl( $url) {$ pattern = "/^(http|https):\/\/.* $/i"; if (preg_match($ pattern,  $url)) { return true; } else { return false; } } function GetData($ url,  $type) {$ ch = new Snoopy;
     $ch->agent = "Mozilla/5.0 (Linux; U; Android 8.1.0; zh-CN; Redmi 6 Pro Build/OPM1.171019.019) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.108 UCBrowser/12.5.5.1035 Mobile Safari/537.36";$ ch->referer = "https://www.hzbiz.net/";
    switch ( $type) { case "text":$ ch->fetchtext( $url);//获取网页数据的全部文本数据 break; case "links":$ ch->fetchlinks( $url);//获取网页数据的全部链接 break; case "form":$ ch->fetchform( $url); //获取表单 break; default:$ ch->fetch( $url); } return$ ch->results;//返回数据
}


if (isset( $_GET['url']) && checkUrl($ _GET['url'])) {
     $url =$ _GET['url'];
     $type = ''; if (isset($ _GET['type'])) {
         $type =$ _GET['type'];
    }
    if( $type=='links'){ echo json_encode(Array("isRule" => true, "message" => GetData($ url, $type))); }else{ echo GetData($ url,$type);
    }

} else {
    echo json_encode(Array("isRule" => false, "message" => "请输入正确的网址"));
}

nginx实现默认跳转HTTPS

最后更新于：2020-09-10 22:06:58 | 59 次浏览

server {
    listen 80;
    server_name www.hzbiz.bet;
    index index.html index.php index.htm;
    access_log  /usr/local/nginx/logs/8080-access.log main;
    error_log  /usr/local/nginx/logs/8080-error.log;

    return   301 https:// $server_name$ request_uri;
    //这是nginx最新支持的写法,就是这行代码可以实现80端口直接强制跳转到443也就是https

    location ~ / {
    root /var/www/html/8080;
    index index.html index.php index.htm;
    }
}

怎么给vue定义全局的方法？

最后更新于：2020-09-25 11:54:35 | 322 次浏览

1、通过prototype，这个非常方便。Vue.prototype[method]=method;
2、通过插件Vue.use(plugin)；
3、通过mixin，Vue.mixin(mixins);
第一种：挂载到Vue的prototype上。把全局方法写到一个文件里面，然后for循环挂载到Vue的prototype上，缺点是调用这个方法的时候没有提示

 Object.keys(tools).forEach(key => {
      Vue.prototype[key] = tools[key]
 })

第二种：利用全局混入mixin，因为mixin里面的methods会和创建的每个单文件组件合并。这样做的优点是调用这个方法的时候有提示

Vue.mixin(mixin)
new Vue({
    store,
    router,
    render: h => h(App),
}). $mount('#app') import tools from "./tools" import filters from "./filters" import Config from '../config' import CONSTANT from './const_var' export default { data() { return { CONFIG: Config, CONSTANT: CONSTANT } }, methods: { //将tools里面的方法挂载到vue上,以方便调用，直接this.$ xxx方法名就可以了
        // Object.keys(tools).forEach(key => {
        //     Vue.prototype[key] = tools[key]
        // })
        //将tools里面的方法用对象展开符混入到mixin上,以方便调用，直接this.$xxx方法名就可以了
        ...tools
    },
    filters: {
        // //将filter里面的方法添加了vue的筛选器上
        // Object.keys(filters).forEach(key => {
        //     Vue.filter(key, filters[key])
        // })
        ...filters
    }
}

ps:vue的mixin的使用

混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

以上是官网的定义，mixin的作用是多个组件可以共享数据和方法，在使用mixin的组件中引入后，mixin中的方法和属性也就并入到该组件中，可以直接使用，在已有的组件数据和方法进行了扩充。引入mixin分全局引用和局部引用。

// 定义一个mixin.js
let MIXIN = {
   data() {
       return {
           name: 'mixin'
       }
   },
   created() {
       console.log('mixin...', this.name);
   },
   mounted() {},
   methods: {}
};
export default MIXIN;
//全局引用
import mixin from './mixin'
Vue.mixin(mixin)

//在vue文件中引用
import '@/mixin'; // 引入mixin文件
export default {
   mixins: [mixin]
}

在使用计算属性的时，函数名和data数据源中的数据可以同名吗?

最后更新于：2020-09-05 10:24:26 | 50 次浏览

不可以同名

要是同名也可以，但data会覆盖methods。并且本就不该同名，同名说明你命名不规范。然后解释为什么会覆盖，因为Props、methods、data、computed、watch都是在initState函数中被初始化的。初始化顺序就是我上面给出的顺序，本质上这些都是要挂载到this上面的，你如果重名的话，后面出现的属性自然而然会覆盖之前挂载的属性了。如果你的eslint配置比较严格的话，同名是编译不通过的。

描述v-model语法糖实现方式

最后更新于：2020-09-05 10:22:55 | 57 次浏览

在vuejs 中，v-model 这个语法糖能够很方便的实现表单和数据之间的绑定。比如在input 的输入框中，视图能够实时呈现我们在输入框中输入的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
         <!-- <input type="text" id="inp" v-model="title"> -->
         <input type="text" id="inp" :value="title" @input="changeTitle">
         <p>
             实时显示你在input中输入的内容:
             <span id="show">{{title}}</span>
         </p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                title:""    
            },
            methods: {
                changeTitle(e){
                     this.title = e.target.value
                }
            },
        })
    </script>
</body>
</html>

Vue组件通信 – 子传父 emit

最后更新于：2020-09-05 09:58:03 | 58 次浏览

vue组件通信 - 子传父

先决条件是子组件需要有一个主动事件来触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            border:1px solid red;
            padding:15px
        }

        .zx{
            border:1px solid blue;
            padding:15px
        }
    </style>
</head>
<body>
    <div id="app">
        父组件
        <p>用来接受儿子送的东西：{{getchild}}</p>
        <!-- <mydiv @来自子组件自定义的事件='父组件用来接受左边自定义事件所带的数据内容 方法'></mydiv> -->
        <mydiv @inc='getchildfn'></mydiv>
    </div>

     <template id="mydiv">
         <div class="zx">
            我是子组件
            <p>
                <strong>把右边的内容送到父组件</strong>
                {{msg}}
            </p>
            <button @click="song">把东西给父亲送过去</button>
         </div>
     </template>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('mydiv',{
             template:"#mydiv",
             data() {
                 return {
                     msg:"儿子张行给李元爸爸送点钱"
                 }
             },
             methods: {
                song(){
                    // this. $emit('自定义的事件名','你要发出去的数据'); this.$ emit('inc',this.msg);
                }
             },
             created() {
                this.song()
             },
        });


        new Vue({
            el:"#app",
            data:{
                getchild:""
            },
            methods: {
                // 用来接受儿子信息
                getchildfn(result){
                   this.getchild = result;
                //    赋值给当前组件的DATA
                   console.log(result)
                }
            },
        });
    </script>
</body>
</html>

Vue组件通信 – props

最后更新于：2020-09-05 09:58:23 | 56 次浏览

Vue - Porps 父传子数据通信

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <my-div :getparent="m"></my-div>
    </div>
    <template id="mydiv">
        <div>
             <h1>你好:{{msg}}</h1>
             <h4>用来存放父组件传过来的信息:{{getparent}}</h4>
        </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                m:"￥1000元"
            },
            components:{
                'my-div':{
                    template:"#mydiv",
                    props:['getparent'],
                    data() {
                        return {
                            msg:"我是子组件信息",
                        }
                    },
                }
            }
        });
    </script>
</body>
</html>

Web Components 真正的浏览器组件

最后更新于：2020-09-04 22:22:46 | 91 次浏览

1. 简单的页面结构 index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="main.js"></script>
</head>
<body>
  <my-img></my-img>
  <my-img></my-img>
  <my-img></my-img>
  <my-img></my-img>
  <my-img></my-img>
</body>
</html>

2. 简单的自定义浏览器组件 Web Components 感觉一下它的魅力 main.js

class myImg extends HTMLElement {
  constructor() {
    super();
    // 创建一个影子根节点
    const shadow = this.attachShadow({
      mode: 'open'
    });
    // 创建一个DIV
    const wrapper = document.createElement('div');
    wrapper.setAttribute('class', 'wrapper');
    // 创建一个span
    const span = document.createElement('span');
    span.innerText = 'hello world';
    // 创建一个图片
    let imgUrl = 'https://img.hnquxing.com/information_flow/2020-08-17%2F983269d64b91cc6f348873eef144f71c.jpg';
    const img = document.createElement('img');
    img.src = imgUrl;
    const style = document.createElement('style');
    style.textContent = `
      .wrapper {
        position: relative;
      }
      span{
        display:block;
        position: absolute;
        left:0;
        top:0;
        color:#fff;
        background: rgba(0, 0, 0, 0.5);
      }
      img {
        width: 12rem;
        opacity: 0.5;
        transition: all 600ms;
      }
      img:hover + span{
           background: rgba(0, 0, 0, 1);
      }
      img:hover {
        opacity: 1;
      }
    `;
    wrapper.appendChild(img);
    wrapper.appendChild(span)
    shadow.appendChild(style);
    shadow.appendChild(wrapper);
  }
}

// 自定义的元素名
customElements.define('my-img', myImg);

浏览效果：WebComponents

Vue实现数据实时模糊搜索效果

最后更新于：2020-09-03 11:57:31 | 69 次浏览

Vue实现数据实时模糊搜索效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <input type="text" placeholder="搜索新闻" v-model="search">
        <ul>
            <li v-for="item in fiterNews">{{item.title}}</li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      let vm =  new Vue({
            el: "#app",
            data: {
                news:[],
                search:""
            },
            created() { 
                axios.get('http://jsonplaceholder.typicode.com/posts').then((res)=>{
                    this.news = res.data
                })
            },
            computed: {
                fiterNews(){
                    var keyword = this.search;
                    return this.news.filter((val)=>{
                         return val.title.match(keyword)
                    })
                }
            },
        });
    </script>
</body>

</html>

webpack 配置忽略打包文件夹

最后更新于：2020-09-05 15:53:05 | 77 次浏览

第一步当然是下载依赖

npm install copy-webpack-plugin --save-dev

然后将插件添加到您的webpack配置中。例如：

let path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: path.resolve(__dirname, './static'), to: 'static' },
      ],
    }),
  ],
};

配置完成重启项目。static在webpack中就不会在打包，而生成的静态资源文件夹

一个简单的原生javascript显示隐藏效果

最后更新于：2020-09-02 23:20:56 | 63 次浏览

html部分

<div class="downloadApp">
    <a href="javascript:;" id="codeShow">
        APP下载
    </a>
    <div class="code" id="app_code_pic">
        <img src="images/app_code_pic.png" alt="">
    </div>
</div>

css部分

.downloadApp {
    position: relative;
    width: 200px
}

.downloadApp a {
    font-size: 22px;
}

.downloadApp .code {
    width: 150px;
    height: 220px;
    display: none;
    position: absolute;
    left: 0;
    top: 35px;
}

.downloadApp .code img {
    width: 100%;
}

javascript部分

function codeShow() {
    var codeShow = document.getElementById('codeShow');
    var app_code_pic = document.getElementById('app_code_pic');
    var closeTimer = null;
    app_code_pic.onmouseover = codeShow.onmouseover = function () {
        clearTimeout(closeTimer)
        app_code_pic.style.display = "block"
    }
    app_code_pic.onmouseout = codeShow.onmouseout = function () {
        closeTimer = setTimeout(function () {
            app_code_pic.style.display = "none"
        }, 500)
    }
}
codeShow()

2.阿里云服务器安装Redis

1.Redis简介

2.阿里云LINUX服务器配置PHP运行环境！

前置需求:

正式开始

1.php介绍

PHP是什么？PHP能干什么？为什么学习PHP？PHP的优点

1.PHP是什么？

2.PHP能干什么？

3.为什么学习PHP？

4.PHP的优点

接下来我们将详细介绍这些优点。

1. 性能

2. 扩展性

3. 数据库集成

4. 内置的函数库

5. 成本

6. 容易学习PHP

7. 对面向对象的支持

8. 可移植性

9. 开发方法的灵活性

10. 源代码

jQuery + RequireJS（SeaJS）+ artTemplate（doT）+ Gulp(Grunt)

L2Dwidget 二次元看板娘 使用方法

前端跨域服务使用爬虫解决方案

前端Vue部分代码

后端PHP部分代码：

nginx实现默认跳转HTTPS

怎么给vue定义全局的方法？

ps:vue的mixin的使用

在使用计算属性的时，函数名和data数据源中的数据可以同名吗?

描述v-model语法糖实现方式

Vue组件通信 – 子传父 emit

vue组件通信 - 子传父

Vue组件通信 – props

Web Components 真正的浏览器组件

1. 简单的页面结构 index.html

2. 简单的自定义浏览器组件 Web Components 感觉一下它的魅力 main.js

Vue实现数据实时模糊搜索效果

webpack 配置忽略打包文件夹

一个简单的原生javascript显示隐藏效果

html部分

css部分

javascript部分

L2Dwidget 二次元看板娘使用方法