随笔123

无双渐离

已于 2024-04-24 17:11:44 修改

阅读量344

点赞数 12

文章标签：前端 javascript 开发语言

于 2023-12-29 16:07:43 首次发布

本文链接：https://blog.csdn.net/m0_68930485/article/details/135293348

版权

lodash中isEmpty判断法

Lodash是一个JavaScript实用库，提供了很多方便的方法。其中可以使用isEmpty方法判断是否为空，这个方法适用于数组、类数组对象、对象和字符串。需要在项目中安装lodash库。

var _ = require('lodash'); //导入lodash库
function isNotEmpty(arr){
  return !_.isEmpty(arr);
}

js 替换 dom 点

var para = document.createElement("script");//直接创建dom
    para.setAttribute("src", "/kong.js")
    document.head.appendChild(para)

var targetElement = document.getElementsByTagName("script"); // 返回所有 script 元素的集合
    targetElement.setAttribute("src","/kong.js")//添加或修改属性

tip:kong.js要暴露在最外边 public 里要能访问到。

拉取 git 代码连接超时：

若使用翻墙代理： git config --global http.proxy "127.0.0.1:4780"

git config --global https.proxy "127.0.0.1:4780"

都设置一遍。4780 是代理的端口号

查看端口号：打开电脑 网络和Internet =》点击代理

查看 git 用户名和邮箱

$ git config --global user.name # 查看全局用户名
$ git config --global user.password # 查看全局密码

$ cat ~/.gitconfig # 查看所有git配置信息

$ cat ~/.git-credentials # 查看保存所有用户名和密码的凭据文件

git 创建仓库，拉取，提交

1.局域网创建仓库（可能需管理员给git账号添加权限）

2.empty 新建空文件夹（最好英文名）打开控制台并进入此文件夹下

3. git init （将当前目录初始化为 Git 仓库）

4.git clone http://192.168.11.45:3000/ddd/project（刚才建的仓库）

5.git add .(所有修改的文件)

6.git commit -"提交备注"

7.git pull（拉取最新代码处理冲突）

8.git push

npm和yarn

我觉得像同步和异步。npm 是串行的按照队列执行每个 package，而 yarn 并行的同步执行所有任务，性能得到了极大的提升。

为什么放弃npm而使用yarn_用yarn 还是npm-CSDN博客

页面自动读取

请注意，由于浏览器的安全策略，必须是用户主动触发文件选择操作，无法直接自动读取文件而不经过用户交互

html 页面引入json文件

在 HTML 页面中引入 JSON 文件通常是通过 JavaScript 动态加载的方式，因为 HTML 本身没有直接支持引入 JSON 文件的标签。以下是一种常见的动态加载 JSON 文件的方式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your HTML Page</title>
</head>
<body>
  <script>
    // 使用 Fetch API 或 XMLHttpRequest 动态加载 JSON 文件
    fetch('your-data.json')
      .then(response => response.json())
      .then(data => {
        console.log('JSON 数据:', data);

        // 在这里可以对读取到的 JSON 数据进行进一步处理
      })
      .catch(error => console.error('加载 JSON 文件失败:', error));
  </script>
  <!-- 页面内容 -->
</body>
</html>

将下载文件存到指定路径

在Web浏览器中，由于安全性的限制，JavaScript无法直接将文件保存到用户指定的本地路径。浏览器环境提供的 File API 通常只能在浏览器的下载文件夹中保存文件。

js 调用node本地进行移动文件操作

// moveFile.js

const fs = require('fs');
const path = require('path');

const moveFile = (sourceFilePath, destinationFolderPath, callback) => {
  const sourcePath = path.join(__dirname, sourceFilePath);
  const destinationPath = path.join(__dirname, destinationFolderPath, path.basename(sourceFilePath));

  fs.rename(sourcePath, destinationPath, (err) => {
    if (err) {
      callback(err, null);
    } else {
      callback(null, 'File moved successfully.');
    }
  });
};

// 从命令行参数中获取源文件路径和目标文件夹路径
const [,, sourceFilePath, destinationFolderPath] = process.argv;

// 调用移动文件函数
moveFile(sourceFilePath, destinationFolderPath, (err, result) => {
  if (err) {
    console.error('File move failed:', err);
  } else {
    console.log(result);
  }
});

然后，在你的 JavaScript 文件中，使用 child_process 模块调用这个 Node.js 脚本：

const { exec } = require('child_process');

const sourceFilePath = 'path/to/source/file.txt';
const destinationFolderPath = 'path/to/destination/';

// 构建执行的命令
const command = `node moveFile.js ${sourceFilePath} ${destinationFolderPath}`;

// 执行命令
exec(command, (error, stdout, stderr) => {
  if (error) {
    console.error(`Error: ${error.message}`);
    return;
  }
  if (stderr) {
    console.error(`Error: ${stderr}`);
    return;
  }
  console.log(`Result: ${stdout}`);
});

npm 无法安装依赖：报错：“ npm ERR! request to https://registry.npm.taobao.org/axios failed, reason: certificate has expired ”

关于这个问题，“ 证书失效！ ”

根据错误提示信息，是由于原淘宝npm镜像地址：“ https://registry.npm.taobao.org ” 的证书失效，

手动修改Dockerfile的构建指令，配置 registry 即可

将原：

