刘新修

uniapp创建项目脚手架的区别

[

2023/08/09 11:49 | by 刘新修 ]

vue-cli 构建 uniapp 项目：

优点：

vue-cli 是一个强大的工具，可以快速构建出各种类型的项目，配置灵活，便于维护和管理。同时，其支持 TypeScript 等最新技术，可以提高开发效率和代码质量。

vue-cli 集成了丰富的插件和模板，可以帮助您快速搭建 uniapp 项目，并提供了丰富的功能和组件。

vue-cli 社区活跃度高，得到广泛应用和支持，很多开发者都已经熟悉了 vue-cli 的使用和优化。

缺点：

基于 vue-cli 构建 uniapp 项目需要一定的前端开发经验和技能，对初学者来说可能会有些困难。

构建出来的项目大小比较大，需要考虑如何压缩和优化代码，以提升页面加载速度。

HBuilderX.exe 构建 uniapp 项目：

优点：

HBuilderX.exe 是一款专门为 uniapp 开发提供的开发工具，可以快速搭建 uniapp 项目，支持调试、运行等功能，适合初学者或没有前端开发经验的开发者使用。

HBuilderX.exe 集成了丰富的组件和模板，可以快速搭建出各种类型的 uniapp 项目，并且自带了一些 UI 组件，方便快速开发。

HBuilderX.exe 教程和文档详尽，易于上手，初学者可以快速掌握。

缺点：

HBuilderX.exe 对于更高级的定制和优化需要进行配置和扩展，需要一定的前端开发经验和技能。

在使用 HBuilderX.exe 构建 uniapp 项目时可能会有一些限制，例如只支持部分平台等问题，需要根据项目需求选择适合的构建方式。

创建uni-app项目（步骤流程）

方式一：直接在HBuilder X上创建（常用）

在窗口栏找到“文件”=>新建=>项目

会在HBuilder X会在右下角提示项目创建成功，成功之后的项目目录结构如下：

方式二：使用命令行（vue-cli）创建

vue create -p dcloudio/uni-preset-vue my-project

创建成功之后，运行即可。

cd my-project

npm run serve

项目目录结构：

Tags: uniapp

vue | 评论(0) | 引用(0) | 阅读(1513)

Vue实现倒计时组件(可自定义时间倒计时功能的组件)：

[

2023/07/27 14:12 | by 刘新修 ]

一、创建countDown.vue（倒计时组件）：

XML/HTML代码

<template>
<span :endTime="endTime" :endText="endText">
<slot>{{content}}</slot>
</span>
</template>
<script>
export default {
data(){
return {
content: '',
}
},
props:{//接收父组件的数据
endTime:{type:String,default:''},
endText:{type:String,default:'活动已结束'},
},
watch: {//监听时间的变化
endTime() {
this.countdowm(this.endTime)
}
},
mounted () {
this.countdowm(this.endTime)
},
methods: {
countdowm(timestamp){
let self = this;
let timer = setInterval(function(){
let nowTime = new Date();
let endTime = new Date(timestamp * 1000);
let t = endTime.getTime() - nowTime.getTime();
if(t>0){
let day = Math.floor(t/86400000);
let hour=Math.floor((t/3600000)%24);
let min=Math.floor((t/60000)%60);
let sec=Math.floor((t/1000)%60);
hourhour = hour < 10 ? "0" + hour : hour;
minmin = min < 10 ? "0" + min : min;
secsec = sec < 10 ? "0" + sec : sec;
let format = '';
if(day > 0){
format = `${day}天${hour}小时${min}分${sec}秒`;
}
if(day <= 0 && hour > 0 ){
format = `${hour}小时${min}分${sec}秒`;
}
if(day <= 0 && hour <= 0){
format =`${min}分${sec}秒`;
}
self.content = format;
}else{
clearInterval(timer);
selfself.content = self.endText;
}
},1000);
}
}
}
</script>

二、vue倒计时组件的使用方法（父组件里面）：

XML/HTML代码

<template>
<count-down :endTime="endTime" :endText="endText " />
</template>
<script>
import countDown from '@/components/countDown'//引入路径，可更改
export default {
data() {
return{
endTime:new Date("2022/04/18 08:00:20").getTime() / 1000 + ' ',
// console.log(endTime)=>得到毫秒 1658030420 可在方法里面放入后台数据,new Date('放后台数据').getTime() / 1000 + ' ',但要记得调用方法
endText:'',
}
},
components: {
countDown
},
}
</script>

