宗波尘客博客 - 你想学习的,也许正是我在研究的！

ts项目'在没有 "node" 模块解析策略的情况下，无法指定选项 "-resolveJsonModule" '解决办法

Sat, 15 Jul 2023 23:11:15 +0800

今天晚上我在家突然想到了一个小demo，准备测试一下，结果编辑器提示在没有 "node" 模块解析策略的情况下，无法指定选项 "-resolveJsonModule" ，翻阅了网上大约十来篇文章，解决办法都是配置文件里加moduleResolution配置为node，但实际上这种方法我测试了并没有什么卵用！网络上很多所谓的博主，写文章一点都没有自己的原创性，随便爬一篇文章就放到自己账号或者平台去发表，根本没测试是否真的有效，也根本没测试方法适用性，导致网上一大堆那种没用的文章。我的文章均原创，此篇文章也是自己遇到问题时，解决问题后的解决方案！

错误方法演示：

下面图片的这个方法是网上的方法，我测试了无效，下面将写我解决的正确方法！

解决办法：

本人出现这个问题后的解决办法很简单，就是手动更新vscode版本

再点“检查更新”即可

Ajax请求封装,axios请求插件及fetch封装

Thu, 13 Jul 2023 20:44:20 +0800

本文将简单讲述ajax请求封装，将以axios插件和fetch原生封装做代码演示。请求封装一般需要封装请求头，是否携带token，响应拦截器结构数据等等操作。

axios请求封装：

1、安装axios：yarn add axios（也可以npm i axios，其他工具大同小异）

2、导入axios

import axios from 'axios'

3、配置基地址和超时时间

const baseURL = 'http://localhost:3000'
const ins = axios.create({ //axios常规封装方式
    baseURL,
    timeout: 4000
})

4、配置请求拦截器（用于在请求头携带token）

ins.interceptors.request.use((config) => { //请求拦截器
    const token = info.value?.token //读取token
    config.headers.Authorization = token ? "bearer " + token : '' //有token就携带token
    return config
})

5、配置响应拦截器

ins.interceptors.response.use((res) => { //响应拦截器
    if (res.status >= 200 && res.status < 300) { //200-300状态是响应成功,处理响应成功逻辑
        const totalStr = res.headers['x-total-count'] //将请求头携带的数据赋值给totalStr
        if (totalStr) { //判断，有就返回data和total属性的对象
            return {
                data: res.data,
                total: parseInt(totalStr)
            }
        } else {
            return res.data
        }
    }
    throw new Error('未知错误') //throw是vue3中的抛出一个错误（类似promise）
}, (err) => {
    window.$message.error(err.message) //响应失败就展示后端返回的失败信息(消息提示前面挂载到windows了的,所以可以使用)
})

6、封装一个请求类型集合函数

function entity(key) { //封装的请求集合，将路由传入进来
    return {  //返回一个属性是函数的对象（调用对应请求对象，可传入数据）
        get(params) {
            return ins.get('/' + key, { params })
        },
        post(data) {
            return ins.post('/' + key, data)
        },
        put(id, data) {
            return ins.put('/' + key + '/' + id, data)
        },
        patch(id, data) {  //打补丁，哪里修改就改哪里
            return ins.patch('/' + key + '/' + id, data)
        },
        delete(id) {
            return ins.delete('/' + key + '/' + id)
        },
        deleteAll(ids) {
            const req = (id) => {
                return ins.delete('/' + key + '/' + id)
            }
            return Promise.allSettled(ids.map(req))
        }
    }
}

7、封装导出一个对象，对象属性名就是对应的请求方法，属性值就是调用上方的请求集合函数，并在此处写入请求路径参数

export const apis = { //封装的api请求对象
    users: entity('users'),
    schools: entity('schools'),
    dynamicCategories: entity('dynamicCategories'),
    dynamicContents: entity('dynamicContents'),
    carousels: entity('carousels'),
    studentSources: entity('studentSources'),
    studentSourceStates: entity('studentSourceStates'),
    studentSourceLevel: entity('studentSourceLevel'),
    studentsBefore: entity('studentsBefore'),
}

8、封装一个上传文件的方法

// 上传文件
export function upload(file) { //手动封装的上传文件，参数为file文件
    const formData = new FormData() //文件需要formData格式，这里new一个FormData实例
    formData.append('file', file) //将传来的file丢入formData里
    return fetch(baseURL + '/file', { //用fetch发请求
        method: "POST",
        body: formData
    }).then(res => res.text()).then(res => baseURL + res)
  //上一行中，.text()是让其返回文本格式数据
}

其他组件或者js代码需要用到请求时，可以直接import 导入对应的方法即可使用

fetch请求的理解：

流程：请求->一帧一帧地发给后端->后端进行处理->一帧一帧地返回给前端。每一帧，都包含头信息和状态码

xhr.onProgress每一帧触发，得到数据量

fetch res.body是一个可读流，流的读取也可以记录进度