RUN npm config set registry https://registry.npm.taobao.org
修改为：

RUN npm config set registry https://registry.npmmirror.com

axios 遇到一个奇葩问题

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./info.js"></script>
    <!-- <script src="./moveFile.js"></script> -->
    <script src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script type="text/javascript">
        const baseURL = 'http://localhost:3001'

        window.onload = function () {
            let dom = document.getElementById("myButton")
            if(dom) {
                dom.addEventListener("click",create)
            } else {
                alert("未找到指点按钮！")
            }
        }
        function create(){
            console.log("ss")
            console.log(axios)
            // let that = this
            // // 创建一个简单的文件
            // that.axios.get('/user?createData=123').then((response) => {
            //     console.log(response);
            // })
            // .catch(function (error) {
            //     console.log("爆粗");
            //     console.log(error);
            // });
        }
    </script>
</head>

老是报错:95 Uncaught ReferenceError: axios is not defined

结果是： <script src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script>收到他的影响，删点就好了。

axios get请求解析不了变量（自己失误）

ps：页面没放在框架里，单独的一个html，起个 nodejs 服务做后台，用来操作文件写入、移动。

axios中文文档

node.js中使用express处理文件上传的四种方案 - 知乎

Node.js创建一个Express服务的方法详解 - Python技术站

axios （get，post，put，delete），常用配置，全局配置，axios.create(config)配置一个新的axios_axios的put-CSDN博客

el-drawer 导致其他地方不能点击

<el-drawer :modal-append-to-body="true" :wrapperClosable="false" title="我是标题" :show-close=true :modal="false"
        :visible.sync="drawer" :size=300 :before-close="handleClose">
        <div>我来啦!</div>
      </el-drawer>

.el-drawer__wrapper {
  left: initial;//去掉左边 0 抽屉在右边 反之亦反
  top: 10%;
  bottom: 10%
}

.el-drawer__container {
  width: 300px//抽屉内容
}

<template>
  <div>
    <video ref="myVideo" width="320" height="240" controls>
      <source src="your_video.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
    <button @click="playVideo">Play</button>
    <button @click="pauseVideo">Pause</button>
    <button @click="restartVideo">Restart</button>
  </div>
</template>

<script>
export default {
  methods: {
    playVideo() {
      this.$refs.myVideo.play();
    },
    pauseVideo() {
      this.$refs.myVideo.pause();
    },
    restartVideo() {
      const video = this.$refs.myVideo;
      video.currentTime = 0;
      video.play();
    }
  }
}
</script>

在这个例子中：

该ref="myVideo"属性被添加到<video>元素中，允许我们使用获取对它的引用this.$refs.myVideo。
模板中添加了三个按钮，每个按钮在单击时调用一个方法（playVideo、pauseVideo和restartVideo）。
在方法内部，我们使用访问视频元素this.$refs.myVideo并调用适当的方法（play()、pause()）来控制视频播放。
该restartVideo方法将currentTime视频的属性设置为0（视频开始），然后播放视频。

确保替换"your_video.mp4"为视频文件的路径。此示例假设您有一个 MP4 格式的视频文件。根据需要调整路径和格式

<template>
  <div @mouseenter="handleMouseEnter" style="width: 200px; height: 200px; background-color: lightblue;">
    Hover over me
  </div>
</template>

<script>
export default {
  methods: {
    handleMouseEnter(event) {
      console.log('Mouse entered the element');
      // Add your desired actions here
    }
  }
}
</script>

在此示例中，我们有一个<div>元素，并且我们使用@mouseenter指令来侦听鼠标输入事件。当鼠标进入该元素时，该handleMouseEnter方法将被调用，您可以在该方法内执行您想要的任何操作。

您可以将该console.log()语句替换为鼠标进入元素时要执行的任何其他操作

繁体英文转化简体中文

// 引入 opencc-js
const OpenCC = require('opencc-js');

// 创建繁体中文到简体中文的转换器对象
const t2sConverter = OpenCC.Converter({ from: 't', to: 's' });

// 创建英文到简体中文的转换器对象
const en2zhConverter = OpenCC.Converter({ from: 'en', to: 'zh-Hans' });

// 要转换的文本（包括中文繁体、英文）
const textToConvert = "你好，這是繁體中文文本。Hello, how are you?";

// 执行转换：先繁体中文转简体中文，再英文转简体中文
const simplifiedTraditionalText = t2sConverter.convertSync(textToConvert);
const simplifiedEnglishText = en2zhConverter.convertSync(simplifiedTraditionalText);

// 输出转换结果
console.log("繁体中文和英文转换成简体中文：", simplifiedEnglishText);

fect请求接口

1.GET请求
fetch('https://api.example.com/data', {
  method: 'GET', // 请求方法，可以是GET、POST、PUT、DELETE等
  headers: {
    'Content-Type': 'application/json' // 请求的头部，根据接口要求设置
  }
})
.then(response => {
  if (response.ok) {
    return response.json(); // 如果响应成功，解析为JSON
  }
  throw new Error('Network response was not ok.'); // 如果响应不成功，抛出错误
})
.then(data => {
  console.log('Data received:', data); // 处理接收到的数据
})
.catch(error => {
  console.error('Fetch error:', error); // 处理错误情况
});
2.post
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' }) // 发送的数据
})
// 剩余代码同上...