nuxt封装日历倒计时剩余时间

<template >
<div v-if="show">
    <div class="flex">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
        </svg>
        <span>倒计时:{{ `${d || 0}天${h || 0}小时${m || 0}分${s || 0}秒` }}</span>
    </div>
</div>
</template>
<script>
export default {
  props: {
      endTime: {
          type: String,
          default: ''
      },
  },
  data() {
      return {
          d: '',
          h: '',
          m: '',
          s: '',
          timer: null,
          show:false
      }
  },
  mounted() {
      clearTimeout(this.timer);
      this.countTime();
  },
  beforeDestroy() {
      clearTimeout(this.timer);
  },
  methods: {
      countTime: function () {
          //获取当前时间
          let date = new Date()
          let now = date.getTime()

          //设置截止时间
          let endDate = new Date(this.endTime);
          let end = endDate.getTime()

          //时间差
          let leftTime = end - now;

          //定义变量 d,h,m,s保存倒计时的时间
          if (leftTime >= 0) {
              this.d = Math.floor(leftTime / 1000 / 60 / 60 / 24)//天数我没用到,暂且写上
              this.h = Math.floor((leftTime / 1000 / 60 / 60) % 24)
              this.m = Math.floor((leftTime / 1000 / 60) % 60)
              this.s = Math.floor((leftTime / 1000) % 60)
              //递归每秒调用countTime方法,显示动态时间效果
              this.timer = setTimeout(this.countTime, 1000)
              this.show=true
          }
      },
  },
}

</script>

以上内容存保存到到项目下的组件目录components/DateDown.vue

在需要的地方调用即可

<YDateDown :endTime=”netpc.com.cn” />

开始用setInterval实现发现会提示无法在客户端执行该函数,网上找到用回调setTimeout方式可行。

发表在 服务器 | 标签为 | 留下评论

laravel8控制器构造函数和中间件的执行顺序