详细描述：

1、原生请求，fetch xhr一样的功能，只是fetch是Promise风格

2、fetch第一个参数是url，第二个参数是配置项

3、fetch可以配置：method请求方法，headers请求头，body请求体

4、fetch请求如果发送get/dalete，参数放在-----路径参数（path/params），查询参数（?key=value&key=value）

5、fetch接收的数据有两段，第一段描述信息，还没有返回结束，只是第一帧的http，能拿到status状态码，htaders返回头，决定使用何种方式处理返回体：res.json解析成对象，res.text解析成文本，res.blob解析成文件

6、fetch第二段then，返回体解析后的结果

fetch请求基本使用：

fetch(url, {
  method, // 请求方法
  headers, // 请求头
  body, // 二进制或字符串
}).then(res=>{
  // 在返回第一帧的时候执行
  // res.headers 返回头
  // res.status 返回状态码
  return res.json() // text/blob
}).then(res=>{
  console.log(res) // 结果
})

fetch请求封装：

1、闭包原理，内层函数访问外层函数变量的引用

2、内层函数可以当做请求拦截器，可以做一些请求之前的处理，例如携带token

3、then可以看做响应拦截器，可以做对数据进行结构处理，以及判断并确定返回数据的类型

// 路径参数和查询参数在 path 传进来
function request(method, path, data){
  // 组装基地址
  let url = baseUrl + path
  // 可以看成 axios 请求拦截器
  return fetch(url, {
    method,
    body: data?JSON.stringify(data):undefined,
    headers:{
      "Authorization":"Bearer " + localStorage.getItem('token')
    }
  }).then(res=>{
    // 可以看成 axios 的响应拦截器
    if(res.status >=200 && res.status < 300){
      return res.json()
    }else{
      throw new Error(res.status)
    }
  }).catch(err=>{
    // 错误处理
  })
}


request('GET', `/users?name=${name}`)

请求封装个人随笔结尾：

本站文章均原创，可以转载，禁止克隆。关于请求封装有更好的理解则可以评论在下方，投稿可以直接联系站长或者发入投稿邮箱！

vue3步进拖拉拽效果，拖拉拽实现课表案例

Thu, 13 Jul 2023 19:27:50 +0800

JS中步进拖拉拽效果实现，vue3中做课表业务，对课表实现课程时间拖动修改的操作。拖拉拽代码效果实现案例教程。也可对应排班业务。

拖拉拽课表效果展示：

上述案例拖拉拽思路讲解：

1、用grid网格化布局

2、将顶部的8个单元格循环生成，从第二个单元格开始写入星期一到星期日

3、将左侧的时间单元格用数组生成，然后用v-for循环生成到页面中（这里需要使用grid布局，让单元格垂直排列在左侧）

4、让中间用于选择的单元格也用grid排列

5、给格子添加点击事件，当格子被点击时，给对应的格子添加对应的样式，用来表示选中了该单元格（定位，根据盒子距离顶部左边宽高位置定位）

6、在被点击的格子中拿到该单元格的位置（此位置指距离视窗左边，上边的位置信息）

7、获取鼠标点击的位置到移动的位置的距离（鼠标点击、鼠标移动、鼠标离开的事件）

8、在鼠标移动时，通过移动的位置计算对应盒子展示的位置

拖拉拽案例代码实现：

<script setup>
import { ref } from "vue"

const title = [ //定义星期数据
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六",
  "星期日",
]
const hours = []  //数组对象，生成左侧时间数据
for (let i = 0; i < 24; i++) {
  const t = i >= 10 ? i : `0${i}` //对个位数的时间补0
  // 以半小时为一格
  hours.push({ //给左侧时间列表push一个对象
    text: `${t}:00`,    //text文本对象时间
    start: i * 2 + 2,   //开始位置
    end: i * 2 + 3,     //结束位置
  })
  hours.push({       //后半个小时时间
    text: `${t}:30`,
    start: i * 2 + 3,  //开始位置
    end: i * 2 + 4,     //结束位置（单元格）
  })
}
const blanks = [] //以半小时计算，一周的总格子数，数组总长度
blanks.length = 48 * 7

// 排课的数组
const classes = ref([])  //排课的课程数组

let container = null //值是整个grid表格div节点
const add = index => { //新增方法，传入格子索引（一共48*7个格子）（对应blanks）
  const row = Math.floor(index / 7) //拿到第几行，一共48行，第一行是0，拿到行数
  const columns = index % 7   //拿到列数，一共7列，取余能拿到列数
  if (!container) return //没有获取到grid节点结束点击事件
  // 元素的宽度，高度，所在的屏幕位置
  const conSize = container.getBoundingClientRect() //包含一个DOMRect对象（宽高和位置信息）
  const blockWidth = conSize.width / 8
  const blockHeight = 40
  const left = blockWidth * (columns + 1)
  const top = blockHeight * (row + 2)
  classes.value.push({
    left,
    top,
    columns,
    row,
    blockWidth,
    blockHeight,
    rows: 1,
    resetRows: 0,
  })
}

