逆光

JavaScript Vue中v-model的使用方法及在自定义组件中的使用

v-model指令其实是Vue中的一个语法糖，通常用于表单数据的双向绑定，它背后做了两个操作：

1.v-bind 指令绑定一个value属性;

2.v-on 指令给当前DOM绑定input事件。

<input v-model="valueTest" />
/*等同于*/
<input :value="valueTest" @input="valueTest = $event.target.value" />
//input事件动态监听用户的输入，在界面上生成一个事件时，浏览器会生成一个event对象，表示事件的状态，其中就包含了用户输入得到信息。

在自定义组件中使用v-model实现数据双向绑定该如何操作呢？官方文档中有这么一句话：默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。

所以默认情况下应该有额外的两个操作：

1.props 接收一个 value ;

2.this.$emit触发input事件，传入新值。

父组件中调用：

<test-component v-model=valueTest"></test-component>
/*相当于*/
<test-component :value=valueTest" @input="valueTest = arguments[0]"></test-component>
//arguments:Javascrip中每个函数都会有一个Arguments对象实例arguments，它引用着函数的实参，可以用数组下标的方式"[]"引用arguments的元素。arguments.length为函数实参个数，arguments.callee引用函数自身。

子组件：

<template>
    <div>
        <button @click="testClick">点击</button>
    </div>
</template>
<script>
export default {
    props: {
        value: String  //此处接收到的就是valueTest
    },
    methods: {
        testClick() {
            this.$emit('input', '传入的新值');
        }
    }
}
</script>

至此，默认情况下的自定义组件v-model的使用就完成了，那么非默认情况呢？

Vue自2.2.0版本后增加了model属性，允许一个自定义组件在使用v-model时定制prop和event。

其意义在于，如果业务需要代码明确，区分出自定义事件，那么prop和event可以自定义是最好的选择，示例如下：

父组件中调用：

<test-component v-model=valueTest"></test-component>
/*相当于*/
<test-component :value=valueTest" @input="valueTest = arguments[0]"></test-component>

子组件：

<template>
    <div>
        <button @click="testClick">点击</button>
    </div>
</template>
<script>
export default {
        props:{
            noValue:"此时不需要接收value"
        },
        model:{
            prop:'noValue'
            event:'noInput'
        },
    methods: {
        testClick() {
            this.$emit('noInput', '传入的新值');
        }
    }
}
</script>

#自定义组件 #v-model #vue 2021-04-14 16:38:09 　 17

PHP 关于使用Navicat连接Linux服务器（phpstudy面板）MySql失败的解决过程记录

今天使用Navicat连接Linux服务器（phpstudy面板）MySql失败并且报错如下：

2013- Lost connection to My SQL server at‘waiting for initial communication packet system error: 0“Internal error/check（Not system error）

因为之前一直都是通过phpMyAdmin来管理数据，所以一直没遇到这个问题。

通过百度答案几乎都是在my.cnf或者my.ini文件的[mysqld]下添加skip-name-resolve，我在尝试并且重启后仍然无效。

最后通过SSH通道连接，勾选使用SSH通道，输入服务器的主机ip和用户名和密码（不是mysql的帐号密码，而是服务器的）

最后把常规中的主机改为localhost，且输入MySQL的用户名和密码（此处的主机指向的localhost是服务器的localhost,而非电脑本地）。

#phpstudy #mysql #navicat 2020-04-16 12:20:11 　 515

PHP 关于Laravel报错require:open_basedir restriction in effect的解决方案记录

当今天打开Linux服务器上部署的Laravel项目（逆光导航）时出现了如下报错：

Warning: require(): open_basedir restriction in effect. File(/www/admin/nav.mhbdng.cn_80/wwwroot/vendor/autoload.php) is not within the allowed path(s): (/www/admin/nav.mhbdng.cn_80/wwwroot/public/:/tmp/:/proc/) in /www/admin/nav.mhbdng.cn_80/wwwroot/public/index.php on line 24

Warning: require(/www/admin/nav.mhbdng.cn_80/wwwroot/vendor/autoload.php): failed to open stream: Operation not permitted in /www/admin/nav.mhbdng.cn_80/wwwroot/public/index.php on line 24

