/api/article
卡了我好几个小时,终于发现,save按钮只是保存,在save按钮的旁边有一个publish的按钮~
/api/article
卡了我好几个小时,终于发现,save按钮只是保存,在save按钮的旁边有一个publish的按钮~
docker image prune -f
Usage: docker image prune [OPTIONS]
Remove unused images
Options:
-a, --all Remove all unused images, not just dangling ones
--filter filter Provide filter values (e.g. 'until=<timestamp>')
-f, --force Do not prompt for confirmation
//谨慎使用删除所有未使用的镜像,不仅仅是悬停的
docker image prune -a
//不提示确认信息
docker image prune -f
npm install prismjs
在nuxt.config.js文件中添加prism插件
export default {
plugins: [
'~/plugins/prism'
],
}
目录app/plugins/prism.js
import Prism from 'prismjs'
import 'prismjs/themes/prism-tomorrow.css' // 选择你喜欢的主题
export default Prism
在需要的页面,例如/pages/detail/_id.vue
export default {
...
mounted(){
Prism.highlightAll()
},
...
}
事情是这样的,公司论坛要改版的时候,发现一个问题.class:last-of-type不起作用,.class:last-child也不起作用,html就像下面这样:
<div class="list">
<div class="top">置顶帖子</div>
<div class="top">置顶帖子</div>
<div class="top">置顶帖子</div>
<div>普通帖子</div>
<div>普通帖子</div>
<div>普通帖子</div>
</div>
我是想在顶置的帖子的最后一个想加下边框,css如下
.top:last-of-type{
border-bottom:1px solid #000;
}
结果这样是没效果的,网上一顿搜索终于找到了原因, 原因:伪类不支持class只支持html标签元素
改变html结构,使用html标签元素span:last-of-type
<div class="list">
<span>置顶帖子</span>
<span>置顶帖子</span>
<span>置顶帖子</span>
<div>普通帖子</div>
<div>普通帖子</div>
<div>普通帖子</div>
</div>
span{display:block;}
span:last-of-type{
border-bottom:1px solid #000;
}
js解决办法,给最后一个.top元素添加额外的类,给这个类添加想要的样式
$('.top').last().addClass('last');
.last{
border-bottom: 1px solid #000;
}
// ✅ Updating properties in multiple objects
const arr1 = [
{id: 1, name: 'Alice'},
{id: 1, name: 'Bob'},
{id: 3, name: 'Charlie'},
];
const newArr = arr1.map(obj => {
if (obj.id === 1) {
return {...obj, name: 'Alfred'};
}
return obj;
});
// 👇️ [
// {id: 1, name: 'Alfred'}, {id: 1, name: 'Alfred'}, {id: 3, name: 'Charlie}
// ]
console.log(newArr);
一,首先确定本地的mysql数据库可以正常使用
mysql -uroot -p
然后输入数据库密码能正常使用mysql
二,docker命令如下
docker run --rm --name myadmin -it -e PMA_HOST=host.docker.internal -e PMA_PORT=3306 -p 8282:80 phpmyadmin/phpmyadmin
‘–rm’ 表示如果一次性项目
‘–name myadmin’ 给容器以一个名字叫myadmin
‘-it’ 表示进入终端交互模式
‘-e PMA_HOST=host.docker.internal’ 传入环境参数地址
‘-e PMA_PORT=3306’ 传入环境参数端口
‘-p 8282:80’ 容器的80端口映射到本地的8282端口
三,本地浏览器输入localhost:8282打开项目,使用mysql的账号和密码就能登陆。
http://localhost:8282
一,创建文件夹,并进入文件夹
mkdir my-nginx && cd my-nginx
二,docker使用nginx镜像创建一个名叫tmp-nginx-container的nginx的容器
docker run --name tmp-nginx-container -d nginx
三,从容器里面复制nginx配置文件到本地
docker cp tmp-nginx-container:/etc/nginx/nginx.conf ./nginx.conf
四,这个时候ls就能查看到本地的nginx.conf 文件
$ ls
$ nginx.conf
官方的vue构建基于vite
1,创建vue项目
npm init vue@latest
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formating? … No / Yes
Scaffolding project in ./<your-project-name>...
Done.
2,进入项目,安装依赖包,启动项目
cd <your-project-name>
npm install
npm run dev
然后你就可以愉快的开发了,假设开发完成,咱们就要部署项目到服务器,本文用docker部署。
1,构建项目的静态文件
npm run build
在项目根目录会生成dist文件夹,这就是项目的静态资源。
2,文件根目录编写Dockerfile
FROM nginx
COPY ./dist /usr/share/nginx/html
3, 创建名叫vue-nginx的镜像,版本号1.0.0,注意最后的那个点,表示当前目录
docker build -t vue-nginx:1.0.0 .
4,查看本地的镜像
docker images
下面就是我们创建好的镜像
REPOSITORY TAG IMAGE ID CREATED
vue-nginx 1.0.0 6358a9a572cf 5 minutes ago
5, 使用镜像创建容器
docker run -d --name vue-nginx -p 80:80 vue-nginx:1.0.0
这时候在浏览器查看 http://localhost 就能看到我们的项目了
6,查看容器 docker ps,我们能查看到一个名叫 vue-nginx的容器
docker ps
1,如果本地开发的时候我们有跨域请求,在vite.config.js可以设置proxy
import { fileURLToPath, URL } from "url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
server: {
proxy: {
// string shorthand
// "/api": "http://120.26.91.125",
"/api": {
target: "http://xxx.xxx.com",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
});
这样我们本地开发,跨域使用代理可以解决,但是我们
npm run build
之后生成的静态项目,因为vite只支持本地开发,跨域不起作用了
2,设置nginx的配置文件,在项目根目录下创建名为default.conf的文件
server {
listen 80;
listen [::]:80;
server_name localhost;
#access_log /var/log/nginx/host.access.log main;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
location /api/sts {
proxy_pass http://120.26.91.125/sts;
}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
重点修改proxy_pass这里,根据自己项目的实际情况修改好跨域请求
3,上面修改好之后,我们修改Dockerfile这个文件
FROM nginx
WORKDIR /usr/share/nginx/html
COPY ./dist .
COPY default.conf /etc/nginx/conf.d/default.conf
上面我们增加了最后一句,意思是把default.conf的nginx配置文件复制到容器里想对应的目录
4,然后我们就可以docker创建新的镜像,注意后面的版本号和上次不同,使用1.0.1 ,还有注意最后那个点,表示的当前目录
docker build -t vue-nginx:1.0.1 .
5,docker images 可以查看到我们创建的新镜像vue-nginx:1.0.1
6,使用新镜像创建容器
docker run -d -p 80:80 vue-nginx:1.0.1
这个时候就可以在浏览器打开http://localhost查看我们的项目
7,如果创建失败,看看是不是80端口被占用,如果有容器占用了80端口,使用下面命令可以删除
docker rm -f [容器id]
k8s.gcr.io
registry.aliyuncs.com/google_containers
例如
kubectl create \
deployment kubernetes-bootcamp \
--image=k8s.gcr.io/google-samples/kubernetes-bootcamp:v1
转变成
kubectl create \
deployment kubernetes-bootcamp \
--image=registry.aliyuncs.com/google_containers/google-samples/kubernetes-bootcamp:v1
一,全局安装npm-check-updates
npm install npm-check-updates
安装完成后使用命令ncu
二,免安装
npx npm-check-updates
三,使用方法
进入项目目录 输入ncu命令后,命令行会返回项目中package的版本列表 如下
ncu
[====================] 16/16 100%
@nuxtjs/auth-next 5.0.0-1648802546.c9880dc → 5.0.0-1667386184.dfbbb54
@nuxtjs/color-mode 2.1.1 → 3.1.8
@tailwindcss/typography ^0.5.7 → ^0.5.8
autoprefixer ^10.4.2 → ^10.4.13
core-js ^3.15.1 → ^3.26.1
dayjs ^1.10.8 → ^1.11.6
nuxt ^2.15.7 → ^2.15.8
postcss ^8.4.7 → ^8.4.19
prismjs ^1.28.0 → ^1.29.0
tailwindcss ^3.0.23 → ^3.2.4
Run ncu -u to upgrade package.json
四,升级
输入ncu -u来升级包
ncu -u