大家好呀,我是yangyang.停更了好几天,说忙的话,好像是有那么一点儿:忙着公司的各种文档编写、可能没用的会议,个人的话,也持续在卷AI应用层面的开发学习,也许很快会来打广告[狗头].言归正传,今天给大家分享一两个最近开发中应用的使用技巧

laravel sql打印

经常用laravel的orm模型来编写db操作的我们肯定会遇到需要打印orm实际生成的sql依次来排查sql语句是否正确,so,我们来使用下面的代码就能得到你最终的sql

    use Illuminate\Database\Eloquent\Builder; 
    ...
    public static function getOrmSql(Builder $query)
    {
        $userSql = $query->toSql();
        $userBindings = $query->getBindings();

        return vsprintf(str_replace('?', '%s', $userSql), $userBindings);
    }
    ...
    $query = user::where(...)->join(...)->when(..., ..)
    echo xxx:getOrmSql($query);

好的,小编再来扩展一下thinkphp 和 yii 的打印方法

thinkphp

vendor/topthink/think-orm/src/db/Query.php
    /**
     * 创建子查询SQL
     * @access public
     * @param bool $sub 是否添加括号
     * @return string
     * @throws Exception
     */
    public function buildSql(bool $sub = true): string
    {
        return $sub ? '( ' . $this->fetchSql()->select() . ' )' : $this->fetchSql()->select();
    }
    
    echo $query->field($field)->with(['orderList' => function ($query) {
$query->field('id, master_order_id, order_id');
}])->buildSql(), PHP_EOL;

yii

vendor/yiisoft/yii2/db/Connection.php
    /**
     * Creates a command for execution.
     * @param string $sql the SQL statement to be executed
     * @param array $params the parameters to be bound to the SQL statement
     * @return Command the DB command
     */
    public function createCommand($sql = null, $params = [])
    {
        $driver = $this->getDriverName();
        $config = ['class' => 'yii\db\Command'];
        if ($this->commandClass !== $config['class']) {
            $config['class'] = $this->commandClass;
        } elseif (isset($this->commandMap[$driver])) {
            $config = !is_array($this->commandMap[$driver]) ? ['class' => $this->commandMap[$driver]] : $this->commandMap[$driver];
        }
        $config['db'] = $this;
        $config['sql'] = $sql;
        /** @var Command $command */
        $command = Yii::createObject($config);
        return $command->bindValues($params);
    }
Yii::$app->db->createCommand("REPLACE INTO {{%config}}(`scope`, `variable`, `value`) VALUES('$scope', '$variable', '$value') ")->getRawSql();
Yii::$app->db->createCommand("REPLACE INTO {{%config}}(`scope`, `variable`, `value`) VALUES('$scope', '$variable', '$value') ")->getSql();

vue3逻辑代码复用

对于vue3,小编也是最近通过一个项目的源码开始接触,尽管它出来很久了.本着,对vue2.0的使用还是比较熟悉的情况下,在项目源码里面有一段业务逻辑代码需要在不同的vue组件使用,这时候,我很容易想到了以前使用的mixin混用,于是我直接照猫画虎搬过来,但是呢,当我这样操作后,发现3.0已经不这样推荐了,官方推荐使用组合式函数来完成逻辑复用

2.0-混入 (mixin)

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

例子：

var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

3.0 mixin

官方考虑到过渡期,mixin还是正常使用

什么是“组合式函数”？

在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。

当构建前端应用时，我们常常需要复用公共任务的逻辑。例如为了在不同地方格式化时间，我们可能会抽取一个可复用的日期格式化函数。这个函数封装了无状态的逻辑：它在接收一些输入后立刻返回所期望的输出。复用无状态逻辑的库有很多，比如你可能已经用过的 lodash 或是 date-fns。

相比之下，有状态逻辑负责管理会随时间而变化的状态。一个简单的例子是跟踪当前鼠标在页面中的位置。在实际应用中，也可能是像触摸手势或与数据库的连接状态这样的更复杂的逻辑。