Fatal error: require(): Failed opening required '/www/admin/nav.mhbdng.cn_80/wwwroot/public/../vendor/autoload.php' (include_path='.:/usr/local/phpstudy/soft/php/php-7.1.31/lib/php') in /www/admin/nav.mhbdng.cn_80/wwwroot/public/index.php on line 24

报错原因：

重启网站后在根目录生成了.user.ini文件。

解决方案：

1.删除.user.ini文件：

//进入项目public目录
#cd public
//显示所有文件
#ls -a
//linux会默认隐藏 . 开头的文件和文件夹，-a命令使其显示
//此时文件列表里能看到.user.ini文件，将其删除
#rm .user.ini

此方案重启网站后还是会生成.user.ini文件，并且.user.ini文件用于防止脚本跨目录执行，如果你使用的是nginx则不推荐删除。

Tips:

.htaccess是伪静态环境配置文件，用于lamp。

.user.ini是lnmp文件，里面放的是你网站的文件夹路径地址。目的是防止跨目录访问和文件跨目录读取.

2.修改.user.ini文件

#cd public
#ls -a
vim .user.ini
//如果.user.ini没有修改权限则是文件被锁定了，先解锁
#chattr -i .user.ini
//显示如下内容
#open_basedir=/www/wwwroot/public/:/tmp/:/proc/
//删除public
#open_basedir=/www/wwwroot/:/tmp/:/proc/
//保存退出vim
# :wq
//最后锁定.user.ini文件让其不能修改
#chattr +i .user.ini

推荐第二种方案。

#Laravel #open_basedir #.user.ini 2020-03-29 14:07:47 　 440

PHP laravel在代码中动态修改.env文件的值

在使用Laravel框架的时候遇到一个需求，需要在代码中动态的修改.env文件中的邮箱信息。

百度后得到如下代码：

function modifyEnv(array $data) 
{
 $envPath = base_path() . DIRECTORY_SEPARATOR . '.env';
 
 $contentArray = collect(file($envPath, FILE_IGNORE_NEW_LINES));
 
 $contentArray->transform(function ($item) use ($data){
   foreach ($data as $key => $value){
    if(str_contains($item, $key)){
     return $key . '=' . $value;
    }
   }
 
   return $item;
  });
 
 $content = implode($contentArray->toArray(), "\n");
 
 \File::put($envPath, $content);
}

来源：脚本之家

但是发现缺少str_contains方法，此处补充str_contains方法如下：

    function str_contains($haystack, $needles)
    {
        if(is_array($needles))
        {
            foreach($needles as $needle)
            {
                if(is_array($needle))
                {
                    if(self::str_contains($haystack, $needle))
                    {
                        return true;
                    }

                    return false;
                }
                elseif(preg_match("/\b$needle\b/i", $haystack) !== 0)
                {
                    return true;
                }
            }
        }else{
            if(preg_match("/\b$needles\b/i", $haystack) !== 0)
            {
                return true;
            }
        }
        return false;
    }

#Laravel #env 2020-01-13 11:04:40 　 533

Other Unity3D 脚本实现利用Tag对多对象同时显示/隐藏

首先，我的界面是这样的：

我要做的工作是点击“显示/隐藏图表”按钮将这七个图表进行显示/隐藏。

在按钮上绑定好相应的脚本和函数：

需要让多对象同时显示/隐藏，为了方便，给七个图表相同的Tag，然后用GameObject.FindGameObjectsWithTag()同时控制七个图表显示/隐藏：

由于GameObject.FindGameObjectsWithTag()无法找到隐藏的对象，所以在脚本中我们要将七个图表对象先保存在变量中：

private GameObject[] _Charts;
private void Awake() {
    _Charts = GameObject.FindGameObjectsWithTag("Chart");
}

然后在按钮绑定的单击事件（此处是上面图中的ShowHideChart()方法）中写上方法体：

for (int i = 0; i < _Charts.Length; ++i)
{
     if (_Charts[i].activeSelf == false)
     {
         _Charts[i].SetActiveRecursively(true);
     }else{
         _Charts[i].SetActiveRecursively(false);
     }
}

完整代码：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ButtonFunction : MonoBehaviour
{
    private GameObject[] _Charts;
    private void Awake() {
        _Charts = GameObject.FindGameObjectsWithTag("Chart");
    }

    public void ShowHideChart() {
        for (int i = 0; i < _Charts.Length; ++i)
        {
            if (_Charts[i].activeSelf == false)
            {
                _Charts[i].SetActiveRecursively(true);
            }

            else
            {
                _Charts[i].SetActiveRecursively(false);
            }
        }        
    }
}

