分类目录归档:小案例

放一些项目中常用的案例,基本上都会涉及ajax和后端有交互,让案例具备实际可用的价值

vue2.x 项目 使用sass

1,使用save会在package.json中自动添加。

npm install node-sass --save-dev
npm install sass-loader --save-dev

注:

通常使用npm安装会出现以下报错,安装失败。(网路问题)

可以通过淘宝的npm镜像安装node-sass,解决以上问题。

$ npm install -g cnpm –registry=https://registry.npm.taobao.org (安装淘宝镜像)

$ cnpm install node-sass –save (使用淘宝镜像安装node-sass)

注:安装淘宝镜像后,仍无法安装node-sass的情况,执行下列命令

$ npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass

说明:

–registry=https://registry.npm.taobao.org 淘宝npm包镜像

–disturl=https://npm.taobao.org/dist 淘宝node源码镜像,一些二进制包编译时用

–sass-binary-site=http://npm.taobao.org/mirrors/node-sass 这个才是node-sass镜像

Linux(CentOS,Debian,Ubuntu,Fedora)系统下的数据盘挂载

通常新开通的Linux云服务器数据盘都未做分区和格式化。在进行数据盘挂载之前我们要先进行分区以及格式化操作。注意,挂载操作会清空数据,请确认挂载盘内无重要数据!

以下是分区、数据盘挂载详细步骤:

一、查看数据盘。

[root@win23 /]# fdisk  -l

首先,远程SSH登录CentOS服务器,查看磁盘。通常我们是用“df –h”命令查看服务器磁盘,但是在没有分区和格式化数据盘之前,使用 “df –h”命令是无法看到数据盘的,因此我们要使用“fdisk -l”(注意是字母l,而不是数字1)命令进行查看。

磁盘的命名规则为/dev/vd(a-z)。系统盘默认是/dev/vda。我们需要找到系统以外多的磁盘/dev/vdb。(注意不要挂错盘,从而导致把系统盘格式化!)

二、对数据盘进行分区。

[root@win23 /]# fdisk /dev/vdb

执行“fdisk /dev/vdb”命令,对数据盘进行分区。根据提示,依次输入“n”、“p”、“1”、两次回车,分区就开始了,很快就会完成。然后输入“p”可查看到刚才的分区结果。此时我们可以看到,新的分区vdb1已建立完成。

确认分区成功后,输入“w”保存分区设置

三、格式化新建的分区。

[root@win23 /]# mkfs.ext4  /dev/vdb1

以ext4为例(可自主决定选用其它文件格式,如ext3等):使用“mkfs.ext4 /dev/vdb1”命令对新分区vdb1进行格式化(注意:格式化新建的/dev/vdb1,不要写成/dev/vdb),格式化的时间根据硬盘大小有所不同。

四、创建挂载目录,挂载新分区。

[root@win23 /]# mkdir /hdd

[root@win23 /]# mount /dev/vdb1 /hdd/

[root@win23 /]# cd /hdd/ 

[root@win23 hdd]# ls

1、输入命令“mkdir /hdd“创建挂载目录hdd(可自定义);

2、执行“mount /dev/vbd1 /hdd/”命令,将新分区vdb1挂载到hdd目录下;

3、“cd”进入/hdd目录,然后执行命令“ls”查看目录下的文件,查看到lost+found 表示挂载成功。

[root@win23 hdd]# df  -h

然后用“df -h”命令查看,出现以下信息就说明挂载成功,可以开始使用新的分区了。

五、写入硬盘启动信息。

磁盘挂载后重启服务器挂载就会失效,因此我们需要写入硬盘启动信息,下次重启后自动挂载数据盘。

1.输入命令:

 echo "/dev/vdb1   /hdd     ext4       defaults  0 0" >>/etc/fstab

2.输入命令:cat /etc/fstab进行查看,如果出现下列信息,表示硬盘启动信息已写入完成。

   至此,CentOS系统下的数据盘挂载完成。

给原生js增加一个精准判断数据类型方法的封装

1.直接在原生Object原型下增加方法
Object.prototype.isTypeOf = function (f) {
    var type = Object.prototype.toString.call(this);
    if (f instanceof Function) {
       f.call(this, type)
    }
    return type
}
2.使用方法
  var arr = [
            1,
            {},
            [],
            function(){

            },
            RegExp,
            'hello world',
        ];


        for (let index = 0; index < arr.length; index++) {
            const element = arr[index];
            console.log(element.isTypeOf());
        }

给原生添加一个Each的遍历方法