说明一下：

XML/HTML代码

1）endTime是一个时间戳，而且是字符串数据类型，需要处理下
let endTime = new Date("2022/04/18 08:00:20").getTime() / 1000 + ' '
2）endText是倒计时结束显示的内容

三、vue倒计时组件效果如下：

vue | 评论(0) | 引用(0) | 阅读(1480)

Linux shell命令批量删除子目录下的文件，保留指定数量的最新文件

[

2023/07/26 16:26 | by 刘新修 ]

C#代码

#!/bin/bash
#保留文件数
ReservedNum=2
#要删除文件的，父级目录
FileDir=/usr/docker/springCloud/project/
#循环子目录列表
for element in `ls $FileDir`
do
# 拼接成完成目录（父目录路径/子目录名）
dir_or_file=$FileDir$element
# 获取子目录下的指定文件格式的总数量
FileNum=$(ls -l $dir_or_file | grep 'keda-' |wc -l)
# 输出删除前的指定格式的文件数量
echo $element "jar num:" $FileNum
# 如果数量大于保留数量，那就循环删除文件
while(( $FileNum > $ReservedNum))
do
OldFile=$(ls -rt $dir_or_file | grep 'keda-'| head -1)
echo $element "Delete jar:"$OldFile
rm -rf $dir_or_file/$OldFile
let "FileNum--"
done
done
# 删除完后，再循环输出一下每个子目录下的文件数量
for element in `ls $FileDir`
do
dir_or_file=$FileDir$element
FileNum=$(ls -l $dir_or_file | grep 'keda-' |wc -l)
echo $element "jar num:" $FileNum
done

Linux/Unix | 评论(0) | 引用(0) | 阅读(919)

纯前端让浏览器下载pdf文件

[

2023/07/18 10:20 | by 刘新修 ]

XML/HTML代码

<!--
* @Description: npage.vue
* @Version: 1.0
* @Author: LiuXia
* @Date: 2022-08-01 20:32:06
* @LastEditors: Jesse Liu
* @LastEditTime: 2023-07-17 20:38:42
-->
<template>
<div class="wscn-http404-container">
<h1 style="line-height:300px; text-align:center">npage.vue (新测试文件)</h1>
<div>time:</div>
</div>
</template>
<script>
import { parseTime } from '@/utils'
import { downloadFile } from "@/utils/getFile";
import { fileLinkToStreamDownload , urlFile } from '@/utils/down'
export default {
name: 'PageTest',
computed: {
message() {
return 'PageTest'
},
parseTime: parseTime
},
methods:{
downfile(filePath){
//https://bbwx.kaitaiming.com/image/group1/M00/24/AE/rBBlxWS0vaqAR8ltAAGsWlc-FnY677.pdf
// 后端上传文件返回请求的filePath地址
console.log( filePath, 3333333 );
// 获取文件名
let fileName = urlFile(filePath, 1);
// 获取文件后缀
let fileExtension = urlFile(filePath, 2);
// url下载
fileLinkToStreamDownload(filePath,fileName,fileExtension);
}
},
mounted() {
this.downfile('http://localhost:9527/image/group1/M00/24/AE/rBBlxWS0vaqAR8ltAAGsWlc-FnY677.pdf');
this.$store.dispatch("case/casesList/downloadFile",{}).then((res)=>{
let data = res.data;
let headers = res.headers;
/*** 调用下载文件 ***/
//downloadFile(data, headers)
})
},
}
</script>
<style lang="scss" scoped>
</style>

JavaScript代码

/*
* @Description: down.js
* @Author: Jesse Liu
* @Date: 2023-02-06 16:27:18
* @LastEditors: Jesse Liu
* @LastEditTime: 2023-07-17 20:20:05
*/
export function fileLinkToStreamDownload(url, fileName, type) {
let reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/;
if (!reg.test(url)) {
throw new Error("传入参数不合法,不是标准的文件链接");
} else {
let xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.setRequestHeader('Content-Type', `application/${type}`);
xhr.responseType = "blob";
xhr.onload = function () {
if (this.status == 200) {
//接受二进制文件流
console.log(this)
var blob = this.response;
const blobUrl = window.URL.createObjectURL(blob);
// 这里的文件名根据实际情况从响应头或者url里获取
const a = document.createElement('a');
a.href = blobUrl;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(blobUrl);
}
}
xhr.send();
}
}
// 获取url中需要的数据 type 1: 获取文件名 2：获取后缀 3：获取文件名+后缀 4:获取文件前缀
export function urlFile(url, type) {
let filename = url.substring(url.lastIndexOf('/') + 1)
switch (type){
case 1: return filename; break;
case 2: return filename.substring(filename.lastIndexOf(".") + 1); break;
case 3: return filename.substring(0, filename.lastIndexOf(".")); break;
case 4: return url.substring(0, url.lastIndexOf('/') + 1)
}
}