例子: pay-mixin.js 主要用于支付操作,针对我们项目上不同业务需要服用支付操作,我选择了组合式函数来完成逻辑代码的复用,如果还有其他好的方法,欢迎大家指导小编

#页面代码
import {payMixin} from '../pay-mixin.js'
...
createApp({
        setup() {
            const loading = ref(false)
            const {
                plan,
                waitTimeout,
                statusCount,
                success,
                orderCreateTime,
                isMobile,
                payData,
                pay,
                payUrl,
                paySuccessCall,
                checkOrderStatus,
                getOrderStatus,
                clearTimer,
                done
            } = payMixin();
            payUrl.value = '/order/before-pay'
            return {
                loading,
                order,
                paymentMethod,
                payUrl,
                plan,
                waitTimeout,
                statusCount,
                success,
                orderCreateTime,
                isMobile,
                payData,
                pay,
                paySuccessCall,
                checkOrderStatus,
                getOrderStatus,
                clearTimer,
                done
            }
 ...
 pay-mixin.js
 
          
import { ref, reactive } from 'vue'

export  function payMixin() {
    const plan = ref(1);
    let timer = 0
    let orderId = null
    let waitTimeout = false;
    let statusCount = 0;
    let success = false;
    let orderCreateTime = 0;
    const isMobile = ref(false);
    const payUrl = ref('/app/ai/order/create');
    const payData = reactive({})

    function pay() {
        waitTimeout = false;
        success = false;
         ...
    }

    function paySuccessCall(res) {
      ...
    }

    function checkOrderStatus(once) {
      ...
    }

    function getOrderStatus() {
      ...
    }

    function clearTimer() {
        if (timer) {
            clearTimeout(timer);
            timer = 0;
        }
        statusCount = 0;
        orderCreateTime = 0;
    }

    function done() {
        clearTimer();
        if (!orderId) {
            return;
        }
        getOrderStatus();
    }


    return {plan, waitTimeout, statusCount, success, orderCreateTime, isMobile, payUrl, payData, pay, paySuccessCall, checkOrderStatus, getOrderStatus, clearTimer, done}
}

setup感受

使用体验

用了几次后,确实很灵活、丝滑.感觉回到jquery的时代

函数中定义变量

setup 里面能定义响应式的变量也可以定义普通变量,因此我们需要考虑这些变量的作用域,比如:如果是在setup 函数内部被使用，而不必将它们暴露给模板.

用 AI帮我们理解:setup 函数和 data 对象

在Vue 3中，setup 函数和 data 对象都用于定义组件的响应式数据。它们之间的区别主要体现在使用方式和一些功能上的不同。

setup 函数：

1. setup 函数是组合式 API 的核心部分，它是在组件实例创建之前执行的。
2. 你可以在 setup 函数中使用 Vue 3 提供的新功能，例如 ref、reactive、computed 等来定义响应式数据。
3. setup 函数是一个普通的 JavaScript 函数，它接收两个参数：props 和 context，用于访问组件的 props 和上下文信息。
4. 在 setup 函数中返回的任何内容都可以在模板中使用，包括响应式数据、方法等。

data 对象：

1. 在 Vue 3 中，data 对象依然存在，但它不再是组件选项，而是被放置在 setup 函数中作为普通的 JavaScript 对象。
2. 如果你想在组件中使用 data，你可以直接在 setup 函数中创建一个普通的 JavaScript 对象，并返回需要的数据。
3. 在 Vue 3 中，data 对象不再是响应式的，如果你需要定义响应式数据，你应该使用 ref 或 reactive。

主要区别总结如下：

• setup 函数是 Vue 3 中组合式 API 的一部分，而 data 对象是 Vue 2 中的组件选项。
• setup 函数中定义的数据可以直接在模板中使用，并且可以使用 Vue 3 提供的新的响应式 API，而 data 对象中的数据需要通过 return 返回并且在模板中使用 {{}} 插值才能使用。
• setup 函数中的数据可以是响应式的（使用 ref 或 reactive），而 data 对象中的数据默认不是响应式的。

总结

希望今天的技巧能对一些朋友有用,也欢迎大家评论指导小编,再会.