1.基于原生的封装:
Array.prototype.each = function (f) {
   for (var index = 0; index < this.length; index++)
        f.apply(this, [this[index], index, this])
        return this
}
2. 使用方法:
var arr = ['hello','world'];
arr.each(function(item,index,arr){
    console.log(item,index,arr);
})

分时函数

分时创建DDOM节点函数

 var arr = [];
        for (var i = 1; i <= 32524; i++) {
            arr.push(i) 
        }
        var timeChunk = function (arr, fn, count) {
            var obj, t;
            var len = arr.length;
            var start = function () {
                for (var i = 0; i < Math.min(count || 1, len); i++) {
                    var obj = arr.shift();
                    fn(obj)
                }
            };
            return function () {
                t = setInterval(function () {
                    if (len === 0) {
                        return clearInterval(t);
                    }
                    start() //开始
                }, 200)
            }
        }

        var renderFriendList = timeChunk(arr, function (obj) {
            var div = document.createElement('div');
            div.innerHTML = obj;
            document.body.appendChild(div)
        },3)

        renderFriendList();

常用git&npm配置命令

常用git配置命令

1、npm使用淘宝镜像源

(能加快npm下载速度)

npm config set registry https://registry.npm.taobao.org
2、node-sass使用淘宝镜像

(能解决node-sass安装失败问题)

npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
3、npm恢复官方镜像源

(发布npm包时必须切换回官方镜像源)

npm config set registry https://registry.npmjs.org
4、git 配置全局用户名、邮箱

(用于git工具记录代码修改的作者信息)

git config --global user.name neohan
git config --global user.email neohan666@qq.com
5、git 配置ssh
ssh-keygen -t rsa
6、git 配置全局字符集编码

(防止中文commit信息乱码)

git config --global i18n.commitencoding utf-8
git config --global i18n.logoutputencoding utf-8
export LESSCHARSET=utf-8
7、git 配置全局不自动转换换行符

(解决windows和max系统的默认换行符不一致问题)

git config --global core.autocrlf false
8、git 设置能检测文件名大小写

(在需要配置的项目根目录下运行该命令)

git config core.ignorecase false

npm和yarn的镜像源的查看与修改

NPM

查询当前镜像

	npm get registry 

设置为淘宝镜像

	npm config set registry http://registry.npm.taobao.org/

设置回默认的官方镜像

	npm config set registry https://registry.npmjs.org/

同理 YARN

查询当前镜像

yarn config get registry

设置为淘宝镜像

yarn config set registry http://registry.npm.taobao.org/

设置回默认的官方镜像

yarn config set registry https://registry.yarnpkg.com

设置成功都有类似下面的输出

yarn config v1.16.0
success Set "registry" to "http://registry.npm.taobao.org/".
Done in 0.05s.

tsconfig.json 文件说明