vue | 评论(0) | 引用(0) | 阅读(932)

SHELL命令记录

[

2023/06/03 11:43 | by 刘新修 ]

SHELL 获取目录

C#代码

### 提取目录中的名称
las_dir=$(basename "$PWD")
cur_dir=$(dirname $(pwd))
lat_dir=$(basename "$cur_dir")

Linux/Unix | 评论(0) | 引用(0) | 阅读(1286)

docker自动导入镜像

[

2023/06/03 11:40 | by 刘新修 ]

vi /sh/scp-docker.sh

#### 同步远程的docker镜像自动装载

C#代码

cd /data/backup &&
scp root@172.16.207.22:/data/backup/* ./ &&
docker stop nginx-nodejs-redis:v2b &&
docker rm nginx-nodejs-redis:v2b &&
docker stop jenkins-rsync:v2b &&
docker rm jenkins-rsync:v2b &&
docker rmi nginx-nodejs-redis:v2b &&
docker rmi jenkins-rsync:v2b &&
docker image load -i jenkins-rsync-v2b.tgz &&
docker image load -i nginx-nodejs-redis-v2b.tgz &&
rm -rf /data/apps &&
mkdir -p /data/apps/nginx/htdocs &&
mkdir -p /data/apps/redis/htdocs &&
mkdir -p /data/apps/rsync/www &&
mkdir -p /data/apps/nodejs/htdocs/nest/KTM/dist &&
mkdir -p /data/apps/nodejs/htdocs/nest/KTM/public &&
mkdir -p /data/apps/nodejs/htdocs/nest/do_nest/public/www &&
mkdir -p /data/apps/nodejs/htdocs/nest/other &&
docker run \
-u root \
-p 80:80 \
-p 8080:80 \
-p 3000:3000 \
-p 6379:6379 \
-v /data/apps/nginx/htdocs:/data/nginx/htdocs \
-v /data/apps/redis/htdocs:/data/redis/htdocs \
-v /data/apps/rsync:/data/rsync \
-v /data/apps/nodejs/htdocs/nest/KTM/dist:/data/nodejs/htdocs/nest/KTM/dist \
-v /data/apps/nodejs/htdocs/nest/KTM/public:/data/nodejs/htdocs/nest/KTM/public \
-v /data/apps/nodejs/htdocs/nest/do_nest/public/www:/data/nodejs/htdocs/nest/do_nest/public/www \
-v /data/apps/nodejs/htdocs/nest/other:/data/nodejs/htdocs/nest/other \
--privileged=true \
--name=nginx-nodejs-redis-v2b \
-d --restart=always nginx-nodejs-redis:v2b &&
docker run -p 4440:8080 -p 5000:5000 -p 8730:873 \
-u root \
--name=jenkins-rsync-v2b \
--privileged=true \
-v /etc/localtime:/etc/localtime \
-v /data/apps/jenkins_home:/data/jenkins \
-v /data/apps/rsync/www:/data/rsync/www \
-d --restart=always jenkins-rsync:v2b

### 重启定时器服务

chmod 755 /sh/scp-docker.sh

systemctl restart crond

### 编辑和查看定时器配置

crontab -e

crontab -l

### 每天的2:10重启smb

10 2 * * * /sh/scp-docker.sh

虚拟化 | 评论(0) | 引用(0) | 阅读(1282)

docker容器备份成镜像结合定时器自动执行

[

2023/06/03 11:34 | by 刘新修 ]

C#代码

### 把docker容器提交成新的镜像
cd /data/backup
### 备份Jenkins容器
docker commit -a "Jesse Liu" -m "v20230602" jenkins-rsync-v2 jenkins-rsync:v2b
docker save -o jenkins-rsync-v2b.tar jenkins-rsync:v2b
### 备份Nginx容器
docker commit -a "Jesse Liu" -m "v20230602" nginx-nodejs-redis-v2 nginx-nodejs-redis:v2b
docker save -o nginx-nodejs-redis-v2b.tar nginx-nodejs-redis:v2b
docker commit -a "Jesse Liu" -m "v20230602" jenkins-rsync-v2 jenkins-rsync:v2b
docker save -o jenkins-rsync-v2b.tar jenkins-rsync:v2b
docker commit -a "Jesse Liu" -m "v20230602" nginx-nodejs-redis-v2 nginx-nodejs-redis:v2b
docker save -o nginx-nodejs-redis-v2b.tar nginx-nodejs-redis:v2b
### SHELL脚本依次压缩导出tgz文件
cd /data/backup &&
rm -rf jenkins-rsync-v2b.tgz &&
rm -rf nginx-nodejs-redis-v2b.tgz &&
docker rmi jenkins-rsync:v2b &&
docker rmi nginx-nodejs-redis:v2b &&
docker commit -a "Jesse Liu" -m "v20230602" jenkins-rsync-v2 jenkins-rsync:v2b &&
docker image save jenkins-rsync:v2b > jenkins-rsync-v2b.tgz &&
docker commit -a "Jesse Liu" -m "v20230602" nginx-nodejs-redis-v2 nginx-nodejs-redis:v2b &&
docker image save nginx-nodejs-redis:v2b > nginx-nodejs-redis-v2b.tgz
### SHELL脚本依次解压导入docker镜像
docker image load -i jenkins-rsync-v2b.tgz
docker image load -i nginx-nodejs-redis-v2b.tgz
### 编辑和查看定时器配置
crontab -e
crontab -l
每星期六的晚上11 : 00 pm重启smb
0 23 * * 6 /etc/init.d/smb restart
每天的0:30重启smb
30 0 * * * /etc/init.d/smb restart
30 0 * * * root /sh/docker-backup.sh
一分钟执行一次
*/1 * * * * root /sh/test.sh
*/1 * * * * root /sh/test.sh
### 重启定时器服务
chmod 755 /sh/test.sh
chmod 755 /sh/docker-backup.sh
chmod 755 /sh/scp-docker.sh
systemctl restart crond

