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 次浏览

前置需求:

  1. 需要一台阿里云或其它云的ECS服务器(需要购买)
  2. 需要下载一个Xshell 6服务器连接软件
  3. 需要下载一个Xftp 6FileZilla Client软件
  4. 使用lnmp集成环境安装,也可以单独安装运行环境
  5. 一台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具有很多优点,如下所示:

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

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

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);
    }
    returnch->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_namerequest_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()