#Unity3D 2019-12-27 12:10:14 　 558

Other Unity3D Shader Graph制作全息效果

Unity版本：2018.4.11c1

1. 新建Shader-->PBR Graph文件，并双击在Shader Graph中打开；

2. 修改基本颜色：新建color参数并选择基本色，将参数拖到面板上连接至PBR Master上的Albedo属性上：

3. 使用纹理来控制透明度：新建纹理（Texture2D）参数,并选择纹理；由于PBR-->Alpha通道不接收纹理类型的输入，所以将纹理使用sample texture2D节点转换后再连接，并将模型改为透明：

4. 球形不好看效果，可以在右下角的预览面板右键-->Custom Mesh换个模型;

5. 此时的纹理是覆盖在模型上的，如果不需要覆盖在模型上而是需要从上到下相对于我们的视角覆盖在空间上再执行这一步操作：
          A. 新建节点Tiling And Offset，并把此节点的Out连接到刚才创建的sample texture2D面板的UV上;
          B. 将Tiling And Offset的UV脱出连接到新节点Screen Position上；
          C. 新建一个Vector2参数（可以设置x：1，y：3，按需求设置）来控制平铺，并拖入工作区连接到tiling的输入上；
          D. 控制偏移的y值可以制造滚动效果，我们可以设置使它随时间动：新建时间节点Time和乘法节点Multiply，并新建一个vector 1参数来与Time相乘达到控制滚动速度的效果。

6. 此时已经大体有全息的效果了。我们可以通过添加发光部分来增强效果：
          A. 新建color参数，Mode修改为HDR，再选择颜色设置强度，并放置到工作区；
          B. 新建Fresnel effect节点，它可以产生环形渐变的效果；
          C. 新建乘法节点Multiply，将color参数和Fresnel effect节点连接上去相乘；
          D. 将乘法节点的Out连接到PBR Master的Emission上。

7. 如果要给纹理线条也加上发光：sample texture2D面板的RGBA上再拉出一个输出到新建节点One Minus（接收一个纹理并把它的值翻转）上，再将这个One Minus节点的输出拉到新建节点Multiply上，把参数中的基本色拖到工作区中作为Multiply节点的另外一个参数。而Multiply节点的Out也想要链接到PBR Master的Emission上，所以我们先把上一步中和Emission链接的线删除掉，然后创建一个Add节点，将上一步中的乘法节点Multiply和这步的乘法节点Multiply链接到Add节点的输入上，最后将Add节点的输出链接到PBR Master的Emission上。

8. 添加闪烁光。
          A. 新建时间节点，链接到新建节点Random Range:seed(2)上；
          B. Random Range的Out链接到新建节点Comparison(比较)上Comparison属性选择Greater；
          C. Comparison的Out链接到新建节点Branch上；
          D. Branch的Out链接的新建节点Multiply上，将上一步中的Add的Out再拉一条链接到Multiply的另一个输入；
          E. Multiply的Out链接到PBR Master的Emission上。

9.完成，效果如下：

#Unity3D #全息效果 2019-12-25 11:22:11 　 593

Other Unity3D 实现鼠标控制摄像头缩放、移动、旋转

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class CameraFollow : MonoBehaviour
{
    public float sMouse = 2f;
    public float sBoard = 1.2f;
    public float sWheel = 10f;

    void Update()
    {
        //滚轮实现镜头缩进和拉远
        if (Input.GetAxis("Mouse ScrollWheel") != 0)
        {
            this.GetComponent<Camera>().fieldOfView = this.GetComponent<Camera>().fieldOfView - Input.GetAxis("Mouse ScrollWheel") * sWheel;
        }
        //按着鼠标右键实现视角转动
        if (Input.GetMouseButton(1))
        {
            transform.Rotate(-Input.GetAxis("Mouse Y") * sMouse, Input.GetAxis("Mouse X") * sMouse, 0);
        }
        //按着鼠标右键实现位置移动
        if (Input.GetMouseButton(0))
        {
            transform.Translate(-Input.GetAxis("Mouse X") * sBoard, -Input.GetAxis("Mouse Y") * sBoard, 0);
        }
        
    }
}

#Unity3D 2019-12-23 18:11:22 　 509