Linux/Unix | 评论(0) | 引用(0) | 阅读(1156)

SSH密钥登录

[

2023/06/03 11:30 | by 刘新修 ]

### 本地机器生成密钥

ssh-keygen -t rsa

[root@localhost ~]# ssh-keygen -t rsa

Generating public/private rsa key pair.

Enter file in which to save the key (/root/.ssh/id_rsa):

Created directory '/root/.ssh'.

Enter passphrase (empty for no passphrase):

Enter same passphrase again:

Your identification has been saved in /root/.ssh/id_rsa

Your public key has been saved in /root/.ssh/id_rsa.pub

The key fingerprint is:

SHA256:PeMmQH0e2HL+jxZjYJ6/8Hej+ANJ06gm+sUIhzCLNho root@localhost

The key's randomart image is:

+---[RSA 3072]----+

| |

| . o |

| o . + = o |

| . +.. Bo= . |

|E+ . o..SoOoo |

|o.. ooo+o*+ |

|. ..+o+ooo |

| . .o o++...|

| .. o==+..|

+----[SHA256]-----+

[root@localhost ~]#

进入主机A ~/.ssh/ 目录，会发现生成了一对密钥

Your identification has been saved in /home/test/.ssh/id_rsa.

Your public key has been saved in /home/test/.ssh/id_rsa.pub.

### A将公钥文件中的内容复制到 ==> 远程服务器端B

~/.ssh/id_rsa.pub

~/.ssh/authorized_keys

## 步骤如下

[root@localhost .ssh]# pwd

/root/.ssh

[root@localhost .ssh]# ll

total 12

-rw------- 1 root root 891 Jun 1 14:52 id_rsa

-rw-r--r-- 1 root root 228 Jun 1 14:52 id_rsa.pub

-rw-r--r-- 1 root root 172 Jun 1 22:28 known_hosts

[root@localhost .ssh]# vi /root/.ssh/authorized_keys

### 粘贴id_rsa.pub内的字符串到这个文件,对于OpenSSH来说，我们需要将公钥加入到~/.ssh/authorized_keys中。每个公钥一行，千万注意不要换行，否则可能不能正常工作。

### 修改文件权限

chmod 600 /root/.ssh/authorized_keys

### 修改/etc/ssh/sshd_config 文件

修改/etc/ssh/sshd_config 文件，将RSAAuthentication 和 PubkeyAuthentication 后面的值都改成yes

