2024年3月

SQLSTATE[HY000] [2002] No such file or directory解决办法

作者: liziyu
时间: 2024-03-30
分类: ThinkPHP,Webman,SQLserver
评论

方法一

省略了，需要修改 mysql.ini 文件，有点麻烦。

方案二

这种就简单了，直接将网站数据库配置文件中的服务器地址配置项改成127.0.0.1即可，tp6.x的位置在config/database.php。

注：原因是127.0.0.1对于mysql来说，是TCP/IP连接，不会使用Unix domain socket，不会走mysql.socket。

模糊查询之FIND_IN_SET()效率笔记

作者: liziyu
时间: 2024-03-29
分类: Laravel,ThinkPHP,Webman
评论

如下图所示，想要从 roles 中查询 id 为 4 的记录。

方法一：

$users = DB::table('users')
    ->where('column_name', 'LIKE', '%,4,%')
    ->orWhere('column_name', 'LIKE', '4,%')
    ->orWhere('column_name', 'LIKE', '%,4')
    ->get();

方法二：

$users = DB::table('users')
    ->whereRaw("FIND_IN_SET('4', column_name) > 0")
    ->get();

号外：

还有一种巧妙的设计，就是在值入库时人为增加一个逗号,4,12,14,56,44,65,24,这种。在查询时，直接用以下语句：

$users = DB::table('users')
    ->where('column_name', 'LIKE', '%,4%')
    ->get();

注意这里where('column_name', 'LIKE', '%,4%')的条件，是不是很妙。

将 vue 项目部署在子路径（二级目录）

作者: liziyu
时间: 2024-03-15
分类: Vue
评论

项目打包后默认只能部署在服务器根路径，如果想 http://localhost:5173/admin/ 这种形式，可以根据 vite、vue-router 文档介绍进行配置。

1、在 vite.config.js 中配置：

// ......省略其它代码
export default defineConfig(({ command }) => {
    return {
        // 在这里增加 base 写子路径
        base: '/admin/',  // 注意这里前后都要有斜杠
        // ......省略其它代码
        resolve: { /*......省略*/ }
        // 如果要修改打包后的输出目录可以加这个配置
        build: {
            outDir: 'admin'  // 默认是 dist
        }
    };
});

2、然后在 src/router/index.js 中增加：

// ......省略其它代码
const router = createRouter({
    routes,
    // 给 createWebHistory 方法传参数配置子路径
    history: createWebHistory(import.meta.env.BASE_URL)
});

3、然后重新运行(run dev)或者打包(run build)部署后再访问就可以带上配置的子路径了，也可以在打包的时候动态设置子路径：

npm run build --base=/admin/

vue 中父子传值标签的理解

作者: liziyu
时间: 2024-03-09
分类: Vue
评论

简述，下述组件的粗略粗略粗略的理解：
其中“:button-style”表示父组件向子组件传值；
其中“@upload”表示，子向父传值，这里接收的是一个事件。

<el-upload
    :button-style="buttonStyle"
    v-model="data"
    @upload="onUpload"
/>

:button-style="buttonStyle" 是将 buttonStyle 这个属性的值从父组件传递给子组件的语法。在父组件中，你可以定义一个名为 buttonStyle 的属性，并将其绑定到子组件的 button-style 属性上。子组件可以使用这个属性值来自定义按钮的样式。

@upload="onUpload" 是父组件监听子组件触发的 upload 事件的语法。在子组件中，当某个操作或条件满足时，你可以使用 this.$emit('upload') 来触发 upload 事件。父组件可以在相应的方法（例如 onUpload）中定义逻辑来响应该事件。

通过这样的方式，父组件可以向子组件传递属性（props）和监听事件（events），实现父子组件之间的数据传递和通信。

vue 子组件给父组件传值 defineEmits

作者: liziyu
时间: 2024-03-09
分类: JavaScript,Vue
评论

总结：

步骤 1、首页在子组件定义组件需要发射的组件事件，数组方式，如：
const emits = defineEmits(["emit_a", "emit_b"])
步骤 2、然后通过返回的变量 emits来执行发射服务，如下：
emits("emit_a", {name:"liziyu",age:20})
步骤 3、在父组件内的子组件标签通过@与事件名emit_a作为接收点，如：
<Footer @emit_a="getEmitsObj" />
其中 getEmitsObj为任意自定义的函数名。
步骤 4、在父组件内，定义getEmitsObj函数，来接收子组件的值。如：
const getEmitsObj = (data) => {console.log(data);}
其中data就是接收到的值，此时可以将它赋值给组件变量，就可以正常使用了。

