首页 » SEO优化 » vuephpsql技巧_每日技巧laravel sql打印vue3逻辑代码复用

vuephpsql技巧_每日技巧laravel sql打印vue3逻辑代码复用

duote123 2024-12-09 0

扫一扫用手机浏览

文章目录 [+]

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

laravel sql打印

常常用laravel的orm模型来编写db操作的我们肯定会碰着须要打印orm实际天生的sql依次来排查sql语句是否精确,so,我们来利用下面的代码就能得到你终极的sql

vuephpsql技巧_每日技巧laravel sql打印vue3逻辑代码复用

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

vuephpsql技巧_每日技巧laravel sql打印vue3逻辑代码复用
(图片来自网络侵删)

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,

例子:

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 函数:setup 函数是组合式 API 的核心部分,它是在组件实例创建之前实行的。
你可以在 setup 函数中利用 Vue 3 供应的新功能,例如 ref、reactive、computed 等来定义相应式数据。
setup 函数是一个普通的 JavaScript 函数,它吸收两个参数:props 和 context,用于访问组件的 props 和高下文信息。
在 setup 函数中返回的任何内容都可以在模板中利用,包括相应式数据、方法等。
data 工具:在 Vue 3 中,data 工具依然存在,但它不再是组件选项,而是被放置在 setup 函数中作为普通的 JavaScript 工具。
如果你想在组件中利用 data,你可以直接在 setup 函数中创建一个普通的 JavaScript 工具,并返回须要的数据。
在 Vue 3 中,data 工具不再是相应式的,如果你须要定义相应式数据,你该当利用 ref 或 reactive。

紧张差异总结如下:

setup 函数是 Vue 3 中组合式 API 的一部分,而 data 工具是 Vue 2 中的组件选项。
setup 函数中定义的数据可以直接在模板中利用,并且可以利用 Vue 3 供应的新的相应式 API,而 data 工具中的数据须要通过 return 返回并且在模板中利用 {{}} 插值才能利用。
setup 函数中的数据可以是相应式的(利用 ref 或 reactive),而 data 工具中的数据默认不是相应式的。
总结

希望本日的技巧能对一些朋友有用,也欢迎大家评论辅导小编,再见.

标签:

相关文章