let current = { x: 0, y: 0 }

  /* 上下拖动事件 */
const mouseDown = (e, direction, c) => { //三个参数，事件对象、方向、排课的数组对象的参数
  e.preventDefault() //先阻止默认事件
  current = { x: e.clientX, y: e.clientY } //利用事件对象拿到鼠标点击的位置
  const initRows = c.rows
  const initResetRow = c.resetRows
  const mouseMove = e => {
    // 相对于鼠标按下的位置，移动的距离
    const dy = e.clientY - current.y
    const dr = Math.floor(dy / 40)
    if (direction > 0) {
      // 向上移动
      const drt = -dr
      if (initResetRow + drt < 1) {
        return
      }
      c.resetRows = initResetRow + drt
      c.rows = initRows + drt
    }
    if (direction < 0) {
      // 向下移动
      if (initRows + dr < 1) {
        return
      }
      c.rows = initRows + dr
    }
  }
  const mouseUp = () => {
    document.removeEventListener("mousemove", mouseMove)
    document.removeEventListener("mouseup", mouseUp)
  }
  document.addEventListener("mousemove", mouseMove)
  // 清空监听，处理结果
  document.addEventListener("mouseup", mouseUp)
}
</script>

<template>
  <!-- 下面这行代码是将ref这个值保存到container里 -->
  <div :ref="el => (container = el)">
    <!-- 第一空白格 -->
    <div></div>
    <!-- 第二到第八格，内容标题是星期一到星期天 -->
    <div v-for="text in title">{{ text }}</div>
    <!-- 左侧时间格，在grid布局下，设置了左侧布局，因此，垂直于左侧 -->
    <div
      v-for="hour in hours"
      style="grid-column-start: 1; grid-column-end: 2"
      :style="{
        // 从第几行开始，到第几行结束
        gridRowStart: hour.start,
        gridRowEnd: hour.end,
      }">
      {{ hour.text }}
    </div>
    <!-- 中心格子，点击传入格子索引 -->
    <div v-for="(_, index) in blanks" @click="add(index)"></div>
    <!-- 下面是循环出被点击选中的格子 -->
    <div
      v-for="(c, index) in classes"
      :key="index"
     
      :style="{
        left: c.left + 'px',
        top: c.top - c.resetRows * 40 + 'px',
        width: c.blockWidth + 'px',
        height: c.blockHeight * c.rows + 'px',
      }">
      <div>
        <div @mousedown="mouseDown($event, 1, c)"></div>
        <div @mousedown="mouseDown($event, -1, c)"></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.class-container {
  position: relative;
  display: grid;
  height: 2000px;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: 80px repeat(48, 40px);

  & > * {
    border: 1px solid #000;
  }

  .class-info {
    position: absolute;
    width: 200px;
    height: 200px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    background-color: white;

    .class-content {
      position: relative;
      height: 100%;
      width: 100%;

      .top-bar {
        background-color: #409eff;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 10px;
        cursor: n-resize;
      }

      .bottom-bar {
        background-color: #67c23a;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 10px;
        cursor: n-resize;
      }
    }
  }
}
</style>

步进拖拉拽注意事项：

基础版拖拉拽，仅供参考

Vue3数据驱动视图开发思想（实际应用）

Wed, 12 Jul 2023 23:40:21 +0800

我将以代码配合理论讲解一下个人对数据驱动思想应用在项目实际中的效果。数据驱动视图的开发思想，数据驱动视图的原理，以代码的形式展现vue3数据驱动视图的业务实现！（案例就不单独写了，是从小demo里拆出来的代码，大家理解思路就行，不用太在乎代码。代码用的naiveui组件，不会这个组件的别看template，否则会看懵的）

MVVM模式(vue)：

由VIewModel视图模型作为中间角色，连接View页面视图和Model数据的模式被成为MVVM模式。

MVVM模式的特点：

1、避免了XSS攻击风险

2、没有节点查找过程，性能强

3、视图模型拥有完全编程能力，可以随意控制页面节点

具体见：Vue的MVVM原理

演示代码：

案例：以下代码的作用是当点击tab切换时，用v-model双向绑定数据，绑定到handle，而handel是通过计算属性的set和get来控制，读取此值时，触发get函数，实现get函数里的路由判断并赋值的操作，可以用来动态改变标题。当点击另一个tabs时，会执行设置set操作，在此操作里，我们可以用路由进行跳转。那么便不再需要单独绑定点击事件的函数方法了

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { computed } from 'vue'
const route = useRoute()
const router = useRouter()