App.vue

<script setup>
  import { reactive,ref } from 'vue'

  //导入子组件
  import Header from "./components/header.vue"

  //响应式数据
  const web = reactive({
    name: "邓瑞编程",
    url: 'dengruicode.com'
  })

  const user = ref(0)

  //子传父
  const emitsWeb = (data) => {
    console.log("emitsWeb:",data)
    web.url = data.url
  }

  const emitsUser = (data) => {
    console.log("emitsUser:",data)
    user.value += data
  }
</script>

<template>
  <!-- 子传父 -->
  <Header @web="emitsWeb" @user="emitsUser" />

  {{ web.url }} - {{ user }}
</template>

<style scoped></style>


header.vue

<script setup>
    //子组件

    /*
        defineEmits是Vue3的编译时宏函数,
        用于子组件向父组件发送自定义事件
    */
    //子传父
    //定义一个名为 emits 的对象, 用于存储自定义事件
    const emits = defineEmits(["web","user"])
    //发送名为 web 和 user 的自定义事件
    emits("web", {name:"邓瑞",url:"www.dengruicode.com"})
    
    //添加用户
    const userAdd = () => {
        //发送名为 user 的自定义事件
        emits("user", 10)
    }
</script>

<template>
    <h3>Header</h3>

    <button @click="userAdd">添加用户</button>
</template>

<style scoped>

</style>

转自：邓瑞编程

vue 父组件向子组件传值 defineProps

作者: liziyu
时间: 2024-03-08
分类: JavaScript,Vue
评论

总结：

一、传数组：

步骤 1、在父亲组件内，通过子组件标签属性方式，定义参数名称，如：
<Header propsName="liziyu" propsAge=20 />

步骤 2、然后在子组件页面内，接收两个参数，如：
defineProps(["propsName", "propsAge"])
这样就可以在header 里使用上面两个数组元素了。

二、传对象：

步骤 1、在父组件内，通过子组件标签绑定一个对象参数的名称，如：
reactive({name:"liziyu",age:20})
<Footer v-bind="propsObj" />

步骤 2、在子组件页面内，接收这两个参数，与接收数组不同的是，需要在子组件内定义接收对象各字段类型用于接收对象值（有点像 golang的请求对象的结构体），如：
defineProps({name:String, age:Number})

App.vue

<script setup>
  import { reactive } from 'vue'

  //导入子组件
  //App.vue是父组件,因为它包含了header.vue和footer.vue两个子组件
  import Header from "./components/header.vue"
  import Footer from "./components/footer.vue"

  /*
  const propsWeb = {
    user: 10,
    ip: '127.0.0.1'
  }
  */
  //响应式数据
  const propsWeb = reactive({
    user: 10,
    ip: '127.0.0.1'
  })

  //添加用户
  const userAdd = () => {
    propsWeb.user++
    console.log(propsWeb.user)
  }
</script>

<template>
  <!-- 父传子 - 方式1 -->
  <Header propsName="邓瑞编程" propsUrl="dengruicode.com" />

  dengruicode.com

  <button @click="userAdd">添加用户</button>

  <!-- 父传子 - 方式2 -->
  <!-- <Footer v-bind="propsWeb" /> -->
  <Footer :="propsWeb" />
</template>

<style scoped></style>


header.vue

<script setup>
    //子组件

    //接收方式1 - 数组
    /*
        defineProps是Vue3的编译时宏函数,
        用于接收父组件向子组件传递的属性(props)

        注
        当使用Vue编译器编译包含defineProps的组件时,
        编译器会将这些宏替换为相应的运行时代码
    */
    const props = defineProps(["propsName","propsUrl"])
    console.log(props)
</script>

<template>
    <h3>Header</h3>
</template>

<style scoped>

</style>


footer.vue

<script setup>
    //子组件

    //接收方式2 - 对象
    /*
    const props = defineProps({
        user: Number,
        ip: String
    })
    */
    const props = defineProps({
        user: Number,
        ip: {
            type: String,
            required: true, //true表示必传属性,若未传则会提示警告信息
            default: 'localhost' //未传默认值
        }
    })

    console.log(props)
</script>

<template>
    <h3>Footer</h3>
    user: {{ props.user }}
</template>

<style scoped>

</style>