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 # 查看全局密码
2.
$ cat ~/.gitconfig # 查看所有git配置信息
3.
$ 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 服务做后台,用来操作文件写入、移动。
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' }) // 发送的数据
})
// 剩余代码同上...