const base = '/display/dynamic/' //此页面已知的路由
const handle = computed({  //计算属性，数据驱动视图的思想
    get: () => { //读取，不是分类管理就是列表管理
        return route.path === base + 'category' ? '分类管理' : '列表管理'
    },
    set: (val) => { //写入，如果值改变，则判断值是否是分类管理，从而三元判断路由，赋值路由切换页面
        const path = base + (val === '分类管理' ? 'category' : 'list')
        router.push(path) //切换页面
    }
})
</script>
<template>
    <n-card title="动态管理">
        <n-tabs type="line" animated v-model:value="handle"> //双向绑定，数据驱动视图
            <n-tab-pane name="分类管理" title="分类">
            </n-tab-pane>
            <n-tab-pane name="列表管理" title="列表">
            </n-tab-pane>
        </n-tabs><router-view />
    </n-card>
</template>

案例：

下方案例主要使用watch副作用函数（侦听器）。

deep设置为true可以深度监听，例如对象属性改变，例如数组的值改变

immediate挂载执行一次

监听分页数据：当页面挂载后立即执行一次发送请求获取到table列表数据并渲染到页面上。开启了深度监听此对象，当次对象的数据一改变，例如页码、条数一改变则立刻会被深度监听到，监听到则执行回调函数，执行回调时，会自动发送请求，重新数据table数据并渲染。而再也不需要写点击事件去主动修改数据并发送请求。只需要使用侦听器监听数据的改变，数据一改变立刻发送请求。

<script setup>
import request from '@/utils/request'
import { NButton } from 'naive-ui'
import { ref, computed, watch } from 'vue'
import { Add, Remove } from '@vicons/ionicons5'
const schools = ref([])
// 先获取校区数据
request.get('/schools').then(res => {
    schools.value = res
})
// 选项
const schoolOptions = computed(() => schools.value.map(item => ({
    label: item.name,
    value: item.id
})))
const params = ref({
    schoolId: 1,
    page: 1,
    pageSize: 10
})

const result = ref({
    total: 0,
    data: []
})
// 什么时候发查询请求？
// 查询涉及的条件，变化的时候，发请求
// 数据驱动的思想：数据变化，页面自动更新
// Vue 是一个数据驱动的，MVVM 框架，watch/computed
watch(params, (val) => {
    // order asc 正序  desc 倒叙
    request.get('/dynamicCategories', { params: { _page: val.page, _limit: val.pageSize, schoolId: val.schoolId, _sort: 'id', _order: 'desc' } }).then(res => {
        result.value = res
    })
    // immediate: true 组件初始化立即执行一次
}, { immediate: true, deep: true })


// 是否展示弹框
const showEdit = ref(false)
// 选中的分类
const selected = ref(null)
// 编辑分类名称
const name = ref('')
const columns = [{ type: "selection" }, {
    title: "分类名称",
    key: "name"
}, {
    title: "动态数",
    key: "num"
}, {
    title: "创建时间",
    key: "created"
}, {
    title: "操作",
    render(item) {
        return <NButton type="primary" size='small' onClick={ () => {
            showEdit.value = true
            selected.value = item
            name.value = item.name
        } }>编辑</NButton>
    }
}]

const confirmChangeCategory = () => {
    if (!name.value) {
        $message.warning('请输入分类名称')
        return
    }
    if (selected.value) {
        request.patch('/dynamicCategories/' + selected.value.id, { name: name.value }).then(() => {
            $message.success('修改成功')
            showEdit.value = false
            params.value = { ...params.value }
            selected.value = null
        })
    } else {
        request.post('/dynamicCategories', { name: name.value, schoolId: params.value.schoolId, created: new Date().toLocaleDateString().replaceAll('/', '-'), num: 0 }).then(() => {
            $message.success('添加成功')
            showEdit.value = false
            params.value = { ...params.value }
        })
    }
}
// 选择的删除项
const deletes = ref([])
const onDelete = () => {
    $dialog.warning({
        title: "批量删除",
        content: "确定要删除所选项么？",
        positiveText: "确认删除",
        onPositiveClick: () => {
            const getDelete = (id) => request.delete('/dynamicCategories/' + id)
            // Promise.allSettled
            // all 所有请求都返回  allSettled  所有请求都结束

            Promise.allSettled(deletes.value.map(getDelete)).then(() => {
                $message.success('删除成功')
                params.value = { ...params.value, page: 1 }
                deletes.value = []
            })
        }
    })
}
</script>
<template>
    <div>
        <div>
            <n-form inline>
                <n-form-item label="校区">
                    <n-select v-model:value="params.schoolId" :options="schoolOptions" style="width: 200px"></n-select>
                </n-form-item>
            </n-form>
            <n-space style="display:flex;flex-flow:row nowrap">
                <n-button type="primary" @click="showEdit = true">
                    <n-icon>
                        <add />
                    </n-icon>
                    添加</n-button>
                <n-button type="error" @click="onDelete">
                    <n-icon>
                        <remove />
                    </n-icon>
                    删除</n-button>
            </n-space>
        </div>
        <n-data-table :row-key="row => row.id" :columns="columns" :data="result.data" :pagination="false" :bordered="false"
            v-model:checked-row-keys="deletes" />
        <n-pagination v-model:page-size="params.pageSize" v-model:page="params.page" :item-count="result.total"
            show-quick-jumper style="margin-top: 1em;" show-size-picker :page-sizes="[10, 20, 50]">
            <template #goto>
                跳转至
            </template>
        </n-pagination>
        <n-modal v-model:show="showEdit">
            <n-card style="width:400px" :title="(selected ? '编辑' : '添加') + '分类'">
                <n-input placeholder="分类名称" v-model:value="name"></n-input>
                <template #footer>
                    <n-button type="primary" style="float:right" @click="confirmChangeCategory">确定</n-button>
                </template>
            </n-card>
        </n-modal>
    </div>