Other Unity3D 脚本生命周期

一、初始阶段

Awake: 始终在任何启动功能之前以及预制之后调用此功能被实例化。（如果GameObject在启动过程中处于非活动状态，则直到激活它为止，才会调用Awake。）

理解：创建游戏对象后Awake立即执行（早于Start），仅执行一次，用于初始化。

OnEnable : 脚本对象启用时执行。

理解：脚本对象一启用就立马执行，每次启用都会执行。

Start: 仅在启用脚本实例的情况下，在第一帧更新之前调用Start。对于添加到场景中的对象，将在Update之前在所有脚本上调用Start函数，以此类推。自然地，在游戏过程中实例化对象时不能强制执行此操作。

理解：创建游戏对象且脚本启用后执行，在Awake后面执行，仅执行一次，用于初始化。

二、逻辑阶段

FixedUpdate: 与Update相比，FixedUpdate通常被更频繁地调用。如果帧速率低，则可以每帧多次调用它；如果帧速率高，则可以在帧之间根本不调用它。所有物理计算和更新都在FixedUpdate之后立即进行。在FixedUpdate中应用运动计算时，不需要将值乘以Time.deltaTime。这是因为在可靠的计时器上调用了FixedUpdate，而与帧速率无关。

理解：每隔固定时间执行一次（时间可以修改，默认为0.02s一次）。适用于对物体做物理操作（移动，旋转......），不受渲染影响。

Update: 每帧调用一次更新。它是帧更新的主要功能。

理解：渲染帧执行，执行时间不固定。适用于处理游戏逻辑。

LateUpdate: 更新完成后，每帧调用一次LateUpdate。LateUpdate开始时，Update中执行的所有计算都将完成。LateUpdate的常见用法是后续的第三人称相机。如果使角色移动并转到Update内部，则可以在LateUpdate中执行所有摄像机的移动和旋转计算。这将确保角色在摄像机跟踪其位置之前已完全移动。

理解：在Update函数被调用后执行，适用于跟随逻辑。

三、结束阶段

OnDisable: 当行为变为禁用或不活动状态时，将调用此函数。

OnDestroy: 在对对象存在的最后一帧进行所有帧更新后调用此函数（对象可能会响应Object.Destroy或在场景关闭时被破坏）。

理解：当脚本销毁或者附属的游戏对象被销毁时调用。

OnApplicationQuit: 在退出应用程序之前，将在所有游戏对象上调用此函数。在编辑器中，当用户停止播放模式时会调用它。

附Unity3D生命周期流程图：

#Unity3D #生命周期 2019-12-16 10:47:55 　 577

JavaScript iframe子父页面函数相互调用

一.iframe子页面调用父页面函数

1.javascript

只需要写上window.praent就可以了:

//调用changeTab()函数： 
window.parent.changeTab();

子页面取父页面中的标签中的值:

//比如该标签的id为"aa": 
window.parent.document.getElementById("aa").value;

2.jQuery

//格式：$("父页面元素选择器" , parent.document);
$("#cli" , parent.document).click();

二.iframe父页面调用子页面函数

1.javascript

//调用changeTab()函数：
document.getElementById('ifrtest').contentWindow.changeTab();

2.jQuery

//调用changeTab()函数：
$("#cli")[0].contentWindow.changeTab();

#iframe 2019-07-25 10:15:09 　 769

PHP 对于Laravel Blade模板转义html标签的记录

Laravel在视图中使用{{ }}语法来显示变量的内容的时候，会自动调用 PHP htmlspecialchars 函数来避免 XSS 攻击。所以，HTML标签就会被转义，造成如下结果：

代码：

<div class="layui-card" style="border-color: #FCF8E3">
     <div class="layui-card-header" style="background-color: #FCF8E3">{{ $study->study_title }}</div>
          <div class="layui-card-body">
              {{ $study->study_content }}
          </div>
</div>

渲染后的视图代码：

视图结果：

解决方法：

使用{!! !!}语法来替代{{ }}语法。{!! !!}语法显示未转义的数据。

代码：

<div class="layui-card" style="border-color: #FCF8E3">
        <div class="layui-card-header" style="background-color: #FCF8E3">{{ $study->study_title }}</div>
        <div class="layui-card-body">
             {!! $study->study_content !!}
        </div>
</div>

视图结果：