用有道词典做的复制黏贴翻译,如果有错,在所难免,这里仅作为一个阅读参考

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /*基本选项*/
    /* Basic Options */
    // "incremental": true,                   /* 启用增量编译 // Enable incremental compilation  */
    "target": "es5",                          /* 指定ECMAScript目标版本:'ES3'(默认)、'ES5'、'ES2015'、'ES2016'、'ES2017'、'ES2018'、'ES2019'、'ES2020'或'ESNEXT'。 // Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                     /* 指定模块代码生成:'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020',或'ESNext'。// Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    // "lib": [],                             /* 指定要包含在编译中的库文件 // Specify library files to be included in the compilation.。 */
    // "allowJs": true,                       /* 允许编译javascript文件。 // Allow javascript files to be compiled.*/
    // "checkJs": true,                       /* 报告.js文件中的错误。 //Report errors in .js files. */
    // "jsx": "preserve",                     /* 指定JSX代码生成:‘preserve’、‘response -native’或‘react’。 // Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true,                   /* 生成相应的.d.ts文件。 // Generates corresponding '.d.ts' file. */
    // "declarationMap": true,                /* 为每个对应的sourcemap生成一个'.d.ts文件。 //Generates a sourcemap for each corresponding '.d.ts' file.*/
    // "sourceMap": true,                     /* 生成相应的.map的文件。 Generates corresponding '.map' file. */
    // "outFile": "./",                       /* 连接并发出输出到单个文件。 Concatenate and emit output to single file. */
    "outDir": "./js",                         /* 将输出结构重定向到目录。 Redirect output structure to the directory. */
    // "rootDir": "./",                       /* 指定输入文件的根目录。用于使用——outDir控制输出目录结构。 Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "composite": true,                     /* 使项目编译 Enable project compilation */
    // "tsBuildInfoFile": "./",               /* 指定用于存储增量编译信息的文件 Specify file to store incremental compilation information */
    // "removeComments": true,                /* 不要向输出发出注释。 Do not emit comments to output. */
    // "noEmit": true,                        /* 不发出输出。 Do not emit outputs. */
    // "importHelpers": true,                 /* 导入从“tslib”中发出助手。 Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,            /* 当目标是“ES5”或“ES3”时,在“for-of”、“spread”和“destructuring”中提供对迭代的全面支持。Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true,               /* 将每个文件置换为单独的模块(类似于' . transpilemodule ')。Transpile each file as a separate module (similar to 'ts.transpileModule'). */


    /* 严格的类型检查选项 */
    /* Strict Type-Checking Options */
    "strict": true,                           /* 启用所有严格类型检查选项。Enable all strict type-checking options. */
    // "noImplicitAny": true,                 /* 对隐含的“any”类型的表达式和声明引发错误。Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,              /* 启用严格的空检查。Enable strict null checks. */
    // "strictFunctionTypes": true,           /* 启用函数类型的严格检查。Enable strict checking of function types. */
    // "strictBindCallApply": true,           /* 在函数上启用严格的“bind”、“call”和“apply”方法。*Enable strict 'bind', 'call', and 'apply' methods on functions. */
    // "strictPropertyInitialization": true,  /* 启用严格检查类中的属性初始化。Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,                /* 在隐含的“any”类型的“this”表达式上引发错误。Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                  /* 以严格模式解析并为每个源文件发出“use strict”。 Parse in strict mode and emit "use strict" for each source file. */

    /*附加检查*/
    /* Additional Checks */
    // "noUnusedLocals": true,                /* 报告未使用的本地变量的错误。Report errors on unused locals. */
    // "noUnusedParameters": true,            /* 报告未使用参数的错误。Report errors on unused parameters. */
    // "noImplicitReturns": true,             /* 当函数中并非所有代码路径都返回值时,报告错误。Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,    /* 报告switch语句中的故障案例的错误。Report errors for fallthrough cases in switch statement. */

    /*模块解析选项*/
    /* Module Resolution Options */
    // "moduleResolution": "node",            /* 指定模块解析策略:'node' (node .js)或'classic' (TypeScript pre-1.6)。 Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                       /* 用于解析非绝对模块名称的基本目录。Base directory to resolve non-absolute module names. */
    // "paths": {},                           /* 将导入重新映射到相对于“baseUrl”的查找位置的一系列条目。A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                        /* 根文件夹的列表,其组合内容表示运行时项目的结构。List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                       /* 包括类型定义的文件夹列表。List of folders to include type definitions from. */
    // "types": [],                           /* 类型声明文件中编译。Type declaration files to be included in compilation. */
    // "allowSyntheticDefaultImports": true,  /* 这并不影响代码发出,只是类型转换。Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true,                  /* 通过为所有导入创建名称空间对象,启用CommonJS和ES模块之间的发射互操作性。意味着“allowSyntheticDefaultImports”。Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    // "preserveSymlinks": true,              /* 不解析符号链接的真实路径。Do not resolve the real path of symlinks. */
    // "allowUmdGlobalAccess": true,          /* 允许访问全局UMD格式从模块。Allow accessing UMD globals from modules. */

    /*源映射选项*/
    /* Source Map Options */
    // "sourceRoot": "",                      /* 指定调试器应该定位TypeScript文件的位置,而不是源文件的位置。Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "",                         /* 指定调试器应该定位映射文件的位置,而不是生成的位置。Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,               /* 发出带有源映射的单个文件,而不是拥有单独的文件。Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                 /* 需要设置“—inlineSourceMap”或“—sourceMap”。Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    /*实验选项*/
    /* Experimental Options */
    // "experimentalDecorators": true,        /* 启用对ES7装饰器的实验性支持。 Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,         /* 启用对为装饰器发出类型元数据的实验支持。Enables experimental support for emitting type metadata for decorators. */

    /*高级选项*/
    /* Advanced Options */
    "skipLibCheck": true,                     /* 跳过声明文件的类型检查。Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true  /* 不允许inconsistently-cased对同一个文件的引用。Disallow inconsistently-cased references to the same file. */
  }
}

L2Dwidget 二次元看板娘 使用方法

今天看到一个学生在用这个工具.觉得特别好玩.就要了过来.也用了一下.有点意思.把使用方法记录一下
官网: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': '~~'
          }
        }
    });

}

nginx实现默认跳转HTTPS

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组件通信 – 子传父 emit

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

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 真正的浏览器组件

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