</template>

<style scoped>
.container {
    .header {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: end;
        margin-bottom: 20px;
    }
}
</style>

关于数据驱动思想总结：

由于今晚时间关系暂不整理这篇文章，以后整理了重新补发。

现在总结一下vue3数据驱动视图的开发思想：

1、通过computed计算属性去做一些数据的计算，当数据的依赖发生改变时，即可自动做一些逻辑处理（例如发送请求）

2、通过computed计算属性的set和get，当此属性被读取或者修改时，自动做一些逻辑处理

3、通过watch监听，监听某个变量，可以预先处理一次，可以深度监听。当数据改变时，自动做一些逻辑请求

我们只需要关注数据的变化，由数据变化自动做一些逻辑处理，而不需要过于关注页面事件，逻辑处理等

（以下是个人所理解的vue3数据驱动视图的实际应用，仅供参考哦）

亚马逊免费云服务引领您进入新时代|亚马逊云服务机器学习

Mon, 10 Jul 2023 13:22:49 +0800

什么是机器学习：

机器学习已经成为当今科技领域的热门话题，同时云计算库作为支持机器学习的重要工具也引起了广泛关注。机器学习的本质是通过算法让计算机能够从大量数据中学习和预测，而云计算库则提供了强大的计算和存储能力来支持这一过程。在众多云计算供应商中，亚马逊提供的免费云服务是一个备受推崇的选择。

机器学习最重要的是什么：

机器学习中最重要的一环是训练模型，这需要大量的计算资源和存储空间。云计算库通过提供弹性和可扩展性的计算资源，能够在短时间内为训练模型提供所需的庞大计算能力。通过云计算库，用户可以根据自己的需求和预算选择合适的计算规模，而无需关心硬件设备的购买和维护。

哪里有云计算服务：

亚马逊提供的免费云服务（Amazon Free Tier）是亚马逊云服务（AWS）的一个重要特色。免费云服务为用户提供了一定的免费计算、存储和网络资源，以帮助用户了解和体验亚马逊云服务的强大功能。对于初学者或小规模项目来说，免费云服务是一个非常理想的选择，它不仅可以提供免费的使用时长和资源，还能提供亚马逊云服务的技术支持和学习资源。

亚马逊云服务有哪些作用：

使用亚马逊的免费云服务，用户可以直接访问亚马逊机器学习平台（Amazon Machine Learning），该平台提供了简单易用的界面和工具，帮助用户快速构建和部署机器学习模型。用户可以通过上传数据集、选择算法和调整参数等简单步骤来创建模型，并利用亚马逊的计算资源进行训练和预测。此外，亚马逊的免费云服务还包括云存储（Amazon S3）和云计算（Amazon EC2）等功能，为机器学习提供了全方位的支持。

补充：

总结而言，机器学习和云计算库的结合为用户提供了更强大、高效的机器学习解决方案。亚马逊作为云计算领域的领先供应商，提供了免费的云服务，为用户提供了探索和体验机器学习的机会。无论您是初学者还是专业人士，亚马逊的免费云服务都能满足您的需求，并提供优秀的技术支持和灵活的计算资源。

如何在一台电脑安装多个nodejs版本,nvm工具安装

Sun, 09 Jul 2023 22:39:11 +0800

如何在一台电脑安装多个nodejs版本，实现动态切换nodejs版本。解决大家在开发过程中需要使用不同的nodejs环境时，需要卸载nodejs,再安装适用的nodejs的问题。用此方法即可快速切换nodejs，而无需再次安装。今天将教大家如何使用nvm工具，通过nvm工具实现快速切换nodejs版本，以及nvm常用的命令等！

什么是nvm工具：

nvm工具是一款可以实现在一台电脑安装nodejs软件多个版本的工具，通过终端命令即可快速切换node版本，而无需重新卸载安装

安装nvm工具：

windonws和MAC系统均可安装，以下包含命令均以windows为准

去githup里下载安装nvm-setup.zip（githup上有软件）

然后将软件解压出来下一步下一步傻瓜式操作安装即可

nvm -v win+r打开终端（其他终端也可以），用此命令可以查看版本号，能查看到版本号就是安装成功了