做一个多语言版本的网页使用一个多语言判断的中间件\App\Http\Middleware\Language::class
结果死活在控制器构造函数中跑不出结果,laravel加载执行生命周期,决定了是先跑了构造函数后才会跑中间件里的代码,无论你是写路由中间件组middlewareGroups ,还是写在路由配置里
Route::group([‘middleware’ => [‘Language’]], function () { // });
都得不到正确的加载语言包的结果,最后发现有两个解决方法,

1、全局注册中间件,在/app/Http/Kernel.php的$middleware中配置可以先执行中间件再跑控制器构造函数中的代码,但等于所有的地方都会用到该中间件了。

2、把依赖逻辑写在构造函数中使用中间件回调中可以解决。

    public function __construct()
    {
        // $this->middleware('Language');// 想先执行这样也不行
        $this->middleware(function ($request, $next) {
 
            echo __('netpc.com.cn');

            return $next($request);  //...add

        });
    }
发表在 服务器 | 标签为 | 留下评论

nuxt3编译nginx反向代理部署

最近有个nuxt3项目需要部署,顺利的话其实也简单,这里简单说说:

首先编译yarn bulid,生成.output和.nuxt
使用pm2 start跑起项目,默认会去调用命令目录下的ecosystem.config.js,里面有启动的配置参数,nginx配置只要以下简单内容可以了,先用ip直接访问试试看后再用代理方式。

server {
  listen 80;
  server_name dev.netpc.com.cn;
  access_log off;
  location / {  
   proxy_pass http://localhost:3001;
   index index.html index.htm;
  }
}

这里遇到问题

1、修改了.ts文件发现yarn bulid重新生产一直有缓存
执行yarn nuxi cleanup清空缓存再编译
2、nginx配置不要除了反向代理的location /还有别的
例如处理jpg png 或js的,

   location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico)$ {
    expires 30d;
    access_log off;
  }
  location ~ .*\.(js|css)?$ {
    expires 7d;
    access_log off;
  }

上面内容会导致反向代理后出现404

发表在 服务器 | 标签为 | 留下评论

解决PHP和Java的sort排序一致

php排序sort($tmpArr, SORT_STRING)方式就会和java的Arrays.sort()结果一致了。

在把一段Java代码转php的时候发现使用默认sort这个函数会出行排序不一致情况,经查询需要修改第二个参数为字符串。
php默认的排序参数信息

sort(array &$array, int $flags = SORT_REGULAR): true
可选的第二个参数 flags 可以用以下值改变排序的行为:
排序类型标记:
SORT_REGULAR – 正常比较单元 详细描述参见 比较运算符 章节
SORT_NUMERIC – 单元被作为数字来比较
SORT_STRING – 单元被作为字符串来比较
SORT_LOCALE_STRING – 根据当前的区域(locale)设置来把单元当作字符串比较,可以用 setlocale() 来改变。
SORT_NATURAL – 和 natsort() 类似对每个单元以“自然的顺序”对字符串进行排序。
SORT_FLAG_CASE – 能够与 SORT_STRING 或 SORT_NATURAL 合并(OR 位运算),不区分大小写排序字符串。

SORT_STRING 排序方式的底层实现是 C 语言的 memcmp,它对两个字符串从前往后,按照逐个字节比较,一旦字节有差异,就终止并比较出大小。

而 SORT_REGULAR 会智能判断需排序对象的类型,如果两个字符串都是“纯数字”形式的字符串,会以比较整个字符串所代表的十进制整数、浮点数大小的形式进行排序。如果两个字符串不是“纯数字“形式的,才会和 SORT_STRING 一样。

因此,如果需要以字符串 strcmp 方式逐个字节从前往后比较来进行排序,在调用 php 的 sort 类函数的时候请务必使用 SORT_STRING 这个 flag,否则如果两个字符串都是”纯数字“形式的,就会按照它们所代表的数字大小进行排序。

发表在 服务器 | 标签为 , | 留下评论

spring tool suite4解决application.properties配置文件内中文乱码

解决方法如下图修改Spring Tool Suite4 的配置,将 application.properties 的格式从原来的ISO-8859-1改为 UTF-8即可,记得应用保存。

application.properties

发表在 服务器 | 标签为 | 留下评论

阻止A标签链接事件冒泡

找到了就很简单了
onclick=”window.event.cancelBubble=true”
onclick=”event.stopPropagation();”

(1)stopPropagation符合W3C标准,适用于谷歌、火狐等浏览器,不支持IE
(2)cancelBubble方法不符合W3C标准,说是IE的,但是我谷歌上也可以用。

发表在 服务器 | 标签为 | 留下评论

Android studio Cannot fit requested classes in a single dex file (# methods: 77504 > 65536)

Flutter kotlin编译错误

Execution failed for task ‘:app:mergeDexDebug’.
> A failure occurred while executing com.android.build.gradle.internal.tasks.DexMergingTaskDelegate
> There was a failure while executing work items
> A failure occurred while executing com.android.build.gradle.internal.tasks.DexMergingWorkAction
> com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives:
The number of method references in a .dex file cannot exceed 64K.
Learn how to resolve this issue at https://developer.android.com/tools/building/multidex.html

* Try:
> Run with –stacktrace option to get the stack trace.
> Run with –info or –debug option to get more log output.
> Run with –scan to get full insights.

解决方法如下:

应用内级别build.gradle添加:

android {
    defaultConfig {
        ...
        multiDexEnabled true
    }
}

dependencies {
  implementation 'com.android.support:multidex:1.0.3'
}
发表在 服务器 | 标签为 , | 留下评论

使用Dockerfile创建自己的单一LNMP镜像

突然想到回顾docker创建自己常用镜像,做个记录。
环境为windows11、docker desktop,复制以下内容保存成对应文件

1.Dockerfile.ubuntu

# 指定基础镜像
FROM ubuntu
# 镜像维护者作者
MAINTAINER Netpc.com.cn-ken

# 环境变量
ENV MYPATH /usr/local
# 工作路径,容器创建后,终端默认进入的工作目录,或者理解为落脚点
WORKDIR $MYPATH

# 构成镜像时,执行的命令
# 从Dockerfile到images的过程中会执行的命令

# 备份原镜像软件源
RUN mv /etc/apt/sources.list /etc/apt/sources.list.bak
# 更改镜像为阿里镜像源
RUN echo "deb http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse" >> /etc/apt/sources.list
RUN echo "deb http://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse" >> /etc/apt/sources.list
RUN echo "deb http://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse" >> /etc/apt/sources.list
RUN echo "deb http://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse" >> /etc/apt/sources.list
RUN echo "deb http://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiverse" >> /etc/apt/sources.list

RUN apt-get update
RUN apt-get install -y vim
RUN apt-get install -y net-tools
RUN apt-get install -y iputils-ping
RUN apt-get install -y php7.4 php7.4-fpm php7.4-gd php7.4-mbstring php7.4-pdo php7.4-curl php7.4-mysql php7.4-mysqli php7.4-json php7.4-mbstring php7.4-xml
RUN apt-get install -y nginx
RUN apt-get install -y mysql-server mysql-client
RUN usermod -d /var/lib/mysql/ mysql

# 暴露端口
EXPOSE 80
EXPOSE 443
EXPOSE 3306

# 将宿主机的文件复制到镜像中
ADD mysql.sh /mysql.sh
RUN chmod 777 /mysql.sh && /mysql.sh
RUN rm -rf /mysql.sh

# 将脚本复制到容器中
ADD a.php /var/www/html/
ADD start.sh /usr/local/bin/
ADD default /etc/nginx/sites-available/default

# 设置脚本可执行权限
RUN chmod +x /usr/local/bin/start.sh

# 在容器启动时执行脚本
CMD ["/usr/local/bin/start.sh"]

2.mysql.sh #启动mysql,修改默认账号信息

#!/bin/sh
service mysql start
mysql -uroot -e "use mysql;update user set Host='%' where User='root';flush privileges;ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY 'root';flush privileges;"
echo 'bind-address = 0.0.0.0' >> /etc/mysql/mysql.conf.d/mysqld.cnf

3.default #为了替换原有的启动php

server {
	listen 80 default_server;
	listen [::]:80 default_server;

	root /var/www/html;

	# Add index.php to the list if you are using PHP
	index index.html index.htm index.nginx-debian.html;

	server_name _;

	location / {
		# First attempt to serve request as file, then
		# as directory, then fall back to displaying a 404.
		try_files $uri $uri/ =404;
	}

	# pass PHP scripts to FastCGI server
	#
	location ~ \.php$ {
		include snippets/fastcgi-php.conf;
		fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
	}

}

4.start.sh

#!/bin/sh
service php7.4-fpm start
service mysql start
nginx -g "daemon off;" #不这样可能容器运行后会自动关闭

5.生成镜像命令:docker build -f Dockerfile.ubuntu -t ‘ubuntu-netpc’ .

6.docker run 映射到对应/var/www/html目录,就能把php放进去运行,映射端口3306就能直接访问容器内的mysql了。

上图

创建自己的docker镜像lnmp 创建自己的docker镜像lnmp2 创建自己的docker镜像lnmp1

发表在 服务器 | 标签为 , | 留下评论

windows11在docker上部署LNMP环境

1.我已经在windows11安装好docker desktop了,还没的要先安装。
根据官方教程下载安装docker desktop执行文件.exe,可以参考文章

2.终端直接运行以下命令:

2.1创建mysql
docker run -d -p 3307:3306 –name mysql5.7.23 –privileged=true -v D:\docker\mysql-5.7.23\conf.d:/etc/mysql/conf.d -v D:\docker\mysql-5.7.23\logs:/var/log/mysql -v D:\docker\mysql-5.7.23\data:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=root -d mysql:5.7.23

2.2创建php
docker run -p 9003:9000 –name php7.4 -v D:\docker\nginx-1.21.5\html:/usr/share/nginx/html –link mysql5.7.23:docker-mysql -d php:7.4-fpm

2.3创建nginx
docker run –name nginx1.21.5new -p 8080:80 -p 8081-8089:8081-8089-v D:\docker\nginx-1.21.5\html:/usr/share/nginx/html:ro -v D:\docker\nginx-1.21.5\conf:/etc/nginx:ro –link php7.4:localhost -d nginx

说明:

  • -p 8080:80: 端口映射,把 nginx 中的 80 映射到本地的 8080端口。
  • D:\docker\nginx-1.21.5\html: 是本地 html 文件的存储目录,/usr/share/nginx/html 是容器内 html 文件的存储目录。
  • D:\docker\nginx-1.21.5\conf: 是本地 nginx 配置文件的存储目录,/etc/nginx是容器内 nginx 配置文件的存储目录,这里我把整个nginx目录都映射下来,方便修改。
  • –link php7.4:localhost: 把 php7.4 的网络并入 nginx容器,nginx 可以直接通过localhost:9000 访问 php-fpm。
  • –link mysql5.7.23:docker-mysql 把mysql容器的荒落并入php容器,可以直接通过docker-mysql别名调用3306 端口访问mysql

3.nginx配置文件D:\docker\nginx-1.21.5\conf\conf.d\default.conf

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

	root   /usr/share/nginx/html;
	index  index.html index.htm index.php;

	location / {
        try_files $uri $uri/ /index.php$is_args$args;
		autoindex on;
    }
	
    location ~ \.php$ {
        add_header X-debug-message "A php file was used $document_root" always;
	fastcgi_index  index.php;
	fastcgi_split_path_info  ^((?U).+\.php)(/?.+)$;
	fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
	fastcgi_param  PATH_INFO  $fastcgi_path_info;
	fastcgi_param  PATH_TRANSLATED  $document_root$fastcgi_path_info;
	include        fastcgi_params;
	fastcgi_pass   localhost:9000;
    }
}

说明:

3.1localhost:9000 表示 php-fpm 服务的访问路径, 已经通过link参数绑定了容器网络互通。

3.2/usr/share/nginx/html是nginx和php经docker映射变成本地路径D:\docker\nginx-1.21.5\html,都放一起就可以直接通过设置root参数,使用$document_root来指定SCRIPT_FILENAME的php文件路径,不然一不小心就找不到php文件出现404

4.最后都跑起来,放个phpmyadmin记得修改config.inc.php参数为上面起的别名,在容器内直接能访问到。

$cfg[‘Servers’][$i][‘host’] = ‘docker-mysql’;
docker里应该不能用locaohost,不然提示会mysqli_real_connect(): (HY000/2002): No such file or directory,用本地系统会去找mysql.stock,php容器里又不和MySQL一起,所以。。。

5.调试容器内通讯缺少工具的时候就执行下面几个常用命令安装下

apt update
apt install net-tools // 查看ip
apt install telnet //验证端口
apt install iputils-ping //ping

发表在 服务器 | 标签为 | 留下评论

linux或windows上的修改原docker容器挂载盘文件映射端口等

在windows或linux下不重新创建新的容器,直接修改原docker容器挂载盘或文件,IP映射端口等信息。

过程都是一样,停止docker服务,修改配置文件,启动docker。

windows下修改docker配置
运行环境windwos11、wsl2、ubuntu、Docker Desktop
1、确保服务里停掉docker容器和docker服务进程

windows下停止docker服务2.在文件资源管理器里找到\\wsl.localhost\docker-desktop-data\data\docker\containers文件夹,对应着你实际容器的ID进入,找到config.v2.json和hostconfig.json,看名字就知道是josn格式了,内容很简单,先备份再修改,然后保存。
window下修改docker容器配置 3.重新启动Docker Desktop即可。

linux下修改docker配置

和windows一样,先停止docker服务,接着在/var/lib/docker/containers/路径下找到对应容器ID目录进入,修改config.v2.json和hostconfig.json,保存,重启docker服务。

发表在 服务器 | 标签为 | 留下评论