将PasswordAuthentication yes 修改成 PasswordAuthentication no

### 重启SSHD

/etc/init.d/sshd restart

Linux/Unix | 评论(0) | 引用(0) | 阅读(1060)

docker对已经启动的容器添加目录映射(挂载目录)

[

2023/06/03 11:27 | by 刘新修 ]

查看某个容器的详细信息

docker inspect 657f23bba0c6

进入默认容器的配置文件目录

C#代码

cd /var/lib/docker/containers/657f23bba0c6ddc002c0b2f57c23edd36be742f9777f5ed9b755538085c419b0

我们将要修改的文件就是config.v2.json和hostconfig.json

修改config.v2.json

调出冒号命令，输入如下（这里注意，shift+：），%!python -m json.tool

====================================

C#代码

"MountPoints": {
...,
"/data/rsync": {
"Destination": "/data/rsync",
"Driver": "",
"Name": "",
"Propagation": "rprivate",
"RW": true,
"SkipMountpointCreation": false,
"Source": "/data/apps/rsync",
"Spec": {
"Source": "/data/apps/rsync",
"Target": "/data/rsync",
"Type": "bind"
},
"Type": "bind"
}
}

修改hostconfig.json

调出冒号命令，输入如下（这里注意，shift+：），%!python -m json.tool

C#代码

"AutoRemove": false,
"Binds": [
"/data/apps/nginx/htdocs:/data/nginx/htdocs",
"/data/apps/redis/htdocs:/data/redis/htdocs",
"/data/apps/nodejs/htdocs/nest/other:/data/nodejs/htdocs/nest/other",
"/data/apps/nodejs/htdocs/nest/do_nest/public/www:/data/nodejs/htdocs/nest/do_nest/public/www",
"/data/apps/nodejs/htdocs/nest/KTM/dist:/data/nodejs/htdocs/nest/KTM/dist",
"/data/apps/nodejs/htdocs/nest/KTM/public:/data/nodejs/htdocs/nest/KTM/public",
"/data/apps/rsync:/data/rsync"
],

先关闭docker服务

C#代码

systemctl start docker
systemctl stop docker
systemctl stop docker.socket
systemctl enable docker.service

虚拟化 | 评论(0) | 引用(0) | 阅读(1026)

rsync 常用的同步命令

[

2023/06/03 11:12 | by 刘新修 ]

C++代码

### 由本地向服务器推送
rsync -avz --port=8730 dist.tar.gz liuxinxiu@127.0.0.1::test
rsync -avzP --port=8730 dist.tar.gz dynamicAssets.json jenkins@172.16.207.22::work-litigation
### 由服务器向本地下载
rsync -avz liuxinxiu@127.0.0.1::test /test/111
rsync -avz jenkins@172.16.207.22::work-litigation /var/www/html/mirrors/frontend/injured/work-litigation
### 创建软连接(前边是存储源——后边是软链接)
ln -s /data/apps/rsync/www/release /data/apps/nginx/htdocs/release

以下是具体是例子：

C#代码

### 由本地向服务器推送
cd /data/apps/nginx/htdocs/$projectPath/upload
rsync -avzP --port=8730 dist.tar.gz dynamicAssets.json jenkins@172.16.207.22::$las_dir
### 由本地向服务器推送
cd /data/apps/nginx/htdocs/$projectPath/upload
rsync -avzP --port=8730 dist.tar.gz dynamicAssets.json jenkins@172.16.207.22::release/$projectPath &&
cd /data/apps/rsync/www/release/$lat_dir &&
scp -r $pat_dir root@10.10.9.99:/var/www/html/mirrors/frontend/$pat_dir &&
curl http://10.10.9.99/frontend/$projectPath

Linux/Unix | 评论(0) | 引用(0) | 阅读(1180)

uniapp创建项目脚手架的区别

Vue实现倒计时组件(可自定义时间倒计时功能的组件)：

Linux shell命令批量删除子目录下的文件，保留指定数量的最新文件

纯前端让浏览器下载pdf文件

SHELL命令记录

docker自动导入镜像

docker容器备份成镜像结合定时器自动执行

SSH密钥登录

docker对已经启动的容器添加目录映射(挂载目录)

rsync 常用的同步命令

分类

个人简介

Follow me

搜索

最新日志

新浪微博

最新评论

链接

归档

日历

其他

< 2025 > < 7 >
日	一	二	三	四	五	六
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31