nvm查看已装版本的命令：

nvm ls

nvm命令安装nodejs版本：

nvm install 版本号

nvm设置默认版本：

nvm alias default 版本号

nvm切换版本：

如何切换已装的版本？

命令：

nvm use 版本号

VSCode编辑器代码片段的配置,快速生成vue代码片段

Sat, 08 Jul 2023 01:55:37 +0800

本文将教大家如何在vscode代码编辑器里配置代码片段，例如vue2代码片段，快速生成代码。例如log生成console.log()代码

如何配置代码片段：

打开vscode左下角“设置”，再点击“代码片段”

选择“新建全局代码片段”

在JSON格式的配置文件里配置即可

VUE2代码片段配置：

代码实现：

代码片段语法详解：

"print to console" 是代码片段这个对象的属性名（自定义的）

"prefix" 是代码片段适用的文件类型（我的示例是vue，意思是只在vue后缀文件可用）

"body" 是主体配置（具体配置）

"description" 是描述，代码中没有实际作用，主要用来给开发者看这个代码片段具体是什么

语法：

数组形式，每一行代码以双引号字符串的格式展示，以逗号分割

逗号分割就代表每个都是一行代码（逗号换行）

如果需要tab或者空格，则在双引号中间正常空格即可

需要空行则给空字符串

需要指定tab光标位置则用 $指示，$后面跟以0开头的顺序数字

生成的内容中有需要用引号包裹的字符串时，则可以使用单引号，或者使用/转义字符

大家有什么比较常用的代码片段可以评论在下方哦，也可以把自己的代码片段评论分享在下方哦！

搭配vue3的element-plus UI库修改组件样式详细教程

Sat, 08 Jul 2023 01:16:36 +0800

今天补发一个针对搭配vue3框架的ui库之一，element-plusUI框架组件样式修改的问题。将在本文教大家多种修改element-plus组件样式的方式，让大家彻底避免使用组件难，element-plus组件样式不好修改，组件样式达不到自己想要的样式细节要求时，可以有用以下方式对组件样式进行修改，以满足使用需求！

例如对以下表单元素的样式进行修改，我将总结并提供多种方法，如果大家有更多修改element-plus样式的办法，请评论在底部哦！

注意：此文章主要是针对 element-plus组件化开发时使用，其他ui框架可能有所区别！

用组件自带属性(api)修改element-plus样式：

例如表单组件的label-position属性可以控制表单域标签的位置，label-width属性可以控制标签的长度，size属性可以控制大小等

用element-plus组件自带的类名修改样式：

可以按f12打开开发者工具，查看对应标签上的类名

然后通过类名，修改其样式

用深度选择器修改element-plus组件样式：

深度选择器有两个 ::v-deep 和 :deep

推荐使用:deep

使用深度选择器时，CSS的选择器还是可以使用组件原来自带的选择器

具体deep深度选择器的用法见上图

自定义id或者class等CSS选择器：

可以直接在组件上写选择器名称（小提示：虚拟dom生成真实dom后的标签在一定情况下也可以直接或者间接使用哦，参考CSS的标签选择器使用方法）

提高权重：

!important设置无限大的权重，一般不建议使用，如果需要添加权重，可以采用加id选择器的方式，提高组件样式选择器的权重

例如：

用后代选择器配合ID选择器提权

element-plus自定义主题/配置全局样式：

可以通过配置element-plus主题、全局样式的方式操作

自定义主题链接：https://element-plus.gitee.io/zh-CN/guide/theming.html

配置全局样式链接：https://element-plus.gitee.io/zh-CN/component/config-provider.html

关闭scoped样式隔离：

迫不得已的情况下可以去掉scoped再重复上面的某个操作，建议是千万不要使用这种方式，否则容易出一些样式穿透的问题！

如果要使用这个方式，那么一定需要使用后代选择器，且最好使用scss语法做选择器嵌套

站长大大留言：大家有什么其他的方法记得留言哦，不违法的留言1-2天内审核通过！

vue3项目数据可视化,echarts图表从0到1

Wed, 05 Jul 2023 23:49:21 +0800

echarts怎么使用？数据可视化怎么做？本文是vue3框架搭配echarts搭建数据可视化图表！将给大家演示echarts的安装，和基本使用！图形会以柱状图和漏斗图为大家做个展示！

企业开发建议按需引入，因为按需引入的体积比较小，利于优化代码；

安装echarts库：

说明

企业开发建议按需引入，因为按需引入的体积比较小，利于优化代码；

以下演示，将直接全局引入了

echarts官网链接：

https://echarts.apache.org/zh/index.html

安装命令

npm install echarts --save
yarn add echarts --save
pnpm i echarts --save

全局引入

正常情况如果全局引入，应该在main.js里引入，按需引入则在需要的组件里引入，我这里为了演示方便，全局引入也在组件内引入了！

import * as echarts from "echarts"

echarts图表小demo：

演示图：

代码：

<template>
  <div class="chart-container">
    <div ref="chartRef" class="chart"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import * as echarts from "echarts"

    const chartRef = ref(null) // 创建一个ref引用来保存echarts容器

    onMounted(() => {
      const chartDom = chartRef.value
      console.log(chartDom)
      const myChart = echarts.init(chartDom) // 使用echarts初始化图表

      // 在此处设置echarts的配置项和数据
      const options = {
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      }

      myChart.setOption(options) // 将配置项应用到图表中
    })
</script>

<style>
.chart-container {
  width: 100%;
  height: 400px;
}

.chart {
  width: 100%;
  height: 100%;
}
</style>

说明

以上这个官方入门示例代码主要有以下注意点：

1、引入echarts文件

2、需要用一个ref获取页面节点

<div ref="chartRef" class="chart"></div>

const chartRef = ref(null) // 创建一个ref引用来保存echarts容器

名字需要对应，才能获取到节点，否则返回null

3、在onMounted生命周期里写图表逻辑，实现组件一加载即可看到图表

4、使用echarts初始化图表

      const myChart = echarts.init(chartDom) // 使用echarts初始化图表

5、在options对象里写图形的逻辑

6、应用图表到容器中

myChart.setOption(options) // 将配置项应用到图表中

echarts梯形图：

<template>
  <div class="echarts-box">
    <div id="myEcharts" :style="{ width: '420px', height: '360px' }"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts"
import { onMounted, onUnmounted } from "vue"
import { FunnelChart } from "echarts/charts"
import { CanvasRenderer } from "echarts/renderers"

echarts.use([FunnelChart, CanvasRenderer])

let myEcharts = echarts
onMounted(() => {
  initChart()
})
onUnmounted(() => {
  myEcharts.dispose
})
function initChart() {
  let chart = myEcharts.init(
    document.getElementById("myEcharts"),
    "purple-passion"
  )
  chart.setOption({
    series: [
      {
        type: "funnel",
        left: "10%",
        width: "50%",
        min: 40,
        max: 100,
        minSize: "50%",
        maxSize: "100%",
        data: [
          { value: 60, name: "Visit" },
          { value: 40, name: "Inquiry" },
          { value: 80, name: "Click" },
          { value: 100, name: "Show" },
        ],
      },
    ],
  })
  window.onresize = function () {
    chart.resize()
  }
}
</script>

硬核补充：

如果此图表有动态展示效果，例如点击某个按钮或者搜索或者筛选，视图可视化图表会更新。

这种业务需求的思路如下：

1、option里的数据可以做成响应式数据

2、将执行代码挂载option的封装到一个函数里，用调用函数的方式来调用

3、用侦听器watch监听数据的变化，当数据发生改变时，重新调用图表的挂载

javascript深浅拷贝的理解及手写递归深复制方法（常见面试题）

Tue, 04 Jul 2023 23:48:49 +0800

什么是深拷贝/深复制？什么是浅拷贝/浅复制？本文将针对深浅拷贝这道常见面试题呈现深浅拷贝的理解，以及深浅拷贝的方法归类。将呈现多种深浅拷贝的方法，包括手写递归深拷贝！

什么是浅拷贝：

浅拷贝（Shallow copy）顾名思义，就是浅层次的拷贝，有多浅呢？浅到只能拷贝一层。浅拷贝是指将某个对象拷贝/复制成一个新的对象，使新的对象具有和被拷贝的对象相同的属性、属性值和方法。但是这种拷贝只拷贝第一层，因为无论是对象还是数组，都能在里面再嵌套数组和对象，都能无限嵌套。而对象/数组都是属于引用数据类型，堆中存储的是引用地址，栈中才存储的是对应数据。

以上描述可能晦涩难懂，更简单的描述如下：

浅拷贝只拷贝对象或者数组的第一层数据，基本数据类型拷贝属性和属性值，引用数据类型拷贝引用地址

因为浅拷贝无法拷贝嵌套的数组或者对象，因此深拷贝应运而出，将由深拷贝解决这个问题！

下面是大C老师的回答：

浅拷贝的方法：

对象浅拷贝有两种常用的方法：

扩展运算符（展开运算符）

const originalObj = { name: "John", age: 25 };
const shallowCopyObj = { ...originalObj };

Object.assign()

const originalObj = { name: "John", age: 25 };
const shallowCopyObj = Object.assign({}, originalObj);

数组常用的浅拷贝方法：

扩展运算符（展开运算符）

const originalObj = { name: "John", age: 25 };
const shallowCopyObj = { ...originalObj };//和这对象的的浅拷贝方法一致

Array.from()方法

const originalArray = [1, 2, 3];
const shallowCopyArray = Array.from(originalArray);

Array.prototype.slice()方法

const originalArray = [1, 2, 3];
const shallowCopyArray = originalArray.slice();

Array.concat()方法

const newArray = array1.concat(array2, array3, ..., arrayN);

什么是深拷贝：

深拷贝（Deep copy）简单的说是将对象全部拷贝，如果有嵌套，则每层都拷贝，并非只拷贝地址，而是拷贝完整的数据，使两个对象之间无论嵌套了多少层对象，都不会互相干扰！

深拷贝：

在堆内存中开辟一个空间，创建一个新对象

递归的拷贝原对象的所有属性和方法，拷贝前后两个对象，相互不影响

下面是大C老师的原话：

深拷贝的方法：

一般来说，深拷贝有三种常用的方式：

1、手写递归深拷贝

这个将放到下面去详解，因为代码量比较多！

2、序列化搭配反序列化

这个就是使用JSON.stringify()和JSON.parse()方法，但是这样也会有一定的缺陷

缺陷：

①拷贝对象的属性值，如果是（function/undefined）/ symbol，这个键值对丢失

②如果深拷贝对象的属性值是RegExp，会变成空对象{}

③如果是NaN，Infinity，属性值会变成null

④如果拷贝日期对象，会变成日期字符串

3、第三方lodash插件库的深拷贝

// 引入js
<script src="./js/lodash.min.js"></script>

const obj = {
    name: 'zjl',
    age: 18,
    hobby:['dance','music'],
    book:{
        book_name:'宗波尘客',
        price:66
    }, 
    test0:function(){},
    test1:undefined,
    test2:Symbol('id'),
    test3:new RegExp(/abc/, 'i'),
    test4:NaN,
    test5:Infinity,
    test6:new Date()  
}
// 深拷贝  _是lodash的一个对象，里面有一个方法 cloneDeep()
const o = _.cloneDeep(obj)
console.log(o)

手写递归深拷贝详解：

将用有一定区别的几种手写递归深拷贝的方式用代码呈现给大家，大家根据自己最容易看懂的去理解，然后能手写出来即可！

代码1：

const obj = {
    name: 'zjl',
    age: 18,
    hobby:['dance','music'],
    book:{
        book_name:'Golang',
        price:66
    }
}

// 递归实现深拷
function deepClone(obj){
    // 1. 如果是基本数据类型，直接返回
    if (typeof obj !== 'object') return obj
    // 2. 判断传入的是数组还是对象，在内存中新创建数组/对象
    let newObj = Array.isArray(obj)? [] : {}

    // 给新创建的对象添加属性和值，遍历传入过来的那个对象的属性，一个一个添加到新对象上

    return newObj
}

const res = deepClone()
console.log(res)

代码2：

const obj = {
      name: 'zjl',
      age: 18,
      hobby:['dance','music'],
      book:{
          book_name:'Golang',
          price:66
      }
  }

// 深拷贝，在内存中开辟一个空间，创建一个新的对象， ===> 考虑数组和对象两种情况

// 递归实现深拷
function deepClone(obj){
  // 1. 如果是基本数据类型，直接返回
  if (typeof obj !== 'object') return obj
  // 2. 判断传入的是数组还是对象，在内存中新创建数组/对象
  let newObj = Array.isArray(obj) ? [] : {}

  // 给新创建的对象添加属性和值，遍历传入过来的那个对象的属性，一个一个添加到新对象上
  for(let key in obj){
      if (typeof obj[key] === 'object'){
          // 当key 取 hobby时， obj[key] 是 ['dance','music'] 把它传入到deepClone再拷贝
          newObj[key] = deepClone(obj[key])
      } else {
          newObj[key] = obj[key]
      }
  }
  return newObj
}

const res = deepClone(obj)
console.log(res)

res.hobby[0] = 'rapper'
console.log(obj)

代码3：

function deepCopy(obj) {
  if (typeof obj !== "object" || obj === null) {
    return obj; // 基本数据类型和 null 直接返回
  }

  var clone = Array.isArray(obj) ? [] : {};

  for (var key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      clone[key] = deepCopy(obj[key]); // 递归复制每个属性的值
    }
  }

  return clone;
}

// 示例对象
var originalObj = {
  name: "John",
  age: 25,
  hobbies: ["reading", "running"],
  address: {
    street: "123 Main St",
    city: "New York"
  }
};

// 深拷贝对象
var deepCopyObj = deepCopy(originalObj);

// 修改深拷贝对象的属性
deepCopyObj.name = "Jane";
deepCopyObj.hobbies.push("painting");
deepCopyObj.address.city = "Los Angeles";

console.log(originalObj.name); // 输出: "John"
console.log(originalObj.hobbies); // 输出: ["reading", "running"]
console.log(originalObj.address.city); // 输出: "New York"

代码4：

关于深浅拷贝提示：

这是一道常见面试题，一般面试官会询问什么是深浅拷贝，深浅拷贝的区别，以及可能会让你手写深浅拷贝。本文仅包含常用的深浅拷贝方法，如需要更多方法，可咨询大C老师哦！